Skip to content
Nikunj Chugh

Web Development · nikunjchugh.com

SELF-STUDY

Building this site: a performance budget as a design constraint

The site you're reading is the case study — Next.js, a typed design system, and Core Web Vitals treated as acceptance criteria.

The bottleneck

A portfolio for someone selling web performance has one unforgivable failure mode: being slow. Every design decision had to survive a hard performance budget.

What I built

  1. 01Next.js App Router, React Server Components by default — client JS only where interaction demands it
  2. 02A single-source token system: colors, type, and spacing defined once, consumed everywhere
  3. 03The Thread: scroll-linked SVG animation on transform/stroke only, with a full reduced-motion fallback
  4. 04Structured data, generated OG images, and sitemaps built into the framework, not bolted on

The numbers that moved

95+Lighthouse performance, mobile
0layout shift from fonts or media
≤130KBJS budget on the homepage

Next step

Want a breakdown like this for your business?

A 30-minute discovery call. You bring the numbers, I'll bring the questions. If I'm not the right fit, I'll tell you who is.