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 Skills page presents a single, dominant UI artefact: the SpellBook component. This component renders a physical grimoire-style book with parchment pages, a leather spine, and a 3D flip animation when navigating between chapters. Each page of the book lists a skill category, its constituent technologies, a percentage-based proficiency bar for each skill, and a short “incantation” that describes the discipline’s intent. The book sits centred on the page and occupies the full available width up to a 4xl max-width container.

​
Route

Nav labelPlain labelPath
Dark ArtsSkills/skills

​
Page header

  • Heading (h1): Dark Arts — Cinzel typeface, amber
  • Subheading: Turn the pages of the grimoire — teal, spaced uppercase
The SpellBook itself enters the page with a scale: 0.9 → 1 + opacity animation over 0.8 seconds.

​
SpellBook pages

The book contains exactly three pages, navigated with Prev / Next chevron buttons positioned below the book. Page changes trigger a 3D rotateY flip animation (-90° → 0° for forward, 90° → 0° for backward) powered by Framer Motion’s AnimatePresence with a spring transition (duration 0.6 s, bounce 0.2). Each page displays:
  • A centred chapter title in Cinzel bold
  • An italic incantation quote
  • A decorative SVG wave divider below the heading
  • Four skill rows with animated fill bars
  • A Page N / Vol. I footer

​
Page 1 — Front-End Alchemy

“Visually manifest that which is unseen.”
SkillProficiency
React / Next.js90%
TypeScript85%
Tailwind CSS95%
Framer Motion80%

​
Page 2 — Back-End Sorcery

“Command the hidden forces of data.”
SkillProficiency
Node.js85%
PostgreSQL75%
GraphQL80%
Python70%

​
Page 3 — Mystical Tools

“Artifacts of power for the modern mage.”
SkillProficiency
Git / GitHub90%
Docker70%
AWS65%
Figma85%

​
Proficiency bar animation

Each skill bar uses a Framer Motion width animation: it starts at 0% and expands to the target percentage over 1 second, with each bar staggered by 0.1 s × its index plus a base delay of 0.3 s. This means the four bars on a given page stagger in at 0.3 s, 0.4 s, 0.5 s, and 0.6 s respectively from when the page animates in.

​
Navigation controls

Two circular icon buttons sit below the book at -bottom-20 relative to the book container:

← Prev Page

Disabled on Page 1. Triggers a direction: -1 flip (right-to-left reveal).

Next Page →

Disabled on Page 3. Triggers a direction: +1 flip (left-to-right reveal).

​
SpellBook visual anatomy

SpellBook (max-w: 4xl, h: 600px, perspective-1000)
├── Book container (bg: ink, border: void, shadow: deep)
│   ├── Spine (left, w-12, bg: void)
│   │   └── Three amber accent lines (decorative)
│   └── Page area (bg: #e8dcc7 parchment, rounded-r-2xl)
│       ├── Noise texture overlay (fractalNoise SVG filter)
│       └── AnimatePresence → active page
│           ├── Chapter title + incantation
│           ├── SVG wave divider
│           ├── Skill rows × 4 (animated fill bars)
│           └── Page N / Vol. I footer
└── Navigation buttons (below book, -bottom-20)
    ├── ← ChevronLeft button
    └── ChevronRight → button

Build docs developers (and LLMs) love

Get started for freeTalk to us