Skip to main content

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.

The Windows XP Developer Portfolio repository ships as a pre-compiled, deployment-ready static site rather than raw source code. What you clone is effectively the Vite build output — optimised JavaScript and CSS bundles alongside pre-compiled ES module components — formatted so it can be pushed directly to GitHub Pages and served without a build step on the host. Understanding this distinction is the key to navigating the file layout confidently.

​
File tree

windows-xp-developer/
├── index.html              # App entry — loads assets/main.js
├── assets/
│   ├── main.js             # Compiled app bundle (React + all pages)
│   ├── main.css            # Tailwind output + custom aqua classes
│   ├── proxy.js            # React & Framer Motion re-exports
│   └── createLucideIcon.js # Lucide icon factory
├── components/
│   ├── AquaButton.js       # Glossy button component
│   ├── AquaWindow.js       # XP-style window chrome component
│   ├── AquaPanel.js        # Glassmorphism panel component
│   ├── Layout.js           # Page wrapper (Taskbar + background)
│   ├── Taskbar.js          # Fixed bottom taskbar
│   ├── StartMenu.js        # Start Menu overlay + React Router
│   └── Bubbles.js          # Animated floating bubbles background
├── pages/
│   ├── About.html
│   ├── Articles.html
│   ├── CaseStudies.html
│   ├── Contact.html
│   ├── Projects.html
│   ├── Skills.html
│   ├── Testimonials.html
│   └── Work.html
└── .nojekyll               # Required for GitHub Pages

​
Directory breakdown

​
index.html — application shell

The single HTML file that every route resolves to. It mounts a <div id="root"> for React, loads assets/main.css for styles, and boots the application by importing assets/main.js as an ES module. It also pre-loads every component module via <link rel="modulepreload"> so the browser fetches them in parallel rather than sequentially. 
<script type="module" crossorigin src="./assets/main.js"></script>
<link rel="modulepreload" crossorigin href="./assets/proxy.js">
<link rel="modulepreload" crossorigin href="./assets/createLucideIcon.js">
<link rel="modulepreload" crossorigin href="./components/StartMenu.js">
<link rel="modulepreload" crossorigin href="./components/Bubbles.js">
<link rel="modulepreload" crossorigin href="./components/Taskbar.js">
<link rel="modulepreload" crossorigin href="./components/Layout.js">
<link rel="modulepreload" crossorigin href="./components/AquaButton.js">
<link rel="modulepreload" crossorigin href="./components/AquaWindow.js">
<link rel="modulepreload" crossorigin href="./components/AquaPanel.js">
<link rel="stylesheet" crossorigin href="./assets/main.css">

​
assets/ — compiled bundles

FileRole
main.jsThe primary application bundle. Contains the React app bootstrap, HashRouter setup, all nine page components, and the inline content data (projects, skills, etc.) compiled from the original JSX source.
main.cssTailwind CSS purged output plus the hand-written Aqua utility classes (aqua-glass, xp-titlebar, lens-flare, etc.).
proxy.jsA thin re-export shim that exposes React and Framer Motion under short internal identifiers so the component modules can import them without bundling duplicate copies.
createLucideIcon.jsThe Lucide icon factory function, split into its own chunk so it can be shared across components that render icons without code duplication.

​
components/ — pre-compiled ES modules

Each file in this directory is an ES module produced by Vite’s code-splitting output. They export named React components that main.js imports at startup.
  • AquaButton.js — Glossy pill button with a specular highlight pseudo-element, Framer Motion whileHover and whileTap states, and the aqua-button-base base class.
  • AquaWindow.js — XP window chrome: gradient title bar (xp-titlebar), draggable header, and slotted children for page body content.
  • AquaPanel.js — Glassmorphism information panel using aqua-glass and aqua-glass-heavy for varying opacity levels.
  • Layout.js — Top-level page wrapper that renders the animated frutiger-bg desktop background, mounts the floating Bubbles layer, and places the Taskbar at the bottom of the viewport.
  • Taskbar.js — The fixed bottom bar: clock, system tray icons, active window buttons, and the Start button that toggles StartMenu.
  • StartMenu.js — The Start Menu overlay. Imports from React Router (useNavigate) to programmatically navigate between the nine portfolio pages when a menu item is clicked.
  • Bubbles.js — Animation layer that renders the floating translucent bubbles characteristic of the Frutiger Aero aesthetic.

​
pages/ — static HTML stubs

These .html files are lightweight stubs, one per route, that exist solely to give each portfolio section a discrete URL on GitHub Pages. The actual page content is rendered by the React components inside main.js; these files are not full standalone pages.

​
.nojekyll

An empty marker file that tells GitHub Pages to serve the repository as plain static files rather than processing it through Jekyll. Without this file, directories and files whose names begin with _ (and some Vite output conventions) would be silently ignored by the GitHub Pages build pipeline.

​
Key architectural decisions

​
HashRouter for GitHub Pages compatibility

React Router’s HashRouter prepends # to every route (/#/about, /#/projects). Because the fragment identifier is never sent to the server, GitHub Pages always serves index.html for every navigation — no 404 pages, no _redirects file, no custom domain configuration required. 
// Conceptual structure inside assets/main.js
import { HashRouter, Routes, Route } from "react-router-dom";

<HashRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
    <Route path="/projects" element={<Projects />} />
    {/* … */}
  </Routes>
</HashRouter>

​
All page components colocated in assets/main.js

Rather than splitting each page into a separate lazy-loaded chunk, the Vite build collocates all nine page components into the single main.js bundle. For a portfolio site of this size the trade-off is favourable: one network request loads every route instantly, and there are no loading spinners between page transitions.

​
Components as pre-compiled ES modules with named exports

Each file in components/ is a standalone ES module with named exports, separated from main.js by Vite’s chunk-splitting logic. This means the browser caches them independently — a re-deploy that only changes page content regenerates main.js but leaves the component files unchanged, so return visitors skip re-downloading them.

​
Tailwind CSS purged and compiled to assets/main.css

The stylesheet is the result of Tailwind’s PurgeCSS pass over the compiled JSX, retaining only the classes actually used plus the custom aqua-*, xp-*, frutiger-*, vista-*, and lens-flare hand-authored rules. This keeps the CSS payload small while preserving the full Aqua visual language.
The original Vite source project would have a src/ directory containing JSX files, a tailwind.config.js, and a vite.config.js. This repository ships the compiled output directly, so those source files are not present. If you want to extend the design system or add new pages, reconstruct the source project and re-run npm run build.

Build docs developers (and LLMs) love

Get started for freeTalk to us