Spooky ships with nine pre-built portfolio pages plus three supporting HTML files — a utility placeholder page, an alternate homepage (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.
home.html), and an alternate writing archive (writing.html) — making a total of twelve HTML entry files in the repository root. Every page shares the same Layout wrapper component and Navigation sidebar, so the fonts, color palette, cursor behavior, and slide-in navigation menu are consistent across the entire site. Each file contains placeholder content structured to show where personal copy, project details, skills, experience, and other information should go once you begin customizing the theme.
Pages included
| File | Route | Purpose |
|---|---|---|
index.html | / | Main homepage and GitHub Pages entry point |
home.html | / | Alternate homepage entry retained by the theme |
about.html | /about | Biography and background |
projects.html | /projects | Featured project portfolio |
skills.html | /skills | Skills, technologies, and capabilities |
work.html | /work | Professional experience and work history |
casestudies.html | /case-studies | Detailed project and technical breakdowns |
articles.html | /blog | Articles, notes, and long-form writing |
writing.html | /blog | Alternate writing archive entry |
testimonials.html | /testimonials | Testimonials and feedback |
contact.html | /contact | Contact details and communication links |
placeholders.html | N/A | Theme placeholder and utility preview page |
Navigation labels
Each page has a spooky alias that appears in the slide-in navigation menu. The menu is triggered by the hamburger icon fixed to the top-right corner of every page and slides in from the right with a spring animation powered by Framer Motion. The labels are defined in theMp array inside components/Navigation.js and map directly to React Router routes.
| Route | Spooky label |
|---|---|
/ | The Porch |
/about | Meet the Resident |
/projects | Rooms in the House |
/skills | The Toolshed |
/work | The Family Tree |
/case-studies | Ghost Stories |
/blog | Notes from the Attic |
/testimonials | Whispers in the Hall |
/contact | Leave a Note |
Shared layout
Every page in the Spooky template renders through theLayout component defined in components/Layout.js. This component is responsible for two things: injecting the site-wide decorations that persist across every page, and wrapping the main content area with a Framer Motion page transition.
The components rendered directly by Layout are:
CandleCursor— Replaces the default system cursor with a themed candle cursor throughout the site.Navigation— The slide-in sidebar navigation menu that appears on every page.JumpScareToggle— A toggle control that lets visitors enable or disable jump-scare behavior.
Layout wraps the routed page content with a Framer Motion AnimatePresence and motion.main sequence that produces a fade-to-black transition whenever the visitor navigates between pages. The remaining atmospheric components — FlickeringLights, CobwebCorner, GhostMascot, JumpScareSpider, and SwingingLantern — are imported and rendered within individual page components as needed, rather than being injected globally by Layout.