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 Articles page — titled “Scrolls of Knowledge” — acts as the portfolio’s writing archive. Three articles are rendered as ParchmentCard components in a responsive grid. Each card has the visual texture of aged parchment and is stamped in the top-right corner with a WaxSeal carrying the article’s tag initials (e.g. "RE" for React, "CS" for CSS, "JS" for JS). Clicking any card navigates to the article detail page at /articles/:slug, where the full article unfurls with a parchment scroll entrance animation.

​
Routes

Nav labelPlain labelPath
ScrollsArticles/articles
—Article detail/articles/:slug

​
Page header

  • Heading (h1): Scrolls of Knowledge — Cinzel typeface, amber
  • Subheading: Thoughts penned in digital ink — teal, spaced uppercase

​
Articles

All three articles are declared as a static array in main.js. Each card stagger-animates in at delay: index × 0.2 s.

The Dark Art of State Management

Date: Oct 31, 2023Tag: React · WaxSeal initials: RESlug: state-managementWhen to use Context, when to use Redux, and when to just pass props down like a normal person. A guide to avoiding over-engineering your React apps.

CSS Grid: A Summoning Circle

Date: Sep 15, 2023Tag: CSS · WaxSeal initials: CSSlug: css-gridStop floating elements and start placing them exactly where they belong. Master the two-dimensional layout system that feels like pure magic.

Demystifying the Event Loop

Date: Aug 02, 2023Tag: JS · WaxSeal initials: JSSlug: event-loopUnderstanding how JavaScript handles asynchronous operations without blocking the main thread. It’s not magic, it’s just a very fast queue.

​
ParchmentCard anatomy

Each card is rendered as a React Router <Link> wrapping a parchment-styled div: 
ParchmentCard
├── Torn-edge top border (SVG data-URI, opacity-50)
├── WaxSeal (-top-4 -right-4, red, size sm, tag initials)
│   └── Rotates +12° and scales up on card hover
└── Content (relative z-10)
    ├── Date (ink/50, uppercase, tracking-widest)
    ├── Title (Cinzel bold, ink → amber-800 on hover)
    ├── Excerpt (3-line clamp, ink/80)
    └── "Unroll Scroll →" CTA (arrow translates right on hover)
Cards lift -translate-y-2 on hover, and the "Unroll Scroll →" arrow translates +translate-x-2 simultaneously — both transitions are driven by Tailwind’s group-hover utilities.

​
Article grid layout

/articles  (Articles — "Scrolls of Knowledge")
├── PageTransition wrapper
│   ├── Centred header
│   │   ├── h1: "Scrolls of Knowledge"
│   │   └── p: "Thoughts penned in digital ink"
│   └── Grid (grid-cols-1 md:grid-cols-2 lg:grid-cols-3, gap-12, max-w: 6xl)
│       ├── ParchmentCard — state-management   (delay 0.0s)
│       ├── ParchmentCard — css-grid           (delay 0.2s)
│       └── ParchmentCard — event-loop         (delay 0.4s)
└── (Global) Navigation + Footer

​
Article detail page (/articles/:slug)

The detail route reads the slug param from the URL via React Router’s useParams. In the current build, the detail view renders a hard-coded article (“The Dark Art of State Management”) as a demonstration of the full-page parchment scroll layout — dynamic slug-based content loading is not yet implemented.

​
URL pattern

/articles/state-management
/articles/css-grid
/articles/event-loop

​
Parchment scroll entrance animation

The detail page’s defining interaction is its entrance: the article container (bg-[#e8dcc7], parchment colour) scales in from scaleY: 0 to scaleY: 1 with transformOrigin: "top", taking 1 second with an easeOut curve. This makes the parchment appear to unfurl downward from the top of the viewport. 
initial:  { opacity: 0, scaleY: 0, transformOrigin: "top" }
animate:  { opacity: 1, scaleY: 1 }
transition: { duration: 1, ease: "easeOut" }
A decorative rolled-edge bar is placed at both the top and bottom of the parchment (absolute -top-4 and absolute -bottom-4), styled as rounded gradients with a subtle box-shadow and border — completing the physical scroll illusion.

​
Back navigation

A ← Back to Library link in Cinzel font sits above the scroll, routing back to /articles. It uses the ArrowLeft Lucide icon at w-4 h-4.
The drop-cap initial letter (large W in amber-800) on the article body is achieved with a float-left text-6xl font-cinzel leading-none pr-3 pt-2 combination — a pure CSS drop-cap technique, no special component required.

Build docs developers (and LLMs) love

Get started for freeTalk to us