Digital Alchemy is a single-page React application built as a personal developer portfolio. Every element of the experience — from the animated cursor to the alchemical section names — is crafted to immerse visitors in a dark, mystical world while showcasing real frontend engineering skills. Whether you’re studying the architecture to learn from it, forking the codebase to build your own themed portfolio, or simply exploring how Framer Motion and Tailwind CSS come together at this level of polish, Digital Alchemy is designed to be read as carefully as it is experienced.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.
Visual Philosophy
The entire color system is built around a small, intentional palette sourced directly from the Tailwind configuration:| Token | Hex | Role |
|---|---|---|
ink | #050505 | Near-black page background |
parchment | #E8E0CE | Warm off-white body text |
turquoise | #40E0D0 | Primary accent — glows, borders, highlights |
midnight | #0F0C29 | Deep indigo card and panel backgrounds |
amber | #FFBF00 | Warm gold used for candle flame glows |
teal | #008080 | Secondary accent for scrollbar and soft glows |
turquoise/20, ink/80) to create depth without introducing new hues. The result is a palette that feels like candlelight on old parchment — warm where it should be warm, cold where the magic lives.
Typography is equally deliberate. Cormorant Garamond (serif, loaded via Google Fonts at weights 400–700 including italic variants) is applied to all heading levels, lending each section title a grimoire-like gravitas. Inter (300–500 weight) handles all body copy and UI text, keeping the reading experience crisp and legible against the dark background.
Site Sections
The portfolio is organized into nine distinct sections, each given a thematic mystical alias rather than a literal functional label.The Sanctum
The home page. An animated spell circle, flickering candles, and the hero introduction greet visitors with the full atmospheric experience.
The Witch
The about page. Personal background and developer identity presented through the lens of an arcane practitioner.
Summonings
The projects page. Each project is surfaced as a summoned creation — displayed on TarotCard and PotionBottle interactive components.
Familiar Languages
The skills page. A Constellation component maps technical skills as stars in a night sky, grouped by domain.
Lineage
The work history page. A CandleTimeline component renders each role as a candle flame on a vertical timeline.
The Grimoire
The case studies page. In-depth project write-ups rendered through the custom Grimoire component with parchment-style layout.
Forbidden Knowledge
The articles page. Writing and technical posts rendered through the Bookshelf component as spines on a shelf.
The Coven
The testimonials page. Peer and client recommendations displayed through the CrystalBall component with reveal animations.
Cast a Message
The contact page. A SpellForm component handles message submission, styled as a ritual incantation form.
Thematic Naming Convention
One of the most deliberate design decisions in Digital Alchemy is the complete replacement of conventional route and section labels with mystical aliases. No page is called “About” or “Contact” — the navigation speaks entirely in the language of the theme:| Functional Purpose | Mystical Alias | Route |
|---|---|---|
| Home | The Sanctum | /#/ |
| About | The Witch | /#/about |
| Projects | Summonings | /#/projects |
| Skills | Familiar Languages | /#/skills |
| Work History | Lineage | /#/work |
| Case Studies | The Grimoire | /#/case-studies |
| Articles | Forbidden Knowledge | /#/articles |
| Testimonials | The Coven | /#/testimonials |
| Contact | Cast a Message | /#/contact |
Key Design Decisions
CursorWisp — The Custom Cursor
The site’s default system cursor is completely hidden (cursor: none on body, enforced globally via the .hide-cursor * utility class). In its place, the CursorWisp component renders two layered motion.div elements:
- A small 8×8px turquoise dot that snaps to the cursor position with tight spring physics (
damping: 25, stiffness: 150, mass: 0.5) - A larger 32px blurred teal wisp that trails behind with softer springs (
damping: 15, stiffness: 80, mass: 1)
mix-blend-mode: screen so they interact with the page content rather than simply sitting on top of it. The wisp pulses with a looping opacity animation at rest, and both elements scale up when hovering over links or buttons — detected by watching mouseover events on <a> and <button> elements.
Typography Hierarchy
| Context | Font | Weight | Notes |
|---|---|---|---|
| Page headings (h1–h6) | Cormorant Garamond | 400–700 | Serif, letter-spacing: 0.025em |
| Body text | Inter | 300–400 | Sans-serif, antialiased |
| UI labels / nav | Inter | 500 | Medium weight, often uppercase + tracking-widest |
| Italic accents | Cormorant Garamond Italic | 400, 600 | Used for mystical flavor text |
Framer Motion Page Transitions
Route changes are wrapped in Framer Motion’sAnimatePresence to enable exit animations. Each page enters with a blur-fade effect — content transitions from blurred and transparent to sharp and opaque — giving navigation the feeling of a scene materializing out of darkness rather than a hard cut.
Animated Component Library
Rather than using generic UI widgets, each section has a purpose-built animated component that reinforces the theme:- SpellCircle — SVG rotating glyphs on the home page
- TarotCard — Flip-animated project cards
- PotionBottle — Liquid fill animations for skill meters
- Constellation — SVG star-map for skill groupings
- CandleTimeline — Flame-animated vertical work history
- Grimoire — Parchment-textured case study layout
- Bookshelf — 3D perspective book spine grid for articles
- CrystalBall — Fog reveal animation for testimonials
- SpellForm — Animated input fields for the contact form
Digital Alchemy is a fully static deployment, compatible with GitHub Pages out of the box. The
/pages/ directory contains pre-generated HTML files for each route (e.g. About.html, Projects.html). Each file sets window.location.hash on load so that the React Router hash-based SPA correctly navigates to the right view. No server-side rendering or dynamic hosting is required — the entire site deploys as static files.