
Tech Stack
Description
This project reimagines the traditional developer portfolio as a fully interactive, browser-based Operating System interface.
By leveraging Next.js, TypeScript, and Three.js, I built an immersive 3D entry experience that transitions into a native-like desktop environment complete with draggable windows and multitasking capabilities.
The core engineering challenge was handling complex UI interactions—such as window focusing depth, app lifecycle management, and seamless theme switching. This was successfully achieved by building a robust state machine using Zustand.
While it includes standard portfolio sections like Projects and Skills, the emphasis is on demonstrating advanced frontend architecture, state management, and DOM performance optimization.
- Architected a browser-based desktop OS simulation featuring draggable and resizable application windows.
- Implemented a robust state machine using Zustand to manage complex UI states, app lifecycles, and window z-indexing.
- Integrated Three.js and React Three Fiber to render an interactive 3D desktop computer model.
- Built authentic OS components including a Start Menu, Taskbar, and a custom right-click Context Menu.
- Embedded traditional portfolio sections seamlessly into the OS ecosystem using Framer Motion for smooth transitions.
Page Info
3D Experience & Boot Sequence
An immersive entry experience featuring a 3D rendered PC and an authentic OS startup animation.


Interactive Desktop Environment
A Windows 11-style desktop complete with a Start Menu, Taskbar, and a custom right-click context menu.


Window Management & Native Apps
Draggable and resizable windows housing simulated applications like VS Code and Appearance settings.


Integrated Portfolio Ecosystem
Traditional portfolio sections gracefully embedded within the OS architecture as native applications.


