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 About page trades the conventional “bio section” format for something far more memorable. Rather than a wall of prose, the page deals three TarotCard components — one for each facet of the developer’s identity — and lets visitors draw their own conclusions. Each card fades and slides in with a staggered delay, landing in a flex-wrapped row that centres gracefully on any viewport width. A closing epigraph beneath all three cards serves as the page’s final statement.

​
Route

Nav labelPlain labelPath
Origin StoryAbout/about

​
Page header

The page opens with a two-line centred header that enters with an upward fade:
  • Heading (h1): Origin Story — rendered in the Cinzel serif typeface, amber colour
  • Subheading: Draw your cards to reveal the past — teal, spaced uppercase, small caps treatment

​
The three TarotCards

All three cards share the same TarotCard component. Each receives a Roman numeral, a title, an icon, a description, and a staggered entrance delay.

I — The Architect

Delay: 0.2 sIcon: Code brackets (</>)Born from early web development — HTML and CSS before frameworks existed. Now architects complex React applications, treating every component as a carefully crafted spell.

II — The Scholar

Delay: 0.4 sIcon: BrainA perpetual student of computer science. Whether mastering the nuances of TypeScript or deciphering ancient legacy codebases, the pursuit of knowledge never ceases.

III — The Alchemist

Delay: 0.6 sIcon: Coffee cupTransforms caffeine into code. Specialises in taking raw, chaotic requirements and distilling them into polished, user-centric experiences. The magic is in the details.

​
Closing epigraph

After all three cards have rendered, a final line of text fades in at 1.5 s delay, centred and rendered in italic parchment prose:
“Some call it software engineering. I call it whispering to sand until it thinks.”
The icons used on each card are sourced from lucide-react: Code for The Architect, Brain for The Scholar, and Coffee for The Alchemist. Each icon is rendered in amber (text-amber) at w-8 h-8.

​
Layout structure

/about  (About — "Origin Story")
├── PageTransition wrapper
│   ├── Centred header
│   │   ├── h1: "Origin Story"
│   │   └── p: "Draw your cards to reveal the past"
│   ├── Flex-wrap card row (max-w: 6xl, gap-8)
│   │   ├── TarotCard I   — The Architect  (delay 0.2s)
│   │   ├── TarotCard II  — The Scholar    (delay 0.4s)
│   │   └── TarotCard III — The Alchemist  (delay 0.6s)
│   └── Closing epigraph (delay 1.5s, italic)
└── (Global) Navigation + Footer

Build docs developers (and LLMs) love

Get started for freeTalk to us