The Digital Alchemy portfolio is a React 18 single-page application built around a dark mystical aesthetic. Every visual element is a named component with a clear thematic purpose — candles flicker on the hero, a spell circle draws itself into existence, potion bottles reveal project details, and a custom cursor wisp trails the user’s pointer across the entire site. All animation is driven by Framer Motion spring and keyframe variants. Styling is handled with Tailwind CSS extended with custom design tokens (Documentation 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.
midnight, ink, parchment, turquoise, amber) that reinforce the alchemical color palette.
Components
SpellCircle
The animated SVG hero element on the home (
/) route. Draws concentric circles, a decagonal star, and five anchor nodes before revealing the site title.TarotCard
A flip card used on the About (
/about) page to present personal bio sections. Hover or click to reveal content on the back of each card.Candle
An ambient decorative candle with a flickering flame animation. Four instances are scattered across the hero section as atmospheric background elements.
PotionBottle
A clickable project card styled as an alchemical potion bottle. Used on the Projects (
/projects) page; click opens a modal with full project details.Constellation
An interactive skills map on the Skills (
/skills) page. Technologies appear as glowing stars connected by constellation lines that draw in on scroll entry.CandleTimeline
A scroll-driven work history timeline on the Work (
/work) page. A wax candle at the top of a central column melts as the user scrolls, with experience entries animating in from alternating sides.Grimoire
An open-book case study viewer used on the Case Studies (
/case-studies) page. Flip between two detailed project narratives with a spring-animated page-turn effect.Bookshelf
A decorative bookshelf of five blog-post “tomes” on the Articles (
/articles) page. Each spine lifts on hover, revealing a “Read Tome” tooltip.CrystalBall
A glowing CSS crystal ball on the Testimonials (
/testimonials) page. Click to cycle through three client quotes with a blur-scale Framer Motion transition.SpellForm
The contact form on the Contact (
/contact) page. Three thematically named fields, Elder Futhark runic particles as the user types, and a confetti burst on successful submission.CursorWisp
A site-wide custom cursor replacement rendered at
z-[9999]. Two concentric Framer Motion layers follow the pointer with spring lag; the outer layer pulses and expands on interactive elements.Design Tokens
All components share a common Tailwind theme extension. The key custom colors are:| Token | Hex | Usage |
|---|---|---|
midnight | #0f0c29 | Card backgrounds, form surfaces |
ink | #1a1a2e | Deepest background, book interiors |
parchment | #f5e6c8 | Body text, card fronts |
turquoise | #40E0D0 | Accent borders, glows, interactive highlights |
amber | #FFBF00 | Candle flames, warm accents |
teal | #008080 | Secondary accent, dashed rings |
Architecture Notes
- React Router v6 handles client-side routing for all eleven pages.
- Framer Motion
AnimatePresenceis used in Grimoire, CrystalBall, and SpellForm to animate elements in and out of the DOM cleanly. useScroll+useTransform(Framer Motion) drives the CandleTimeline scroll progress.IntersectionObserver(via a customuseInViewhook) gates Constellation line animations so they only fire when the element enters the viewport.- CursorWisp must be rendered at the app root level (outside any page components) so it persists across route changes.