Spooky Developer is a React single-page application that transforms the standard developer portfolio into an immersive Halloween experience. Built with Vite, React Router, Framer Motion, and Tailwind CSS, it combines polished engineering with playful spooky aesthetics — ghost cursor trails, spider drop scares, idle animations, and a tombstone navigation bar.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.
Introduction
Learn what Spooky Developer is and explore its key features and design philosophy.
Getting Started
Clone the repo, install dependencies, and run the portfolio locally in minutes.
HauntContext
The central state system that powers all interactive spooky effects across the app.
Scare Effects
Explore CursorTrail, SpiderScare, and IdleGhost — the three interactive horror components.
Explore the Portfolio
Architecture
Project structure, routing, and how the pieces fit together.
Layout Components
Nav, Background, Footer, and the root Layout that wraps every page.
Spooky Icons
Five custom SVG icons: Ghost, Bat, Spider, Pumpkin, and Candy.
Portfolio Pages
All nine portfolio pages — Home, About, Projects, Skills, Work, and more.
Color Palette
The full Tailwind color tokens — haunt-bg, haunt-moon, haunt-pumpkin, and haunt-bone.
Haunt Mode
Toggle haunted mode on/off and persist user preference with localStorage.
What Makes It Spooky
HauntContext powers everything
The
HauntProvider wraps the entire app and exposes isHaunted, toggleHaunt, hasClicked, registerClick, and mousePos via the useHaunt() hook. All effects check isHaunted before rendering.Three layered scare effects
CursorTrail leaves ghost icons behind the mouse, SpiderScare drops a spider from the top on first click, and IdleGhost slides in from the right after 45 seconds of inactivity.Tombstone navigation
The
Nav component renders tombstone-shaped NavLink buttons that lift on hover and glow teal when the route is active — all driven by Framer Motion and Tailwind.