Building a Dual-Personality Portfolio

Most developer portfolios fall into one of two categories: sterile professional pages that list skills and projects, or personal blogs that bury technical competence under lifestyle content. I wanted neither. Instead, I set out to build a single application that presents two distinct experiences—a professional portfolio and a personal space—unified under one roof.

The goal was simplicity. Visitors should immediately find what they're looking for without wading through walls of text. A recruiter lands on the professional side and sees skills, experience, and projects. Someone curious about the human behind the code explores adventures, photography, and personal interests. Same application, different journeys.

The foundation of this portfolio rests on a single architectural decision: route groups.

Next.js App Router enables organizing routes into logical groups without affecting the URL structure. This means the professional portfolio lives at the root path while personal content lives under its own path—yet both share core infrastructure like layouts, components, and utilities.

The portfolio supports three distinct visual modes: professional light, professional dark, and an adventure theme for personal content. Rather than reaching for a CSS-in-JS library or Tailwind's built-in dark mode, I implemented theming through CSS custom properties.

Why this approach? Control.

CSS custom properties allow runtime theme switching without JavaScript re-renders. When a user toggles between light and dark mode, only CSS values change—no component tree updates, no React context consumers re-rendering unnecessarily. This translates to instant, flicker-free theme transitions.

For engineers building similar systems, the key insight is: let CSS do what CSS does best. Reserve JavaScript for state management and logic, not runtime style calculations.

Single-page portfolio sections often highlight the current section in navigation as users scroll. The naive approach—attaching scroll event listeners—creates performance problems. Scroll events fire rapidly, potentially dozens of times per second.

This portfolio uses the Intersection Observer API instead. Rather than constantly calculating scroll position, observers watch for when sections enter or exit the viewport. Navigation updates only when visibility actually changes.

The personal section features a photo gallery that required careful attention to both visual design and performance.

Web fonts typically load from external CDNs like Google Fonts. This portfolio hosts fonts locally using IBM Plex Sans, a variable font that provides multiple weights from a single file.

Deployment follows containerization principles using Docker, hosted on Google Cloud Run. This choice reflects both technical preferences and practical constraints:

Building this portfolio reinforced several principles worth adopting:

This portfolio continues evolving. Planned improvements include enhanced accessibility auditing, expanded project case studies, and refinements based on real-world usage patterns. The architecture supports these additions without requiring fundamental restructuring—a testament to thoughtful initial design.

For engineers building their own portfolios: start with clarity about what you want to communicate, then choose architecture that serves that vision. Technical sophistication should amplify your message, not obscure it.