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 /blog route — labelled Bump in the Blog (or Things That Go Bump in the Blog as its on-page heading) — presents developer essays as physical books standing on a wooden shelf. Each book spine displays its title written vertically and a row of ghost icons at the base rating its spookiness on a 1-to-5 scale. Clicking a book lifts it off the shelf with a Framer Motion hover animation and opens a reading modal with the full post text and its spookiness rating displayed prominently at the top.

​
Posts at a Glance

TitleSpookinessOpening Line
Why I Stopped Using Redux👻👻👻 (3 / 5)“It was a dark and stormy night when I realized my boilerplate had grown larger than my actual application logic…”
CSS Grid: A Horror Story👻👻👻👻👻 (5 / 5)“I tried to center a div. What happened next will chill you to the bone…”
The Phantom Menace of Memory Leaks👻👻👻👻 (4 / 5)“Your app is running fine. Then slowly, silently, the RAM usage creeps up…”

​
Posts

Why I Stopped Using Redux

Spookiness: 3 / 5 — A confessional tale about the night boilerplate swallowed the application whole. Mildly eerie but deeply relatable.

CSS Grid: A Horror Story

Spookiness: 5 / 5 — The most terrifying entry in the collection. One developer. One div. An alignment problem that should not have been possible.

The Phantom Menace of Memory Leaks

Spookiness: 4 / 5 — A slow-burn thriller. The RAM usage climbs in silence. The garbage collector is nowhere to be found.

​
The Spookiness Rating System

Every post carries a spookiness score from 1 to 5, rendered as a row of ghost icons at the base of the book spine (and again at the top of the reading modal). Filled ghosts represent the post’s score; unfilled ghosts represent the remaining headroom up to 5.
ScoreLabelWhat to Expect
1Mildly EerieA mild shiver — an odd edge case, a surprising API decision
2UnsettlingA bug that took longer than it should have to find
3SpookyA real architectural misstep or framework regret
4TerrifyingA production incident; sleepless nights were involved
5Maximum HorrorYou will question your career choices
The ghost icons are sourced from the shared Ghost component (./assets/ghost.js) used throughout the site. A filled ghost (fill="currentColor") is coloured with text-spooky-turquoise; an empty ghost uses text-spooky-cream/20 and fill="none".

​
Adding a New Blog Post

Posts are stored in a plain JavaScript array inside the blog page component. Append an object matching the shape below to publish a new entry: 
{
  id: 4,
  title: "Post Title",
  spookiness: 4,
  color: "bg-spooky-navy",
  content: "Full blog post body text..."
}
FieldTypePurpose
idnumberUnique React list key
titlestringRendered vertically on the book spine and as the modal <h2>
spookinessnumber (1–5)Controls how many ghost icons are filled in
colorstringTailwind background class applied to the book spine
contentstringFull prose shown inside the reading modal

​
Accepted color Values

The following background classes are used across the existing posts and are guaranteed to be present in the compiled Tailwind output: 
bg-spooky-navy
bg-spooky-midnight
bg-[#1f4b54]
Adding an arbitrary color outside this set may require a Tailwind safelist entry or a JIT-safe full class string in the config.
The bookshelf layout renders each post as a tall, narrow book spine with a fixed width and a height of h-64. The post title is displayed with writing-mode: vertical-rl and transform: rotate(180deg) so it reads bottom-to-top — standard book-spine orientation. The transformOrigin is set to bottom center so that the Framer Motion whileHover lift animation (y: -20, rotate: -2) pivots naturally from the shelf surface, as if a hand is pulling the book out. The modal close button uses the X icon (lucide-react x).

Build docs developers (and LLMs) love

Get started for freeTalk to us