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 is a single-page React application deployed as a collection of static files on GitHub Pages. Because GitHub Pages serves files from a CDN with no support for server-side URL rewriting, the project uses React Router v6’s HashRouter — every route lives after a # in the URL so the browser never issues a server request for a path the CDN doesn’t know about. Navigation between pages feels instant and animated, but the underlying mechanism is a simple hash change that React Router intercepts.

​
Why HashRouter

When a user visits https://example.github.io/portfolio/about, a server that isn’t configured for SPAs returns a 404 because there is no about/index.html file. HashRouter sidesteps this entirely: the real URL is always https://example.github.io/portfolio/, and everything after # is client-side state that the browser handles without contacting the server. 
Visited URL                    What the server sees
──────────────────────────────────────────────────
/#/about        →  /  (index.html — always found)
/#/projects     →  /  (index.html — always found)
/#/case-studies →  /  (index.html — always found)
If you ever migrate this project to a host that supports URL rewriting (Netlify, Vercel, Cloudflare Pages), you can swap HashRouter for BrowserRouter and add a catch-all redirect rule without changing any other routing code.

​
Route table

Every path maps one-to-one to a page component. All components are lazy-loaded from the compiled assets/main.js bundle.
PathPage ComponentDescription
/HomeHero intro page with animated tagline
/aboutAboutPersonal bio displayed inside an AquaWindow
/projectsProjectsProject showcase cards with tech stack badges
/skillsSkillsAnimated skill bars and technology badges
/workWorkHistoryTimeline of professional roles
/case-studiesCaseStudiesCD-flip 3D interactive case study cards
/articlesArticlesiTunes-style reading library
/testimonialsTestimonialsFloating avatar quote cards
/contactContactOutlook-style email contact form
*NotFound”This page is taking longer than expected” XP-style error panel

​
Route configuration

The router is configured at the application root. Layout wraps all routes and renders the persistent Taskbar and StartMenu chrome around each page component. 
// Route configuration (from compiled main.js)
<HashRouter>
  <Layout>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/projects" element={<Projects />} />
      <Route path="/skills" element={<Skills />} />
      <Route path="/work" element={<WorkHistory />} />
      <Route path="/case-studies" element={<CaseStudies />} />
      <Route path="/articles" element={<Articles />} />
      <Route path="/testimonials" element={<Testimonials />} />
      <Route path="/contact" element={<Contact />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  </Layout>
</HashRouter>
The wildcard path="*" on NotFound ensures any unrecognised hash fragment renders the XP-style error panel rather than a blank screen.

​
Static page stubs

The pages/ directory contains a set of thin HTML files, one per route, that exist solely to enable direct deep-link access when the portfolio is deployed to GitHub Pages. 
pages/
├── About.html
├── Articles.html
├── CaseStudies.html
├── Contact.html
├── Projects.html
├── Skills.html
├── Testimonials.html
└── Work.html
Each stub loads the same compiled assets as index.html and injects a small inline script that sets window.__STATIC_PAGE_ROUTE__ and, if the browser’s hash is not already pointing at the correct route, programmatically redirects it: 
<!-- pages/About.html — static deep-link stub -->
<script>
  window.__STATIC_PAGE_ROUTE__ = "/about";
  if (
    !window.location.hash ||
    window.location.hash === "#/" ||
    window.location.hash === "#"
  ) {
    window.location.hash = "/about";
  }
</script>
When a visitor lands on https://example.github.io/portfolio/pages/About.html, the stub immediately sets the hash to #/about before React boots. React Router then picks up the hash and renders the About page component as normal. The __STATIC_PAGE_ROUTE__ global is available for any bootstrapping logic that needs to know the intended route before the router has initialised.
This pattern means every page in the portfolio is bookmarkable and shareable as a direct link without any server configuration.

​
Navigation flow

Users navigate the portfolio through two persistent UI elements that are always rendered by Layout.
1

The Taskbar

The Taskbar component sits fixed at the bottom of the viewport. It contains the green XP-style Start button on the left, a clock on the right, and an active-window indicator in the centre that shows the name of the currently active route.
2

The Start Menu

Clicking the Start button toggles the StartMenu overlay. The menu lists all navigable pages as menu items. Selecting an item calls React Router’s navigate() hook to push the new hash route and closes the menu. An AnimatePresence wrapper in StartMenu plays the slide-and-scale exit animation before unmounting.
3

Route transition

Each page component is mounted fresh on navigation. Framer Motion entrance animations (see Animations) play as the new page’s panels fade and slide into view, giving the impression of switching between open windows.

​
404 behaviour

The catch-all NotFound route renders an XP-themed error panel with a large “404” heading and an aqua-glass message card that reads “This page is taking longer than expected (and by longer we mean forever).” The panel includes a Go to Home AquaButton that navigates back to /.

Build docs developers (and LLMs) love

Get started for freeTalk to us