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 is a Vite-built single-page application whose compiled output lives directly in the repository root. After the build step, Vite emits a single JavaScript bundle and a single CSS file into assets/, while the React source — components, page logic, routing — is fully compiled into those two files. The pages/ directory holds pre-rendered static HTML shells that allow each portfolio route to be deep-linked directly, even from static hosting providers such as GitHub Pages.

​
Directory Tree

mystery-haunting/
├── index.html          # App entry point — mounts <div id="root">
├── README.md           # Repository documentation
├── .nojekyll           # GitHub Pages config — disables Jekyll processing
├── assets/
│   ├── main.js         # Compiled React application bundle
│   └── main.css        # Compiled Tailwind CSS styles
├── components/
│   ├── Layout.js       # Sidebar navigation wrapper
│   ├── GlobalEffects.js # Ambient atmospheric effects
│   └── Icons.js        # Custom SVG icon components
└── pages/
    ├── Landing.html    # Static export for /
    ├── About.html      # Static export for /about
    ├── Projects.html   # Static export for /projects
    ├── Skills.html     # Static export for /skills
    ├── Work.html       # Static export for /work
    ├── CaseStudies.html # Static export for /case-studies
    ├── Blog.html       # Static export for /blog
    ├── Testimonials.html # Static export for /testimonials
    └── Contact.html    # Static export for /contact

​
Top-Level File and Directory Reference

File / DirectoryPurpose
index.htmlHTML entry point loaded by the browser. Imports assets/main.js as a module and pre-loads the three component files. The React root is mounted onto <div id="root">.
assets/main.jsThe compiled React application bundle produced by Vite. Contains all page components, routing logic, Framer Motion animations, and third-party dependencies.
assets/main.cssThe compiled Tailwind CSS output. Includes all utility classes used by the app, custom spooky theme tokens, and keyframe animation definitions.
components/Layout.jsThe persistent sidebar navigation wrapper. Renders the nav rail with all nine route links, wraps page content in the AnimatePresence + motion.div transition context, and mounts the GlobalEffects sub-components.
components/GlobalEffects.jsAmbient atmospheric effect layer. Exports five independent effect components — cursor trail, fog drift, lightning flash, floating bats, and corner cobwebs — each rendered as fixed overlays above page content.
components/Icons.jsCustom SVG icon components used throughout the app: GhostIcon, TombstoneIcon, HouseIcon, EyeIcon, and BatIcon. Each accepts className and style props for Tailwind-based sizing and coloring.
pages/One HTML file per route. Each file is a full HTML document that loads the same assets/main.js bundle but injects a window.__STATIC_PAGE_ROUTE__ script tag so the app can boot into the correct route on first load.
.nojekyllEmpty file that tells GitHub Pages not to run Jekyll processing on the repository, ensuring files and directories beginning with underscores are served correctly.

​
Static Page Exports in pages/

Each file in pages/ is a standalone HTML document that bootstraps the React app into a specific route. When the page loads, a small inline <script> block sets window.__STATIC_PAGE_ROUTE__ to the route path and writes it into window.location.hash if no hash is already present: 
<script>
  window.__STATIC_PAGE_ROUTE__ = "/about";
  if (!window.location.hash || window.location.hash === "#/" || window.location.hash === "#") {
    window.location.hash = "/about";
  }
</script>
This means visiting pages/About.html directly in a browser — or via a GitHub Pages URL — boots the React app with the hash already set to #/about, so React Router renders the About page component immediately instead of defaulting to the landing route.
All nine portfolio routes have a corresponding static export in pages/. If you add a new route to the app, create a matching HTML file in pages/ with the correct window.__STATIC_PAGE_ROUTE__ value to keep deep-linking functional.

​
The Compiled Bundle

The React source — all page components, routing configuration, Framer Motion animation variants, and imported libraries — is compiled by Vite into a single assets/main.js ES module. The index.html entry point loads this module via: 
<script type="module" crossorigin src="./assets/main.js"></script>
The three files in components/ (Layout.js, GlobalEffects.js, Icons.js) are referenced as modulepreload hints in index.html and are imported directly by assets/main.js at runtime. They are not compiled into the main bundle — they remain as separate ES modules that the browser can cache independently.
To modify any component or page, update the source project, rebuild with Vite, and replace the files in assets/ and components/ with the new build output.

Build docs developers (and LLMs) love

Get started for freeTalk to us