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

🛠️ 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

  1. State Management for Windowing: Orchestrating multiple draggable, resizable windows (handling z-index focus, minimizes, and maximizes) required a clean centralized state model in React.
  2. 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.