I built this portfolio website to be more than a static resume page. My goal was to create a place where I could show my experience, projects, technical direction, and writing in a way that feels organized, personal, and easy to navigate.

What I worked on

• Designed the homepage structure around a clear portfolio flow
• Added sections for technical direction, experience, projects, education, skills, blog posts, and resume access
• Built a dark theme using reusable CSS variables
• Added light mode by changing theme variables through a data-theme attribute
• Created a compact header with navigation, resume access, and a theme toggle
• Structured project data so projects can be updated without rewriting the page

Problem / context

A resume is useful for quick scanning, but it does not fully show how I think through technical problems, organize information, or connect my interests across software engineering, cloud infrastructure, systems, and cybersecurity.

I wanted the site to act as a resume companion: something that could quickly answer who I am, what I have worked on, what I am building toward, and where to find my projects and writing.

Approach

I organized the homepage from broad to specific:

Hero
Technical Direction
Experience
Projects
Education
Skills
Blog
Resume

The top of the page introduces who I am as an engineer, then the later sections provide evidence through experience, projects, education, and skills.

For styling, I used CSS variables so the design system would stay consistent across sections and be easier to extend later. This also made light mode simpler, because the site could reuse the same variable names while changing their values based on the active theme.

For projects, I used structured data so each project can include a title, status, and description. This makes it easier to add completed, in-progress, and planned projects over time.

What I learned

• A portfolio works better when it tells a clear story instead of only listing sections.
• Each homepage section should have a distinct purpose.
• Technical direction helps explain not only what I have done, but what I am actively building toward.
• CSS variables make theme changes much easier to manage.
• Small interaction details, like a theme toggle and animated name effect, can make the site feel more polished without distracting from the content.
• Project entries are stronger when they include context, status, and technical focus.

Next steps

• Expand the blog with systems, cloud, and security posts! :-)
• Implement a tagging / filtering feature for types of blog posts
• Update favicon