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 Home page is the ritual gateway into the Fortune Seeker portfolio. Visitors arrive at a darkened stage where a single tarot card — “The Developer” — floats at the center of the viewport. Clicking it sets off a choreographed animation sequence that fans four navigation cards outward, each leading to a different section of the portfolio. The interaction is designed to feel less like navigating a website and more like beginning a tarot reading.

​
Overview

The Home page lives at route / and serves as the portfolio’s primary entry point and navigation hub. Its thematic conceit is the opening of a tarot reading: the reader draws a single card, and the spread unfolds from there. The page title, “Seek Your Fortune,” and the italic quote beneath it establish the mystical tone immediately. All navigation is surface-level; there are no list menus or hamburger drawers — only cards.
The four fan-out navigation cards each link to a core section: The Reader (/about), Major Arcana (/projects), Cast Spells (/skills), and Send a Sigil (/contact). Work history, case studies, blog, and testimonials are accessible from the top navigation bar rendered by the Layout component.

​
Layout & Components

The page is built inside the shared Layout wrapper (which provides the Starfield background, CustomCursor, CandleFlame accents, and the top Navigation bar). The page-level content is managed by the Nt function component (compiled from source), which uses:

TarotCard

The central TarotCard component renders “The Developer” card. Its isFlipped prop is bound to the local opened state. The front face shows a gold Code icon with two concentric rotating orbital rings and the label “The Developer”. The card’s onClick handler sets opened to true.

Fan-out Nav Cards

When opened is true, four nav cards are rendered via AnimatePresence. Each is a motion.div that animates from x:0, y:0 to its target offset (e.g., x: -250, y: 50) with a staggered delay. Clicking any card fires useNavigate to route to the corresponding path.

AnimatePresence

AnimatePresence from Framer Motion wraps both the title/quote block and the nav cards. The title exits upward (y: -20, opacity: 0) as the card is clicked, and the nav cards enter with a spring animation.

Orbital Rings

Two motion.div elements with border-radius: 50% orbit the central Code icon — one clockwise at 10 s/rotation, one counter-clockwise at 15 s/rotation — creating a perpetual-motion planetary effect.

​
Data Structure

The four navigation cards are defined as a plain array. Customize the labels, icons, paths, angles, and offsets here: 
const navCards = [
  {
    path: "/about",
    label: "The Reader",
    icon: <Eye className="w-8 h-8 mb-2" />,
    angle: -40,   // rotation in degrees when fanned
    x: -250,      // horizontal offset from center
    y: 50,        // vertical offset from center
  },
  {
    path: "/projects",
    label: "Major Arcana",
    icon: <Code className="w-8 h-8 mb-2" />,
    angle: -20,
    x: -120,
    y: -20,
  },
  {
    path: "/skills",
    label: "Cast Spells",
    icon: <Sparkles className="w-8 h-8 mb-2" />,
    angle: 20,
    x: 120,
    y: -20,
  },
  {
    path: "/contact",
    label: "Send a Sigil",
    icon: <MessageSquare className="w-8 h-8 mb-2" />,
    angle: 40,
    x: 250,
    y: 50,
  },
];

​
Animations

The Home page uses three distinct Framer Motion animation layers:
The h1 (“Seek Your Fortune”) and italic quote paragraph are wrapped in an AnimatePresence block. On mount they fade in from opacity: 0, y: 20. When the central card is clicked, they exit with opacity: 0, y: -20 over 0.3 s, clearing visual space for the fan-out.
The motion.div wrapping the central TarotCard uses animate to transition between two states:
  • Closed: scale: 1, y: 0
  • Opened: scale: 1.1, y: -20
This gives the impression of the card levitating as the spread opens.

​
Customization

1

Change the hero card identity

Open assets/main.js and find the frontContent prop of the central TarotCard. Replace the Code icon, “The Developer” heading, and the flavour text beneath it to match your own identity. The Roman numeral at the top is currently "0" (The Fool); update it to any value.
2

Remap the nav cards

Edit the navCards array. The angle, x, and y values control the fan geometry. Increase x spread for wider fans; adjust angle for more dramatic rotation. Add a fifth card by pushing a new entry and adjusting sibling offsets so nothing overlaps.
3

Swap the quote

The italic quote below the title is a hardcoded string: "I don't predict the future, I commit it to main." Replace it with your own tagline. Keep it under 80 characters so it wraps cleanly on mobile.
4

Adjust orbital speed

The two ring animations use transition: { duration: 10 } and { duration: 15 }. Lower values spin faster; higher values are more meditative. Both use repeat: Infinity and ease: "linear".
To add a fifth navigation card, push a new object into the navCards array with angle: 0 and x: 0, y: 150 for a bottom-center position. Then nudge the adjacent cards’ x values outward by ~30 px each so the spread remains balanced.

Build docs developers (and LLMs) love

Get started for freeTalk to us