Skip to main content

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.

PotionBottle renders each portfolio project as a stylised alchemical potion bottle on the Projects (/projects) page. Four bottles are displayed side-by-side on a wooden shelf. Clicking any bottle opens a full-screen modal overlay with a detailed project breakdown.

​
Props

​
name
string
required
The project name. Displayed on a small parchment label affixed to the bottle body and as the <h2> heading inside the modal. Example: "Aetherial UI".
​
type
string
required
Project category, shown above the name in the modal in small turquoise uppercase text. Examples: "Component Library", "Fullstack App", "Microservice", "Open Source".
​
color
string
required
A CSS hex color that tints the liquid inside the bottle and the glow/background accents in the modal. Each project should have a distinct color for visual differentiation.
​
description
string
required
Full project description shown in the modal body. A couple of sentences describing what the project does and why it was built.
​
tech
string[]
required
Array of technology names listed as “Reagents Used” pill tags at the bottom of the modal. Example: ["React", "TypeScript", "Framer Motion", "Tailwind CSS"].
​
delay
number
default:"0"
Framer Motion entrance animation delay in seconds for the bottle’s initial fade-in/slide-up on page load.

​
Usage

import { PotionBottle } from './components/PotionBottle';

<PotionBottle
  name="Aetherial UI"
  type="Component Library"
  color="#40E0D0"
  description="A magical React component library built with Framer Motion and
    Tailwind CSS. Features highly interactive, accessible, and spellbinding
    UI elements for modern web applications."
  tech={["React", "TypeScript", "Framer Motion", "Tailwind CSS"]}
  delay={0.2}
/>

​
Full Projects shelf (as used in source)

const projects = [
  { name: "Aetherial UI",     type: "Component Library", color: "#40E0D0", delay: 0.2, tech: ["React","TypeScript","Framer Motion","Tailwind CSS"], description: "..." },
  { name: "Grimoire CMS",     type: "Fullstack App",      color: "#9370DB", delay: 0.3, tech: ["Next.js","Node.js","PostgreSQL","GraphQL"],          description: "..." },
  { name: "MoonPhase API",    type: "Microservice",       color: "#FFBF00", delay: 0.4, tech: ["Go","Redis","Docker","AWS"],                         description: "..." },
  { name: "Tarot.js",         type: "Open Source",        color: "#008080", delay: 0.5, tech: ["JavaScript","Canvas API","Jest"],                    description: "..." },
];

<div className="flex justify-around items-end pb-4 px-8 relative z-10">
  {projects.map((project, i) => (
    <PotionBottle key={i} {...project} />
  ))}
</div>

​
Visual Structure

Each bottle is a flex column with four layers:
LayerDescription
Corkw-6 h-4 bg-[#8B5A2B] brown rounded rectangle at the very top.
Neckw-8 h-6 translucent strip with side border lines simulating glass.
Bodyw-20 h-24 rounded vessel (rounded-b-xl rounded-t-3xl) with 20% white border for a glass highlight. The liquid fill is a motion.div that animates y: [0, -3, 0] (3 s, Infinity) in the bottle’s color. Five white bubble dots float upward within the liquid using staggered y: [0, -40], opacity: [0, 1, 0] animations.
LabelA w-14 h-10 bg-parchment rounded-sm tag centred on the bottle body with text-ink font-serif text-[8px] project name text.
A glass highlight w-2 h-12 bg-white/20 rounded-full blur-[1px] runs down the left side of the body. On hover, the entire bottle lifts y: -5 via whileHover.

​
Modal

Clicking the bottle sets isOpen = true (local useState), which renders an AnimatePresence overlay. The modal:
  • Full-screen bg-ink/90 backdrop-blur-sm backdrop — clicking it closes the modal.
  • Inner motion.div enters scale: 0.9 → 1, y: 20 → 0, bg-midnight border border-turquoise/30 rounded-xl.
  • A large blurred background orb in the project color rotates [0°, 90°, 0°] over 10 s as a decorative ambient glow.
  • X button top-right to close.
  • Content: type badge → project name → description → “Reagents Used” pill tags → “Inspect Artifact” button.
The “Inspect Artifact” button inside the modal is currently unstyled/non-functional — it exists as a placeholder for a future link to a live demo or repository.

Build docs developers (and LLMs) love

Get started for freeTalk to us