So here we are
I needed a blog for my game design course at KTH (DH2650). Somewhere to document progress, reflect on design decisions, all that. A sensible person would've used Notion or Google Docs. Instead I built a whole websit. While I have other things to do. Yaay :)
The design scheme is taken from a previous website I've made with some friends, enfix.dev.
The cube
Let's talk about the elephant in the room, or rather, the rotating glass cube on the landing page. I wanted a glass cube or a prisma on the landing screen and when looking around I found this master piece https://tympanus.net/Tutorials/apple-fifth-avenue/?debug=true and really wanted to recreate it.
It's built with Three.js and React Three Fiber, running custom GLSL shaders across multiple render passes. There's a displacement pass, a mask pass, a content compositing pass, and then a final cube render with edge detection. Each face of the cube has its own text content rendered to canvas textures and projected through the shader pipeline. If you are interested in how to do it I recommend the link above, it has links to a article explaining how it's done and a github repo with their code which I used as a base.
Did I need any of this for a course blog? Absolutely not. Did I spend an unreasonable amount of time doing it, yes.
The stack
For anyone curious:
- Next.js 15, app router, static generation, the usual
- React Three Fiber, because writing raw Three.js in React is pain
- Custom GLSL shaders, for the glass cube effect (displacement, masking, content compositing, edge rendering)
- Markdown + gray-matter, blog posts are just
.mdfiles with frontmatter - Vercel, hosting and deployments on push, freeeee
The design is intentionally minimal. Muted beige background (#E8E8E4), blue accent (#0000FF), lowercase everything. There are page transitions with a snapshot overlay that darkens and slides, which was its own saga because innerHTML can't capture WebGL canvases, so I had to clone the DOM and convert canvases to images via toDataURL(). Fun times.
A note on AI usage
I used GitHub Copilot pretty heavily throughout building this site. The shader pipeline, page transitions, responsive scaling, Copilot was involved in most of it. I'd describe the workflow as me directing and iterating while Copilot did a lot of the heavy lifting on implementation and coding. I made design decisions, pointed out bugs, and tweaked values until things looked right, but I'd be lying if I said I wrote every line by hand.