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