The Sanctum is the landing page of the Digital Alchemy portfolio, rendered at the root routeDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/digital-alchemy/llms.txt
Use this file to discover all available pages before exploring further.
/. It serves as the mystical entry point to the entire experience — a darkened chamber where a luminous spell circle pulses at the center of the screen and candle flames flicker at the periphery, establishing the occult aesthetic that carries through the rest of the site.
What Renders on This Page
The layout is a full-viewport flex container that centers its content both horizontally and vertically. Two layers of content coexist on the screen: Background layer — Ambient Candles An absolutely positioned, pointer-events-none overlay scatters fourCandle components around the edges of the viewport. Each candle is independently positioned and animated:
| Position | Opacity | Scale | Animation Delay |
|---|---|---|---|
| Top-left (15% from left, top-20) | 60% | 0.75× | 0 s |
| Top-right (20% from right, top-40) | 80% | 0.90× | 1.2 s |
| Bottom-left (25% from left, bottom-32) | 70% | 1.10× | 0.5 s |
| Bottom-right (15% from right, bottom-40) | 50% | 0.75× | 2.1 s |
SpellCircle component renders at the center of the page. It is the primary focal point of the home screen and the main interactive element available to first-time visitors.
SpellCircle Component
The animated runic circle at the heart of the home page. Handles entrance animation and interactive glow effects.
Candle Component
Ambient flame elements scattered around the viewport. Each candle flickers independently based on its configured delay.
Interactive Behaviors
The home page is intentionally minimal in navigation affordance — it invites exploration rather than directing it.SpellCircle interactions
SpellCircle interactions
The
SpellCircle is the central interactive element on this page. It responds to hover and focus states with an intensified glow, drawing the visitor’s eye and communicating that this is a portal into the rest of the portfolio. Its entrance animation plays on mount via Framer Motion.Candle flicker animations
Candle flicker animations
Each
Candle component runs a continuous CSS animate-flicker keyframe loop. The staggered delay props (0 s, 0.5 s, 1.2 s, 2.1 s) mean the four flames never pulse in unison, creating a naturalistic ambient atmosphere rather than a mechanical one.Pointer-events isolation
Pointer-events isolation
The candle overlay layer uses
pointer-events-none so that ambient decorations never intercept mouse or touch events intended for the SpellCircle hero or any navigation elements in the shared Layout wrapper.Layout and Styling
The page relies entirely on the sharedLayout component for its navigation bar and site-wide CursorWisp effect. The page’s own container uses flex-1 to fill the remaining vertical space between the nav and the viewport bottom, then centers the SpellCircle with items-center justify-center.
The Sanctum contains no headings, body copy, or call-to-action buttons by design. The mystical atmosphere is the message — visitors are expected to use the navigation links (visible in the
Layout header) to explore further.Route Information
| Property | Value |
|---|---|
| Route path | / |
| React component | Home (internal name C in the compiled bundle) |
| Key components | SpellCircle, Candle × 4 |
| Animation library | Framer Motion |