Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/spooky/llms.txt

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

Navigation renders a hamburger icon button fixed in the top-right corner of every page. Clicking it opens a full-screen slide-in drawer from the right side of the viewport, listing all nine portfolio pages under their spooky Halloween aliases. The drawer animates open and closed using Framer Motion spring physics and staggers each navigation item’s entrance for a polished feel.
Active route detection uses React Router’s useLocation(), so the highlighted navigation item updates instantly on route change without any page reload or manual state management.

​
Navigation labels

The navigation drawer uses thematic aliases instead of generic page names. The full route-to-label mapping is:
RouteSpooky Label
/The Porch
/aboutMeet the Resident
/projectsRooms in the House
/skillsThe Toolshed
/workThe Family Tree
/case-studiesGhost Stories
/blogNotes from the Attic
/testimonialsWhispers in the Hall
/contactLeave a Note

​
Menu behavior

The drawer interaction works as follows:
  • Clicking the hamburger icon (Lucide Menu) in the top-right corner opens the drawer. The panel slides in from the right with a Framer Motion spring: damping: 25, stiffness: 200.
  • The currently active route is highlighted with pumpkin orange text (#FF7518) and a left border in purple (#4A1A5C).
  • Each navigation item staggers in with a sequenced delay of index * 0.05 seconds, so items cascade from top to bottom rather than all appearing at once.
  • Clicking any navigation link navigates to the route and closes the drawer.
  • Clicking the backdrop (the dimmed overlay behind the drawer) closes the drawer without navigating.
  • A X button (Lucide X) in the drawer header also closes it.
  • The drawer footer displays the text "Tread carefully..." as a thematic sign-off.

​
Icons used

The drawer header displays a Lucide Skull icon in pumpkin orange (#FF7518) beside the label "Directory". This serves as the drawer’s title area, giving the menu a consistent branded header. The hamburger button itself uses the Lucide Menu icon, and the close button uses the Lucide X icon.

​
Changing navigation labels

The labels are defined in the routes array within components/Navigation.js. To change them, fork the source, locate the routes array, and edit the label values: 
const routes = [
  { path: '/',            label: 'The Porch' },
  { path: '/about',       label: 'Meet the Resident' },
  { path: '/projects',    label: 'Rooms in the House' },
  { path: '/skills',      label: 'The Toolshed' },
  { path: '/work',        label: 'The Family Tree' },
  { path: '/case-studies',label: 'Ghost Stories' },
  { path: '/blog',        label: 'Notes from the Attic' },
  { path: '/testimonials',label: 'Whispers in the Hall' },
  { path: '/contact',     label: 'Leave a Note' },
];
After editing, rebuild the project with Vite and replace components/Navigation.js with the new compiled output.

​
Adding a new page

To add a new route to the navigation:
  1. Create the HTML entry file — add a new yourpage.html at the repository root using the same structure as the existing HTML files (a <div id="root"> and <script type="module" src="./assets/main.js">).
  2. Add the route to the React Router config — register the new path and its component in the router definition inside assets/main.js.
  3. Add an entry to the navigation labels array — append a new { path: '/yourpage', label: 'Your Spooky Label' } object to the routes array in the Navigation source.
  4. Rebuild — run the Vite build and deploy the updated compiled files.

Build docs developers (and LLMs) love

Get started for freeTalk to us