Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/magical/llms.txt

Use this file to discover all available pages before exploring further.

The About page (/about) is titled The Chronicle and subtitled “Origins & Transmutations.” It tells the origin story of Elara Nightshade through three thematic narrative volumes, rendered alongside a scroll-progress vertical timeline that fills with a gradient as the user reads down the page.

​
Visual & UX Overview

Scroll-Progress Timeline

A vertical line runs from the top to the bottom of the page. As the user scrolls, the line fills with a gradient from mystic-violet → mystic-teal → transparent, driven by Framer Motion’s useScroll and useTransform hooks. The fill percentage is a direct 1:1 mapping of the scroll progress (0–100%) on the page container.

Three-Volume Structure

Content is organised into three distinct volumes. Each volume is a self-contained section with a decorative heading, body copy, and thematic visual markers. Volumes are spaced to allow the scroll timeline to visually progress between them.

Page Title Animation

“The Chronicle” heading and “Origins & Transmutations” subtitle animate in on mount using Framer Motion entrance variants (opacity + upward slide), consistent with the entrance style used across all pages.

Mystic Color Theming

Section headings and accent text use the site’s mystic palette — mystic-violet, mystic-teal, and mystic-mint. Body text uses slate-300 / slate-400 for legibility against the dark mystic-950 background.

​
Scroll Timeline Implementation

The scroll timeline uses useScroll with a target ref on the page container and an offset of ["start start", "end end"], mapping the scroll progress to a height value: 
const containerRef = useRef(null);

const { scrollYProgress } = useScroll({
  target: containerRef,
  offset: ["start start", "end end"],
});

const timelineHeight = useTransform(
  scrollYProgress,
  [0, 1],
  ["0%", "100%"]
);
The vertical line is a position: absolute element whose height style is bound to timelineHeight, creating a live fill effect as scroll progresses.

​
Content: The Three Volumes

Theme: Healthcare originsThis volume recounts Elara’s career as a nurse and healthcare worker. Key concepts surfaced in this section:
  • Triage thinking — learned to assess multiple competing priorities under pressure, a direct analogue to debugging and sprint planning.
  • Precision and documentation — clinical notes as a foundation for technical writing and code comments.
  • Systems thinking — understanding how interconnected teams and processes break down; translated later to understanding why software architecture fails.
The tone is reflective and personal, establishing empathy as a core engineering value before any code is mentioned.
Theme: Career transition into softwareThe pivot section lists the raw ingredients of Elara’s career change as if it were an alchemy recipe:
IngredientNotes
3 oz Retail MerchandisingUnderstanding how humans navigate spaces and make choices
1 vial of “Why is this broken?”A growing frustration with clunky inventory software
A handful of HTML/CSS tutorialsConsumed at 2 AM under the light of a single monitor
Infinite curiosityThe catalyst that sparked the reaction
The section uses the alchemy metaphor deliberately — transformation through combining base elements into something new — echoing the alchemy Sigil used elsewhere in the UI.
Theme: Present-day developer identityThree current “afflictions” (roles Elara inhabits) are shown as cards, each with a visual element and short descriptor:
RoleDescription
The BuilderReact, TypeScript, and the dark arts of CSS; spinning border animation
The Detail ObsessedUI perfectionist — “I am cursed with the Sight”
The Debugger”Currently debugging reality”
These three “phases” map loosely to the site’s three main content areas: Projects (building), Skills (competencies), and Case Studies (deep problem-solving).

​
Customization

Each volume’s text is authored as static JSX string content inside the component. To update Elara’s story, locate the section headings "Volume I: The Healing Arts", "The Alchemical Pivot", and "Current Phases & Afflictions" within the page component and edit the body text beneath each.Adding a fourth volume is straightforward — duplicate an existing section block and add it to the JSX. The scroll timeline will automatically stretch to cover the new content.
The three color stops in the gradient (from-mystic-violet via-mystic-teal to-transparent) can be changed to any Tailwind color values. The useTransform input maps [0, 1] scroll progress to ["0%", "100%"] height on the fill element.
"The Chronicle" and "Origins & Transmutations" are string literals in the component’s heading elements. Replace them directly. If this page’s title is referenced in the Home page cards array, update that array entry as well to keep them in sync.

​
Component Dependencies

ComponentSourceRole
BackgroundEffectscomponents/BackgroundEffects.jsAmbient floating particles and purple/teal background blurs
Navigationcomponents/Navigation.jsFixed top navigation bar
Sigilcomponents/Sigil.jsDecorative sigil accents within section headers
useScrollFramer MotionTracks scroll progress on the container ref (offset: start→end)
useTransformFramer MotionMaps scroll progress to timeline height percentage
motion (Framer Motion)assets/proxy.jsEntrance animations for headings and section content
The scroll timeline is most effective on longer screens where all three volumes are visible as distinct stops. On mobile, consider reducing the timeline line’s width from 2px to 1px via the border-mystic-violet/40 Tailwind class on the line element.
The three “Current Phases & Afflictions” roles can be given their own <Sigil> icons (The Builder → alchemy, The Detail Obsessed → eye, The Debugger → star) for a richer visual treatment.

Build docs developers (and LLMs) love

Get started for freeTalk to us