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 Home page is the first impression v-doom makes. It opens with a full-viewport hero that holds a two-second dramatic pause before the portfolio owner’s name blazes into view, then transitions into a tarot spread titled Tonight’s Reading that lets visitors flip three cards to explore the developer’s story arc.

​
What’s on This Page

The page is divided into two vertically stacked sections: Section 1 — Hero A full-height (min-h-[60vh]) centered section. A <RuneCircle> component is absolutely positioned behind the text at scale-150 on mobile and scale-[2] on desktop, rendered at opacity-30 so it glows without competing with the headline. The text block fades and rises in with a delay of 2 seconds and a duration of 1 second — an intentional dramatic pause that lets the rune animation settle before the name appears. The heading structure is: 
<h1>
  <span class="block text-violet italic font-normal">The workings of</span>
  VALERIUS DOOM
</h1>
<p class="font-accent text-amber">Currently accepting commissions for moderately cursed software.</p>
Section 2 — Tonight’s Reading A three-column (stacked on mobile, row on md+) arrangement of <TarotCard> components. Each card shows a decorative front face on load and flips 180° on hover to reveal its title, subtitle, and description.
PositionTypeTitleSubtitle
PastpastThe FoundationWhere I Began
PresentpresentThe ArchitectCurrent Workings
FuturefutureThe VisionaryWhat I’m Building
The section heading reads “Tonight’s Reading” flanked by short violet rule lines, with a subdued caption — “Hover to reveal the spread” — guiding first-time visitors.

​
Key Interactions

  • Delayed hero entrance — The heading wrapper uses initial={{ opacity: 0, y: 20 }} → animate={{ opacity: 1, y: 0 }} with delay: 2, duration: 1. Do not reduce the delay; it is part of the dramatic character of the template.
  • Tarot card flip — Hovering a card triggers a flip animation, rotating the card rotateY to reveal the back face. The card flips back on hover end.
  • Scroll-triggered reading section — The section heading uses whileInView={{ opacity: 1 }} with viewport={{ once: true }} so it fades in only the first time it enters the viewport.
  • Staggered card entry — Each card has an incremental delay prop (0.2, 0.4, 0.6) passed to its own entrance animation.

​
Customizing

Replace the three tarot card props in pages/Home.jsx (or equivalent page file) with your own story: 
// src/pages/Home.jsx  –  Tonight's Reading cards
<TarotCard
  type="past"
  title="The Foundation"
  subtitle="Where I Began"
  description="Forged in the fires of legacy codebases and monolithic
    architectures. I learned the old ways before the modern frameworks
    took hold, giving me a deep understanding of the raw elements of the web."
  delay={0.2}
/>

<TarotCard
  type="present"
  title="The Architect"
  subtitle="Current Workings"
  description="Weaving complex state machines and responsive interfaces.
    My current practice involves React, TypeScript, and crafting
    performant, accessible experiences that feel like magic to the end user."
  delay={0.4}
/>

<TarotCard
  type="future"
  title="The Visionary"
  subtitle="What I'm Building"
  description="Looking toward the ethereal planes of WebGL, spatial
    computing, and AI-driven interfaces. The next evolution of my craft
    involves bridging the gap between human intent and machine execution."
  delay={0.6}
/>
To change the name and tagline, update the <h1> and <p> directly in the hero section: 
// Hero heading block
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ delay: 2, duration: 1 }}
  className="z-10 text-center space-y-6"
>
  <h1 className="font-serif text-5xl md:text-7xl lg:text-8xl font-bold tracking-tighter text-bone text-glow">
    <span className="block text-violet text-glow-violet mb-2 text-3xl md:text-5xl italic font-normal">
      The workings of      {/* ← change this line */}
    </span>
    VALERIUS DOOM         {/* ← and this one   */}
  </h1>
  <p className="font-accent text-2xl md:text-3xl text-amber max-w-2xl mx-auto">
    Currently accepting commissions for moderately cursed software.
    {/* ← update tagline here */}
  </p>
</motion.div>
The italic violet line above the name ("The workings of") is intentionally lower-weight and smaller than the main heading. Keep this typographic contrast when personalizing — it acts as a dramatic lead-in rather than a subtitle.
The <RuneCircle> is a standalone animated SVG component. Its drawing animation is handled internally via Framer Motion pathLength variants and does not need to be configured per-page. The delay prop on its outermost motion.div adds a glow fade-in at 3 seconds, just after the rune finishes drawing itself.

Build docs developers (and LLMs) love

Get started for freeTalk to us