Skip to main content

Documentation Index

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

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

The Lab replaces the conventional skills bar chart with something considerably more dramatic: a row of SVG potion bottles, each one filled to a level that corresponds to the developer’s proficiency in a given technology. The page header reads THE LAB with the subtitle Potions, Poisons, and Programming Languages. Every bottle has its own color, its own fill level, and its own hover state — hover over any bottle to watch bubbles rise through the liquid and see the toxicity percentage materialize beneath the glass.

​
Skills Roster

The following skills are displayed in The Lab, each represented by a uniquely colored potion bottle:
SkillLevelColor
React90%#2dd4bf (ghost teal)
TypeScript85%#f97316 (pumpkin orange)
Node.js75%#4ade80 (lime green)
CSS/Tailwind95%#a855f7 (arcane purple)
GraphQL65%#ec4899 (hot pink)
Python50%#eab308 (sulfur yellow)

​
Potion Bottle Mechanics

Each bottle is built from a custom SVG path that renders a potion bottle silhouette — rounded base, narrow neck, and a cork stopper at the top. The liquid fill is implemented as an SVG <rect> (or <clipPath>-masked region) whose height animates upward from zero to the skill’s level value on component mount.
Animation propertyValue
Mount animationFill height from 0% to level%
Duration2s
Easingease-out
TriggerComponent mount (runs once)
The fill color maps directly to the color field in the skills array, making each bottle visually distinct on the shelf.

​
Hover Behavior

Hovering a bottle triggers a compound interaction managed by Framer Motion:
  1. Jiggle — the bottle performs a brief scale and rotate jiggle via whileHover, mimicking the feeling of picking up a potion
  2. Bubble particles — small circular SVG elements rise from the bottom of the liquid toward the neck, each with a staggered animation delay so they appear in sequence rather than all at once
  3. Toxicity label — a text element fades in below the bottle showing the skill level formatted as a toxicity percentage (e.g., Toxicity: 90%)
The bubble particles use a y keyframe animation from inside the bottle to above the liquid surface, combined with an opacity fade-out as they approach the cork.

​
Shelf Layout

All bottles are mounted on a horizontal wooden shelf. The shelf is a full-width SVG element rendered at the bottom of the bottle group, featuring:
  • A flat horizontal plank surface the bottles rest on
  • Wooden bracket supports on each side, rendered as angled SVG shapes
  • A subtle drop shadow beneath the plank to give the shelf visual depth
The shelf does not scroll — all bottles are visible simultaneously in a single row on desktop. On smaller viewports, the shelf scrolls horizontally to keep the bottles at a readable size.

​
Customization

Skills are defined in an array of objects. Each entry requires a name, a level (0–100), and a color (CSS hex string). Add, remove, or reorder entries to update the shelf.
const skills = [
  { name: 'React', level: 90, color: '#2dd4bf' },
  { name: 'TypeScript', level: 85, color: '#f97316' },
  { name: 'Node.js', level: 75, color: '#4ade80' },
  { name: 'CSS/Tailwind', level: 95, color: '#a855f7' },
  { name: 'GraphQL', level: 65, color: '#ec4899' },
  { name: 'Python', level: 50, color: '#eab308' }
];
Each entry in the array produces one potion bottle on the shelf. The bottle’s fill height, liquid color, and toxicity label all derive from the level and color values — no other changes are needed when adding a new skill.
level is a number from 0 to 100 representing proficiency as a percentage — this value directly controls how high the liquid fills the bottle and what toxicity percentage is shown on hover. Set color to any valid CSS hex value to match your personal brand or to give each potion a thematically appropriate hue.

Build docs developers (and LLMs) love

Get started for freeTalk to us