I rebuilt my portfolio and put an astronaut in it
What I learned making a personal site that's fun to scroll, from fake galaxies to a NASA spacesuit.
My old portfolio was built years ago, in a different stage of my career. It did its job, but it didn't feel like me anymore. So I started over, with one rule: build something I'd enjoy scrolling through myself.
Start with how it should feel
Before writing any code, I wrote down one sentence: scrolling should feel like drifting through space. That sentence made a lot of later decisions easy. The astronaut drifts from section to section, turns to look at whatever you're reading, and fires his jets when he has somewhere to be. At the bottom of every page, he lands on a planet.
Real beats generated, most of the time
My first galaxy was generated in a shader: layers of noise, warped into each other until they looked like gas. It took an evening and looked like smoke. Then I swapped in a real photo of the galactic centre, taken from ESO's Paranal Observatory in Chile, and it was obviously better in about two seconds.
The planet went the same way. My procedural one had continents, clouds and city lights, and it looked cheap. A real map of Jupiter's cloud bands, wrapped around a sphere, looks like a place.
The astronaut is NASA's own model of the spacesuit used on the International Space Station. I took the flags and mission patches off, gave it new materials, and put my logo on the shoulder.
Realistic isn't always right
Real spacewalk jetpacks don't have flames. They puff cold nitrogen through tiny nozzles, and you can barely see it. So I built that first: sixteen nozzles, each firing only when its push matched the direction he was moving.
It was accurate, and nobody would have noticed it. So I went back to visible plumes, coloured white like gas instead of orange like fire. Realism is a tool. It's there to serve the feeling, not the other way round.
Keep it fast
A personal site with a 3D scene can easily turn into a space heater. A few things keep this one light:
- The sky is drawn once, at full resolution, and slid as you scroll, instead of being redrawn every frame.
- Everything pauses when the tab isn't visible.
- If you've asked your system for reduced motion, the astronaut stays put and the page simply works.
What I'd tell myself next time
Get real assets in early, because they change every design decision after them. And small details add up: the astronaut turning to look at what you're reading took about twenty lines of code, and it's my favourite thing on the site.