Skip to main content

Documentation Index

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

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

DevHaunt uses React Router v6’s <Routes> and <Route> components for all client-side navigation. Because the project is deployed as a collection of static HTML files with no server-side router, it relies on hash-based routing — every URL takes the form /#/route-name. Each of the nine pages also has a corresponding HTML file in the pages/ directory that activates the correct hash before the React app mounts.

​
The route table

The following nine routes are declared in assets/main.js:
PathPage componentNavigation labelHalloween concept
/HomePageThe PorchLanding / hero with animated haunted house
/aboutAboutPageTrick or TreatBio section with TrickOrTreatBag illustration
/projectsProjectsPageGraveyardProject cards rendered as Tombstone components
/skillsSkillsPagePumpkin PatchSkills grid rendered as JackOLantern components
/workWorkPageHall of DoorsWork history rendered as DoorPanel components
/case-studiesCaseStudiesPageEvidenceCase studies inside an EvidenceBoard layout
/blogBlogPageTalesBlog articles displayed as Postcard components on a wooden shelf
/testimonialsTestimonialsPageSpirits SpeakTestimonials rendered as FloatingGhost components
/contactContactPageRing DoorbellContact form via the DoorbellForm component
The <Routes> block in assets/main.js is: 
<Routes>
  <Route path="/"             element={<HomePage />} />
  <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 />} />
</Routes>

​
Navigation array

The Navigation component in components/Navigation.js reads from a navLinks array to render both the desktop pill nav and the mobile dropdown. The array maps each route path to its Halloween-themed label: 
const navLinks = [
  { path: "/",             label: "The Porch"      },
  { path: "/about",        label: "Trick or Treat" },
  { path: "/projects",     label: "Graveyard"      },
  { path: "/skills",       label: "Pumpkin Patch"  },
  { path: "/work",         label: "Hall of Doors"  },
  { path: "/case-studies", label: "Evidence"       },
  { path: "/blog",         label: "Tales"          },
  { path: "/testimonials", label: "Spirits Speak"  },
  { path: "/contact",      label: "Ring Doorbell"  },
];
The Navigation component uses the useLocation hook from react-router-dom to read the current pathname and apply the active pumpkin-orange color to the matching link: 
const location = useLocation();

// Inside the nav link render:
className={`font-spooky text-lg transition-colors hover:text-pumpkin ${
  location.pathname === route.path ? "text-pumpkin" : "text-ghost"
}`}

​
Static HTML pages and the hash redirect pattern

Every route other than / has a matching HTML file in pages/. For example, pages/About.html contains: 
<script>
  window.__STATIC_PAGE_ROUTE__ = "/about";
  if (!window.location.hash || window.location.hash === "#/" || window.location.hash === "#") {
    window.location.hash = "/about";
  }
</script>
This script fires before React mounts. It checks whether the URL hash is missing or pointing to the root, and if so, redirects it to the correct route hash (e.g., #/about). React Router then reads that hash and renders the right page component. All subsequent in-app navigation uses React Router’s client-side transitions without any further page loads.
The window.__STATIC_PAGE_ROUTE__ assignment is a marker that identifies which static entry point was loaded. It is currently informational — the actual routing is driven entirely by the hash value the script sets.

​
Adding a new route

This repository contains the compiled Vite output — assets/main.js and components/Navigation.js are minified bundles, not editable source files. Adding a fully new route with its own React component requires access to the original Vite source project to recompile. The steps below describe what changes are required and where, so you can apply them if you have the source, or make limited string-only edits to the compiled files if you do not.
To add a new page to DevHaunt, three things must change:
1

Add the page component to assets/main.js

In the original source, define a new React component function and add it to the <Routes> block. In the compiled assets/main.js, the <Routes> block appears near the end of the file (search for the existing route paths to locate it). If editing the compiled bundle directly, add a new Route call in the minified format that matches the surrounding code — this is fragile and only practical for small changes:
// In source (before compilation):
function SpellbookPage() {
  return (
    <div className="w-full max-w-5xl mx-auto py-12">
      <h1 className="font-spooky text-5xl text-pumpkin mb-4">
        The Spellbook
      </h1>
      <p className="text-xl text-ghost/80">
        Ancient incantations and modern patterns.
      </p>
    </div>
  );
}

// And inside <Routes>:
<Route path="/spellbook" element={<SpellbookPage />} />
2

Add the nav link to components/Navigation.js

The navLinks array (variable ea in the compiled bundle) drives both the desktop pill nav and the mobile dropdown. Add your new path and label to the array in components/Navigation.js:
// In source (before compilation):
{ path: "/spellbook", label: "Spellbook" },

// In the compiled components/Navigation.js, locate the ea array
// (search for "Ring Doorbell" to find the end of the array) and
// append the new entry before the closing bracket.
3

Create the static HTML entry point

Copy any existing file from pages/ (for example, pages/About.html) to pages/Spellbook.html. Update the two values in the inline script to match your new route:
<script>
  window.__STATIC_PAGE_ROUTE__ = "/spellbook";
  if (!window.location.hash || window.location.hash === "#/" || window.location.hash === "#") {
    window.location.hash = "/spellbook";
  }
</script>
Also update the <title> tag in the <head> to reflect the new page name. Once the static HTML file exists, the new route is accessible via direct URL (/pages/Spellbook.html) as well as through in-app navigation.
The desktop navigation bar renders all items in a single horizontal pill and can become crowded with more than nine links. If you are adding multiple new routes, consider removing one of the less-used default routes to keep the nav readable.

Build docs developers (and LLMs) love

Get started for freeTalk to us