Building a Dual-Mode Portfolio

When I decided to build my portfolio, I had a simple idea: what if the site could exist in two visual realities? One that feels like a retro game, and another that feels like a polished modern app.

The challenge wasn't just swapping colors. Every component needed to feel native in both modes — from the navigation to the tooltips to the scroll behavior. Pixel mode uses snap scrolling and CRT overlays, while colorized mode uses smooth scrolling and glassmorphism.

The theme system uses a context provider that holds the current mode and a color palette. When you switch modes, every component re-renders with new styles — but thanks to React's reconciliation, the transition feels instant.

The hardest part was the transition animation itself. I wanted it to feel like the screen was glitching between realities. The solution was a combination of scattered pixel blocks, horizontal glitch bars, and careful timing.

Easter eggs were the fun part. The Konami code, rapid-click detection, and the quick-switch lock screen all came from asking: what would make someone smile while browsing?