The latest articles on DEV Community by Mahmudul Ahsan (@mahmudulahsan). https://dev.to/mahmudulahsan https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3374172%2F838b3cfc-8041-463e-8a4f-cb2c083dcbfe.jpg https://dev.to/mahmudulahsan en Mahmudul Ahsan Sat, 06 Dec 2025 15:36:04 +0000 https://dev.to/mahmudulahsan/building-a-nostalgic-windows-xp-portfolio-with-nextjs-16-shadcn-3dcn https://dev.to/mahmudulahsan/building-a-nostalgic-windows-xp-portfolio-with-nextjs-16-shadcn-3dcn <h2> 🖥️ Portfolio in Windows XP with Next.js 16 </h2> <p>Remember the good old days of Windows XP? The iconic blue taskbar, the satisfying "Start" button click, and of course, everyone's favorite assistant - Clippy? Well, I decided to bring that nostalgia back by building my entire portfolio as a Windows XP desktop experience!</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fks8fvbq9vhqvfvyd77n3.png" class="article-body-image-wrapper"><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.amazonaws.com%2Fuploads%2Farticles%2Fks8fvbq9vhqvfvyd77n3.png" alt=" " width="457" height="346"></a></p> <h2> ✨ Features </h2> <ul> <li> <strong>Authentic XP UI</strong>: Pixel-perfect recreation of Windows XP interface</li> <li> <strong>Draggable Windows</strong>: Fully functional window management system</li> <li> <strong>Clippy Assistant</strong>: AI Assistant that answers questions about my skills and experience implemented using gemini-2.0-flash.</li> <li> <strong>Multiple "Applications"</strong>: <ul> <li>📁 My Projects - File explorer style project showcase</li> <li>💼 My Profile - Professional information viewer <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.amazonaws.com%2Fuploads%2Farticles%2F6a1edpilmc8axoi6ucku.png" alt=" " width="581" height="659"> </li> <li>🌐 Internet Explorer - Blog reader</li> <li>📝 Notepad - README viewer</li> <li>⚙️ System Properties - Fun system info</li> </ul> </li> <li> <strong>Theme Switcher</strong>: Classic Blue, Olive Green, and Silver themes</li> <li> <strong>Fully Responsive</strong>: Works on mobile and desktop</li> <li> <strong>SEO Optimized</strong>: Dynamic sitemaps, metadata, and Open Graph tags</li> </ul> <h2> 🛠️ Tech Stack </h2> <ul> <li> <strong>Framework</strong>: Next.js 16</li> <li> <strong>Language</strong>: TypeScript</li> <li> <strong>Styling</strong>: Tailwind CSS v4</li> <li> <strong>UI Components</strong>: Shadcn UI (Radix UI)</li> <li> <strong>Icons</strong>: Lucide React</li> <li> <strong>Interactions</strong>: react-draggable</li> </ul> <h2> 🚀 Try It Yourself! </h2> <p>The project is open source and fully customizable:</p> <ol> <li> <strong>Clone the repo</strong>: </li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>git clone https://github.com/yourusername/windows-xp-portfolio <span class="nb">cd </span>windows-xp-portfolio npm <span class="nb">install</span> </code></pre> </div> <ol> <li><p><strong>Update your data</strong>:<br> Edit files in <code>src/data/</code> folder with your information</p></li> <li><p><strong>Run locally</strong>:<br> </p></li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npm run dev </code></pre> </div> <ol> <li> <strong>Deploy</strong>: </li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npm run build </code></pre> </div> <h2> 📚 Resources &amp; Credits </h2> <ul> <li><a href="https://antigravity.google/" rel="noopener noreferrer">Antigravity</a></li> <li><a href="https://nextjs.org/docs" rel="noopener noreferrer">Next.js Documentation</a></li> <li><a href="https://tailwindcss.com" rel="noopener noreferrer">Tailwind CSS</a></li> <li><a href="https://ui.shadcn.com" rel="noopener noreferrer">Shadcn UI</a></li> <li><a href="https://github.com/react-grid-layout/react-draggable" rel="noopener noreferrer">react-draggable</a></li> </ul> <h2> 🔗 Links </h2> <ul> <li>🌐 <strong>Live Demo</strong>: <a href="https://ahsan-xp.vercel.app/" rel="noopener noreferrer">https://ahsan-xp.vercel.app/</a> </li> <li>💻 <strong>GitHub Repo</strong>: <a href="https://github.com/mahmudulahsan/portfolio-2025" rel="noopener noreferrer">https://github.com/mahmudulahsan/portfolio-2025</a> </li> </ul> <p>If you enjoyed this, feel free to contribute — PRs are always welcome!</p> <h1> NextJS #React #TypeScript #TailwindCSS #Portfolio #Windows </h1> nextjs react webdev portfolio