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.

The Testimonials page collects social proof from the developer’s most distinguished clients and colleagues — all of whom happen to be monsters. Each testimonial is rendered as a FloatingGhost card that drifts upward from below and hovers in place, giving the page a sense of gentle, spectral levitation. The cards sit in a flex-row on medium and wider screens and stack vertically on mobile.
Route: /testimonials
Static HTML: pages/Testimonials.html
Page function: W() in assets/main.js
Data array: _ in assets/main.js

​
What the page displays

ElementContent
Section heading (h1)Spirits Speak Well of Me
SubtitleDon't just take my word for it. Listen to the voices from beyond.
Layoutflex-col md:flex-row justify-center items-center md:items-start gap-12 md:gap-8
Card componentFloatingGhost — one per testimonial

​
Testimonials data

Three testimonials are stored in the _ array in assets/main.js.
NameRoleQuoteFloat delay
Dr. FrankensteinLead Scientist”It’s alive! The code is beautifully structured and monstrously fast.”0 s
Count DraculaCEO, BloodBank Inc.”I love working with them. They never sleep, just like me.”1.5 s
The MummyProduct Manager”Unwrapped our legacy code and brought it into the modern era.”0.8 s

​
Raw data structure

// assets/main.js — array _
const _ = [
  {
    name: "Dr. Frankenstein",
    role: "Lead Scientist",
    quote: "It's alive! The code is beautifully structured and monstrously fast.",
    delay: 0,
  },
  {
    name: "Count Dracula",
    role: "CEO, BloodBank Inc.",
    quote: "I love working with them. They never sleep, just like me.",
    delay: 1.5,
  },
  {
    name: "The Mummy",
    role: "Product Manager",
    quote: "Unwrapped our legacy code and brought it into the modern era.",
    delay: 0.8,
  },
];

​
Halloween-themed concept

Classic horror figures stand in for real-world clients and colleagues, letting the page deliver authentic portfolio signals (performance, reliability, modernisation skills) without exposing private client details. Each quote is written so it sounds like genuine praise while being in-character for the speaker: Frankenstein marvels at the code coming to life, Dracula appreciates the late-night work ethic, and the Mummy celebrates a migration project.

​
The delay field

The delay field on each testimonial serves the FloatingGhost component’s idle float animation — the gentle bobbing effect that runs continuously after the card has entered the page. Each ghost floats on a slightly different timer so they don’t all bob in synchrony, creating a more naturalistic, haunted feel. The entrance stagger is separate (driven by array index, see below).

​
Framer Motion animations

Each ghost card rises up from below on mount with a stagger based on array position. 
// Per-card wrapper (motion.div)
{
  initial: { opacity: 0, y: 50 },
  animate: { opacity: 1, y: 0 },
  transition: { delay: index * 0.3 }
}
The header block uses the standard top-drop entrance with an extended bottom margin (mb-24) to give the floating cards visual breathing room: 
// Header motion.div
{
  initial: { y: -20, opacity: 0 },
  animate: { y: 0,   opacity: 1 }
}
With three cards the stagger sequence runs: 0 s → 0.3 s → 0.6 s.

​
How to customise

1

Add a new testimonial

Append an object to the _ array with name, role, quote, and delay fields. Choose a delay value between 0 and 2 that is distinct from the other ghosts’ delays to keep their float animation offsets varied.
2

Edit an existing testimonial

Find the object by name in the _ array and update role or quote. Quotes should be kept short — one or two sentences — to fit neatly inside a FloatingGhost card.
3

Replace with real client names

The testimonial names and roles are free-form strings. Replace monster names with real colleague or client names if you prefer a more conventional presentation. The FloatingGhost component will render the same card layout regardless.
4

Reorder testimonials

Move objects within the _ array to change which ghost appears first. The leftmost card on desktop is the first object in the array.
Keep the delay values for each ghost’s float animation spread out to avoid synchronised bobbing. Values like 0, 0.8, and 1.5 (as in the defaults) create a pleasingly random feel. Avoid setting all three to the same value.

Build docs developers (and LLMs) love

Get started for freeTalk to us