All posts

Rebuilding this site without the animations

Why I stripped three animation libraries, a 3D planet and a starfield out of my portfolio, and what replaced them.

2 min readNext.jsPerformanceDesign

The old version of this site loaded Framer Motion, GSAP and three.js on the same page. There was a rotating starfield behind the contact form and a 3D planet next to it. Every technology icon floated up and down forever, whether or not you were looking at it.

It came to about 1.3 MB of JavaScript, plus another 7 MB or so of unoptimised screenshots and a GLTF model. On a slow connection, the first thing a visitor got was a blank page.

What was actually wrong

The animations weren't bad in isolation. The problem was that they were doing all the work. Someone landing on the site could not quickly answer either of the two questions that matter:

  • Can this person build the thing I need?
  • How do I get hold of them?

Those answers were buried under motion, and search engines couldn't see them at all — the whole thing was a client-rendered SPA with <title>Harshit</title> and no description.

What replaced it

The rule I set was simple: the only motion on the site is a colour transition on hover, and the theme switch. No scroll reveals, no entrance animations, no libraries. If an effect needed a dependency to express, it didn't get built.

That constraint made most other decisions obvious:

// The entire animation system, as far as any component is concerned.
className = 'transition-colors hover:bg-card-hover';

Everything else is a bento grid of bordered cards, statically generated so the HTML that reaches the browser already contains the words.

The parts worth stealing

A few things I'd do again on any small content site:

  1. Render the GitHub contribution graph on the server. The popular React component pulls a floating-UI dependency into the client bundle just to show tooltips. A title attribute does the same job for nothing.
  2. Hand-roll the prose styles. It's about forty lines of CSS against the same tokens as everything else, and blog posts theme correctly for free.
  3. Put the contact path above everything. One button to book a call, one to send an email, at the top of the page.

Delete this post whenever you're ready to write a real one — it's here so the blog pipeline has something to render.