Skip to main content

Documentation Index

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

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

The Experience page (nav label: Pacts, route /experience) turns a standard résumé timeline into a ritual of discovery. Each career entry is hidden behind a wax seal — a round red badge stamped with a “V”. Clicking the seal breaks it apart, unveiling an animated card with role, company, dates, and a description that fades in once the card finishes expanding.

​
What’s on This Page

Heading block: 
Pacts & Apprenticeships
Click the wax seals to reveal the history.
Below the heading is a vertical timeline built with border-l-2 border-amber/20 running down the left side (ml-8 md:ml-0), with entries spaced via space-y-12. Each timeline entry has two states: Sealed (default):
  • A round red circle button (w-12 h-12, bg-red-900) at -left-[25px] with the letter “V” in font-serif text-red-300
  • Hovering it produces a subtle scale-up (whileHover: { scale: 1.1 }) — disabled once the seal is broken
  • No content is visible (card height is locked to 60px, opacity 0.5)
Broken (after click):
  • The wax seal’s background circle fades to opacity: 0 with scale-110
  • Two motion.div halves fly apart and fade: the left half animates to x: -20, y: 20, rotate: -45 and the right half to x: 20, y: 20, rotate: 45, both with opacity: 0 over 0.5 seconds
  • A small golden dot (w-4 h-4, bg-amber, amber glow shadow) fades in at delay: 0.2 to replace the seal as a timeline marker
  • The content card expands from height: 60px to height: auto with opacity: 0.5 → 1
  • The description text fades in after a 0.3 s delay
Broken seals cannot be re-sealed. The click handler uses a one-way state pattern — openedIds is an array that only ever grows; there is no remove function. This is intentional — the animation is designed as an irreversible reveal, not a toggle.
The three timeline entries: 
1.  Senior Spellcrafter        @  Tech Coven Inc.    (2021 – Present)
2.  Frontend Alchemist         @  Startup Hex         (2018 – 2021)
3.  Apprentice Developer       @  Digital Guild       (2016 – 2018)

​
Key Interactions

  • Seal break animation — Two motion.div halves start at x: 0, y: 0, rotate: 0 and animate to x: ±20, y: 20, rotate: ±45 degrees while opacity goes from 1 to 0 over 0.5 seconds. The halves unmount after the animation via AnimatePresence.
  • Card height expansion — The content card uses animate={{ height: isOpen ? 'auto' : '60px', opacity: isOpen ? 1 : 0.5 }}. Framer Motion interpolates the height smoothly even though auto is not a numeric value.
  • Description fade-in — The description paragraph uses initial={{ opacity: 0 }} → animate={{ opacity: isOpen ? 1 : 0 }} with transition={{ delay: 0.3 }}, so it only becomes visible after the card has had time to expand.
  • Golden dot — Once the seal breaks, a motion.div styled as a small w-4 h-4 amber circle with an amber glow shadow fades in at delay: 0.2 to replace the seal as a timeline marker.

​
Customizing

The timeline data lives in a pacts array. Replace the entries with your own employment history: 
// src/pages/Experience.jsx
const pacts = [
  {
    id: 1,
    role: 'Senior Spellcrafter',
    company: 'Tech Coven Inc.',
    period: '2021 - Present',
    description:
      'Lead architect for the main summoning portal. Reduced load times by ' +
      '40% through aggressive caching rituals and optimized asset delivery.',
  },
  {
    id: 2,
    role: 'Frontend Alchemist',
    company: 'Startup Hex',
    period: '2018 - 2021',
    description:
      "Transmuted legacy jQuery spaghetti into a pristine React application. " +
      "Established the company's first design system, 'The Grimoire'.",
  },
  {
    id: 3,
    role: 'Apprentice Developer',
    company: 'Digital Guild',
    period: '2016 - 2018',
    description:
      'Maintained WordPress monoliths. Learned the dark arts of CSS floats ' +
      'and IE11 compatibility. Survived.',
  },
];
Each field:
FieldTypeDescription
idnumberUnique key; used to track which seals have been broken
rolestringJob title shown inside the card header
companystringEmployer name shown next to the @ symbol
periodstringDate range displayed below the role/company line
descriptionstringBody text that fades in after the card opens
You can add as many entries as needed — the timeline will extend naturally. For very long descriptions, the card’s overflow-hidden will clip content while it’s sealed. Once opened, the card grows to fit all content via the height: 'auto' animation.
Because broken seals cannot be re-closed, make sure your descriptions are complete before deploying. Visitors who open all seals at once on their first visit will not be able to experience the reveal animation again without refreshing the page (state is held in memory only).

Build docs developers (and LLMs) love

Get started for freeTalk to us