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 ships as a fully pre-built Vite output. There is no raw JSX source tree to compile — the repository contains the bundled React application, compiled Tailwind CSS, and standalone HTML entry points that together form the complete deployable site.

​
Repository layout

web-surfer/
├── index.html              # App entry point
├── assets/
│   ├── main.js             # Bundled React app
│   ├── main.css            # Compiled Tailwind styles
│   ├── jsx-runtime.js      # React JSX runtime
│   └── proxy.js            # Framer Motion bundle
├── components/
│   ├── Layout.js           # App shell (header, footer, transitions)
│   ├── Win98Window.js      # Reusable retro window component
│   └── SparkleCursor.js    # Canvas sparkle cursor
└── pages/
    ├── About.html
    ├── Blog.html
    ├── CaseStudies.html
    ├── Contact.html
    ├── Projects.html
    ├── Skills.html
    ├── Testimonials.html
    └── Work.html

​
Build output

The project is a Vite build artifact. All components ship as ES modules and are loaded via <script type="module"> tags in each HTML file. The assets/ directory contains three key pieces:
  • main.js — the minified, tree-shaken React application bundle, including React Router v6, all page components, and the visitor counter logic.
  • main.css — the compiled Tailwind CSS output, including all custom design tokens (win-teal, win-blue, win-gray, y2k-pink, etc.), component classes (win98-window, notebook-paper), and Google Fonts imports.
  • proxy.js — the Framer Motion bundle, split out as a separate module so it can be preloaded independently.
  • jsx-runtime.js — the React JSX runtime, also preloaded to reduce waterfall latency.
The root index.html declares <link rel="modulepreload"> for five modules before the main bundle executes: jsx-runtime.js, proxy.js (from assets/), and SparkleCursor.js, Layout.js, Win98Window.js (from components/). The stylesheet is loaded separately via <link rel="stylesheet">. This eager preloading improves initial paint time by eliminating module-discovery waterfalls.

​
Static page structure

Each file inside pages/ is a standalone HTML document that loads the exact same main.js bundle as index.html. The difference is a small inline <script> block at the top of each page that tells the React application which route to render: 
<script>
  window.__STATIC_PAGE_ROUTE__ = "/about";
  if (!window.location.hash || window.location.hash === "#/" || window.location.hash === "#") {
    window.location.hash = "/about";
  }
</script>
Setting window.__STATIC_PAGE_ROUTE__ lets the React app know the intended route even before the hash is updated. The window.location.hash assignment ensures the React Router hash history immediately reflects the correct path on load, so the right page component renders without a redirect flash.
Because the project ships as a Vite build artifact, you do not run vite build again unless you have the original source files. Customization — adding new color tokens, editing component logic, or creating new routes — requires access to the source JSX and Tailwind config. Fork the project and rebuild with vite build to apply any structural changes.

Build docs developers (and LLMs) love

Get started for freeTalk to us