A fully interactive, macOS Sonoma/Sequoia-inspired web portfolio built with zero frameworks — just vanilla HTML5, CSS3, and JavaScript. It reimagines the traditional resume as a fully functional desktop operating system you can explore in the browser.
Live Demo: coming soon
Boot into a desktop environment, open draggable windows, use a real terminal, search with Spotlight, and explore projects through immersive case studies.
- Draggable windows with momentum physics and snap behavior
- Minimize / maximize / close with smooth macOS-style animations
- Desktop icons with right-click context menus
- Menu bar with functional dropdowns (File, Edit, View, PranavOS)
- Toast notification system
- Keyboard shortcuts (⌘W, ⌘T, ⌘K, ⌘⌥D, and more)
- 6 dynamic wallpapers (Sequoia, Sonoma, Ventura, Ocean, Purple, Sunset)
- Gaussian-distribution magnification algorithm matching Apple's exact behavior
- 140px influence radius with 2.2× max scale and spring-based vertical lift
- Bounce animations on launch, active app indicators, 60fps via
requestAnimationFrame
- 28+ functional commands (
neofetch,ls,cd,cat,tree,help,matrix, and more) - Virtual filesystem with full directory navigation
- Tab completion with ghost-text auto-suggest
- Command history navigation (↑ / ↓)
- 6 switchable color themes (Dracula, Ayu Dark, Tokyo Night, Monokai, Nord, Solarized)
- Matrix rain easter egg, animated boot sequence with progress bars
- Real HTML5 audio playback across 5 curated tracks
- Play / pause / skip controls, seekable progress bar, volume slider
- Spinning vinyl animation, auto-advance, live time display
- Glassmorphism Sonoma-style panel
- WiFi / Bluetooth / AirDrop toggle widgets
- Stage Manager, Do Not Disturb, screenshot flash, screensaver overlay
- ⌘K shortcut, fuzzy-match algorithm, keyboard navigation, instant results
| Project | Description |
|---|---|
| Explainable Vision System | Grad-CAM medical imaging with interpretability overlays |
| Trustworthy ML Pipeline | Blockchain-anchored audit trails for ML model governance |
| Real-Time Detection API | High-throughput inference server written in Rust |
| Neural Style Transfer | WebGL-accelerated style transfer running entirely in the browser |
| Layer | Technology |
|---|---|
| Markup | HTML5 (semantic, accessible) |
| Styling | CSS3 — Grid, Flexbox, Custom Properties, backdrop-filter |
| Logic | Vanilla JavaScript ES6+ — no frameworks, no libraries |
| Web APIs | Audio API, Canvas API, Intersection Observer |
| Fonts | Inter (300–800), JetBrains Mono (400–500) via Google Fonts |
| Build | None — open index.html directly or serve with any static server |
- 16 semantic color tokens based on Apple's system palette
- 6 material tiers of glassmorphism (ultra-thin → ultra-thick)
- 5 blur levels (20px–80px) with 180–200% saturation boost
- Apple's exact easing curves and timing standards (100ms–500ms)
- Multi-layer shadow system for elevation-based depth
No build step needed.
# Clone
git clone https://github.com/Pranav-error/portfolio.git
cd portfolio
# Option 1 — Python
python3 -m http.server 8080
# Option 2 — Node
npx serve .Then open http://localhost:8080 in your browser.
Want to fork this and make it yours? Here's exactly what to change:
# Fork via GitHub UI, then:
git clone https://github.com/<your-username>/portfolio.git
cd portfolioOpen index.html and search for Pranav — replace every occurrence with your name. The menu bar title, desktop label, and about window all pull from there.
In script.js, find the neofetch command output (search for neofetch) and update the name, role, and stats block to match your background.
In script.js, search for project-data or the project window content and replace the four case studies with your own. Each project entry has:
- Title — the window heading
- Description — one-line summary
- Tags — tech stack chips
- Metrics — key numbers / stats
- Body — rich HTML content shown inside the window
In terminal.js, search for virtualFS — this is the fake directory tree the terminal navigates. Edit the files and folders to reflect your own skills, experience, and contact info.
Replace the audio files referenced in index.html under the music player section with your own tracks (MP3/OGG). Update the track titles and artist names in the same block.
Drop your own wallpaper-*.png files into the root folder (1920×1080 recommended) and update the wallpaper list in script.js (search for wallpapers).
| Platform | Command |
|---|---|
| GitHub Pages | Push to main, enable Pages in repo settings → source: / (root) |
| Vercel | npx vercel in the project folder |
| Netlify | Drag the folder onto netlify.com/drop |
portfolio/
├── index.html # Desktop interface
├── terminal.html # Full-screen terminal
├── script.js # Desktop engine (windows, dock, search, control center)
├── terminal.js # Terminal emulator (commands, virtual FS, themes)
├── style.css # Design system, animations, layout
├── icons/ # App icons (.png / .icns)
└── wallpaper-*.png # 6 bundled wallpapers
- 95+ Lighthouse score target
- 60fps animations via hardware-accelerated CSS transforms
- Minimal DOM reflows — batch reads/writes, no layout thrashing
- Respects
prefers-reduced-motionfor accessibility
Only ~3% of developers build complex, interactive UIs without a framework. The absence of dependencies is the point — it demonstrates that the fundamentals are fully understood, not abstracted away.
MIT