Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/windows-98/llms.txt

Use this file to discover all available pages before exploring further.

Windows 98 Portfolio uses React Router’s HashRouter to handle all in-app navigation entirely inside the browser. Because the app is deployed as a collection of static files on GitHub Pages, there is no server that can intercept a request for /about and return the right HTML. Hash URLs solve this: the browser only ever requests the origin (/), and everything after the # is handled exclusively by JavaScript running on the client.

​
Why hash routing?

When a user navigates directly to https://example.github.io/windows-98/#/about, the browser sends a request only for the root path /. The fragment (#/about) is never transmitted to the server. Once index.html loads and React boots up, HashRouter reads window.location.hash and renders the matching <Route>. No 404, no server rewrite rules, no _redirects file needed. A BrowserRouter approach (/about with no hash) would cause GitHub Pages to return a 404 for any URL except the root, because there is no server-side rule to rewrite all paths back to index.html.

​
Route table

Hash pathPage componentWindow title
/#/Desktop (icons only)—
/#/aboutAbout pageInstant Message - About Moi
/#/projectsProjects explorerC:\My Documents\Stuff I Built
/#/skillsSkills terminalMS-DOS Prompt
/#/workWork history* Where I’ve Been *
/#/case-studiesCase studyDeep Dives - Netscape Navigator
/#/blogBlogMy Webrings & Writings
/#/contactGuestbookSign My Guestbook
/#/testimonialsTestimonialsKind Words From Strangers

​
Route registration

All routes are defined in a single block inside App and wrapped with the HashRouter provider. Each path maps to a component that renders the full page experience — typically a Win98Window wrapping the page’s content. 
// Route definitions inside HashRouter
<Route path="/" element={null} />
<Route path="/about" element={<AboutPage />} />
<Route path="/projects" element={<ProjectsPage />} />
<Route path="/skills" element={<SkillsPage />} />
<Route path="/work" element={<WorkPage />} />
<Route path="/case-studies" element={<CaseStudiesPage />} />
<Route path="/blog" element={<BlogPage />} />
<Route path="/contact" element={<ContactPage />} />
<Route path="/testimonials" element={<TestimonialsPage />} />
The root path (/) renders null for the route element — the desktop icons and taskbar are always mounted in the App shell above the route outlet, so the desktop is always visible regardless of which route is active.

​
The __STATIC_PAGE_ROUTE__ pattern

Each file under pages/ is a standalone HTML shell (e.g. pages/About.html) that exists so users can bookmark or share direct links to a specific page. When the browser opens one of these pages, a small inline script runs before React loads: 
<script>
  window.__STATIC_PAGE_ROUTE__ = "/about";
  if (!window.location.hash || window.location.hash === "#/" || window.location.hash === "#") {
    window.location.hash = "/about";
  }
</script>
This script does two things:
  1. Sets window.__STATIC_PAGE_ROUTE__ — React can read this value on startup to know which route was originally intended, regardless of the current hash state.
  2. Redirects the hash — if the hash is empty or points to the root, it is immediately rewritten to the correct route hash (e.g. #/about). React Router then picks this up and renders the right content.
Every pages/*.html file follows this same pattern with its own route value — for example, pages/Desktop.html sets window.__STATIC_PAGE_ROUTE__ = "/desktop". This means deep-linking to any pages shell behaves identically to navigating to that hash path in the main app. Clicking a desktop icon or a Start menu item calls useNavigate(path) from React Router, which updates window.location.hash to the new route. HashRouter detects the change and re-renders the matching <Route> element. Every page component calls useNavigate and passes onClose={() => navigate('/')} to its Win98Window. Closing any window navigates back to the root hash (/#/), dismissing the window and returning the user to the desktop icon view. 
// Pattern used in every page component
const navigate = useNavigate();

return (
  <Win98Window
    title="About Moi"
    onClose={() => navigate('/')}
    // ...
  >
    {/* page content */}
  </Win98Window>
);
The pages/*.html shells are optional entry points for external links. All normal in-app navigation uses the hash router directly and never touches those files.

Build docs developers (and LLMs) love

Get started for freeTalk to us