Skip to main content

Documentation Index

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

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

Tombstone transforms each entry in your projects array into a graveyard-marker card. Hovering over a tombstone reveals a floating ghost above it that displays the project’s tech stack. Active projects (isAlive: true) stand tall with full pumpkin-glow styling; deprecated projects (isAlive: false) shrink and desaturate to signal their resting state.

​
Usage

Tombstone is rendered by the Projects page for each item in the projects array defined in assets/main.js. Pass a single project object and its grid index: 
import { Tombstone } from '../components/Tombstone';

<Tombstone project={project} index={0} />
The Projects page maps over the full array and wraps each card in a Framer Motion entrance animation: 
// assets/main.js — Projects page
{projects.map((project, index) => (
  <motion.div
    key={project.title}
    initial={{ opacity: 0, y: 50 }}
    animate={{ opacity: 1, y: 0 }}
    transition={{ delay: index * 0.1 }}
  >
    <Tombstone project={project} index={index} />
  </motion.div>
))}

​
Props

​
project.title
string
required
The project name. Displayed in the Spooky font as the tombstone’s main inscription.
​
project.epitaph
string
required
A one-line description shown as the epitaph beneath the title. Wrapped in curly quotes automatically.
​
project.tech
string[]
required
Array of technology names. Shown as a dot-separated string inside the floating ghost’s tooltip on hover, e.g. React • Tailwind • Framer.
​
project.isAlive
boolean
required
Controls the visual state of the card. true renders the tombstone at full height (280px) with a pumpkin-orange glow border. false renders it shrunk to 90% scale, reduced height (240px), and muted ghost opacity — suggesting a dead or deprecated project.
​
project.github
string
Optional URL for the GitHub repository. When present, renders a GitHub icon button at the bottom of the card. Omit entirely to hide the button.
​
project.link
string
Optional URL for the live demo or deployed site. When present, renders an external-link icon button. Omit entirely to hide the button.
​
index
number
required
Zero-based grid position. Currently consumed by the parent’s stagger animation rather than the component itself, but it is passed through as a convenience parameter.

​
Hover Behaviour

When the user hovers the card, two things happen simultaneously via React state (isHovered):
  1. The ghost SVG animates upward from y: 50 (hidden below the stone) to y: -120 (floating above it) using a spring transition (stiffness: 150, damping: 15).
  2. The tombstone body shifts up by 10px using animate={{ y: -10 }}.
Leaving the card reverses both animations automatically. 
// Internal hover state drives both animations
const [isHovered, setIsHovered] = useState(false);

<div
  onMouseEnter={() => setIsHovered(true)}
  onMouseLeave={() => setIsHovered(false)}
>
  <motion.div
    initial={{ y: 50, opacity: 0 }}
    animate={{ y: isHovered ? -120 : 50, opacity: isHovered ? 1 : 0 }}
    transition={{ type: 'spring', stiffness: 150, damping: 15 }}
  >
    {/* Ghost + tech stack */}
  </motion.div>

  <motion.div animate={{ y: isHovered ? -10 : 0 }}>
    {/* Tombstone body */}
  </motion.div>
</div>

​
Projects Data

To add, edit, or remove projects, update the projects array in assets/main.js. The component reads directly from this array — no other files need to change. 
// assets/main.js
const projects = [
  {
    title: 'Specter UI',
    epitaph: 'A hauntingly beautiful component library.',
    tech: ['React', 'Tailwind', 'Framer'],
    isAlive: true,
    github: '#',
    link: '#',
  },
  {
    title: 'Crypt Tracker',
    epitaph: 'Keeping tabs on your digital assets before they vanish.',
    tech: ['Next.js', 'TypeScript', 'Prisma'],
    isAlive: true,
    github: '#',
    link: '#',
  },
  {
    title: 'Poltergeist',
    epitaph: 'Automated testing that goes bump in the night.',
    tech: ['Node.js', 'Jest', 'Puppeteer'],
    isAlive: true,
    github: '#',
  },
  {
    title: 'Vampire CRM',
    epitaph: 'Sucked the life out of me. RIP 2021-2022.',
    tech: ['Vue', 'Firebase'],
    isAlive: false,
    github: '#',
  },
  {
    title: 'Zombie App',
    epitaph: 'It keeps coming back from the dead. Legacy code.',
    tech: ['jQuery', 'PHP'],
    isAlive: false,
  },
];
The two dead projects (Vampire CRM and Zombie App) have isAlive: false and no link property — they render in muted styles with only the optional GitHub link shown when provided.

​
Customization

Add a new project — Append an object to the projects array: 
{
  title: 'Phantom Forms',
  epitaph: 'Form validation that haunts your dreams.',
  tech: ['React Hook Form', 'Zod'],
  isAlive: true,
  github: 'https://github.com/you/phantom-forms',
  link: 'https://phantom-forms.dev',
},
Mark a project as dead — Set isAlive: false and remove or omit the link key. The tombstone will automatically shrink and grey out. Adjust the ghost spring animation — In components/Tombstone.js, find the motion.div wrapping the ghost SVG and change stiffness or damping: 
transition={{ type: 'spring', stiffness: 200, damping: 20 }}

Build docs developers (and LLMs) love

Get started for freeTalk to us