Full Stack Sorcery is a personal developer portfolio built as a single-page application — and it commits fully to the bit. Every route, every label, and every ambient animation is wrapped in a spooky aesthetic, transforming a standard “About / Projects / Contact” structure into a haunted mansion you navigate through. Atmospheric fog drifts across every page, your mouse becomes a glowing ghost, and if you dare to sit idle long enough, something will crawl out of the dark to greet you.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 Tech Stack
The project is built on a modern React front-end toolchain with motion and styling libraries chosen to support the dark, cinematic feel:- React 18 — component model with concurrent features and
useId - React Router v6 — declarative client-side routing with
<Outlet>layouts - Framer Motion — spring-physics animations,
AnimatePresencepage transitions, andmotioncomponents throughout - Tailwind CSS — utility-first styling with a custom
spooky-*color palette andfont-display/font-bodyvariants - Vite — fast dev server and optimized production bundler
Color Palette
| Token | Hex | Usage |
|---|---|---|
spooky-midnight | #0d1f24 | Page backgrounds |
spooky-navy | #0a2a2f | Card and panel backgrounds |
spooky-cream | #fef3c7 | Body text, light surfaces |
spooky-turquoise | #3fd6c0 | Primary accents, glow effects |
spooky-aqua | #5eead4 | Secondary highlights |
spooky-orange | #f59e0b | Warning-style accents |
Typography
- Bagel Fat One — display font used for all headings (
font-display) - DM Sans — body copy and UI labels (
font-body)
Routes & Spooky Navigation
The app has nine routes. The homepage renders a responsive grid of nav cards — four columns at large breakpoints — where each card uses a spooky metaphor as its label rather than the functional page name:| Route | Spooky Label | What It Is |
|---|---|---|
/ | (Home) | Nav card grid + ambient tip |
/about | Lurking Around | Developer origin story |
/projects | Skeletons | Featured projects |
/skills | Tricks | Technical skill set |
/work | Haunts | Work history |
/case-studies | Crypt Notes | Deep-dive case studies |
/blog | Bump in the Blog | Writing |
/testimonials | They Survived | Testimonials |
/contact | Boo at Me | Contact form |
Ambient Components
Three special components layer atmosphere on top of every page. They are mounted globally inside the rootLayout and are always present regardless of the active route.
FogBackground
A fixed, full-viewport
div with two overlapping radial-gradient layers that scroll horizontally at different speeds using animate-fog-scroll. Rendered at opacity-30 with mix-blend-screen so it tints without obscuring content.CustomCursor
Replaces the native OS cursor with a Framer Motion
motion.div containing a Lucide ghost icon. The cursor follows mouse position with spring-physics smoothing (damping: 25, stiffness: 300), scales up when hovering interactive elements, and glows turquoise (#3fd6c0). Respects prefers-reduced-motion.JumpScareController
Tracks idle time with a 20-second
setTimeout that resets on every mousemove and click. After 20 seconds of inactivity, a ghost slides in from the right edge of the viewport. Every third click also drops a bug icon from the cursor position via AnimatePresence. Fully disabled when prefers-reduced-motion: reduce is set.Page Transitions
All route changes are wrapped in Framer Motion’sAnimatePresence, which keeps the outgoing page mounted long enough for its exit animation to complete before the incoming page enters. Each page transition uses a fade combined with a vertical slide and blur (opacity, y, filter: blur) over 0.4s, giving every navigation a smooth, ghost-like feel rather than an instant swap.
Key Sections
Projects
The Skeletons page — a grid of featured projects, each with a description, tech stack tags, and a hover-reveal overlay.
Skills
The Tricks page — an animated skill breakdown organized by category.
Work History
The Haunts page — a timeline of professional roles and responsibilities.
Case Studies
The Crypt Notes page — long-form case studies with technical depth.