Experiment · 2025 · 02 / 10
3D Interactive Portfolio.
A retro computer on a desk that you can actually use - the monitor shows a live Win95-style OS, not a picture of one.
Launch Project↗- Context
3D Interactive Portfolio is the predecessor site to this one. It stages a beige CRT, a keyboard, a desk plant and a mug on a soft grey floor, and lets you click into the scene until the camera docks on the monitor. At that point the screen stops being decorative: it's a real iframe, rendered through Three.js CSS3DRenderer, running a separate React application that looks and behaves like Windows 95. You can drag windows, open a terminal, browse the showcase, even boot Doom and Oregon Trail through an in-browser DOS emulator. Two deployments, one experience - `3d.boussettah.tech` hosts the scene, `os.boussettah.tech` hosts the OS, and a postMessage bridge keeps mouse and keyboard events moving cleanly between them.
- Approach
The whole project hinges on one trick: the monitor isn't a texture. It's an HTML element placed in 3D space through CSS3DRenderer, with a transparent WebGL plane in front of it to handle depth sorting against the baked room geometry. That means every pixel on the screen is live DOM - clickable, typable, accessible - while the room around it is a pre-baked GLB with no runtime lights, which keeps the frame budget cheap. On top of the iframe I layered smudge and shadow textures, two additive video loops for CRT glow, and a CSS jitter animation to sell the analog feel. Camera work is four named keyframes - Idle, Desk, Monitor, Loading - tweened with bezier easing; clicks and cursor position decide which one you're on. The OS itself is a small React 17 app with a window manager, Win95 chrome and a handful of real applications, shipped as its own project so the 3D shell stays a thin frame around it.
- Outcome
It shipped, it's still live at `3d.boussettah.tech`, and it was the portfolio that carried me through 2025 and into the first freelance and internship conversations. The architecture - two deployments, a postMessage bridge, CSS3DRenderer as the compositor - held up under real traffic and became the reference I lean on any time I need live HTML inside a WebGL scene. It's archived-but-alive now: the engineering portfolio you're reading replaced it, but this one stays online as the thing that proved I could build the less-obvious kind of site.
- Process
- 01
One iframe, rendered in 3D
The monitor is not a video texture or a baked image - it's a live HTML iframe mounted through Three.js CSS3DRenderer, positioned and rotated in the same world as the GL scene. A transparent GL plane sits in front of it for depth sorting so the bezel, smudges and scanlines composite correctly over real DOM.
- 02
Event bridge between two apps
Scene and OS are separate deployments (`3d.boussettah.tech` and `os.boussettah.tech`). Mouse and keyboard events are postMessage'd out of the iframe, rewritten back into synthetic DOM events in the parent, and routed to the camera when the cursor crosses the screen hitbox. That's what lets a click on a Win95 icon also pull the camera forward.
- 03
Baked lighting, live CRT
Desk, room, and computer are pre-baked GLB + texture pairs - no runtime lights, which keeps it 60fps on modest GPUs. The only real-time work is the monitor stack: layered smudge and shadow textures over the iframe, plus two additive video loops for glow and flicker, plus a tiny GLSL jitter on the HTML itself.
- 04
Camera as narrative
Four named keyframes (Idle, Desk, Monitor, Loading) tweened with bezier easing and `@tweenjs/tween.js`. Clicks from ambient room view pull you to the desk; crossing the screen hitbox pulls you into the monitor; stepping out pushes you back. The camera is the only navigation the site has.
- 05
A real OS on the screen
The thing running inside the CRT is a full React 17 app with a draggable window manager, Win95 chrome, a working terminal, a showcase explorer, and Doom and Oregon Trail playable in-browser through `js-dos`. It ships as its own project so the 3D shell stays a thin frame around it.
- Credits
- Design, 3D, build
- Salah Boussettah
- Original inspiration
- Henry Heffernan portfolio
- Next
→ SB Framework
Product · 2026