The Coven is the testimonials 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.
/testimonials. Past clients and collaborators are presented as whispered voices within a glowing crystal ball — clicking the orb cycles through three testimonials with a mystical blur-and-scale transition, as though scrubbing the fog from the glass to reveal the next vision.
What Renders on This Page
The page opens with the site-standard Framer Motion entrance heading:- Heading: “The Coven” in large parchment serif
- Subheading: “Whispers from past alliances” in uppercase turquoise
CrystalBall component renders centered at max-w-md with a square aspect ratio. The ball sits on a decorative dark wooden base (a rounded-[100% 100% 20% 20%] pedestal shape), and below the entire assembly a prompt reads “Click to scry another” in small uppercase parchment text.
CrystalBall Component
The testimonials display component. Renders a glassmorphic sphere with an animated internal glow. Clicking the orb advances to the next testimonial using an
AnimatePresence blur-fade transition. Displays quote, author, and role.The Three Testimonials
TheCrystalBall maintains an internal index state (useState(0)) and cycles through the testimonials array using modulo arithmetic. Each click advances the index by one, wrapping back to 0 after the final testimonial.
Testimonial 1 — Archmage CTO, Tech Startup
Testimonial 1 — Archmage CTO, Tech Startup
“Her code is pure magic. She turned our cursed legacy codebase into a modern, blazing-fast application.”— Archmage CTO, Tech StartupThe first testimonial speaks to the developer’s ability to modernize inherited codebases — directly echoing the legacy-to-React migration described in the Lineage timeline (The Guild, 2018–2020) and the architecture rewrite in The E-Commerce Awakening case study.
Testimonial 2 — High Priestess of Marketing, E-commerce Brand
Testimonial 2 — High Priestess of Marketing, E-commerce Brand
“The animations she crafted for our landing page literally spellbound our users. Conversion rates doubled overnight.”— High Priestess of Marketing, E-commerce BrandThe second testimonial highlights the real-world business impact of the developer’s animation work — consistent with the Framer Motion expertise described in Familiar Languages and the Aetherial UI component library in Summonings.
Testimonial 3 — Lead Designer, Creative Agency
Testimonial 3 — Lead Designer, Creative Agency
“A true alchemist of the frontend. She blends design and logic flawlessly.”— Lead Designer, Creative AgencyThe third testimonial comes from a designer’s perspective, validating the developer’s ability to work across the design–engineering boundary — a skill emphasized in The High Priestess tarot card on the About page (“Intuition guides my architecture”).
The Crystal Ball Component — Visual Details
The globe itself is built from several stacked layers, all positioned absolutely within arounded-full container:
| Layer | Purpose |
|---|---|
| Outer glassmorphic shell | border border-turquoise/30, backdrop-blur-sm, inner and outer glow via box-shadow |
| Highlight reflection | White oval (bg-white/20) rotated −30° at the top-left to simulate a light source |
| Animated inner glow | Radial gradient from rgba(64,224,208,0.8) to transparent, continuously rotated 360° and scaled 1→1.2→1 over 20 s |
| Text content layer | AnimatePresence mode="wait" wrapper, z-index: 20, displays quote + author + role |
Interactive Behaviors
- Click anywhere on the orb to advance to the next testimonial
whileHover: { scale: 1.02 }gives the ball a subtle “breathing” response to the cursor- The index
keypassed to the animated text div ensuresAnimatePresencetreats each testimonial as a distinct element and plays the full enter/exit sequence
Route Information
| Property | Value |
|---|---|
| Route path | /testimonials |
| React component | Testimonials (internal name R) |
| Key components | CrystalBall |
| Animation library | Framer Motion (AnimatePresence, blur filter transitions) |