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.

Previous Hauntings transforms the standard work history section into a ghost story told chronologically. Each job is a haunting — a place the developer left their mark, their code, and inevitably a few bugs. The page header reads PREVIOUS HAUNTINGS with the subtitle Places I've left my mark (and bugs). Entries are arranged on a vertical timeline and revealed one at a time as the visitor scrolls down the page, each card appearing as if materializing out of the dark.

​
Work History

The following hauntings are documented on the timeline:
CompanyRoleYearsDescription
Tech CorpSenior Poltergeist (Engineer)2021 - PresentHaunting the legacy monolith and slowly migrating it to React.
Startup.ioFull Stack Apparition2018 - 2021Summoned features from the void. Survived 3 pivots.
Agency XJunior Code Zombie2016 - 2018Mindlessly churned out WordPress themes. Brains…

​
Timeline Layout

The timeline is a vertical center line running the full height of the entries section. It is rendered as a narrow bar styled in ghost-teal/20 — a semi-transparent version of the site’s primary teal accent — giving it a faint, ethereal glow against the dark background. At each work history entry, a pumpkin-colored glowing dot marks the position on the line. The dot uses a radial box-shadow to simulate a warm light emanating from the timeline at that point, as if the entry is a lantern hung on a path through a haunted wood. Cards alternate left and right of the center line on desktop, so consecutive entries never stack on the same side. On mobile, all cards collapse to a single-column layout aligned to the right of the line.
ElementStyle
Timeline lineghost-teal/20 vertical bar
Position markerPumpkin-colored glowing dot
Card layoutAlternating left/right (desktop), single column (mobile)
Card contentCompany, role, years, and description

​
Scroll Animation

Each timeline entry is wrapped in a Framer Motion motion.div configured with whileInView. This means the entrance animation only fires when the card enters the viewport — cards that have not yet been scrolled to remain invisible until the visitor reaches them.
Animation propertyValue
TriggerwhileInView
oncetrue (animates once, does not replay on scroll back)
Viewport margin-100px (fires 100px before the element fully enters the viewport)
Initial stateopacity: 0, x: ±60 (direction matches card side)
Animate stateopacity: 1, x: 0
The -100px viewport margin means the animation begins slightly before the card is fully visible, so it completes just as the visitor’s eye reaches it — giving the impression of the card materializing on approach.

​
Haunted House Icon

Each timeline entry includes an inline haunted house SVG icon positioned at the junction between the card and the center line. The icon is decorative but interactive:
  • Default state: house windows rendered in black (dark, uninhabited)
  • Hover state: windows shift to ghost-teal or pumpkin fill, as if lights are flickering on inside
The window color transition is a simple CSS fill transition on the SVG <rect> elements that represent the windows, triggered by a :hover pseudo-class on the parent icon container.

​
Customization

Work history entries are defined in an array of objects. Each entry requires company, role, years, and desc fields. Add new entries to extend the timeline — they render in array order, top to bottom.
const workHistory = [
  {
    company: 'Tech Corp',
    role: 'Senior Poltergeist (Engineer)',
    years: '2021 - Present',
    desc: 'Haunting the legacy monolith and slowly migrating it to React.'
  },
  {
    company: 'Startup.io',
    role: 'Full Stack Apparition',
    years: '2018 - 2021',
    desc: 'Summoned features from the void. Survived 3 pivots.'
  },
  {
    company: 'Agency X',
    role: 'Junior Code Zombie',
    years: '2016 - 2018',
    desc: 'Mindlessly churned out WordPress themes. Brains...'
  },
  // Add more entries here
];
The left/right alternation is calculated automatically from the entry’s index in the array — even-indexed entries appear on the left, odd-indexed on the right. Adding or removing an entry in the middle of the array will shift the alternation for all subsequent entries.
Entries render in the order they appear in the array, top to bottom on the timeline. Place your most recent position first so the timeline reads from present to past as the visitor scrolls down — matching the ghost story convention of the oldest haunting resting deepest in the dark.

Build docs developers (and LLMs) love

Get started for freeTalk to us