Welcome to ZPortfolio, a highly interactive, MacOS-inspired personal portfolio designed and developed by Yousef Zedan (ZED Studios). This project isn't just a website; it's a browser-based operating system experience built to showcase creative development skills through draggable windows, a functional file explorer, and high-end animations.
- 🖥️ Desktop OS Experience: A custom window manager handling minimize, maximize, and close actions with focus-based z-index logic.
- 🖱️ Draggable Windows: Fluid, interactive window movements powered by GSAP Draggable.
- 📁 Finder (File Explorer): A fully functional navigation system to browse projects, read text files, and view images.
- 🌊 Animated Dock: A MacOS-style app dock with proximity-based scaling and magnification effects.
- 📄 Integrated PDF Viewer: View and download my professional resume natively within the interface.
- 🎨 Dynamic Typography: Interactive variable font weight adjustments that react to mouse movements.
- ⚡ Optimized State Management: Powered by Zustand and Immer for seamless window and location handling.
- Framework: React 19 & Vite
- Animations: GSAP & GSAP Draggable
- State Management: Zustand (with Immer middleware)
- Styling: Tailwind CSS v4
- Icons: Lucide React & Custom SVGs
- PDF Rendering: React-PDF
Ensure you have Node.js and npm installed on your machine.
-
Clone the repository:
git clone https://github.com/YoussefZidan-1/ZPortfolio.git
-
Navigate to the project directory:
cd zportfolio -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser: Visit
http://localhost:5173to see the magic.
This portfolio is a living project. I’m planning to implement the following features and would love for the community to contribute:
- 🌓 Light / Dark Mode: Implement a full theme-switching mechanism.
- 📱 Mobile iOS Version: Transform the desktop layout into a responsive iOS-inspired experience for mobile users.
- ⌨️ Interactive Terminal: Upgrade the static terminal into a functional CLI that accepts commands like
ls,cd, andcatautocomplete, open apps and more. - Arch Linux Boot Sequence: When The Website opens it shows a looding arch linux screen like GRUB & SDDM.
- System Sounds: Adding subtle sound effects (a mechanical keyboard click for the terminal, a swoosh when a window opens, a crumple sound when something goes to the trash) elevates the "feel" of the OS incredibly.
- Spotlight: implement a spotlight like app for searching apps and calculating.
- Dynamic Island: when expanding Dynamic Island on mobile it should show the Spotify widget.
- Window Snap: like Windows 11 and KDE thing that MacOS will never have.
- Settings: users can change the accent color and the background.
- More Easter Eggs: there aren't enough Easter eggs yet.
src/
├── components/ # UI Components: Dock, Navbar, Welcome text, WindowControls.
├── constants/ # Core Data: Apps, Projects, Tech Stack, Social links.
├── hoc/ # HOCs: WindowWrapper for draggable and focus logic.
├── store/ # Zustand Stores: Window manager and directory state.
├── windows/ # App Windows: Finder, Safari, Photos, Terminal, etc.
├── proximity-engine/ # ZPROXIMITYENGINE source code.
└── App.jsx # Main application registry and layout.
Yousef Zedan (ZED Studios)
Developed with passion by Yousef Zedan (ZED Studios).
"Always building, always learning."
Note: The icons above will take you directly to my profiles. If you want to see the MacOS experience in action, check out the Live Demo.
Distributed under the MIT License. See LICENSE for more information.