Windows XP Developer Portfolio is a single-page application that wraps a personal developer portfolio inside a faithfully recreated Windows XP desktop shell. Every interaction — opening a window, navigating between pages, hovering a button — is animated with the glossy, translucent look of the early 2000s Aqua / Frutiger Aero design era. Built with React, Vite, React Router v6, Framer Motion, and Tailwind CSS, the project pairs a modern front-end stack with a deliberately retro visual identity, letting developers present their work in a way that is immediately memorable.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/windows-xp-developer/llms.txt
Use this file to discover all available pages before exploring further.
What it includes
The portfolio surfaces nine content pages — Home, About, Projects, Skills, Work History, Case Studies, Articles, Testimonials, and Contact — each rendered inside a simulated window frame. Navigation is handled entirely through a pixel-accurate Taskbar fixed to the bottom of the screen and a Start Menu overlay that lists every page as a menu item, mimicking the Windows XP experience while routing under the hood with React Router v6.Core technology stack
| Layer | Technology |
|---|---|
| UI framework | React 18 |
| Build tool | Vite |
| Routing | React Router v6 (HashRouter) |
| Animation | Framer Motion |
| Styling | Tailwind CSS + custom CSS |
Custom Aqua component library
Three hand-crafted components form the visual backbone of every page:AquaButton— a glossy, pill-shaped button with a specular highlight layer and Framer Motion press/hover states.AquaWindow— an XP-style window frame with a gradient title bar (xp-titlebar), minimize/maximize/close chrome, and a drop-shadow.AquaPanel— a glassmorphism information panel built on theaqua-glassutility class family.
Custom CSS utility classes
The stylesheet (assets/main.css) ships a set of purpose-built classes that cannot be expressed with stock Tailwind alone:
| Class | Purpose |
|---|---|
aqua-glass | Frosted-glass backdrop with subtle border |
aqua-glass-heavy | Higher-opacity variant for modal surfaces |
aqua-button-base | Base geometry and transition for Aqua buttons |
xp-titlebar | Linear-gradient title bar matching XP Luna theme |
frutiger-bg | Sky-blue gradient desktop background |
vista-gadget | Sidebar widget container with rounded chrome |
lens-flare | Pseudo-element overlay that adds an Aqua specular highlight |
Routing and deployment
The project usesHashRouter from React Router v6, which appends #/route to the URL instead of requiring server-side path rewriting. This means the compiled output can be pushed directly to a GitHub Pages branch and every deep link will resolve correctly without any server configuration.
Quickstart
Clone the repo, install dependencies, and have the portfolio running locally in under five minutes.
Project Structure
Understand every directory and file in the built output and why they are organised the way they are.
Aqua Design System
Deep dive into the CSS utility classes and design tokens that recreate the Frutiger Aero aesthetic.
AquaButton
API reference and usage examples for the core interactive component in the Aqua library.