Preetham JP
A sound designer's portfolio where you can hear the work, not just read about it.
- Role
- Design & build
- Client
- Preetham JP · music producer & sound designer
- Year
- 2026
- Stack
- Next.js · Supabase · Video reels
- Status
- Live
What was broken
Preetham is a sound designer in Manchester working across film, game and narrative audio. The work is entirely in the ear, and the previous page was a text CV — no way to hear anything without emailing him first.
What made it hard
You cannot autoplay sound on the web, and you shouldn't want to. So the site had to feel like audio while being silent by default, and load fast enough that a supervisor skimming ten portfolios doesn't bounce before the first reel decodes.
What I decided
Make the interface the studio. Black room, REC light, running timecode, name at full-bleed weight — the visual grammar of a session, so it reads as sound before a single clip plays. Then let the reels play muted in view and hand the volume decision to the visitor.
What shipped
Next.js with a Supabase-backed reel and credits list, muted autoplay bound to an intersection observer, and a mono chrome layer that runs across every page.
The moment it worked
Setting the name at that size was the decision. At normal display size it was a portfolio; at full width it became a title card — and everything else on the page fell into place under it.
What it left behind
He posts new reels himself. The site is the link he sends instead of a PDF, and it opens with the work rather than with his bio.
How it looks, and why
The brief was audio, so the interface is a recording session. Black room, a live REC dot, a running timecode across the top, SESSION SIGNAL set vertically down the left edge, and the name at the largest size the viewport allows in a condensed grotesk. Red is state and nothing else — it marks what's armed, never decoration. Everything that isn't the name is set in mono at 11px, because a studio label rack is the honest reference here, not a design portfolio.
Palette — sampled from the live site- Next.js
- Supabase
- Video reels
Reels that play in place
The work is video and audio, so the reel grid autoplays muted in view and pauses out of it — you hear the work by choosing to, not by ambush.
Timecode chrome
A running timecode and REC indicator frame every page, so the whole site reads as one continuous session rather than a set of tabs.
Self-serve reel management
Reels and credits come out of Supabase, so new work goes up without touching the repo.
Credits as a rack
Film, game and narrative audio credits listed in mono the way a session sheet lists them — scannable by someone who hires for this.