Skip to main content

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.

The About page reframes a developer biography as a guided walk through a graveyard. Each career milestone is a tombstone card planted along a glowing vertical timeline. As visitors scroll down the page, the cards animate into view from the left, giving the impression of unearthing the past one headstone at a time. The section title — Graveyard Tour — is rendered in the signature haunt-moon teal, and each card bears a faint RIP watermark in the background so the theme stays consistent down to the fine print.

​
Timeline Entries

The five milestones are defined in the TIMELINE constant array inside assets/main.js. They appear in chronological order from top to bottom on the page.
YearTitleDescription
199XSummonedBorn into this realm, immediately fascinated by glowing rectangles.
2010First Hello WorldWrote a script. It lived. It was terrifying and beautiful.
2015The Great OutageDropped a production database. Survived the haunting that followed.
2020Master of ReactLearned to control the state, though sometimes it still controls me.
PresentSeeking New HauntsLooking for a new team to build spooky good products with.

​
Tombstone Card Design

Each card is styled to look like a tombstone using a combination of Tailwind border-radius utilities: 
<div className="bg-haunt-tombstone p-8 rounded-t-full rounded-b-lg
                border-t-8 border-haunt-tombstoneDark max-w-md shadow-xl
                text-center relative overflow-hidden group
                hover:-translate-y-2 transition-transform">

  {/* Faint RIP watermark */}
  <div className="absolute top-4 left-1/2 -translate-x-1/2
                  text-haunt-bone/30 font-spooky text-6xl opacity-20">
    RIP
  </div>

  <h2 className="text-haunt-pumpkin font-spooky text-3xl mb-2 mt-8">{entry.year}</h2>
  <h3 className="text-haunt-moon text-xl font-bold mb-4">{entry.title}</h3>
  <p  className="text-haunt-bone/80 leading-relaxed">{entry.desc}</p>
</div>
  • rounded-t-full creates the arched top of a tombstone.
  • rounded-b-lg keeps the base rectangular.
  • border-t-8 border-haunt-tombstoneDark thickens the arch for visual weight.
  • hover:-translate-y-2 gives each card a subtle rise on hover.

​
Timeline Layout

The vertical timeline is a left-bordered container with glowing dot markers at each entry: 
<div className="relative border-l-4 border-haunt-tombstoneDark ml-4 md:ml-1/2 space-y-24 pb-24">
  {TIMELINE.map((entry, i) => (
    <motion.div key={i} /* scroll animation */ className="relative pl-8 md:pl-16">

      {/* Glowing teal dot */}
      <div className="absolute -left-[14px] top-8 w-6 h-6
                      bg-haunt-moon rounded-full
                      shadow-[0_0_10px_rgba(94,234,212,0.8)]" />

      {/* Card */}
      <TombstoneCard entry={entry} />
    </motion.div>
  ))}
</div>
The dot is offset by −14 px to sit exactly on the border line, and its box-shadow produces the cyan glow.

​
Scroll-Triggered Animations

Every card uses Framer Motion’s whileInView prop so the animation fires only when the element enters the viewport — not all at once on page load. 
initial:    { opacity: 0, x: -50 }
whileInView:{ opacity: 1, x:  0  }
viewport:   { once: true, margin: '-100px' }
transition: { duration: 0.6, delay: index * 0.1 }
PropertyValueEffect
initial{opacity:0, x:-50}Card starts invisible and 50 px to the left
whileInView{opacity:1, x:0}Slides in and fades up when scrolled into view
viewport.oncetrueAnimation plays once; does not replay on scroll-up
viewport.margin'-100px'Triggers 100 px before the element fully enters the viewport
delayindex × 0.1 sEach card staggers 100 ms later than the previous one

​
Adding or Editing Timeline Entries

All milestone data lives in the TIMELINE array near the top of assets/main.js. Edit existing entries in place, or append new objects to the array to add more milestones: 
const TIMELINE = [
  { year: '199X',    title: 'Summoned',           desc: 'Born into this realm, immediately fascinated by glowing rectangles.' },
  { year: '2010',    title: 'First Hello World',  desc: 'Wrote a script. It lived. It was terrifying and beautiful.' },
  { year: '2015',    title: 'The Great Outage',   desc: 'Dropped a production database. Survived the haunting that followed.' },
  { year: '2020',    title: 'Master of React',    desc: 'Learned to control the state, though sometimes it still controls me.' },
  { year: 'Present', title: 'Seeking New Haunts', desc: 'Looking for a new team to build spooky good products with.' },
];
Each object requires three string fields:
FieldTypeDescription
yearstringDisplayed as the large pumpkin-orange header on the card. Use any label — '199X', '2023', 'Present', etc.
titlestringRendered below the year in teal bold text.
descstringBody copy shown in haunt-bone/80 — aim for one or two sentences.
The timeline renders entries in array order from top to bottom. There is no automatic date sorting — arrange the objects in the order you want them to appear on screen.

​
Example: Adding a New Entry

const TIMELINE = [
  // … existing entries …
  {
    year:  '2024',
    title: 'Open Source Awakening',
    desc:  'Published the first public package. Watched the download counter tick upward in disbelief.',
  },
];
The new card will inherit all tombstone styles and scroll animations automatically — no additional code changes required.

Build docs developers (and LLMs) love

Get started for freeTalk to us