RetroWin is an open-source personal portfolio template that recreates the look, feel, and interactivity of a Windows 98 desktop — entirely in the browser. Built on React 18, Framer Motion, and Tailwind CSS with a custom Win98 color palette, it gives developers a nostalgic yet fully modern foundation for showcasing their work. Each portfolio section (/about, /projects, /skills, /contact) opens as a draggable window on a teal desktop, complete with a functional Start menu, animated CRT overlay, hit counter, and marquee ticker. If you want a portfolio that stands out from the crowd of plain dark-mode SPAs, RetroWin is your starting point.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/retrowin/llms.txt
Use this file to discover all available pages before exploring further.
Key Features
Draggable Windows
Every page renders inside a
RetroWindow component powered by Framer Motion’s motion.div with the drag prop. Windows can be dragged by their title bar and maximized to fill the viewport — just like the real thing. The minimize button (_) is decorative (visual parity with Win98) and does not collapse the window.Authentic Win98 Styling
A Tailwind CSS theme extends the default palette with
win-teal, win-navy, win-silver, win-gray, win-cyan, win-pink, and win-light. Utility classes .win98-outset, .win98-inset, and .win98-btn reproduce the classic beveled-border UI throughout.Functional Start Menu
The
Taskbar component renders a sticky bottom bar with a working Start button. Clicking it opens a pop-up menu with color-coded navigation links to every page, styled with the iconic vertical Windows 98 sidebar banner.Retro Desktop Extras
Double-clickable
DesktopIcon components sit on the teal wallpaper. A CRTOverlay adds a scanline shader, a HitCounter counts visits, a Marquee scrolls text, and a Webring component completes the late-90s aesthetic.Hash-Based Routing
React Router v6 uses
HashRouter instead of BrowserRouter, so the app deploys to GitHub Pages without any server-side redirect configuration. All four portfolio routes work correctly from a static file host.Pixel-Perfect Fonts
Four Google Fonts are loaded and exposed as Tailwind utilities:
font-pixel (Pixelify Sans), font-vt323 (VT323), font-mono (IBM Plex Mono), and font-sans (Inter) — covering everything from dialog titles to code snippets.Tech Stack
| Package | Purpose | Notes |
|---|---|---|
| React 18 | UI rendering | Concurrent rendering with createRoot |
| React Router v6 | Client-side routing | Hash router for GitHub Pages |
| Framer Motion | Draggable windows | motion.div with drag prop |
| Tailwind CSS | Utility styling | Custom Win98 color palette |
| Vite | Build tool | Fast HMR dev server and optimized production bundle |
Project Structure
The compiled distribution ships as a set of ES module chunks loaded fromindex.html. All reusable UI components live under components/y2k/:
RetroWin uses React Router’s
HashRouter (routes like /#/about instead of /about). This is intentional — GitHub Pages serves static files and cannot rewrite arbitrary paths to index.html. Hash-based URLs require zero server configuration and work out of the box on any static host, including GitHub Pages, Netlify, and Vercel’s static output.