An immersive, interactive portfolio that replicates the macOS desktop experience —
with draggable windows, a live dock, and real app interfaces built entirely in React.
This portfolio was engineered to stand apart. Rather than a standard scrollable page, it reconstructs the macOS desktop operating system in the browser — complete with a physics-based dock, multiple draggable windows with Z-index stacking, and distinct application modules. Every interaction is intentionally designed to feel native and responsive.
## Application Suite
| Icon | App | Role |
|---|---|---|
| 📂 | Finder | File-explorer interface for browsing projects, reading descriptions, and opening GitHub repositories |
| 📸 | Photos | Apple Photos-style gallery grid for visual work and design showcases |
| 🧭 | Safari | In-window browser UI for displaying technical articles and blog posts |
| ⌨️ | Terminal | CLI-style panel rendering the complete tech stack in console format |
| 📬 | Contact | Structured social directory linking to GitHub, LinkedIn, Twitter/X, and Email |
| 📄 | Resume | Native PDF viewer opening the CV directly inside the window system |
Window Management — Every window is registered in a centralized Zustand store. open, close, and focusWindow actions manage Z-index stacking in real time, so clicking any window always brings it to the front — just like a real OS.
Dock Magnification — A custom GSAP mouse-proximity algorithm calculates the distance between the cursor and each dock icon on every frame. An exponential decay function is applied to produce a natural, smooth magnification effect without layout thrashing.
Variable Font Hero — The landing text uses a CSS variable font with fontVariationSettings driven by GSAP. As you hover across the letters, each character interpolates its font weight individually, simulating a fluid wave effect.
Higher-Order Window Component — WindowWrapper.jsx is a HOC that injects Draggable, GSAP mount animations, and focus handlers into any component automatically, keeping all window modules clean and focused on their content.
# 1. Clone the repository
git clone https://github.com/Mohamed-Alkafory/MacOS_Portfolio.git
# 2. Install dependencies
npm install
# 3. Start the development server
npm run devOpen http://localhost:5173 — best experienced on a desktop or tablet display.
src/
├── components/ # Dock, Navbar, Welcome, WindowControls
├── hoc/ # WindowWrapper — Draggable + animation injector
├── store/ # window.js · location.js (Zustand slices)
├── windows/ # Finder · Photos · Safari · Terminal · Contact · Resume
├── constants/ # All static data — projects, socials, gallery, locations
└── App.jsx # Root compositor
Designed & built by Mohamed Alkafory