Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/fortune-seeker/llms.txt

Use this file to discover all available pages before exploring further.

The About page frames personal biography as a three-card tarot spread. Rather than a static headshot and a paragraph of prose, visitors encounter a glowing crystal ball that responds to their cursor movement, followed by three upright TarotCard components labelled “The Past”, “The Present”, and “The Future”. Each card’s face holds a developer bio written in the template’s mystical voice. The result communicates personal history, current skills, and ambitions while staying entirely within the divination aesthetic.

​
Overview

The About page lives at route /about and is titled “The Reader”. Its opening quote — “Look deeply into the glass. The code reveals the coder.” — sets up the crystal ball metaphor. The page is split into two vertical sections: the CrystalBall component near the top, and the “Three-Card Spread” section below it. The three cards are always shown face-up (isFlipped: true), unlike the Projects page where flipping is interactive.
The three bio cards use the TarotCard component in a static face-up state. Passing isFlipped={true} permanently shows the front content you define in frontContent. No click handler is needed here.

​
Layout & Components

CrystalBall

The CrystalBall component renders a 256 × 256 circular element with a layered glass effect. It tracks mousemove events on the window and moves an inner portrait bubble (motion.div) via spring animation (stiffness: 50, damping: 20), giving the orb a parallax depth illusion. A pulsing boxShadow animation cycles on a 4 s loop.

TarotCard (×3)

Three TarotCard instances are laid out in a responsive flex row (column on mobile, row on md+). Each receives isFlipped={true}, a custom className of w-72 h-[420px], and unique frontContent containing an icon, title, subtitle, and bio paragraph. No onClick is wired — the cards are read-only.

whileInView entrance

Each card’s wrapping motion.div uses whileInView (opacity: 1, y: 0 from opacity: 0, y: 50) with a viewport: { once: true, margin: "-100px" } guard. Cards enter as the user scrolls them into view, with delays of 0.2, 0.4, and 0.6 seconds respectively.

Section header

The “Three-Card Spread” heading is an h2 with gold colouring and uppercase tracking-widest styling. It sits 128 px below the CrystalBall (mt-32) to give the orb visual breathing room.

​
Data Structure

The three bio cards are defined as an array of objects. Update content to change the biography text; swap icon to any Lucide React icon; adjust delay to tune entrance stagger timing. 
const bioCards = [
  {
    title: "The Past",
    subtitle: "Foundations",
    icon: <Hourglass className="w-12 h-12 text-gold mb-4" />,
    content:
      "Forged in the fires of legacy codebases. I began my journey deciphering ancient scripts (jQuery) and taming unruly stylesheets. The early days were dark, but they built resilience.",
    delay: 0.2,
  },
  {
    title: "The Present",
    subtitle: "Mastery",
    icon: <Flame className="w-12 h-12 text-gold mb-4" />,
    content:
      "Currently weaving modern spells with React, TypeScript, and Tailwind. I architect scalable systems and conjure interfaces that captivate. The magic is in the details.",
    delay: 0.4,
  },
  {
    title: "The Future",
    subtitle: "Ascension",
    icon: <Eye className="w-12 h-12 text-gold mb-4" />,
    content:
      "Seeking new realms to conquer. I aim to blend creative coding with robust engineering, pushing the boundaries of what the web can be. The prophecy is yet unwritten.",
    delay: 0.6,
  },
];

​
Animations

The outer sphere’s boxShadow cycles between three states on a 4 s easeInOut loop:
  • Dim: 0 0 50px rgba(58,26,92,0.4), inset 0 0 40px rgba(201,169,110,0.2)
  • Bright: 0 0 70px rgba(58,26,92,0.6), inset 0 0 60px rgba(201,169,110,0.4)
  • Back to dim
The inner smoke-like background uses two counter-rotating motion.div radial gradients (20 s clockwise, 15 s counter-clockwise) passed through an SVG feTurbulence + feDisplacementMap filter for an organic swirl.
A mousemove listener computes the cursor offset relative to the component bounding box, divides by 20, and passes the result as { x, y } to the inner portrait bubble via a spring. This makes the silhouette appear to float inside the glass sphere.
The h1 (“The Reader”) and quote paragraph enter together via a single motion.div with initial: { opacity: 0, y: 20 } and animate: { opacity: 1, y: 0 }. No exit animation is defined — this block is permanent once mounted.
Each card wrapper uses whileInView to fire a y: 0, opacity: 1 entrance from y: 50, opacity: 0. The viewport: { once: true } flag prevents the animation from replaying on scroll-back. Duration is 0.8 s with an easeOut ease.

​
Customization

1

Write your own biography

Edit the content string in each of the three bioCards entries. Aim for 2–3 sentences per card. The Past card is a good place for education or early-career milestones; the Present card for current stack and role; the Future card for goals and aspirations.
2

Change the card icons

Each card uses a Lucide React icon. Import any icon from lucide-react and replace the icon value. The icon renders at w-12 h-12 in gold above the card title — choose something that visually reinforces the “Past / Present / Future” metaphor.
3

Adjust card subtitles

The subtitle field renders as a small italic caption below the card title. Change “Foundations”, “Mastery”, and “Ascension” to words that better describe your career arc.
4

Swap the crystal ball portrait

The inner bubble currently shows a generic User icon from Lucide. Replace it with an <img> tag pointing to your profile photo. Apply rounded-full, object-cover, and a fixed w-full h-full size to fill the circular mask cleanly.
You can add a fourth card to the spread by pushing a new object into bioCards with delay: 0.8 and a title such as “The Shadow” or “The Mentor” for a non-linear storytelling twist. Update the flex container’s gap from gap-12 to gap-8 so all four cards fit comfortably on a large screen.

Build docs developers (and LLMs) love

Get started for freeTalk to us