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.

TarotCard is used on the About (/about) page to present personal biography sections in three side-by-side cards. Each card is a w-72 h-[420px] (18 rem × 420 px) interactive panel that flips 180° on the Y axis when hovered or clicked, revealing scrollable content on the reverse.

​
Props

​
title
string
required
The card’s name, displayed in large serif text on both the front and back. Examples: "The Magician", "The High Priestess", "The World".
​
subtitle
string
required
A short descriptor shown below the title on the card front in small turquoise uppercase text. Examples: "Origins & Essence", "Philosophy", "Current State".
​
number
string
required
Roman numeral displayed at the top of the card front. Examples: "I", "II", "XXI".
​
children
ReactNode
required
Content shown on the back of the card when flipped. Typically two or three <p> elements. Renders inside a scrollable container with the custom-scrollbar utility class.
​
delay
number
default:"0"
Framer Motion entrance animation delay in seconds. Staggers the cards so they don’t all arrive simultaneously.
​
rotation
number
default:"0"
Resting tilt angle in degrees applied to the card’s rotate transform. Gives the stack of cards a natural, hand-dealt look.

​
Usage

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

<TarotCard
  title="The Magician"
  subtitle="Origins & Essence"
  number="I"
  rotation={-5}
  delay={0.1}
>
  <p>I am a frontend alchemist with 5 years of experience
     weaving React and TypeScript into seamless, enchanting
     user experiences.</p>
  <p>My journey began in the dark corners of the web,
     translating ancient design scrolls into living, breathing
     interfaces. I believe code is modern magic—words that
     create reality.</p>
</TarotCard>

​
Three-card About layout (as used in source)

<div className="flex flex-wrap justify-center gap-8 md:gap-12 mt-8">
  <TarotCard title="The Magician"     subtitle="Origins & Essence" number="I"    rotation={-5} delay={0.1}>
    {/* bio content */}
  </TarotCard>
  <TarotCard title="The High Priestess" subtitle="Philosophy"      number="II"   rotation={2}  delay={0.3}>
    {/* philosophy content */}
  </TarotCard>
  <TarotCard title="The World"        subtitle="Current State"     number="XXI"  rotation={6}  delay={0.5}>
    {/* availability content */}
  </TarotCard>
</div>
Keep rotation values between -10 and 10 degrees for a natural stacked-cards appearance. Values outside this range look unintentionally skewed on the page.

​
Visual Behavior

​
Front face

The front renders on a bg-midnight base with a border-turquoise/30 outer border. Inside, a second inner border creates a nested frame with four corner bracket accents in turquoise/40. Three elements are stacked vertically:
  1. Roman numeral — font-serif text-turquoise/80 text-xl at the top
  2. Geometric motif — a centred composition of a w-32 h-32 circle, a w-24 h-24 rotated-45° square, and a w-16 h-16 inner circle, all in turquoise/* opacities
  3. Title + subtitle — font-serif text-2xl text-parchment tracking-widest uppercase title, with text-turquoise/60 text-xs tracking-widest uppercase subtitle below

​
Back face

The back renders on bg-ink with a border-teal/40 outer border and a turquoise ambient box shadow. The title appears as an <h4> above a divider line, followed by the children content in text-parchment/80 font-sans text-sm leading-relaxed.

​
Animation Details

​
Entrance

initial:    { opacity: 0, y: 50, rotate: rotation - 10 }
animate:    { opacity: 1, y: 0,  rotate: rotation }
transition: { delay, duration: 0.8, type: "spring" }
Cards slide up from 50 px below and settle at their rotation angle with a gentle spring.

​
Hover lift

whileHover: { y: -10, scale: 1.02 }

​
Flip (hover start / hover end / click toggle)

animate:    { rotateY: isFlipped ? 180 : 0 }
transition: { type: "spring", stiffness: 60, damping: 15 }
The outer motion.div carries perspective-1000; the inner motion.div carries preserve-3d. The back face has a rotate-y-180 class so both faces occupy the same physical space and are revealed by the parent’s rotateY.
The back face uses overflow-y-auto with the custom-scrollbar utility, so long children content scrolls within the card without expanding its dimensions.

Build docs developers (and LLMs) love

Get started for freeTalk to us