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