Portfolio Gallery

Overview

Most portfolios are a page you scroll. This one is a place you walk into. Concrete rooms, warm light spilling along the floor, a colored spotlight over each piece, a radio on a plinth you can switch on, a light switch that works, footsteps that echo as you move. Every project is a physical thing. You walk up to it, look at it, click into it.

It all runs in your browser with nothing behind it. No backend, no framework, and not a single audio file. The footsteps, the reverb, the clicks, the radio: all generated while you play.

Why

Every portfolio looks the same from ten feet away. Hero, grid of cards, footer. They talk about the work through screenshots, but the site itself proves nothing. If the pitch is spatial thinking, audio design, real-time rendering and systems work, a flat page of thumbnails demonstrates none of it. So the brief I set myself was simple and slightly unreasonable: build a portfolio that is one of the pieces.

Highlights

• Themed rooms. Pieces are grouped by kind, Websites, Games, Toys, Experiences, Utility, each with overhead signage and its own accent light. A directory at the entrance glides you to any room.
• Light you can feel. Each piece hangs under a spotlight tinted to its own palette, with a real fixture modeled above it. The wall switch fades the whole room between warm and near-dark.
• The mirror. A frosted mirror, rendered deliberately soft. A silhouette follows you in the reflection and never in your direct view. The reflected world can hold things the real one doesn’t.
• Sound with no files. Footsteps are bursts of filtered noise timed to the head bob and run through a synthetic room reverb. The radio plays positional audio that fades as you walk away, and the floor LEDs breathe with its bass.
• Works on a phone. Split-touch controls: joystick on the left, look on the right, tap to interact. Same movement code underneath.
• A few secrets. Walk slowly. Pick things up.

How It’s Built

Three.js, Vite and vanilla JavaScript. The rooms are flat planes and boxes with concrete textures generated in code, and the whole hall is generated from the project list, so adding a piece adds it to the wall. Small modules each own their own objects and hand back an update function for the loop. UI is HTML and CSS over the canvas. Nothing is allocated inside the render loop, the pixel ratio is capped, and the number of active lights is held constant so shaders compile once.

Hard Parts

Browsers treat ESC as “let me out of pointer lock” and refuse to re-lock from an ESC key press, so closing a panel with ESC lands you on a click-to-resume prompt instead of straight back in the room. The mirror’s silhouette exists only during the reflection pass, flipped visible just before and hidden just after. And the cold load used to freeze for ten seconds while every shader compiled at once. Now the scene compiles asynchronously and the post-processing warms up across frames.

Outcome

The site ended up as both the portfolio and a piece in it. Walk slowly. Keep the sound on. And when you reach the mirror, pay attention to what it shows you.