Interactive 3D Portfolio

By early 2024 I had a blog, a handful of projects I wanted to show people and a growing itch to get back into coding. Work had kept me busy for years, so I gave myself a project that would force me to learn something instead of returning to the parts I already knew. I picked React, then made things harder by deciding the portfolio should have a 3D island you could move around.

This was not the obvious choice for somebody who has always been happier working behind the scenes. I said it plainly in the post I wrote when I launched it: I suck at CSS and design. I still wanted to see whether I could build something playful enough to make people curious about the projects, rather than another page of cards and job titles.

Building the island

React gave me a way to build the site and keep the interface organised. Three.js was the part I really wanted to explore: an actual scene in the browser that visitors could interact with. I used TypeScript as I worked through the scene and UI code, and Tailwind CSS for the layout around it. The finished portfolio went onto Vercel, while my Hugo blog stayed on Netlify.

The island made me think about the site in a different way. A project page has to be readable, but it can also have a bit of character. Getting a 3D scene to sit alongside ordinary content was a useful lesson in how much work happens outside the exciting bit of writing the scene itself. The portfolio also gave me somewhere to put a little professional background and the coding projects I had been meaning to document.

What I got out of it

I picked up speedcubing in 2022 and spent months trying to get my 3x3 solves below 20 seconds. I approached this in much the same way: choose something I could not yet do, practise it and see if I could get a working result into the world. The portfolio was my first proper front-end React project after a long stretch without much coding. Finishing it mattered more to me than pretending it was a polished agency site.

It also exposed a problem I had been putting off. The portfolio and the blog looked and behaved like two separate homes because they were two separate sites. That eventually led to the Astro rebuild, where my writing and projects finally share one place. The 3D portfolio remains a record of the experiment that got me coding on the front end again. You can visit the original portfolio or read the launch post for what I thought of it at the time.