MacOS PORTFOLIO
A highly interactive, web-based operating system simulation that meticulously replicates the MacOS desktop experience to showcase technical projects and engineering capabilities.
The Challenge
- Engineering a centralized Z-index management system to handle complex window stacking and focus states without triggering global React re-renders.
- Maintaining strict 60fps animations for draggable, resizable window components while avoiding virtual DOM reconciliation bottlenecks.
- Replicating native operating system micro-interactions (dock scaling, window snapping) inside a browser environment.
Key Learnings
- Mastered hardware-accelerated animations and physics-based dragging utilities using GSAP (GreenSock Animation Platform).
- Deepened expertise in atomic state management utilizing Zustand and Immer for immutable, high-performance UI updates.
- Gained advanced knowledge of React component lifecycle optimization for complex Single Page Applications.
The Creative Engineering Challenge
Traditional grid-based portfolios effectively list projects, but they often fail to demonstrate a developer's actual capability to build complex, state-heavy user interfaces.
To bridge the gap between a static resume and a live technical demonstration, this portfolio was architected to fully simulate a native operating system within the browser. By replicating the MacOS desktop metaphor, the application instantly proves mastery over advanced frontend concepts: complex state machines, overlapping stacking contexts, hardware-accelerated animations, and responsive micro-interactions.
Core System Capabilities
The portfolio functions as a self-contained web OS, featuring modular "applications" that house different aspects of my professional profile:
- Draggable Window Engine: Fully independent, floating application windows that can be dragged, minimized, maximized, and stacked just like a native OS.
- Finder (Project System): A hierarchical file explorer showcasing flagship engineering projects like SELECTRA, DijkstraFlow, and Caffiend.
- Terminal (Skill Execution): A simulated command-line interface that outputs technical proficiencies and development environments.
- Dynamic Theming & Dock: An interactive, physics-based application dock with instant dark/light mode system tray toggles.
State Management & Window Architecture
Managing a desktop environment in React requires stepping outside standard parent-child data flows. If every window drag triggered a React re-render, the application would immediately drop frames.
To solve this, the application decouples UI rendering from global state using Zustand and Immer.
Atomic Z-Index Layering System
Managing stacking contexts for multiple overlapping windows requires a specialized state machine. The Zustand store maintains a centralized registry of window focus hierarchies. When a user interacts with a background window, the store instantly mutates the active window to the highest Z-index order via a custom useWindow() hook, bypassing the React component tree to prevent unnecessary reconciliations.
Animation & Rendering Engine (GSAP)
Achieving the fluidity of a native operating system relies heavily on bypassing standard CSS transitions in favor of JavaScript-driven animation loops.
- Physics-Based Dragging: Utilizes GSAP's
Draggableutility to bind window coordinates directly to the DOM node'stransform: translate3d()property, ensuring the GPU handles the movement rather than the CPU recalculating layout paints. - Dock Magnification: The bottom navigation dock calculates mouse proximity in real-time, applying a localized scaling matrix to nearby application icons to perfectly mimic the iconic MacOS hover effect.
- Hardware Acceleration: All window opening/closing sequences use
scaleandopacitytransforms combined with React Spring, ensuring a locked 60fps experience even on mobile devices.
Component Topology & File Structure
The monorepo is meticulously structured to separate the operating system logic (window controllers, dock) from the individual applications (Finder, Safari, Terminal).
src/
├── components/ # Core OS UI Shell
│ ├── Dock.jsx # Proximity-scaled navigation dock
│ ├── Navbar.jsx # Global system tray and clock
│ └── WindowControls.jsx # Traffic light window management (close, minimize, expand)
├── windows/ # Application Payloads
│ ├── Finder.jsx # Interactive project grid
│ ├── Safari.jsx # Technical blog and article viewer
│ ├── Terminal.jsx # CLI-style skills representation
│ └── Resume.jsx # Integrated React-PDF viewer
├── store/ # Zustand Global State
│ ├── window.js # Z-index, active state, and dimensional data
│ └── theme.js # Persistent dark/light mode preferences
└── hoc/ # Higher-Order Components
└── WindowWrapper.jsx # Injects GSAP drag logic into any child component
Performance Optimization
Building an OS in the browser is resource-intensive. The application strictly adheres to performance best practices to ensure fast First Contentful Paint (FCP) and Time to Interactive (TTI):
- Lazy Loading Applications: Heavy dependencies, such as the
react-pdfrenderer inside the Resume app, are code-split and only loaded over the network when the user clicks the application icon. - Event Delegation: Instead of binding hundreds of hover and drag listeners, event delegation is handled at the
WindowWrapperroot to minimize memory consumption. - Concurrent Rendering: Built on React 19, the application leverages concurrent features to yield main-thread execution during heavy DOM manipulations, keeping the UI responsive.