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.

The Projects page surfaces finished work — artefacts “brought into the material plane,” as the page’s own subheading puts it. Each project is rendered as a SpellCircleCard inside a responsive two-column grid. Cards stagger into view with a 0.2 s delay per index, and each card may carry a GitHub link badge, a live-link badge, or both, depending on what the project has publicly available.

​
Route

Nav labelPlain labelPath
ConjuringsProjects/projects

​
Page header

  • Heading (h1): Conjurings — Cinzel typeface, amber
  • Subheading: Artifacts brought into the material plane — teal, spaced uppercase

​
Project cards

All four projects are declared as a static data array and mapped over SpellCircleCard. Cards are arranged in a grid-cols-1 md:grid-cols-2 grid with a gap-16 between cells. The full project data from source:

Astral E-Commerce

Tags: Next.js · Shopify · Three.jsA headless Shopify storefront built with Next.js and Framer Motion. Features real-time inventory updates and a custom 3D product viewer.Links: GitHub · Live

Grimoire CMS

Tags: React · Node.js · Socket.ioA custom content management system designed for writers. Markdown-first with real-time collaboration features.Links: GitHub only

Potion Analytics

Tags: TypeScript · WebGL · PythonDashboard for visualising complex user flows. Processes millions of events using a custom WebGL rendering engine.Links: Live only

Familiar AI

Tags: Rust · OpenAI API · CLIAn AI assistant that lives in your terminal. Helps debug code and write commit messages automatically.Links: GitHub · Live

​
Link badge behaviour

Each SpellCircleCard conditionally renders badges based on whether github and/or link props are provided. The source data for each project:
Projectgithub proplink prop
Astral E-Commerce"#" ✓"#" ✓
Grimoire CMS"#" ✓—
Potion Analytics—"#" ✓
Familiar AI"#" ✓"#" ✓
In the current build all external links resolve to "#" (placeholder anchors). Swap these out for real repository or deployment URLs when the projects are published publicly.

​
Card entrance animation

Each card is passed a delay prop equal to index × 0.2: 
Card 0 (Astral E-Commerce) → delay: 0.0 s
Card 1 (Grimoire CMS)       → delay: 0.2 s
Card 2 (Potion Analytics)   → delay: 0.4 s
Card 3 (Familiar AI)        → delay: 0.6 s

​
Layout structure

/projects  (Projects — "Conjurings")
├── PageTransition wrapper
│   ├── Centred header
│   │   ├── h1: "Conjurings"
│   │   └── p: "Artifacts brought into the material plane"
│   └── Grid (grid-cols-1 md:grid-cols-2, gap-16, max-w: 5xl)
│       ├── SpellCircleCard — Astral E-Commerce    (delay 0.0s)
│       ├── SpellCircleCard — Grimoire CMS         (delay 0.2s)
│       ├── SpellCircleCard — Potion Analytics     (delay 0.4s)
│       └── SpellCircleCard — Familiar AI          (delay 0.6s)
└── (Global) Navigation + Footer

Build docs developers (and LLMs) love

Get started for freeTalk to us