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.

Five card components handle the bulk of portfolio content display — from the About page’s tarot personality cards to the project circular badges, article parchment cards, and testimonial ghost quotes. Each component is documented below with its full prop set, types, and a usage example.

​
TarotCard

TarotCard renders a classic flip card. The back face shows a decorative spinning star rune with the text “Reveal”. Clicking the card flips it 180° on the Y axis to show the front face: a Roman numeral, a Lucide React icon inside a circular frame, a title, and a description paragraph.

​
Props

​
numeral
string
required
Roman numeral displayed at the top of the card face, e.g. "I", "II", "III". Used to number the card in the major arcana style.
​
title
string
required
Card title displayed in Cinzel font below the icon, e.g. "The Architect".
​
icon
ReactElement
required
A Lucide React icon element rendered inside a circular amber-bordered frame on the card face. Pass the JSX directly: icon={<Code className="w-8 h-8 text-amber" />}.
​
description
string
required
Body text displayed below the title. Rendered in font-inter at 14 px. Long descriptions scroll within the card using the custom scrollbar.
​
delay
number
default:"0"
Framer Motion entrance animation delay in seconds. Staggers cards when rendering a row. The entrance itself animates y: 50 → 0 and opacity: 0 → 1 over 0.8 s.

​
Usage

import { TarotCard } from "./components/witchy/TarotCard";
import { Code } from "lucide-react";

<TarotCard
  numeral="I"
  title="The Architect"
  icon={<Code className="w-8 h-8 text-amber" />}
  description="Designs systems with structure and intention, 
               turning requirements into elegant blueprints."
  delay={0.2}
/>
Cards are w-72 h-[420px] fixed size. When rendering multiple cards in a row, wrap them in a flex container with gap-8 and use incrementing delay values (0, 0.2, 0.4) for a staggered cascade effect.

​
SpellCircleCard

SpellCircleCard renders a circular project card. Two concentric rings rotate in opposite directions (one clockwise, one counter-clockwise) around a central disc that houses the project title, description, tech tags, and optional link icons. On hover the inner disc scales up slightly and the border brightens to full teal.

​
Props

​
title
string
required
Project name displayed in amber Cinzel font at the center of the circle.
​
description
string
required
Short project description shown below the title. Limited to three visible lines via line-clamp-3.
​
tags
string[]
required
Array of technology tag strings rendered as small teal pill badges inside the circle, e.g. ["Next.js", "Shopify", "Three.js"].
​
github
string
Optional GitHub repository URL. When provided, a GitHub icon button appears at the bottom of the card. Opens in a new tab.
​
link
string
Optional live project URL. When provided, an external link icon button appears alongside the GitHub icon. Opens in a new tab.
​
delay
number
default:"0"
Framer Motion entrance animation delay in seconds. The card enters via scale: 0.8 → 1 and opacity: 0 → 1 over 0.8 s.

​
Usage

import { SpellCircleCard } from "./components/witchy/SpellCircleCard";

<SpellCircleCard
  title="Astral E-Commerce"
  description="A headless Shopify storefront with Three.js 
               product visualisations and real-time inventory."
  tags={["Next.js", "Shopify", "Three.js"]}
  github="https://github.com/example/astral-ecommerce"
  link="https://astral-ecommerce.example.com"
  delay={0}
/>

​
WaxSeal

WaxSeal renders a small circular embossed badge that mimics a pressed wax seal using layered CSS box-shadow values for the inset highlight and shadow. It is used by ParchmentCard as a tag badge but can be placed anywhere a decorative stamp is needed.

​
Props

​
initials
string
required
Text displayed inside the seal. Typically 2 characters ("JS", "01") but accepts any short string.
​
color
"teal" | "amber" | "red"
default:"\"red\""
Color variant of the wax. Each variant uses a matching set of base, highlight, and shadow tones:
  • "teal" — teal/cyan palette
  • "amber" — gold palette
  • "red" — deep crimson palette (default)
​
size
"sm" | "md" | "lg"
default:"\"md\""
Controls the overall dimensions and font size of the seal:
  • "sm" — w-8 h-8, text-xs
  • "md" — w-12 h-12, text-sm
  • "lg" — w-16 h-16, text-xl

​
Usage

import { WaxSeal } from "./components/witchy/WaxSeal";

<WaxSeal initials="01" color="teal" size="md" />
<WaxSeal initials="JS" color="amber" size="lg" />

​
ParchmentCard

ParchmentCard renders an article preview as a piece of aged parchment paper (bg-[#e8dcc7]). A torn-paper SVG strip decorates the top edge, and a WaxSeal badge (using color="red") peeks from the top-right corner at a 45° angle. The entire card is wrapped in a React Router <Link> to /articles/${slug}. On hover the card lifts 8 px.

​
Props

​
title
string
required
Article headline rendered in Cinzel font (text-xl font-bold) on the parchment surface.
​
excerpt
string
required
Article preview text shown below the title. Truncated to three lines via line-clamp-3.
​
date
string
required
Publication date string displayed above the title in small uppercase tracking, e.g. "Oct 31, 2023".
​
tag
string
required
Topic tag string. The first two characters (uppercased) are passed to the WaxSeal component as initials. For example tag="React" produces a seal reading "RE".
​
slug
string
required
URL slug used to build the article detail link: /articles/${slug}. For example slug="state-management" links to /articles/state-management.
​
delay
number
default:"0"
Framer Motion entrance animation delay in seconds. Card enters via y: 20 → 0 and opacity: 0 → 1 over 0.6 s.

​
Usage

import { ParchmentCard } from "./components/witchy/ParchmentCard";

<ParchmentCard
  title="The Dark Art of State Management"
  excerpt="A deep dive into why global state always seems 
           to escape containment spells at 3 AM."
  date="Oct 31, 2023"
  tag="React"
  slug="state-management"
  delay={0}
/>

​
GhostQuote

GhostQuote renders a testimonial card with a semi-transparent gradient background. After its entrance animation completes, the card enters an infinite float loop — drifting 0 → -15px → 0 vertically. Multiple GhostQuote instances with different floatOffset values (which set the delay on the float loop) create an asynchronous bobbing effect across a row of testimonials.

​
Props

​
quote
string
required
The testimonial text. Rendered in italic font-inter at text-lg inside smart quote characters.
​
author
string
required
Full name of the person being quoted, e.g. "Sarah Jenkins". Displayed in amber Cinzel below the quote. The first character is also used as an avatar initial.
​
role
string
required
Job title and company of the author, e.g. "Product Manager @ MysticTech". Displayed in small teal text below the author name.
​
delay
number
default:"0"
Framer Motion entrance animation delay in seconds. Card enters via y: 50 → 0 and opacity: 0 → 1 over 1 s.
​
floatOffset
number
default:"0"
Delay in seconds applied to the infinite float loop animation. Set different values per card (e.g. 0, 1, 2) so quotes bob out of phase with each other.

​
Usage

import { GhostQuote } from "./components/witchy/GhostQuote";

<GhostQuote
  quote="Working with this developer felt like hiring a wizard. 
         The project shipped ahead of schedule and under budget."
  author="Sarah Jenkins"
  role="Product Manager @ MysticTech"
  delay={0}
  floatOffset={0}
/>

<GhostQuote
  quote="The animations alone were worth the contract. 
         Every stakeholder was speechless."
  author="Marcus Rayne"
  role="CTO @ Ethereal Startup"
  delay={0.3}
  floatOffset={1.5}
/>

Build docs developers (and LLMs) love

Get started for freeTalk to us