This site — a zero-runtime, token-driven portfolio and blog where every value on screen traces back to a single design decision, enforced by the compiler.
Highlights
Designed a single achromatic, token-driven system — every color, size, space, and radius resolves to one definition, reused everywhere.
Made 'no magic numbers' a build error, not a guideline: Panda strict mode fails codegen on any value that isn't a token.
Server-rendered with React Router 7 and zero-runtime CSS, with writings and these case studies typed at build time through Velite.
Stack
React RouterTypeScriptPandaCSSVeliteMotionVercel
This site is the case study. I wanted a portfolio that didn't just list what I
care about — spacing, motion, type, restraint — but actually demonstrated it in
every pixel. So the build itself became the argument.
The problem
Most portfolios drift. A color here, a one-off margin there, a button that's
subtly different from the last one. I wanted the opposite: a place where every
value on the screen could be traced back to a single decision, and where adding
a new page couldn't quietly break the system.
The constraints I set for myself:
One achromatic language. A single black-to-white ramp in oklch, no brand
accent. Color only enters through the work — project screenshots that go from
grayscale to full color on hover.
No magic numbers, enforced by the compiler. Not a guideline — a build
error.
Fast by default. Zero-runtime styling, server-rendered, content typed at
build time.
The approach
The foundation is a design system, not a stylesheet. Every size, space,
color, and radius is a token defined in one place; components read those tokens
through PandaCSS recipes. Strict mode (strictTokens + strictPropertyValues +
validation: "error") means a raw value never compiles:
<Flex gap="400" padding="300" rounded="200"> <Text variant="headingXl" color="primary"> Hierarchy is size and whitespace — never weight or color. </Text></Flex>
The rest of the stack follows the same bias toward types and zero runtime:
PandaCSS compiles styles to static CSS — nothing ships to the browser to
compute styles at runtime.
React Router 7 with SSR on Vercel for fast first paint and real URLs.
Velite turns MDX into a typed content layer, so writings (and now these
case studies) are checked at build time instead of trusted at runtime.
Motion drives the entrance reveals and the sliding indicators, always
behind a reduced-motion gate.
The outcome
The site you're reading. Headings get louder by reaching for a larger size
token, never bold. Surfaces layer through blacks instead of shadows. The whole
thing renders on the server and hydrates without a flash. Adding a page means
composing existing primitives — the system holds.
The best compliment a design system can earn is that it disappears. You stop
arguing about pixels and just build.
What I'd do differently
Some tokens were defined before they had a home and sat unused for a while —
I'd grow the token set strictly from real call sites next time. And I'd reach
for the typed content layer earlier: moving writings and case studies into MDX
made the rest of the site simpler in hindsight.
