Summonings is the projects showcase page of the Digital Alchemy portfolio, rendered at 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.
/projects. The page presents four completed projects as potion bottles arranged on a dark wooden shelf — a purely visual metaphor for a collection of brewed artifacts, each with its own color, label, and character.
What Renders on This Page
The page opens with the same Framer Motion fade-and-slide entrance animation used site-wide, displaying:- Heading: “Summonings” in large parchment serif
- Subheading: “Potions brewed & artifacts forged” in uppercase turquoise
max-w-3xl wide and centered on the page. The shelf consists of:
- A row of four
PotionBottlecomponents at the top, arranged withjustify-aroundspacing - A dark wood plank (
bg-[#2A1B12], bottom-bordered in#1A100A) beneath the bottles, with a subtle repeating-line texture - Two rounded shelf brackets hanging below the plank
PotionBottle Component
The project card primitive. Renders a colored glass bottle with a label showing project name, type, and tech stack. Supports hover-activated tooltip content and per-bottle color theming.
The Four Projects
Each bottle is passed acolor prop that sets the glass tint, giving each project a distinct personality at a glance. Bottles are staggered with a delay increment of 0.1 s per bottle starting at 0.2 s.
| Project | Type | Color | Tech Stack |
|---|---|---|---|
| Aetherial UI | Component Library | Turquoise (#40E0D0) | React, TypeScript, Framer Motion, Tailwind CSS |
| Grimoire CMS | Fullstack App | Purple (#9370DB) | Next.js, Node.js, PostgreSQL, GraphQL |
| MoonPhase API | Microservice | Amber/Gold (#FFBF00) | Go, Redis, Docker, AWS |
| Tarot.js | Open Source | Teal (#008080) | JavaScript, Canvas API, Jest |
Project Descriptions
Aetherial UI — Component Library
Aetherial UI — Component Library
A magical React component library built with Framer Motion and Tailwind CSS. Features highly interactive, accessible, and spellbinding UI elements for modern web applications.
Grimoire CMS — Fullstack App
Grimoire CMS — Fullstack App
A headless CMS designed specifically for writers of fantasy and occult fiction. Includes a rich text editor with custom formatting for spells, runes, and incantations.
MoonPhase API — Microservice
MoonPhase API — Microservice
A high-performance REST API that calculates precise lunar phases, astrological events, and optimal spellcasting times based on geolocation.
Tarot.js — Open Source
Tarot.js — Open Source
A lightweight, zero-dependency JavaScript library for generating and shuffling virtual tarot decks, complete with standard Rider-Waite-Smith interpretations.
Interactive Behaviors
- Entrance animation: Each bottle drops into place with a spring animation, creating the impression of being set down on the shelf one by one
- Hover state: Bottles lift and scale slightly on hover; a tooltip with full description appears
- Stagger timing: 0.2 s, 0.3 s, 0.4 s, 0.5 s delays for each respective bottle
Route Information
| Property | Value |
|---|---|
| Route path | /projects |
| React component | Projects (internal name P) |
| Key components | PotionBottle × 4 |
| Animation library | Framer Motion |