How I built this portfolio
There's a particular kind of satisfaction in building something from zero. Not inheriting a codebase, not forking a template — starting with an empty directory and ending with a product that reflects every decision you made along the way.
The Stack Decision
I chose Next.js with the App Router, Tailwind CSS for utility-first styling, and TypeScript for type safety. The reasoning was straightforward: I wanted static generation for performance, file-based routing for simplicity, and a styling system that let me move fast without fighting CSS specificity.
The font stack — Space Grotesk for display, DM Sans for body, Space Mono for labels — was chosen to create maximum typographic tension. The display font is geometric and confident. The body font is humanist and readable. The mono font adds a utilitarian edge to metadata and labels.
The Brand System
Every color in this portfolio has a job:
- Obsidian (
#0D0D0D) — primary text, maximum contrast - Tangerine (
#FF6B35) — accent, CTAs, interactive states - Fog (
#E5E7EB) — borders, dividers, structural lines - Silver (
#9CA3AF) — secondary text, metadata
The constraint of five colors forces every design decision to be intentional. There's no room to hide behind variety.
The Editorial Layout
The content column is locked to 680px — wide enough to be comfortable, narrow enough to maintain a readable line length of roughly 65-75 characters. This isn't arbitrary; it's the typographic sweet spot backed by decades of readability research.
Headlines break out of this constraint intentionally. The case study titles hit 80px at desktop. The expand-on-hover gallery spans 1200px. These moments of scale contrast are what give the layout its editorial tension — the controlled collision between restraint and drama.
What I'd Do Differently
If I started over, I'd build the component library first and the pages second. I ended up refactoring typography tokens three times because I was designing in context rather than in isolation. The lesson: design your system, then design with your system. Never both at the same time.