This portfolio site.

the problem

Most developer portfolios either over-design (loud hero animations, dark gradients, floating 3D scenes) or under-design (generic template that tells you nothing about the person). Both fail the same way: they do not reflect how the person actually thinks. I wanted something quieter. A site where the visual restraint matched the work, where every piece of copy was deliberate, and where the design system itself was evidence of discipline.

the approach

Built on a deliberately locked design system: five color tokens (paper, paper-light, ink, rust, stone), two fonts (Inter for display, JetBrains Mono for body), a strict spacing scale, and explicit 'do not do' rules banning cards, drop shadows, gradients, rounded corners above 4px, and em-dashes in prose. Typography and whitespace do the work that containers usually do on other sites. Content is held in a left-weighted column, with deliberate right-side whitespace that is part of the brand, not empty layout.

Engineering built in stages. Prototyped in Claude Design, then exported to a static Vercel deploy. Built with Claude Code handling the implementation work while I held scope, voice, and visual direction. Enforced the design system with a pre-commit validator that blocks off-palette hex codes and unauthorized fonts from entering the codebase. The entire repo is scanned with Vibe2Prod before every push, so the site both is the portfolio and demonstrates the tool in practice. Staging sits behind Vercel deployment protection and noindex rules so half-built drafts do not leak to search engines.

Writing is pulled live from the Substack RSS feed at vibedebt.substack.com and rendered at build time with a six-hour revalidation window. The voice rules (lowercase as accent, sentence case for prose, always capitalize 'I', proper nouns cased correctly) are codified in CLAUDE.md so every Claude Code session inherits them without re-explaining.

the outcome

Live at christopherigweze.com. Still shipping. The most interesting thing building it taught me was how much of 'design quality' is actually 'enforcement quality.' A beautiful design system without enforcement drifts within a week. The lock, the validator, the CLAUDE.md inheritance, those are what keep the system intact across sessions and iterations.

the lessons

Design tokens as the single source of truth are not optional for a long-lived site. Neither is a pre-commit validator. Also learned that working with a coding agent on a heavily-constrained design requires more explicit documentation than working with a human, because the agent does not carry context between sessions. The CLAUDE.md file ended up being as important as the code itself.