How I Built My Portfolio

Published: October 29, 2025 (continually improved since)

Step 1: Clarifying the purpose

Before writing a single line of code, I defined what this portfolio needed to do: clearly present my operations leadership and IT experience, highlight certifications and technical skills, and make it effortless for recruiters to contact me or download my resume. Having that focus early on kept every design decision intentional instead of random.

Step 2: Choosing tools and workflow

I built the site with a straightforward stack: HTML, CSS, and a bit of JavaScript, edited in Visual Studio Code. Git handled version control, GitHub hosted the code, and GitHub Pages now serves the live site. This setup keeps costs low, performance high, and deployments as simple as git push.

Step 3: Structuring pages and assets

A clean structure makes updates much easier. I created separate pages for the homepage, projects, skills, experience, and blog, with shared navigation across all of them. Images and documents, like my resume and profile pictures, live in an assets/ folder so paths stay consistent and easy to manage.

Step 4: Designing the homepage hero

The hero section introduces who I am in a single glance: name, headline, contact info, and clear calls to action such as “Download Resume” and “Contact Me.” A gradient header, centered layout, and profile image help the page feel modern without relying on heavy frameworks.

Step 5: Breaking content into focused pages

Instead of cramming everything onto one long page, I split content into logical sections:

This layout makes it easier for recruiters to jump straight to what they care about most.

Step 6: Building the projects page with GitHub data

The projects page does two things: it features this case study at the top and then loads my repositories from GitHub using their public API. Cards show the project name, description, language, and a quick link to view the repo. Sorting options, like “Recently Updated,” help surface the most relevant work.

Step 7: Contact options that fit how people actually reach out

Instead of a heavy backend, I kept contact simple and flexible. Visitors can email me directly with a mailto link, fill out a small form that opens their email client with details pre-filled, or message me on LinkedIn. This approach keeps my API keys and infrastructure minimal while still giving recruiters multiple ways to connect.

Step 8: The “Ask Me Anything” experiment

On the Netlify deployment of this site, I added an experimental “Ask Me Anything” widget powered by a serverless function and the Perplexity API. The function sits behind the scenes, safely handling the API key and returning answers. Because GitHub Pages is purely static hosting and doesn’t support serverless functions, that feature is intentionally disabled on the GitHub Pages version to avoid exposing sensitive keys.

Step 9: Adding light/dark mode with a dynamic logo

To make the site more comfortable to use, especially in low-light environments, I added a light/dark mode toggle. When you click it, the background, text colors, and even the logo switch to match the selected theme. A small JavaScript snippet handles the toggle and saves the preference in localStorage, so the site remembers your choice next time you visit.

Step 10: Iterating, debugging, and polishing

Why the "Ask Me Anything" feature is experimental

This portfolio isn’t a one-time project—it’s a living representation of my skills. As I learn new tools, ship new projects, and earn new certifications, the site evolves with me.


← Back to Portfolio