This Portfolio
A design-led personal site, engineered like a product
The site you're on — a performance- and accessibility-minded build on the latest web stack, with a fully token-driven design system, a ⌘K command palette, and motion that respects reduced-motion.
- Role
- Design & Engineering
- Timeline
- 2026
- Status
- Open source
Problem
I wanted a personal site that reflects how I actually build — calm, fast, and accessible — instead of a flashy template that says nothing about the engineering behind it.
Approach
I built it like a product. Copy lives in typed content files, never in JSX; the design system is driven by a single block of CSS tokens; and everything renders on the server by default, with interactivity added only where it earns its place.
Architecture
Next.js 16 (App Router) and React 19 Server Components, styled with Tailwind v4's CSS-first theming. The blog compiles MDX at the server-component layer with Shiki highlighting, and the GitHub section fetches live data server-side, cached and revalidated hourly.
Challenges
The discipline was restraint — keeping motion and color minimal while still feeling crafted — and compiling MDX with a Shiki highlighter within Turbopack's constraints, which is why MDX is compiled in Node rather than through the bundler loader.
Lessons
The boring parts carry the design: typography, spacing, and a tight token system do more than any effect. Less, but better.