← Selected Work

This Site

A server-rendered Next.js portfolio with content-as-code Projects.

Next.jsTypeScriptTailwind CSSMDX

Problem

I needed a portfolio that actually shows what I build — not one static landing page with links that go nowhere, but real Projects, each with a clean, shareable URL. And the site itself should hold up as a piece of engineering, not just host one.

Approach

Server-rendered Next.js, App Router. Each Project is one MDX file: frontmatter is the Card, the body is the optional Walkthrough. A typed schema validates the frontmatter at build time — broken content never ships. Pages are thin consumers of a single content-access module, the one unit-tested seam.

The Projects index, rendered as a Beacon card grid

Images are co-located too — a Project's thumbnail and screenshots live next to its MDX, served through next/image: resized, lazy-loaded, AVIF/WebP, never leaving the content directory.

Result

Adding a Project is a commit, not a CMS chore. The design is token-driven and evolves independently via Claude Design, without touching routing or content — which is exactly how this page got styled.