Building this site: Next.js 16, React 19, and Tailwind v4

This site is small enough to over-engineer and personal enough to enjoy doing it. A few decisions earned their keep.

One source of truth for theme

Every color is a CSS variable, mapped into Tailwind v4's @theme. Re-skinning the entire site — including the accent — is a one-block change.

:root {
  --primary: #6d4aff;
}
.dark {
  --primary: #7c5cff;
}
 
@theme inline {
  --color-primary: var(--primary);
}

Server Components by default

Content sections render on the server; only the genuinely interactive bits — the command palette, the theme toggle, scroll reveals — are client islands. The result is a fast first paint with motion kept off the critical path.

Motion that respects the user

Every animation checks prefers-reduced-motion and degrades to a simple fade. Polish should never cost accessibility.

The boring parts matter most

• Typed content files, so copy never lives inside JSX.
• A cn() helper and a handful of primitives instead of a component library.
• next/font for zero layout shift.

None of it is novel. All of it compounds.