DEV Community

Cover image for Building a Nostalgic Windows XP Portfolio with Next.js 16 & Shadcn
Mahmudul Ahsan
Mahmudul Ahsan

Posted on

Building a Nostalgic Windows XP Portfolio with Next.js 16 & Shadcn

#nextjs #react #webdev #portfolio

🖥️ Portfolio in Windows XP with Next.js 16

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!

✨ Features

  • Authentic XP UI: Pixel-perfect recreation of Windows XP interface
  • Draggable Windows: Fully functional window management system
  • Clippy Assistant: AI Assistant that answers questions about my skills and experience implemented using gemini-2.0-flash.
  • Multiple "Applications":
    • 📁 My Projects - File explorer style project showcase
    • 💼 My Profile - Professional information viewer
    • 🌐 Internet Explorer - Blog reader
    • 📝 Notepad - README viewer
    • ⚙️ System Properties - Fun system info
  • Theme Switcher: Classic Blue, Olive Green, and Silver themes
  • Fully Responsive: Works on mobile and desktop
  • SEO Optimized: Dynamic sitemaps, metadata, and Open Graph tags

🛠️ Tech Stack

  • Framework: Next.js 16
  • Language: TypeScript
  • Styling: Tailwind CSS v4
  • UI Components: Shadcn UI (Radix UI)
  • Icons: Lucide React
  • Interactions: react-draggable

🚀 Try It Yourself!

The project is open source and fully customizable:

  1. Clone the repo: 
git clone https://github.com/yourusername/windows-xp-portfolio
cd windows-xp-portfolio
npm install
Enter fullscreen mode Exit fullscreen mode

  1. Update your data:
    Edit files in src/data/ folder with your information

  2. Run locally:

npm run dev
Enter fullscreen mode Exit fullscreen mode
  1. Deploy: 
npm run build
Enter fullscreen mode Exit fullscreen mode

📚 Resources & Credits

🔗 Links

If you enjoyed this, feel free to contribute — PRs are always welcome!

NextJS #React #TypeScript #TailwindCSS #Portfolio #Windows

Top comments (2)

Collapse
 
homayounmmdy profile image
Homayoun Mohammadi •

Beautiful work! Have you considered creating a Linux version for Fedora? Given the current popularity of Windows executables like this, a Fedora build could attract even more attention. If you're interested, I'd be happy to collaborate on building it together.

Collapse
 
mahmudulahsan profile image
Mahmudul Ahsan •

Thank you so much for the appreciation and interest. I'll definitely contact you if I am interested in the future.