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.

Spooky is a Vite-compiled React single-page application (SPA) delivered as static files. The repository contains pre-compiled output — HTML entry files, compiled JavaScript bundles, a CSS stylesheet, and image assets — so the theme can be deployed to GitHub Pages or any static host without a build step. The source React components are compiled into the files in assets/ and components/.

​
Directory tree

spooky/
├── index.html              # Homepage and GitHub Pages entry
├── about.html              # Biography page
├── articles.html           # Articles/writing page
├── casestudies.html        # Case studies page
├── contact.html            # Contact page
├── home.html               # Alternate homepage entry
├── placeholders.html       # Theme utility/preview page
├── projects.html           # Projects portfolio page
├── skills.html             # Skills page
├── testimonials.html       # Testimonials page
├── work.html               # Work experience page
├── writing.html            # Writing page
├── assets/
│   ├── main.css            # Compiled Tailwind + custom CSS
│   ├── main.js             # React app entry bundle (Vite output)
│   ├── proxy.js            # Re-exports React, ReactDOM, Framer Motion
│   ├── index.js            # Re-exports AnimatePresence
│   ├── createLucideIcon.js # Lucide icon factory
│   └── JumpScareContext.js # React Context for jump-scare state
├── components/
│   ├── CandleCursor.js     # Animated candle cursor
│   ├── CobwebCorner.js     # Corner cobweb decorations
│   ├── FlickeringLights.js # Atmospheric flicker effect
│   ├── GhostMascot.js      # Floating ghost mascot
│   ├── JumpScareSpider.js  # Jump-scare spider animation
│   ├── JumpScareToggle.js  # User toggle for jump-scare
│   ├── Layout.js           # Root page wrapper
│   ├── Navigation.js       # Slide-in navigation menu
│   └── SwingingLantern.js  # Swinging lantern decoration
└── images/
    └── screenshots/        # Preview screenshots (PNG)

​
Compiled vs. source files

The JavaScript files in assets/ and components/ are minified Vite output, not hand-edited source files. They use ES module import/export syntax and reference each other with relative paths. If you want to make changes to component logic or styling, fork the original source project, make changes there, run vite build, and replace the compiled files in the repository with the new output. The assets/main.css file is the compiled output of Tailwind CSS processing. Arbitrary color values (bg-[#1a1a1d], text-[#ff7518], etc.) used throughout the components are included in this stylesheet via Tailwind’s JIT scan of the source files.

​
HTML entry files

Each HTML file in the root is nearly identical in structure: 
<!doctype html>
<html lang="en">
  <head>
    <!-- meta, title, link to main.css -->
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="./assets/main.js"></script>
  </body>
</html>
Every page mounts the React application into the same #root div and loads the same assets/main.js entry bundle. React Router reads the current URL path and renders the matching page component. This means all HTML files share one JavaScript application; the URL alone determines which page content is displayed. index.html serves as the GitHub Pages entry point — when visitors navigate to the root URL, GitHub Pages serves this file.

​
Asset file relationships

The compiled files follow a dependency chain:
  • assets/main.js is the application entry point. It initializes React, sets up the React Router <BrowserRouter> with all route definitions, and wraps the app in the JumpScareProvider context.
  • components/Layout.js is imported by every route component. It in turn imports CandleCursor.js, Navigation.js, JumpScareToggle.js, and all decorative components, so they are present on every page automatically.
  • assets/proxy.js centralizes re-exports of React, ReactDOM, and Framer Motion. Instead of each component bundle bundling its own copy of these libraries, they all import from proxy.js, which keeps the total bundle size down and ensures a single shared instance of React across all components.
  • assets/JumpScareContext.js is imported by both JumpScareSpider.js and JumpScareToggle.js. It provides the shared scaresEnabled state that connects the toggle button to the spider animation.

Build docs developers (and LLMs) love

Get started for freeTalk to us