The latest articles on DEV Community by kuldeep rajput (@kuldeeprajput-dev). https://dev.to/kuldeeprajput-dev 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%2F3982313%2F5e357a6f-8adc-43d6-b0d2-e47d30b2f28e.jpg https://dev.to/kuldeeprajput-dev en kuldeep rajput Sat, 11 Jul 2026 12:52:57 +0000 https://dev.to/kuldeeprajput-dev/i-built-an-open-source-macos-inspired-portfolio-with-nextjs-298l https://dev.to/kuldeeprajput-dev/i-built-an-open-source-macos-inspired-portfolio-with-nextjs-298l <div class="table-wrapper-paragraph"><table> <thead> <tr> <th></th> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fez5n54ogtpeqrnkxqk8o.png" alt="Mobile View 1" width="441" height="789"></td> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fu4k659g8oql23ikp7jj4.png" alt="Mobile View 2" width="800" height="1421"></td> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fzyc7qtrymbtauhm6jo2j.png" alt="Mobile View 3" width="800" height="1421"></td> </tr> </tbody> </table></div> <p>Most developer portfolios follow the same structure:</p> <p>About → Skills → Projects → Contact</p> <p>I wanted to try something different.</p> <p>Instead of building another traditional portfolio, I created a <strong>macOS-inspired interactive experience</strong> where visitors can explore my work through apps, windows, animations, and desktop-like interactions.</p> <h2> What I wanted to build </h2> <p>My goal was to make the portfolio feel less like a static website and more like an actual operating system.</p> <p>Visitors can interact with different parts of the portfolio instead of only scrolling through sections.</p> <p>The project includes:</p> <ul> <li>macOS-inspired desktop interface</li> <li>Interactive app-like experiences</li> <li>Smooth window animations</li> <li>Responsive layouts for desktop, tablet, and mobile</li> <li>Clean and familiar macOS-style UI</li> <li>Open-source code for learning and contributions</li> </ul> <h2> Fully responsive </h2> <p>One of the biggest challenges was making a desktop-inspired experience work properly on smaller devices.</p> <p>Desktop interfaces usually depend on large screens, draggable windows, docks, and multiple applications.</p> <p>For mobile devices, I had to rethink the layout and interactions instead of simply shrinking the desktop version.</p> <p>The result is a responsive experience that adapts across:</p> <ul> <li>Desktop</li> <li>Tablet</li> <li>Mobile</li> </ul> <h2> Built with </h2> <p>The project uses modern frontend tools, including:</p> <ul> <li>React</li> <li>TypeScript</li> <li>Tailwind CSS</li> <li>GSAP</li> <li>Zustand</li> </ul> <p>I focused on keeping the UI smooth while managing multiple interactive components and application states.</p> <h2> Open source </h2> <p>The complete project is open source.</p> <p>You can:</p> <ul> <li>Explore the code</li> <li>Learn from the implementation</li> <li>Report bugs</li> <li>Suggest improvements</li> <li>Contribute new apps or features</li> </ul> <p>🌐 <strong>Live Demo</strong></p> <p><a href="https://macos-kuldeeprajput.vercel.app" rel="noopener noreferrer">https://macos-kuldeeprajput.vercel.app</a></p> <p>💻 <strong>Source Code</strong></p> <p><a href="https://github.com/kuldeeprajput-dev/macos-portfolio" rel="noopener noreferrer">https://github.com/kuldeeprajput-dev/macos-portfolio</a></p> <p>The project is still evolving, and I plan to keep improving the performance, UI, applications, and overall experience.</p> <p>I would genuinely appreciate feedback from the DEV Community.</p> webdev nextjs opensource frontend