How this site is built.
The stack, the design decisions and the workflow behind this portfolio, which is a project in its own right.
Architecture
Every page is rendered to static HTML when the site is built. A small proxy maps each address to its language, and the CDN serves the rest.
Design
One type family, Geist, with Geist Mono for small data. One accent, the orange, used sparingly: a link underline, an active state, the dot of a status.
Every colour is a token. The same components render light and dark by swapping the tokens, so nothing is styled twice. Switch the theme to see the swatches below change.
Components follow shadcn's structure on Base UI primitives, but their look comes from the site's own CSS. When the primitives changed, the design stayed the same pixel for pixel.
- Background
--bg - Surface
--card-2 - Text
--fg - Muted text
--fg-dim - Line
--line-strong - Accent
--accent
Quality
Why this stack
I started this portfolio in Astro, the obvious pick for a static site. Then I switched to Next.js, so it would follow my own Next.js architecture guideline, the one I use for real products.
The site only needs the guideline's design-system and structure rules, so the heavier parts, like auth and data fetching, stayed out. What's left is what a front-end engineer is judged by: components, tokens and the details.