![TEN[10] — The Rotating Laptop](/uploads/portfolio/2026/10/ten-rotating-laptop-hero.webp)
TEN is a one-page portfolio inside a laptop that slowly turns on its axis. When the screen faces you, it pauses so you can read. Then it turns on, and while the screen faces away, the page changes. There are seven pages: introduction, about me, tech stack, projects, AI, creative work and contact.
The laptop is built in code with three.js, to the size of a 14-inch notebook: an aluminium shell with rounded edges, 78 separate keys with backlit legends, a glass trackpad, speaker grilles, ports, hinge and feet. A custom environment map with softboxes and light strips provides the reflections. It stays still while the laptop turns, so the light slides over the metal.
The screen is not an image but real HTML. It sits in a CSS3D layer under the WebGL canvas, with the same camera. The canvas leaves a hole where the screen is, so the page sits exactly in the lid. From behind, the lid covers it. Click the screen and the camera moves towards it, and you can scroll, click and type in the terminal. Try help there.
The turn is a state machine around one number, the angle of the laptop. The page only changes at the moment the back faces you. You can also drag the laptop round yourself, navigate with the buttons or arrow keys and pause the automatic turning. With prefers-reduced-motion it does not turn and the pages change in place.
All content is also in the HTML as a normal page, for search engines, screen readers and browsers without WebGL. It is TypeScript with Vite, without a framework. Unit tests in Vitest check the turning logic; end-to-end tests run in Chromium, Firefox and WebKit.
The laptop is built in code with three.js, to the size of a 14-inch notebook: an aluminium shell with rounded edges, 78 separate keys with backlit legends, a glass trackpad, speaker grilles, ports, hinge and feet. A custom environment map with softboxes and light strips provides the reflections. It stays still while the laptop turns, so the light slides over the metal.
The screen is not an image but real HTML. It sits in a CSS3D layer under the WebGL canvas, with the same camera. The canvas leaves a hole where the screen is, so the page sits exactly in the lid. From behind, the lid covers it. Click the screen and the camera moves towards it, and you can scroll, click and type in the terminal. Try help there.
The turn is a state machine around one number, the angle of the laptop. The page only changes at the moment the back faces you. You can also drag the laptop round yourself, navigate with the buttons or arrow keys and pause the automatic turning. With prefers-reduced-motion it does not turn and the pages change in place.
All content is also in the HTML as a normal page, for search engines, screen readers and browsers without WebGL. It is TypeScript with Vite, without a framework. Unit tests in Vitest check the turning logic; end-to-end tests run in Chromium, Firefox and WebKit.
More work
Nine Times PHP — an ode to PHP in blue ballpoint
An ode to PHP in blue ballpoint: nine versions from 1995 to 2026, four swearing programmers and charts that move on their own.
Interactive 3D WebGL Experience
A 3D WebGL piece with animated chrome letters, a neon grid and warp-speed stars. Move your mouse to pan the camera.
Recruitment Office — an office simulation in pixel art
An isometric office simulation: twenty people call, type, talk and ring the bell for every placement. TypeScript, Canvas and Web Audio.