Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/full-stack-sorcerer/llms.txt

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

The /testimonials route, titled They Survived, showcases kind words from the living — or at least from clients who made it out the other side. A ghost figure floats and bobs at the center of the page, anchoring a polaroid-style testimonial card that automatically rotates through every reviewer at a steady six-second interval. Each transition fires a “BOO!” badge that pops up and vanishes, keeping visitors on their toes.

​
The Testimonials

“They brought my monstrous ideas to life with terrifying efficiency. The code is alive!”— Dr. Frankenstein, Lead Scientist

“A developer who truly understands the importance of working the night shift. Flawless execution.”— Count Dracula, CEO, BloodBank Inc.

“I tried to break their UI by clicking where I shouldn’t, but the error handling was rock solid.”— The Invisible Man, QA Tester
The testimonial carousel is driven by a setInterval that fires every 6 seconds. On each tick it:
  1. Sets a showBoo flag to true, triggering the “BOO!” badge to animate in via Framer Motion (scale from 0.5 → 1). On exit, the badge animates out with opacity: 0, scale: 1.5, and filter: "blur(10px)".
  2. After 1 second, clears the flag and advances the active index: (current + 1) % testimonials.length.
The active testimonial card itself is wrapped in a Framer Motion AnimatePresence block with mode="wait", so the outgoing card slides and rotates away before the incoming card enters. Each card is rendered with a slight random rotation (Math.random() * 6 - 3 degrees) for that authentic polaroid-on-a-corkboard feel. The ghost figure above the card uses a continuous y keyframe animation — [-10, 10, -10] — over 4 seconds on a looping ease, creating a gentle floating bob that returns smoothly to its starting position.
All testimonial portrait images are rendered with a sepia filter and increased contrast (Tailwind classes sepia-[0.5] contrast-125) applied directly to the image wrapper div. This gives every headshot a faded, aged photograph aesthetic that fits the spooky theme. Keep this in mind when choosing portrait images — high-contrast source photos work best.

​
Adding a New Testimonial

Testimonials are stored in a plain array near the top of main.js. To add a fourth entry, append a new object following this shape: 
{
  id: 4,
  name: "Full Name",
  role: "Job Title",
  text: "The testimonial quote text goes here.",
  image: "https://images.unsplash.com/photo-...?w=150&q=80"
}
FieldTypeDescription
idnumberUnique identifier; increment from the previous entry.
namestringFull display name of the testimonial author.
rolestringJob title or company role shown beneath the name.
textstringThe quote body. Keep it punchy — one to three sentences works best.
imagestringUnsplash (or any CDN) URL. Use ?w=150&q=80 query params to keep it lean.
After adding the entry the carousel will automatically include it in the rotation — no other changes required.

Build docs developers (and LLMs) love

Get started for freeTalk to us