why a website
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
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.
Under the hood it's Three.js and React Three Fiber with a few custom GLSL passes, displacement, mask, content compositing, then the cube itself with edge detection. The text on each face is drawn to a canvas texture and pushed through the same 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.
None of this was needed for a course blog, and I spent an unreasonable amount of time on it.
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
- Markdown + gray-matter, blog posts are just
.mdfiles with frontmatter - Vercel, hosting and deployments on push, freeeee
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.
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 directed and iterated, Copilot wrote a lot of the code. 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.