Building this site
Notes on the current version of benjf.dev.
I've rebuilt this site more times than I want to admit. Every time I say "keep it simple this time." Every time I add extra nonsense anyway.
Stack
- Next.js 15 — App Router, server components, ISR
- Tailwind CSS — utility classes, dark mode via
class - Framer Motion — page transitions and the hero fade-in
The background
The stars are generated client-side based on the container dimensions. Each one gets a random position, size, twinkle speed, and delay so they don't all pulse in sync.
const area = width * height;
const targetCount = Math.max(150, Math.floor(area / 8000));
The waves are three SVG layers moving at different speeds with translateX.
It is just parallax, but it gives the page enough motion without making the whole thing feel busy.