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 /projects route, titled “Skeletons in the Closet”, is the portfolio’s projects showcase. When you first land on the page, you’re greeted by a darkened closet sealed shut with two heavy doors. The drama is intentional — nothing is revealed until you decide to look inside. Clicking the pulsing prompt creaks the doors open via a Framer Motion animation, exposing three polaroid-style project cards that hang from strings and sway gently. Each card can be clicked to summon a full-detail modal complete with a project image, description, tech-stack tags, and links to the live site and GitHub repository.

​
Projects

NameTech StackDescription
Poltergeist APINode.js, Express, MongoDBA headless CMS that occasionally moves your content around when you aren’t looking.
Vampire UIReact, Tailwind, Framer MotionA component library that only works in dark mode. Burns up if exposed to light themes.
Zombie StateTypeScript, Redux, ReactA state management library that refuses to die. Keeps re-rendering even after unmount.

​
Interactive Closet Experience

1

Visit /projects

Navigate to the /projects route. You’ll see the “Skeletons in the Closet” heading and a closed darkened closet with two heavy doors. A pulsing prompt reads “Click to Creak Open”.
2

Creak open the closet doors

Click anywhere on the closet. The left door swings open to the left and the right door swings open to the right via a 1-second Framer Motion rotateY exit animation, revealing the interior.
3

Polaroid cards swing into view

Three polaroid-style cards animate upward into position (opacity: 0 → 1, y: 50 → 0) with staggered delays. Each card hangs from a thin string attached to the closet ceiling and gently oscillates via a looping animate-swing CSS animation.
4

Click a card to open the detail modal

Clicking any card opens a full-screen modal overlay. The modal slides in with a scale + rotation entrance animation and displays the project image, full description, tech-stack tags, a Live Haunt link, and a The Bones GitHub link. Click outside the modal or the ✕ button to dismiss it.

​
Project Cards

Poltergeist API

A headless CMS built on Node.js, Express, and MongoDB that occasionally moves your content around when you aren’t looking.

Vampire UI

A dark-mode-only component library powered by React, Tailwind CSS, and Framer Motion. Combusts on contact with light themes.

Zombie State

A state management library built with TypeScript, Redux, and React that refuses to die — keeps re-rendering even after unmount.

​
Adding a New Project

To add a fourth project, extend the projects array defined at the top of main.js. Each entry follows this shape: 
{
  id: 4,
  title: "Project Name",
  desc: "Short description of the project.",
  tech: ["Tech1", "Tech2", "Tech3"],
  image: "https://images.unsplash.com/...",
  link: "https://live-url.com",
  github: "https://github.com/..."
}
FieldTypePurpose
idnumberUnique identifier; used as the React list key.
titlestringProject name shown on the polaroid card and in the modal heading.
descstringFull description rendered in the modal body.
techstring[]Tech tags rendered as pill badges in the modal.
imagestringURL for the polaroid thumbnail and modal hero image.
linkstringDestination for the Live Haunt button in the modal.
githubstringDestination for the The Bones GitHub button in the modal.
The projects array is defined directly in assets/main.js as a plain JavaScript constant assigned to the compiled variable $. No external CMS or API is involved — swap in your real project data by editing that file directly and rebuilding the app.

Build docs developers (and LLMs) love

Get started for freeTalk to us