Spooky Developer is a fully-featured, Halloween-themed React single-page application (SPA) built to serve as a portfolio template. Every design decision leans into the theme — the navigation bar is a row of animated tombstones, the cursor leaves a ghostly trail, idle visitors are greeted by a floating specter, and a global “haunted mode” toggle lets users awaken (or calm) the supernatural effects at will. Beneath the spooky surface, the project is built on a modern, production-ready stack that you can fork, customize, and deploy as your own developer portfolio.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/spooky-developer/llms.txt
Use this file to discover all available pages before exploring further.
Tech Stack
| Technology | Role |
|---|---|
| Vite | Build tool and dev server |
| React 18 | UI rendering via react-dom |
| React Router v6 | Client-side routing with BrowserRouter |
| Framer Motion | Animations and page transitions |
| Tailwind CSS | Utility-first styling with a custom haunt palette |
| Creepster font | Spooky display typeface (font-spooky) |
Key Features
HauntContext
A global React context that tracks haunted mode state, cursor position, and first-click registration. Persists across page reloads via
localStorage and sessionStorage. Exposes the useHaunt() hook to any component in the tree.Scare Effects
Three interactive scare components work together to create atmosphere: CursorTrail paints ghost particles as the mouse moves, SpiderScare drops a spider on the first click, and IdleGhost slides in when the user stops interacting. All effects are gated behind
isHaunted.Tombstone Navigation
The navigation bar renders each route as a tombstone-shaped button. The active route rises out of the ground (via a
-translate-y-4 transform and a haunt-moon border glow), giving users a graveyard-row mental model of the site structure.Interactive Pages
Every page has a unique Halloween concept: a “Trick or Treat” door-reveal for projects, a candy-bowl hover interaction for skills, an envelope-opening animation for articles, floating ghost testimonials, and a “Séance” contact form that summons a ghost on successful submission.
Color Palette
All colors are registered as Tailwind CSS custom properties under thehaunt-* namespace. Use them freely in any component via utility classes.
| Token | Hex | Usage |
|---|---|---|
haunt-bg | #0d2e35 | Page background — deep teal-black |
haunt-moon | #5eead4 | Accent / active states — mint glow |
haunt-pumpkin | #fb923c | Highlights / years / headings |
haunt-bone | #fef3c7 | Body text — warm off-white |
haunt-tombstone | (mid slate) | Tombstone fill color |
haunt-tombstoneDark | (dark slate) | Tombstone borders and shadows |
haunt-dark | (near-black) | Card backgrounds, door interiors |
Haunted mode is on by default and persists across page reloads.
HauntProvider initialises isHaunted to true — so first-time visitors experience the full atmosphere immediately. Each time the toggle is clicked, toggleHaunt flips the value and calls localStorage.setItem('haunt-enabled', String(isHaunted)), writing either 'true' or 'false'. On subsequent visits the context reads localStorage.getItem('haunt-enabled') and restores the user’s last preference automatically.