You already know the deets - you're on this site right now!
Overview
Slinky Pixels is my portfolio, and a sandbox for trying the latest Next.js and Sanity features on something real. It's also where I use tasteful (kinda) rainbow unicorn gradients to keep me in good favour with my daughters. 🦄
My role
All of it: the design, the content model, the build and the words.
Key decision: static pages that still update in seconds
Every page is generated ahead of time, so it's fast, but all the content lives in Sanity. Visual Editing shows changes on the real page as I type, and publishing sends a signed webhook that refreshes the site on Vercel within about 20 seconds, even when nobody has it open. No redeploys for a typo.
The slinky
The pixel coil behind the headings is drawn on a canvas every frame: a helix laid along an arch, whose loops squash and stretch, lean into the curve and ride two layered waves, with the brand colours blending across the screen. I tuned the motion in a throwaway playground before building it in. It pauses when it's off-screen and holds still for anyone who prefers reduced motion.
Outcome
Writing or updating a case study like this one takes minutes in Sanity, with no code changes and no redeploys.
Build
Next.js (App Router), Sanity with TypeGen for typed GROQ queries, Tailwind CSS and shadcn/ui (on Base UI), Motion, and share images generated with next/og.