richabh.comrichabh.com

This site began as the portfolio of a proposal writer: dark, cinematic, every line on it read from a published record. It did that job. But when I decided to present myself as a creative developer, the job changed. A site that says I design and build memorable websites has to be one, and the only proof that counts is the thing the reader is already looking at.

So the brief I gave myself was short. The site is the portfolio piece. It has to show that I understand design, development and animation, and it has to do it in the first five seconds, before anyone has read a word.

I did not start with code. I sketched whole directions as live pages and compared them side by side, three rounds of them. The first to go was an operating-system concept — windows, a boot log, a command palette. It looked clever for a minute and then looked exactly like early AI output, which is the one thing a portfolio cannot afford to look like.

The direction that survived was the cinematic one: big serif type, a shader behind it, motion tied to the scroll. What it lacked was an idea strong enough to sketch on a napkin. That came later, and it came from a single image.

Everything on the site comes from one picture: metal in a forge, glowing from the inside. The loader is a slit of white-hot light that spreads across the dark as the page gets ready. At a hundred it opens like a shutter and the whole screen is light — and then you realise you are inside a letter. The camera pulls back, the light burns away around the strokes, and what is left is my name, cooling from white to amber.

Scrolling runs the same shot backwards: the name rushes towards you, fire spreads out of the letters, and the frame dims into the page. A loader that simply disappears is a delay. One that becomes the hero is the site introducing itself, and the symmetry with the scroll is what makes it feel designed rather than decorated.

The first screen is a single full-screen shader written in TSL, three.js's shading language, running on WebGPU where the browser has it and falling back to WebGL 2, then to plain HTML. The name is drawn onto a canvas and turned into a signed distance field in a web worker, which is why it stays sharp at sixteen times zoom and why the glow around the letters costs nothing extra.

The colour is a blackbody ramp — ember, red, orange, amber, white — because that is what hot metal actually looks like. One early version faded the light into the letters and passed through a long murky grey on the way; I replaced the fade with a burn, a ragged front with a hot edge, and the murk went away.

The cursor is a lens over the type and a source of heat in the light. A click on the name is a hammer strike that ripples through it; a click anywhere else throws sparks. Further down, the words of the statement warm where the cursor passes and cool behind it. None of it plays on its own — it all happens because the reader did something, which is what makes it feel alive rather than busy.

The hardest part was removal. Tracked-out capital labels, numbered sections that were not sequences, a single orange accent on black: each is a default that makes a page read as generated, and each came out. Every section is built differently on purpose, because the same rhythm repeated down a page is what makes a site feel like a template by the third time you see it.