Building this site
How I put benjf.dev together with Next.js, Tailwind, and too many animated stars.
I've rebuilt my 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's just parallax, but it works and looks good enough that I'm keeping it.