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 Skills page (nav label: Cauldron, route /skills) replaces a static list of skill ratings with a living cauldron metaphor. Visitors click ingredient buttons to add a skill to the brew — the cauldron responds with a color shift, a burst of rising bubbles, and a potency bar that fills to the skill’s percentage level.

​
What’s on This Page

Heading block: 
The Cauldron
Select an ingredient to test the brew's potency.
The page is split into two halves on lg+ screens (stacked on mobile), using flex-col lg:flex-row: Left — Ingredient Button Grid A grid of 5 buttons arranged in 2 columns on mobile and 3 columns on md+ (grid-cols-2 md:grid-cols-3). Each button is styled as a glass panel with:
  • A colored circle indicator (the skill’s brand color as fill, also used for the border)
  • The ingredient name as a label
  • Hover: scales up (scale: 1.05) and translates upward (y: -5) via Framer Motion whileHover
  • Click: triggers the cauldron interaction
Right — SVG Cauldron A hand-crafted SVG cauldron illustration (w-64 h-64 md:w-80 md:h-80) with several animated layers:
LayerAnimation
Elliptical rimry breathes between 15 and 17 on a 2-second infinite ease loop
Radial blur glowChanges color to the selected ingredient’s color over 1 second
Floating bubblesSpawned at the cauldron area, animate upward (y: -150) with opacity fade on click
Potency readoutAnimatePresence mode="wait" swaps the selected ingredient display below the cauldron
Below the cauldron: A potency readout showing the selected ingredient’s name and a progress bar that fills from 0% to the ingredient’s level value. The readout animates in/out with AnimatePresence mode="wait", so switching ingredients cleanly replaces the previous display.

​
Key Interactions

  • Ingredient click — Selecting a button updates the selected name state, changes the cauldron’s glow color to match ingredient.color, and spawns exactly 5 bubble particles from the cauldron area.
  • Bubble particles — Each bubble is a small circle that animates from the cauldron upward (y: -150) with a randomized horizontal offset and fades to opacity: 0 over 2 seconds. They are removed from state after 2 seconds via setTimeout.
  • Cauldron rim breath — The rim ellipse’s ry attribute oscillates 15 → 17 → 15 on an infinite loop using repeat: Infinity, ease: 'easeInOut' with a 2-second duration.
  • Potency bar fill — The bar width animates from 0 to ${skill.level}% using Framer Motion animate={{ width: '...' }} with duration: 1, ease: 'easeOut'.
  • Ingredient swap — AnimatePresence mode="wait" wraps the potency display so the old ingredient exits before the new one enters, preventing overlapping content.

​
Customizing

The entire ingredient list is defined in a single array. Replace it with your own skills, colors, and proficiency levels: 
// src/pages/Skills.jsx
const ingredients = [
  { id: 'react',   name: 'React Essence',    color: '#61DAFB', level: 90 },
  { id: 'ts',      name: 'TypeScript Root',  color: '#3178C6', level: 85 },
  { id: 'css',     name: 'Tailwind Extract', color: '#38B2AC', level: 95 },
  { id: 'node',    name: 'Node.js Spores',   color: '#339933', level: 75 },
  { id: 'motion',  name: 'Framer Dust',      color: '#FF0055', level: 80 },
];
Each field:
FieldTypeDescription
idstringUnique key, used as React key and for state tracking
namestringDisplay label shown on the button and below the cauldron
colorstringHex color for the dot indicator, cauldron glow, and potency bar
levelnumberProficiency percentage (0–100) — controls the bar fill width
1

Add a new ingredient

Append an object to the ingredients array with a unique id, a thematic name, a brand hex color, and a level between 0 and 100.
2

Update the grid layout

The button grid is grid-cols-2 md:grid-cols-3. If you add more than 6 ingredients, consider switching to md:grid-cols-4 or letting it wrap naturally.
3

Adjust the bubble count

The click handler spawns exactly 5 bubbles per click (Array.from({ length: 5 })). Increase this number for a more dramatic burst effect, or decrease it for subtlety.
level is purely visual — it controls only the width of the potency bar. It does not affect any other part of the page’s layout or content. Choose values that honestly represent your relative proficiency.
Each ingredient’s color is applied directly to the SVG cauldron glow via an inline backgroundColor style. Use saturated, high-contrast hex colors — pastels tend to disappear against the dark background. The existing palette (#61DAFB, #3178C6, #38B2AC, #339933, #FF0055) is a good reference for contrast level.

Build docs developers (and LLMs) love

Get started for freeTalk to us