Hi all! I rebuilt my portfolio as a late‑90s workshop desk, and everything on it works.
Live: https://www.c-na.dev
What you can do
- Projects are floppy disks. Pick one from the holder, it flies into the Mac, and a System 7 browser opens the case study.
- The Mac runs a little System 7: Finder, windows, marquee select, a terminal with a virtual file system, a text editor. It’s an in‑world
Htmlscreen, and the 3D mouse on the desk follows your pointer. - Five playable arcade games (Battle City‑style tank, Space Invaders, Tetris, Pac‑Man, Snake). Put a cartridge into the Famicom and the game plays live on the CRT through a render target portal. Each one runs on a fixed 60 Hz step, so speed doesn’t change with the display’s frame rate.
- When it’s idle, the CRT shows the DVD screensaver. Clicking it plays NES GIFs from a texture atlas.
- There’s also a sketch notebook with page flips, a lamp with a real point light you can switch, a Rolodex holding my contact card, a robot, a rocket and a planet you can poke.
Tech
- Next.js + React 19, React Three Fiber, drei, three r182
- @react-three/postprocessing for the selection outlines
- Draco‑compressed GLBs, progressive loading with a CRT‑style loader tied to real
useProgress - A separate transparent canvas for a custom 3D cursor
- Adaptive render quality, and the live 3D scene runs on phones too
The thing I spent the most time on was making it feel physical. Every object has a hover state, and the camera moves between focus points (desk → Mac → CRT → Famicom).
Feedback is very welcome, especially on performance on low‑end devices. Thanks for looking!