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 Projects page presents each portfolio project as a Major Arcana tarot card. Every card has a thematic arcana name and Roman numeral on its face, and a full project brief on its back. Clicking a card spins it 180 degrees on the Y axis to reveal the project title, description, tech stack “incantations”, and links to the GitHub repository and live deployment. The four-column grid gives the page the look of a freshly dealt hand.

​
Overview

The Projects page lives at route /projects and is titled “Drawn Cards”. Its opening quote — “The Major Arcana of my creations. Each card a world unto itself.” — reinforces the idea that each project is its own self-contained universe. State is managed by a single useState hook tracking which card ID is currently flipped. Clicking an already-flipped card flips it back. The page uses the same TarotCard component as the About page but with interactive flip behavior.
Unlike the About page where cards are permanently face-up, the Projects page passes isFlipped={selectedId === project.id} — flipping is toggle-based, and only one card is flipped at a time because clicking a new card first unflips the previous one (the state holds a single ID, not an array).

​
Layout & Components

TarotCard (×4)

Each TarotCard receives a frontContent (arcana name, Roman numeral, icon, pulse animation) and a backContent (project title, description, tech tags, GitHub and live links). The isFlipped prop is derived from comparing the project’s id against the component’s selectedId state.

Responsive grid

Cards are arranged in a CSS grid with grid-cols-1 on mobile, grid-cols-2 on md, and grid-cols-4 on lg. Each card wrapper is a motion.div that stagger-enters from opacity: 0, y: 50 and lifts on hover via whileHover: { y: -15, scale: 1.02 }.

Spring flip

The card flip uses motion.div with animate: { rotateY: isFlipped ? 180 : 0 }. The transition is a spring with stiffness: 60 and damping: 15, producing a slightly bouncy flip that feels tactile rather than mechanical.

Radial pulse (front face)

A motion.div on the front face of each card animates scale between [1, 1.2, 1] and opacity between [0.5, 0.8, 0.5] on a 4 s infinite loop, creating a soft heartbeat glow behind the project icon.

​
Data Structure

Each project is an object in the projects array. All fields are required: 
const projects = [
  {
    id: "ecommerce",           // unique string used as React key and flip toggle
    title: "E-Commerce Platform",
    arcana: "The Merchant",    // arcana name shown on card front and back
    numeral: "I",              // Roman numeral shown at top of card front
    icon: <Sun className="w-16 h-16 text-gold" />,
    description:
      "A full-stack marketplace conjured with Next.js and Stripe. Handles thousands of transactions with mystical efficiency.",
    tech: ["Next.js", "TypeScript", "Stripe", "Tailwind"],
    link: "#",                 // live deployment URL
    github: "#",               // GitHub repository URL
  },
  {
    id: "dashboard",
    title: "Analytics Dashboard",
    arcana: "The Seer",
    numeral: "II",
    icon: <Moon className="w-16 h-16 text-gold" />,
    description:
      "Visualizing the unseen data streams. Real-time metrics displayed through enchanted charts and graphs.",
    tech: ["React", "Recharts", "Firebase", "Framer Motion"],
    link: "#",
    github: "#",
  },
  {
    id: "ai-tool",
    title: "AI Writing Assistant",
    arcana: "The Magician",
    numeral: "III",
    icon: <Star className="w-16 h-16 text-gold" />,
    description:
      "Harnessing artificial spirits to generate compelling prose. A tool for modern scribes.",
    tech: ["OpenAI API", "Node.js", "React", "Redis"],
    link: "#",
    github: "#",
  },
  {
    id: "weather",
    title: "Atmospheric Oracle",
    arcana: "The Tower",
    numeral: "IV",
    icon: <CloudLightning className="w-16 h-16 text-gold" />,
    description:
      "Predicting the wrath and blessing of the skies with uncanny accuracy using global meteorological APIs.",
    tech: ["Vue", "WeatherAPI", "Three.js"],
    link: "#",
    github: "#",
  },
];

​
Animations

Each card’s wrapping motion.div has initial: { opacity: 0, y: 50 } and animate: { opacity: 1, y: 0 }. Delays are staggered by index * 0.15 seconds (0 s, 0.15 s, 0.30 s, 0.45 s) so the cards appear to deal onto the table one after another.
The inner motion.div toggles rotateY between 0 and 180 degrees via a spring transition. The backface-hidden CSS class on both face div elements ensures only one face is visible at a time. A shine overlay on the back face animates from x: "-100%" to x: "100%" when flipped, simulating a light reflection sweeping across the surface.
whileHover: { y: -15, scale: 1.02 } is applied to the outer card wrapper. The box-shadow on the card border transitions from a subtle glow to a brighter one on hover via Tailwind’s group-hover variant and a CSS transition-shadow duration-500.
The radial gradient behind each project icon uses animate: { scale: [1, 1.2, 1], opacity: [0.5, 0.8, 0.5] } with a 4 s infinite easeInOut loop. This draws the eye to the icon and suggests the project is “alive”.

​
Customization

1

Add a new project

Push a new object into the projects array. Choose a meaningful arcana name (draw from the Major or Minor Arcana), assign the next Roman numeral, pick a Lucide icon that fits the project’s theme, and fill in the real link and github URLs. The grid will automatically reflow to accommodate the new card.
2

Update live links

Replace both "#" placeholder values with real URLs. The GitHub link renders a Github icon + “Code” label; the live link renders an ExternalLink icon + “Portal” label. Both buttons call event.stopPropagation() so clicking them does not flip the card.
3

Rename arcana identities

Give each project its own arcana personality by changing arcana. Some evocative options from the tarot: “The World”, “The Star”, “The Chariot”, “The High Priestess”, “The Hermit”. The name appears in italic gold on the card back below the project title.
4

Change tech tag labels

The tech array items render as small pill-style tags under the “Incantations Used:” heading on the card back. Keep each label short (under 20 characters) so they wrap neatly within the card’s constrained width.
The card flip uses CSS preserve-3d and backface-hidden. Some older browsers and certain CSS resets strip transform-style: preserve-3d from child elements. If the flip appears flat (both faces show simultaneously), ensure your global CSS does not set transform-style: flat anywhere in the card’s ancestor chain.

Build docs developers (and LLMs) love

Get started for freeTalk to us