Skip to main content

Documentation Index

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

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

Mystery Haunting’s routing and navigation are both data-driven — routes are registered in a central <Routes> block and nav items come from a plain array in the Layout component — so adding a new page requires only a few coordinated edits across the source before rebuilding.
The distributed GitHub repository contains only the compiled output of Mystery Haunting. It does not include package.json, src/ components, a router configuration, or any other source files. The steps in this guide describe changes that must be made in the original source project — you cannot add pages by editing the compiled assets/main.js bundle directly. To follow this guide, obtain or fork the original source project first.
1

Create the page component

Add a new React function component in the source. Follow the existing pattern: a full-height flex container with the font-spooky heading in text-pumpkin and a font-mono subtitle in text-ghost-teal.
// Add your new page component in the source file
function TheVault() {
  return (
    <div className="min-h-full p-12 flex flex-col items-center justify-center">
      <h1 className="font-spooky text-5xl text-pumpkin mb-4">THE VAULT</h1>
      <p className="text-ghost-teal font-mono uppercase tracking-widest">
        Your subtitle here
      </p>
      {/* Your page content */}
    </div>
  );
}
2

Register the route in the Router

Inside the <Routes> block, add a <Route> entry that maps your chosen path to the new component.
<Routes>
  {/* Existing routes */}
  <Route path="/vault" element={<TheVault />} />
</Routes>
3

Add to the navigation array

Locate the navItems array in the Layout component and append a new object with the matching path and a display label.
const navItems = [
  // ... existing items
  { path: '/vault', label: 'The Vault' }
];
4

Create a static HTML export file

Add an HTML file to the pages/ directory so the route is accessible as a standalone static export. Mirror the structure of the existing page files exactly, updating only the <title> and window.__STATIC_PAGE_ROUTE__ value.
<!-- pages/Vault.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vault | mystery-haunting</title>
    <script type="module" crossorigin src="../assets/main.js"></script>
    <link rel="stylesheet" crossorigin href="../assets/main.css">
    <script>
      window.__STATIC_PAGE_ROUTE__ = "/vault";
      if (!window.location.hash || window.location.hash === "#/") {
        window.location.hash = "/vault";
      }
    </script>
  </head>
  <body><div id="root"></div></body>
</html>
5

Build

Compile the updated source into assets/main.js and assets/main.css:
npm run build
The nav link for your new page becomes active — highlighted with the ghost-teal glow — automatically when the current route matches the registered path. No extra styling or active-state logic is needed.
Give your route a spooky label that fits the existing naming pattern used across the site (The Foyer, The Attic, The Séance Room, etc.). Here are a few ideas mapped to common portfolio sections:
  • The Crypt — Certifications and credentials
  • The Dungeon — Side projects and experiments
  • The Observatory — Blog or writing archive
  • The Apothecary — Tools and tech stack
  • The Reliquary — Awards and recognitions
Keep route paths lowercase and hyphenated (/the-crypt) while using title-case labels in the navItems array (The Crypt).

​
Layout Wrapper

Every page registered inside the <Routes> block is automatically wrapped by the <Layout> component. This means your new page inherits the sidebar navigation, global ambient effects (floating particles, background textures), and the Framer Motion AnimatePresence page transition with no additional setup required.
Use min-h-full p-12 on your page’s root <div> to match the padding and scroll behavior of every other page in the site. This ensures your content fills the main content area correctly and scrolls cleanly on both desktop and mobile viewports.

Build docs developers (and LLMs) love

Get started for freeTalk to us