A fully interactive Operating System-style portfolio hosted on GitHub Pages.
🌐 Live Demo: pravin-python.github.io/Web-OS-Portfolio
A real desktop OS experience in the browser — built with React, TypeScript, Zustand, and TailwindCSS v4. Drag windows, use the terminal, open apps, play games, and explore my work — all without a backend.
- Window Manager — Draggable, resizable, minimizable, maximizable windows with macOS-style traffic light buttons
- Taskbar & Dock — Running apps shown in taskbar with minimize/restore support
- System Tray — Clock, notifications, and quick-access menu
- Right-click Context Menu — Desktop-level actions
- Mobile Support — Responsive layout with mobile orientation guard and popup
| App | Route | Description |
|---|---|---|
 About Me |
/about |
Developer profile — skills, education, experience |
 Contact Center |
/contact |
Email, LinkedIn, GitHub, social links |
 AI Predictor |
/ai-predictor |
ML model-powered interactive predictions |
 AI Research Lab |
/model-logs |
Model experiments and training logs |
 Datasets |
/datasets |
Dataset viewer for ML experiments |
 DSA Lab |
/dsa-lab |
Interactive Data Structures & Algorithms explorer with Python & Java code |
 ML Lab |
/ml-lab |
Machine Learning learning lab — concepts, algorithms, visualizations |
 Security Toolkit |
/security |
URL/phishing detection, hashing, encryption tools |
 Terminal |
/terminal |
Integrated CLI with OS commands (ls, cd, run snake, help, etc.) |
 Files |
/files |
Virtual file system explorer (JSON-based) |
 Notepad |
/notes |
Local notepad with localStorage persistence |
 System Logs |
/system-logs |
Real-time OS event log viewer |
 Neural Snake |
/games/snake |
Cyberpunk snake game with neon visuals |
 TicTacToe AI |
/games/tictactoe |
Minimax algorithm AI opponent |
 Logic Grid 2048 |
/games/2048 |
Classic 2048 sliding puzzle |
 Trash |
/trash |
Trash bin for deleted virtual files |
| Layer | Technology |
|---|---|
| Framework | React 19 + TypeScript |
| Build Tool | Vite |
| State Management | Zustand |
| Styling | TailwindCSS v4 |
| Routing | React Router v7 (BrowserRouter) |
| Window Interactions | react-rnd |
| Icons | Lucide React + Custom SVGs |
| Persistence | localStorage |
| Hosting | GitHub Pages |
URL: https://pravin-python.github.io/Web-OS-Portfolio
This app uses React Router BrowserRouter with clean paths (no #).
A custom public/404.html handles GitHub Pages SPA deep-link redirects, allowing direct URL access to any route like /about or /dsa-lab.
git clone https://github.com/pravin-python/Web-OS-Portfolio.git
cd Web-OS-Portfolionpm installnpm run devApp runs at: http://localhost:5173/Web-OS-Portfolio/
npm run buildGenerates a dist/ folder. Deploy it to GitHub Pages with:
npm run deployRequires
gh-pagesand adeployscript inpackage.json.
src/
├── apps/ # Individual applications (Terminal, Games, DSALab, MLLab, etc.)
├── core/ # OS core (appRegistry, appLauncher, state, device detection)
│ ├── appRegistry.ts # All app definitions & routes
│ ├── appLauncher.ts # App launch logic
│ └── state/ # Zustand stores (windows, notifications, etc.)
├── components/ # Shared UI components (Window, Taskbar, Dock, Tray, etc.)
├── layouts/ # DesktopLayout — wraps all apps in the OS shell
├── router/ # OSRouter — bridges URL changes to window management
├── hooks/ # Custom hooks (useDraggable, etc.)
└── data/ # Static JSON data (filesystem, projects, skills)
public/
├── svg/ # App icons (system/, apps/)
├── 404.html # GitHub Pages SPA redirect handler
├── manifest.json # PWA manifest
└── sitemap.xml # SEO sitemap
This is a 100% frontend-only static application.
- No server, no database, no API calls
- All data served from static JSON files
- State persisted via
localStorage - Deployable on any static host (GitHub Pages, Vercel, Netlify)
Pravin Prajapati — Freelance Full-Stack Developer
Python · Java · AI Agent Development · Web Scraping · PHP eCommerce
MIT License