Building HarshitOS: A macOS-Inspired Developer Portfolio in React 19

Building HarshitOS: A macOS-Inspired Developer Portfolio in React 19 Most developer portfolios follow a standard recipe: a hero section, an "About Me" paragraph, a grid of project cards, and a contact form. When redesigning my portfolio, I wanted to challenge that template. I wanted my portfolio to feel like real software—an interactive, browser-based operating system inspired by the precision and fluidity of macOS Sonoma and Tahoe. Here is how I built HarshitOS, the technical challenges I solved, and what I learned along the way. 🚀 Live Demo & Source Code Live Portfolio: harshit-tiwari-gamma.vercel.app GitHub Repository: github.com/harshit-tiwari-codebase/macos-dev-portfolio 🛠️ The Tech Stack I chose modern, cutting-edge tools to achieve high frame rates and responsive interactions: React 19 & Vite 8: Lightning-fast HMR and modular component architecture. Tailwind CSS v4: Modern CSS engine for responsive layouts and glassmorphic styling. Framer Motion 12 & GSAP: Smooth spring physics, window transitions, and scroll animations. Lenis: Smooth momentum scrolling for narrative pages. Vercel & Vercel Analytics: Ultra-fast CDN edge hosting and privacy-friendly visitor analytics. 💡 Key Architectural Features 1. The Liquid Glass Dock Recreating the macOS dock in CSS requires more than just backdrop-filter: blur(). I engineered SVG displacement filters (feTurbulence + feDisplacementMap) to simulate realistic light refraction across the dock's glass surface. Calculated smooth proximity magnification physics (scale: 1.25, radius: 95px) based on pointer coordinates. Added bounce animations on app launch and subtle indicator dots for active background tasks. 2. 60 FPS Desktop Widgets The desktop features live, interactive Sonoma-style widgets: Analog Clock: Driven by a requestAnimationFrame render loop with an authentic sweeping orange second hand and multi-timezone cycling (Indore, Cupertino, London, Tokyo). Calendar Widget: Offers real-time date tracking and an interactive monthly agenda view. 3. "My Journey" — The Story Scroller Instead of a bulleted resume, the "My Journey" app launches a full-screen, milestone-based interactive roadmap. It animates through career milestones, technical skills, and design philosophies as the user scrolls. 4. Built-In Apps Ecosystem The desktop includes fully functional simulated macOS applications: Vision Music: A custom in-browser audio player with scrubbing, playlist queue, and sound visualization. Interactive CLI Terminal: A working terminal emulator supporting custom commands (help, projects, contact, clear). Ask Harshit AI: Integrated with the Google Gemini API for answering visitor questions about my experience. GitHub Explorer & Stats: Fetches real-time commit data and repository metrics directly from the GitHub REST API. Blog & Articles: Automatically pulls this DEV.to feed dynamically! 🧠 Lessons Learned State Management for Windowing: Orchestrating multiple draggable, resizable windows (handling z-index focus, minimizes, and maximizes) required a clean centralized state model in React. Performance Optimization: Layering multiple heavy blur filters can hurt GPU performance on mobile devices. Adding graceful fallbacks and CSS will-change properties kept animations buttery-smooth. 🔮 What’s Next? HarshitOS is in active development! Upcoming updates include: More native macOS keyboard shortcuts (Cmd+W, Cmd+M) Dark / Light mode dynamic wallpapers Additional custom terminal games and utilities What do you think? I’d love to hear your feedback on the UI/UX, animations, or performance! Check out the live desktop and drop a comment below.