TEN[10] — de draaiende laptop

TEN is een portfolio van één pagina in een laptop die langzaam om zijn as draait. Als het scherm naar je toe staat, pauzeert hij zodat je kunt lezen. Daarna draait hij verder, en terwijl het scherm van je af staat, wisselt de pagina. Er zijn zeven pagina's: introductie, over mij, tech stack, projecten, AI, creatief werk en contact.

De laptop is in code gebouwd met three.js, op de maat van een 14-inch notebook: een aluminium behuizing met afgeronde randen, 78 losse toetsen met verlichte opdruk, een glazen trackpad, speakerroosters, poorten, scharnier en voetjes. Een eigen omgevingskaart met lichtbakken en lichtstrips zorgt voor de reflecties. Die staat stil terwijl de laptop draait, waardoor het licht over het metaal schuift.

Het scherm is geen plaatje maar echte HTML. Die ligt in een CSS3D-laag onder het WebGL-canvas, met dezelfde camera. Het canvas laat op de plek van het scherm een gat, zodat de pagina precies in het deksel zit. Van achteren dekt het deksel hem af. Klik je op het scherm, dan beweegt de camera ernaartoe en kun je scrollen, klikken en in de terminal typen. Probeer daar eens help.

De draai is een toestandsmachine rond één getal, de hoek van de laptop. De pagina wisselt alleen op het moment dat de achterkant precies naar je toe staat. Je kunt de laptop ook zelf rondslepen, met de knoppen of pijltjes navigeren en het automatisch draaien pauzeren. Met prefers-reduced-motion draait hij niet en wisselen de pagina's op hun plek.

Alle inhoud staat ook als gewone pagina in de HTML, voor zoekmachines, schermlezers en browsers zonder WebGL. Het is TypeScript met Vite, zonder framework. Unit-tests in Vitest controleren de draai-logica; end-to-end-tests draaien in Chromium, Firefox en WebKit.