Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/mystery-haunting/llms.txt

Use this file to discover all available pages before exploring further.

Mystery Haunting uses a small set of purpose-built SVG icon components defined in components/Icons.js. The Ghost, Tombstone, and Eye icons are hand-crafted SVGs exported from that module. A fourth icon — HouseIcon — appears in the app but is defined as an inline SVG directly inside the Work component, not as a named export of Icons.js.

​
Icons Overview

IconExportUsed OnDescription
GhostGhostIconNav header, Landing page decorationsCustom SVG ghost silhouette with wavy bottom edge, dark eye sockets, and ghost-teal pupil highlights
TombstoneTombstoneIconProjects / The GraveyardArched gravestone shape with a cross cutout, used as a thematic framing element for project cards
EyeEyeIconTestimonials / Eye-WitnessesEye SVG with a dynamic pupil whose position is controlled via pupilX and pupilY props
House(inline SVG)Work / Previous HauntingsDefined inline inside the Work component — not exported from Icons.js

​
GhostIcon

GhostIcon is a custom SVG ghost component defined in components/Icons.js. It renders a ghost silhouette with a wavy bottom edge, two dark eye-socket circles, and two small ghost-teal highlight circles. It accepts className and style props, making it fully compatible with Tailwind utility classes and inline style overrides. It is used in two primary contexts: the sidebar nav header (small, bouncing, pumpkin-colored) and as floating page decorations on the landing screen (larger, semi-transparent). 
import { GhostIcon } from './components/Icons';

// Used in nav header
<GhostIcon className="w-8 h-8 animate-bounce text-pumpkin" />

// Used as floating decoration
<GhostIcon className="absolute w-16 h-16 text-bone/80 animate-float-ghost" />

​
TombstoneIcon

TombstoneIcon renders an arched gravestone SVG with a cross cutout at the center. It accepts className and style props and uses fill="currentColor" so its color is driven entirely by Tailwind text-color utilities or CSS color values. It is used on the Projects page (The Graveyard) as a decorative frame around individual project entries. 
import { TombstoneIcon } from './components/Icons';

<TombstoneIcon className="w-24 h-24 text-bone/40" />

​
HouseIcon

HouseIcon is not exported from components/Icons.js. It is defined as an inline SVG directly inside the Work component. The SVG includes a house body, a base platform, a chimney, and two window rectangles. The window rectangles start with a dark fill and transition on hover via CSS applied in the parent component.
Because HouseIcon is an inline SVG in the Work component rather than a named export of Icons.js, you cannot import it from the icons module. To reuse or modify it, edit the SVG markup directly inside the Work component file.

​
EyeIcon

EyeIcon is the most interactive of the icons exported from components/Icons.js. It is used on the Testimonials page (Eye-Witnesses) and accepts two dynamic props — pupilX and pupilY — that control the cx and cy attributes of the pupil circles inside the eye SVG. The values are percentages (0–100) within the SVG’s viewBox, calculated by the parent component based on the mouse position relative to the center of each eye element. 
// pupilX and pupilY are percentages (0-100) within the eye SVG viewBox
// Calculated from mouse position relative to eye center
<EyeIcon pupilX={pupilX} pupilY={pupilY} />
The EyeIcon SVG is composed of four circles:
  1. A large off-white sclera (r=45, fill="#f5f5f4") with a dark stroke
  2. A ghost-teal iris (r=15, fill="#2dd4bf") positioned at (pupilX, pupilY)
  3. A dark pupil (r=8, fill="#0a0a0a") centered on the iris
  4. A small white specular highlight (r=3, fill="#f5f5f4") offset from the pupil center for a realistic light-catch effect
import { EyeIcon } from './components/Icons';

// Inside a component that tracks mouse position
const [pupilPos, setPupilPos] = useState({ x: 50, y: 50 });

<EyeIcon
  pupilX={pupilPos.x}
  pupilY={pupilPos.y}
  className="w-20 h-20"
/>

Build docs developers (and LLMs) love

Get started for freeTalk to us