Operating System Portfolio

Web Dev
Frontend
UI/UX
Operating System Portfolio

Tech Stack

Next.js
React
TypeScript
Tailwind CSS
Zustand
Framer Motion
Three.js

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.

/projects/osportfolio/pc-in-the-space.png/projects/osportfolio/os-startup.png

Interactive Desktop Environment

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

/projects/osportfolio/descktop-and-right-click-menu.png/projects/osportfolio/start-menu-overview.png

Window Management & Native Apps

Draggable and resizable windows housing simulated applications like VS Code and Appearance settings.

/projects/osportfolio/vscode-app.png/projects/osportfolio/appearance-app.png

Integrated Portfolio Ecosystem

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

/projects/osportfolio/portfolio-start.png/projects/osportfolio/projects-section.png/projects/osportfolio/skills-section.png

    Mohammad Abdulhakim - Software Engineer | Aspiring AI Engineer