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.
Layout is the single component that wraps every page in the Spooky Developer portfolio. Mounted at the / route, it assembles the full-screen atmospheric backdrop, interactive scare effects, a sticky tombstone navigation bar, the routed page content, and a site-wide footer — all inside one flex column that stretches to fill the viewport.
Component tree
Parts
Root <div>
The outermost div carries three Tailwind utilities that govern the overall page structure:
| Class | Purpose |
|---|---|
min-h-screen flex flex-col | Ensures the page always fills the full viewport height and stacks children vertically |
relative | Establishes a stacking context so child z-index values work correctly |
selection:bg-haunt-moon/30 selection:text-haunt-moon | Applies branded teal text-selection highlight across every page |
<Background />
Renders a position: fixed full-screen layer at z-index: -1. It produces the deep dark teal base colour (haunt-bg = #0d2e35), 100 animated star-like particles, a soft glowing orb, and — when isHaunted is true — two bat silhouettes that drift continuously across the screen. Because it is fixed, it never scrolls with the page content.
<CursorTrail />
Paints a ghost cursor trail that follows the mouse pointer. Implemented as an overlay above all content. When isHaunted is false this component renders nothing.
<SpiderScare />
Drops a spider on the user’s first click anywhere on the page. The drop animation only fires once per session (gated by sessionStorage). When isHaunted is false this component renders nothing.
<IdleGhost />
Triggers a ghost animation after approximately 45 seconds of user inactivity. Intended to “haunt” visitors who linger without interacting. When isHaunted is false this component renders nothing.
All three scare-effect components —
CursorTrail, SpiderScare, and IdleGhost — read isHaunted from the useHaunt() context hook and render nothing when it is false. The user can toggle haunt mode off at any time using the button in the Footer, which immediately silences all three effects site-wide.<header>
A sticky top-0 z-40 bar that keeps the navigation visible as the user scrolls. The gradient (from-haunt-bg via-haunt-bg/90 to-transparent) blends the header seamlessly into the page content below rather than showing a hard edge. The pt-4 pb-8 padding gives the tombstone-shaped Nav buttons room to perform their lift animation without clipping.
<main> and <Outlet />
The <main> element uses flex-grow to occupy all remaining vertical space, pushing the Footer to the bottom of the viewport even on short pages. container mx-auto px-4 md:px-8 centres content and adds responsive horizontal padding. z-10 relative keeps page content stacked above the fixed Background. The <Outlet /> component is provided by React Router and renders whichever child route is currently active.