This site is a room. The monitor on the desk runs a Windows XP desktop that holds my projects, posts and CV, and the other objects in the room respond to clicks. The second version replaced a dark terminal-style site that came before it. I rebuilt it as a single scene so that the place and the content live together.
The stack
Astro generates the pages at build time and GitHub Actions deploys them to GitHub Pages. The room is three.js: about 30 glTF models, procedural walls, floor and window, and an orbit camera with limits chosen so the view always looks like a photograph. TypeScript covers the scene, the camera moves and the XP desktop.
The XP desktop
The monitor shows a Windows XP desktop built with XP.css and a small window manager written for this site: draggable windows, a taskbar, a Start menu and desktop icons. Projects open in an Explorer-style window and the blog opens in a browser-style reader. The markdown for every entry is rendered to HTML when the site builds, so the desktop needs no server.
Navigation
Clicking the monitor flies the camera in until the screen fills the view. Esc, the Back button or a click outside returns it. Each section has its own link, such as #/projects, and the room shows a boot countdown on the monitor while the models stream in.
Props with behaviour
Several props are animated. The train smokes and whistles, the tank fires, the Enterprise warps out and back, the MiG sweeps its wings and lights its afterburner, and a nixie clock shows the visitor’s local time. The sounds are synthesised in the browser, so there are no audio files to download.
A plain version
People without WebGL, on reduced data, or who prefer text get a no-JavaScript version of the whole site under /reading/, rendered from the same markdown.
Tooling
A set of small Node scripts measures every model, scales it to a real size, finds the parts of a model that move, and prepares a Blender light bake. They run in parallel across all the cores of the machine and cache their results.