The full experience: a scrolling walkthrough of the live site.
The hardest brief is the one you write yourself.
No stakeholder. No brand book to inherit. Total creative freedom turns out to be paralyzing, every direction is defensible, so none feels right.
And the other constraint: time. This was designed nights and weekends during a job search, on top of a full-time role. A portfolio you keep redesigning forever never ships, so I set a deadline and let it kill the precious ideas.
The rest of the constraints I chose on purpose. A self-imposed brief: the portfolio should feel less like a SaaS landing page and more like a well-made annual report. Severe, typographic, monochrome with one signal color. The work has to do the talking; the container should step back.
Four design decisions held the system together.
The audience is the brief.
The work targets industries where calm reads as competence. Defense, security, infrastructure, finance. A loud portfolio would tell those teams the wrong thing about how I work.
Industry visual vocabulary
Two typefaces. Two colors. Zero noise.
Geist for everything that reads as content. Geist Mono for everything that reads as system: labels, captions, tags, nav.
Headlines are uppercase with tight tracking. It's a stance, not a convention. The mono treatment of metadata makes the page feel built rather than decorated.
The palette is nearly monochrome. Blue (#2563eb) is reserved for signal: section labels, scroll-driven highlights. Used as decoration, it would be noise.
#09090b
#18181b
#fafafa
#71717a
#2563eb
Token palette, dark · light mirrors these values
The same page. Twice.
Dark is canonical. Light has to feel like the same design, not a tinted version of it. Every color is a CSS custom property; an inline script reads localStorage before paint so the first frame is correct. No flash, no flicker.
Not just design. Strategy executed by AI.
Instead of manually converting a Figma file into a site, I gave the AI clear goals: uploaded my resume, defined my value proposition, and scoped the target audience. The result is a site built from strategic intent: a full redesign grounded in a complete design system.
I used Claude via the CLI and a local MCP server connected directly to the Figma API. Claude pulled content from design layers, planned the architecture, defined precise design tokens, and wrote clean React in Next.js 15.
Everything is wired to GitHub and deployed via Vercel. Every change is reviewed and published automatically: a real development workflow, not a static prototype loop.
As a product designer, defining goals and watching AI execute them at production level in minutes is a paradigm shift. It lets me skip tedious technical steps, iterate on real code, and speak the same language as my developers.
Claude Code in action
Fast is part of the design.
Next.js Image optimization, GIF → video conversion, lazy loading below the fold, and Vercel Analytics + Speed Insights closing the loop. A page that feels heavy reads as imprecise; precision is the brand.