Spell Index is assembled from 16 purpose-built React components that live in theDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/spell-index/llms.txt
Use this file to discover all available pages before exploring further.
components/witchy/ directory. Each component embraces the portfolio’s mystical aesthetic — dark parchment textures, amber and teal accents, Framer Motion animations, and Cinzel typeface headings. The table below organises every component by category; follow the links to each group’s dedicated page for full prop references and usage examples.
Layout
These three components form the structural skeleton of every page. They contain no incoming props and manage their own state internally.Navigation
Fixed left sidebar (
w-64) on lg+ breakpoints with 9 routes, an animated amber active-state indicator, and a full-screen slide-in mobile drawer.Footer
A compact 192 px footer with a dot-grid background and a teal cat SVG icon that spring-follows the visitor’s mouse horizontally across the bar.
PageTransition
A children wrapper that applies an
AnimatePresence mode="wait" fade + blur + slide enter/exit transition to every page route change.Data Display
Seven components render portfolio content — skills, projects, work history, articles, and testimonials. Most accept Framer Motiondelay props for staggered entrance animations.
SpellBook
A 3D CSS flip-book UI displaying three chapters of skills data. Includes prev/next pagination with a
rotateY page-turn animation and inline SVG parchment texture.TarotCard
A flip card showing a decorative back face and, on click, a front face with Roman numeral, Lucide icon, title, and description. Accepts
numeral, title, icon, description, and delay props.SpellCircleCard
A circular project card with two concentric rotating ring borders, a hover glow, tech tag pills, and optional GitHub and live-link icon buttons.
WaxSeal
A small embossed badge rendered with CSS
box-shadow to simulate pressed wax. Accepts initials, color ("red" default, "teal", or "amber"), and size props.ParchmentCard
An article preview card styled as aged parchment paper. Includes a torn-edge top border, a
WaxSeal badge, title, excerpt, date, and a React Router link to /articles/:slug.GhostQuote
A testimonial card that infinitely floats vertically via Framer Motion. Accepts
quote, author, role, delay, and floatOffset props.CandleTimeline
Renders three work-experience entries as physical candles — candle height is proportional to tenure length (
durationYears × 60, clamped 100–250 px) — with an animated Framer Motion flame on each wick.Interactive Visuals
Four components add interactive or animated focal points to specific pages.CauldronCanvas
An HTML5
<canvas> animation where tech-skill bubbles (React, TypeScript, Node.js, etc.) rise and wobble from a hand-drawn SVG cauldron beneath them.MoonPhases
Reads the page’s vertical scroll progress (via Framer Motion
useScroll) and morphs an SVG path in real-time to render the correct moon phase shape for the current scroll position.ConstellationText
Animates a string character-by-character with staggered blur-fade-in entrances, placing an amber pulsing star dot above each letter and connecting them with a dashed SVG constellation line.
SummoningForm
A three-field contact form (name, email, message) overlaid on a summoning-circle SVG that progressively illuminates as each field is completed. Shows a success animation on submit.
Effects
Two zero-prop ambient components are mounted globally and run across the entire application.BackgroundParticles
Renders 40
position: fixed Framer Motion particles (80 % teal, 20 % amber) that slowly drift upward and fade, layered behind all page content at z-index: 0.CursorTrail
Replaces the system cursor with a teal
mix-blend-screen dot that spring-follows pointer movement and leaves a fading 12-point particle trail. Changes to amber when hovering interactive elements.