Datum

A portfolio that behaves like a desktop operating system: draggable windows, a taskbar and live project launches that open inside the interface rather than sending visitors away.

A conventional portfolio tells people what I build; it never lets them feel it. I wanted a surface that proves interaction design and state handling by being the thing it describes.

1. 01Built a simulated OS shell — desktop, icons, taskbar — as composable React components.
2. 02Window components with focus order, minimise/expand and z-index stacking driven by one central store.
3. 03Live project launch: opening an entry boots it in an embedded frame inside a window.
4. 04Kept the whole surface keyboard and touch reachable so the metaphor survives on a phone.

• Desktop-simulated workspace as a portfolio thesis: the interface itself is the proof of craft.
• Window components built as reusable primitives with focus and stacking handled centrally.
• Live project launch simulation lets a visitor open real builds without leaving the site.

• Window stacking and focus needed one authoritative state store rather than per-window state.
• Some hosts block embedding, so the launcher needed a graceful fallback state.
• Translating a desktop metaphor to a 390px screen without it becoming a gimmick.

• →Any multi-window UI is a state-management problem wearing a visual costume.
• →Simulated interfaces need honest fallbacks — a silently failing embed reads as a broken site.
• →Interaction-heavy work is the strongest proof of skill a portfolio can carry.

• React
• TypeScript
• Tailwind CSS
• Window/state store
• Motion
• Embedded live previews

• Visitors explore live work without leaving the portfolio.
• The interface doubles as the interaction-design case study.
• A reusable window system now pulled into client tools.