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 Case Studies page takes on the aesthetic of a detective’s evidence room — cork board, string, and pinned notes connecting the dots across the developer’s most involved project work. The entire page below the header is occupied by a single EvidenceBoard component, which fills the available width. The board scales gently into view on mount, giving the impression of the room gradually coming into focus.
Route: /case-studies
Static HTML: pages/CaseStudies.html
Page function: E() in assets/main.js

​
What the page displays

ElementContent
Section heading (h1)The Evidence Room
SubtitleConnecting the dots on my most complex investigations.
Primary componentEvidenceBoard — fills the full page width

​
Halloween-themed concept

The evidence-room framing recontextualises deep-dive project work as a murder-mystery investigation. Case studies — which in a conventional portfolio would be long-form write-ups — are treated as “investigations” where the developer has been piecing together clues: design decisions, technical trade-offs, and performance results. The EvidenceBoard component likely renders a corkboard-style layout with pinned cards or notes connected by visible string, reinforcing the paranoid detective aesthetic.

​
Component: EvidenceBoard

The EvidenceBoard component is imported from components/EvidenceBoard.js and accepts no props from the page layer — all case study content is managed internally within the component itself. To update case study content, edit components/EvidenceBoard.js (or its data source) directly.

​
Framer Motion animations

The page uses two motion elements with a clean two-beat entrance sequence. 
// Header block (heading + subtitle) — drops from above
{
  initial: { y: -20, opacity: 0 },
  animate: { y: 0,   opacity: 1 }
  // no explicit delay
}

// EvidenceBoard wrapper — scales into view
{
  initial: { opacity: 0, scale: 0.95 },
  animate: { opacity: 1, scale: 1 },
  transition: {
    delay: 0.2,
    duration: 0.5
  }
}
The duration: 0.5 on the board entrance is notably longer than the default, giving the reveal a slow, deliberate quality — as if a lamp is being turned on in a dark room.

​
How to customise

1

Add or edit case studies

All case study content lives inside components/EvidenceBoard.js. Open that file to add new investigation cards, update project details, or reorganise the board layout.
2

Update the page header

The heading and subtitle are plain string literals inside the E() function in assets/main.js. Replace "The Evidence Room" or the subtitle text to rename the section.
3

Adjust the entrance animation

The EvidenceBoard wrapper uses scale: 0.95 as its initial state. Reduce this closer to 1 (e.g. 0.98) for a subtler reveal, or reduce it further (e.g. 0.9) for a more dramatic zoom-in effect.
4

Change the animation duration

The duration: 0.5 value on the board entrance controls how long the scale-in takes. Increase it for a slower, more atmospheric reveal or decrease it for a snappier entrance.
Because EvidenceBoard receives no props, it is entirely self-contained. This makes it easy to swap in a completely different layout component — just replace <EvidenceBoard /> in the E() function with any other component and the page wrapper and animations will still apply correctly.

Build docs developers (and LLMs) love

Get started for freeTalk to us