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 Case Studies page — titled “Tales from the Crypt” — presents in-depth project stories as physical paper notes pinned to a rustic wooden corkboard. Each note is slightly rotated, curled at the edges, and topped with a red pushpin, evoking the feeling of a detective’s evidence board that has been sitting in a haunted basement for decades.

​
Route

/case-studies

​
Corkboard Layout

The outer container is styled as a dark wooden board with a subtle dot-pattern overlay to simulate corkboard texture:
Tailwind classPurpose
bg-[#3e2723]Deep walnut-brown board background
border-8 border-[#2d1b15]Thick dark-wood frame
bg-[radial-gradient(circle,_#000_1px,_transparent_1px)] bg-[length:10px_10px]Cork dot texture (10 % opacity overlay)
The notes are laid out in a responsive two-column grid (grid-cols-1 md:grid-cols-2) inside the board, with generous padding (p-8 md:p-16).

​
Case Studies

Both case studies are defined in a top-level constant: 
const CASE_STUDIES = [
  { title: 'The E-Commerce Exorcism',   summary: 'How we reduced load times from 5s to 0.8s and saved the conversion rate.' },
  { title: 'Resurrecting the Monolith', summary: 'Breaking down a 10-year-old app into microservices without downtime.' },
];
#TitleSummary
1The E-Commerce ExorcismHow we reduced load times from 5s to 0.8s and saved the conversion rate.
2Resurrecting the MonolithBreaking down a 10-year-old app into microservices without downtime.

​
Paper Note Styling

Each case study is rendered as a <motion.div> styled to look like a torn sheet of aged paper:
  • Background: bg-[#f4e4bc] — off-white parchment
  • Typography: font-spooky text-3xl text-red-900 for the title; font-body text-haunt-dark/80 for the body
  • Border accent: border-b-2 border-red-900/20 below the title
  • Resting rotation: even-indexed notes tilt -2deg, odd tilt +2deg via inline style transform
  • Edge wear: two thin bg-[#e3d3a8] strips at the very top and bottom simulate curled paper edges
  • Pushpin: an absolutely-positioned w-6 h-6 bg-red-800 rounded-full div sits above the top edge of each note, centred horizontally, with a tiny bg-white/40 highlight dot to fake a metallic sheen
  • CTA: "Read the full scroll →" — a plain <button> in text-red-900 font-bold hover:underline

​
Hover Animation

Each note is wrapped in Framer Motion’s whileHover prop for a subtle paper-wobble effect: 
<motion.div
  whileHover={{ scale: 1.02, rotate: index % 2 === 0 ? 1 : -1 }}
  style={{ transform: `rotate(${index % 2 === 0 ? -2 : 2}deg)` }}
>
  {/* note content */}
</motion.div>
  • Hovering scales the note up by 2 % and nudges the rotation 1 degree toward centre, giving the impression that someone is picking the note off the board.
  • The resting rotation and hover rotation are deliberately opposite in direction so the paper always rocks toward upright on hover.

​
Adding a New Case Study

Open src/pages/CaseStudiesPage.jsx (or the equivalent component in main.js) and append an entry to the CASE_STUDIES array: 
const CASE_STUDIES = [
  { title: 'The E-Commerce Exorcism',   summary: 'How we reduced load times from 5s to 0.8s and saved the conversion rate.' },
  { title: 'Resurrecting the Monolith', summary: 'Breaking down a 10-year-old app into microservices without downtime.' },
  // Add your entry here:
  { title: 'The Haunted API Migration',  summary: 'Moving 3M records to a new schema with zero user-facing disruption.' },
];
The grid automatically reflows to accommodate additional notes. For an odd number of notes, the last card will span its natural column width — consider adding last:md:col-span-2 last:mx-auto last:max-w-sm to the note element if you want it centred.
The “Read the full scroll →” button is currently a plain <button> with no onClick handler or href. To link each case study to a dedicated page, add a url field to the data object and replace the button with a <Link to={study.url}> or an <a href={study.url}>.

Build docs developers (and LLMs) love

Get started for freeTalk to us