A deeply immersive, macOS-inspired web operating system serving as a creative developer portfolio. Built with React, Vite, and Framer Motion, this project features a fully functional window management system, 3D environments, and simulated applications.
- Window Management: Drag, resize (ghost resizing), minimize, maximize, and close windows.
- Global State: Centralized
OSContextmanaging windows, focus, Z-index, and system settings (volume, brightness). - Control Center: Quick access to Wi-Fi, Bluetooth, and audio controls.
- Dynamic Spotlight Search:
Cmd/Ctrl + Kto search and launch apps.
- 🎵 Music (Spotify Clone): Fully functional visualizer, playlist management, tab navigation, and audio state integration.
- 💻 Terminal: Interactive command-line interface with custom commands (
help,ls,cat,whoami). - 👤 About Me: Interactive profile viewer.
- 📂 Projects: Gallery of works.
- ✉️ Contact: Direct communication interface.
- Glassmorphism: Heavy use of backdrop filters and translucency for a premium feel.
- Animations: Smooth transitions powered by
Framer Motion. - 3D Integration: R3F (React Three Fiber) scene background.
- Core: React 18, Vite
- Styling: CSS Modules, Framer Motion (Animations)
- State Management: React Context API
- Icons: React Icons (Fa, Vsc)
- 3D: React Three Fiber (Drei)
- Node.js (v16+)
- npm / yarn
-
Clone the repository
git clone https://github.com/IRSPlays/Portfolio.git cd Portfolio -
Install dependencies
npm install
-
Run Development Server
npm run dev
-
Build for Production
npm run build
src/
├── components/
│ ├── apps/ # Individual Applications (Music, Terminal, etc.)
│ ├── os/ # OS UI (Desktop, Dock, Window, TopBar)
│ └── 3d/ # Three.js Scenes
├── context/ # OSContext (Global State)
├── styles/ # Global & keyframe styles
└── config/ # App metadata and configuration
This is a personal portfolio project, but feel free to fork and experiment with your own "OS" creations!
Developed by Haziq | Creative Developer & UI/UX Enthusiast