Skip to main content

Documentation Index

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

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

Web Surfer uses React Router v6 with hash-based history. Every URL change happens via the fragment identifier (the # portion of the URL), which means the browser never actually requests a new path from the server. This design choice makes the app trivially deployable on any static file host — no server-side routing rules, redirects, or _redirects files are required.

​
How hash routing works

React Router is initialised with a hash history instance (the @remix-run/router createHashHistory factory, exported as part of the bundled Layout.js). All navigation therefore produces URLs of the form: 
https://example.com/#/about
https://example.com/#/skills
https://example.com/#/contact
The server only ever serves one file — index.html — regardless of what follows the #. The React app reads the hash on startup, matches it against the registered routes, and renders the correct page component. Because the hash is a client-side concern, there is no 404 risk from direct visits or refreshes.

​
Available routes

RouteDescription
/Home page — hero section and animated visitor counter
/aboutPersonal biography and introduction
/skillsTech skills showcase
/projectsFeatured projects
/workWork history and experience timeline
/blogBlog posts and writing
/testimonialsTestimonials from colleagues and clients
/contactContact form

​
Static page per route

Each HTML file in the pages/ directory acts as a direct-access entry point for its corresponding route. When a visitor opens pages/About.html directly (e.g. from a file server or GitHub Pages subdirectory), the inline script fires before any JavaScript bundle runs: 
<script>
  window.__STATIC_PAGE_ROUTE__ = "/about";
  if (!window.location.hash || window.location.hash === "#/" || window.location.hash === "#") {
    window.location.hash = "/about";
  }
</script>
This sets the hash to #/about so that when main.js loads and React Router initialises, the hash history already points at the correct route. The window.__STATIC_PAGE_ROUTE__ sentinel can additionally be read by the app for any pre-render logic before the router takes over.

​
Linking between pages

Inside the React app, navigation uses React Router’s <Link> component imported from react-router-dom: 
import { Link } from "react-router-dom";

// Renders as <a href="#/about"> — no full page reload
<Link to="/about">About Me</Link>
For external HTML pages or plain anchor tags that need to deep-link into the app, use the hash-prefixed href directly: 
<!-- Links to the /projects route from outside the React app -->
<a href="/#/projects">See my projects</a>
Hash routing makes deployment completely frictionless. Drop the entire web-surfer/ folder onto GitHub Pages, Netlify, Vercel, an S3 bucket, or any CDN and it works immediately — no rewrite rules needed. Every route is always served by the root index.html, with the hash telling React Router which component to display.

Build docs developers (and LLMs) love

Get started for freeTalk to us