Skip to main content

Documentation Index

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

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

Sorcerer’s component model is deliberately flat and focused. Four shared components handle all chrome, navigation, and ambient visual effects — they appear on every page and live under components/. Nine page components, one per route, own their own animations and data and are compiled into assets/main.js. This separation keeps global concerns (background, cursor, nav) isolated from page-specific concerns (flip cards, constellation graphs, scrying orbs), making each piece straightforward to reason about independently.

​
Shared Components

These four components are used across the entire application. They are imported by Layout.js (or by Layout itself) and render on every page regardless of the active route.

Layout

The root wrapper for every page. Applies the radial gradient background, renders CursorTrail and MoonPhaseNav, wraps page content in a <main> element, and renders the site footer.

MoonPhaseNav

The primary navigation bar. Displays navigation links styled as moon-phase icons and uses React Router’s navigation primitives to move between pages without full reloads.

CursorTrail

Tracks mouse position and renders a trailing particle effect behind the cursor, reinforcing the mystical aesthetic throughout every interaction on the site.

CandleDivider

A decorative SVG section divider styled as a row of candles. Used between content sections on longer pages to visually separate content while maintaining the theme.

​
Page Components

Each of the nine routes in Sorcerer maps to a dedicated page component. All page components are bundled inside assets/main.js and reference their content data from const arrays defined in the same bundle.
ComponentRouteDescription
HomePage/Animated hero with a runic circle SVG centerpiece and a letter-by-letter title entrance animation powered by Framer Motion.
AboutPage/aboutParallax moon orb that shifts position with scroll, surrounding bio paragraphs that move at independent scroll-driven speeds.
ProjectsPage/projectsFour interactive 3D flip cards — each card rotates on hover to reveal the project’s tech stack and links on its reverse face.
SkillsPage/skillsA constellation graph rendered in SVG with nine technology nodes connected by animated lines that draw in on page load.
WorkHistoryPage/workA vertically scrolling timeline of three past roles, with each entry animating into view as the user scrolls down the page.
CaseStudiesPage/case-studiesTwo in-depth technical case studies laid out with an ingredients / ritual / result structure to mirror an alchemical recipe format.
BlogPage/blogThree oval-shaped post cards with an SVG ripple distortion filter that activates on hover, creating a liquid portal effect.
TestimonialsPage/testimonialsClient quotes that cycle inside a scrying orb SVG, with each testimonial fading in and out on a timed loop.
ContactPage/contactA contact form that triggers a Framer Motion particle-burst animation emanating from the submit button on successful submission.

​
Component Hierarchy

The following tree shows how the components nest at runtime. BrowserRouter provides routing context, Layout provides the shared chrome, and Routes selects the active page component. 
App
└── BrowserRouter
    └── Layout
        ├── CursorTrail          (ambient effect, always present)
        ├── MoonPhaseNav         (top navigation, always present)
        ├── main
        │   └── Routes
        │       ├── Route /              → HomePage
        │       ├── Route /about         → AboutPage
        │       ├── Route /projects      → ProjectsPage
        │       ├── Route /skills        → SkillsPage
        │       ├── Route /work          → WorkHistoryPage
        │       ├── Route /case-studies  → CaseStudiesPage
        │       ├── Route /blog          → BlogPage
        │       ├── Route /testimonials  → TestimonialsPage
        │       └── Route /contact       → ContactPage
        └── footer                       (always present)
Because Layout wraps every route, it is the ideal place to add any UI element that should appear globally — a cookie banner, a theme toggle, a toast notification system, or an additional ambient animation. Add it once inside Layout.js and it will be present on all nine pages automatically.

Build docs developers (and LLMs) love

Get started for freeTalk to us