Skip to main content

Documentation 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.

Spell Index is a single-page application (SPA) developer portfolio wrapped in an immersive witchy aesthetic. Every route, component, and piece of copy leans into the theme: the navigation sidebar labels pages as The Summoning and Dark Arts, a custom teal cursor trails across the screen, floating particles drift through an ink-dark background, and candlelit animations replace conventional UI chrome. Beneath the atmosphere is a solid modern stack — React 18, React Router v6, Framer Motion, Tailwind CSS, and Vite — compiled to fully static HTML, CSS, and JS assets that ship on GitHub Pages without a server.

​
Tech stack

Spell Index is built on five core technologies:
TechnologyVersionRole
React18Component rendering and state management
React Routerv6Client-side routing via BrowserRouter and <Routes>
Framer MotionlatestPage transitions, particle animations, hover effects
Tailwind CSSv3Utility-first styling with custom design tokens
VitelatestDev server and production bundler
Lucide React provides the icon set. Google Fonts supplies Cinzel (serif, used for headings and navigation labels) and Inter (sans-serif, used for body copy and metadata).

​
Custom color tokens

Tailwind is configured with a bespoke palette that maps to the witchy atmosphere. The following values are extracted from the compiled CSS: 
// Color tokens — approximate hex values extracted from compiled CSS
colors: {
  midnight: "#0a0a1a",  // page background
  ink:      "#1a0a2e",  // sidebar, card fills
  void:     "#05050a",  // deepest shadow, scrollbar track
  parchment:"#e8dcc7",  // body text, light surfaces
  amber:    "#f5c45a",  // active nav, headings, CTAs
  teal:     "#3dd6c4",  // accents, cursor, borders
}

​
Routes and pages

Spell Index defines ten routes. Each has a witchy label shown in the sidebar and a plain sub-label shown underneath it:
Witchy labelPlain labelPathWhat it contains
The SummoningHome/Landing hero with ConstellationText, CauldronCanvas skills preview, and introductory copy
Origin StoryAbout/aboutPersonal background section rendered with MoonPhases and TarotCard elements
Dark ArtsSkills/skillsTechnology skill set displayed via SpellBook layout
ConjuringsProjects/projectsPortfolio of projects shown as TarotCard components — click to flip and reveal detail
Day Job SpellsWork/workProfessional work history rendered as a CandleTimeline
Post-MortemsCase Studies/case-studiesIn-depth case studies presented inside SpellBook layout
ScrollsArticles/articlesArticle index using ParchmentCard components for each entry
(article slug)Article detail/articles/:slugIndividual article page at dynamic slug route
TestimonyTestimonials/testimonialsClient/colleague quotes displayed through GhostQuote
Send a RavenContact/contactContact form powered by SummoningForm with animated WaxSeal

​
The 16 witchy UI components

All custom components live in components/witchy/. Each one has a thematic name that corresponds to its function:
ComponentWhat it renders
BackgroundParticlesFixed full-screen layer of drifting amber and teal particles with a film-grain SVG noise overlay
CandleTimelineAnimated wax candles whose heights represent job duration; used on the Work page
CauldronCanvas<canvas> animation of skill-name bubbles rising and wobbling out of a SVG cauldron
ConstellationTextStaggered letter-by-letter reveal with glowing amber star dots and a teal dashed constellation path
CursorTrailReplaces the system cursor with a spring-animated teal orb and a fading trail
FooterMinimal footer with a parallax cauldron SVG that follows the mouse horizontally
GhostQuoteAnimated blockquote component for testimonials; fades in with a ghostly blur entrance
MoonPhasesScroll-driven SVG moon that morphs through phases as the user scrolls down the About page
NavigationFixed left sidebar on desktop (≥1024 px) with an amber active indicator; spring slide-in drawer on mobile
PageTransitionWraps each route in a Framer Motion opacity/blur/y entrance and exit animation
ParchmentCardAged parchment-coloured card with a wavy torn-edge top border and a WaxSeal tag; used for articles
SpellBookTwo-page book layout with spine shadow and page-turn styling for case study and skills content
SpellCircleCardCircular bordered card with rotating SVG rune ring; used for individual skill items
SummoningFormStyled contact form with cursor:none overrides, teal focus rings, and amber validation states
TarotCard3-D flip card (CSS rotateY) with a teal rune back face and an amber-bordered front face
WaxSealCircular wax seal with inset highlight/shadow, available in red, teal, and amber colorways and three sizes

​
Deployment

The repository contains a .nojekyll file and a pre-built index.html at the root — the compiled output is the repository itself, not a dist/ subdirectory. This means the site deploys directly to GitHub Pages as a static site without any build step on the host. There is no server-side rendering or API layer — every route is handled client-side by React Router. Any static host (Netlify, Vercel static export, Cloudflare Pages) can serve the repo contents identically.

Quickstart

Clone the repo and serve the pre-built static files locally in under two minutes.

Components Overview

Deep-dive into all 16 witchy UI components, their props, and usage examples.

Build docs developers (and LLMs) love

Get started for freeTalk to us