Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/dyed-in-the-wool/llms.txt

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

The Skills component (internally function K) turns a traditional skills list into a tactile, visual experience. Each skill is represented as a dye bottle. Clicking a bottle triggers a fill animation — liquid rises to the skill’s level percentage — and simultaneously reveals the proficiency percentage inside an animated circular badge.

​
What It Displays

The layout contains:
  1. Section header — title “COLOR PALETTE” and the instructional subtitle “Select a dye bottle to see the mix.”
  2. Bottle row — five dye-bottle SVG/div illustrations side by side, each labeled with the skill name beneath it. The bottle cap uses bg-dye-indigo and the liquid fill uses the skill’s color value.
  3. Detail panel — when a bottle is selected, a circular panel (rounded full) fills with the skill’s color and displays the level percentage as a large number in the center.
Only one bottle can be selected at a time. Clicking a different bottle deselects the previous one and re-runs the fill animation for the newly selected skill.

​
Content Data

Skills are stored in the Y array. The level field is an integer from 0 to 100, representing the fill percentage: 
const Y = [
  { name: "React",         color: "#0d9488", level: 90 },
  { name: "TypeScript",    color: "#1e3a8a", level: 85 },
  { name: "CSS/Tailwind",  color: "#db2777", level: 95 },
  { name: "Framer Motion", color: "#2dd4bf", level: 80 },
  { name: "SVG Filters",   color: "#0369a1", level: 75 },
];
The level field must be an integer between 0 and 100. It directly controls the liquid fill height inside the bottle visualization (rendered as a height percentage via Framer Motion). Values outside this range will produce visual overflow or an empty bottle.

​
Animation Details

ElementTechniqueDetails
Section titleinitial → animate on mountopacity: 0 → 1, y: -20 → 0
Bottlesinitial → animate staggerEach bottle fades and slides up, staggered by index × 0.1 s
Bottle hoverwhileHoverUpward nudge (y: -10) on hover
Liquid fillFramer Motion animate on mountheight transitions from 0 to level% with duration: 1 s, staggered by 0.5 + index × 0.1 s
Detail panelAnimatePresence with mode="wait"Fades and scales in (scale: 0 → 1, opacity: 0 → 1) when a bottle is selected; exits with scale: 1.5, opacity: 0
Level numberStatic render inside panelDisplays {level}% as a large h2 inside the selected skill’s color circle

​
Customization

Add or remove a skill Add a new object to the Y array. The bottle and detail panel are generated automatically: 
{ name: "Three.js", color: "#f59e0b", level: 65 }
Remove an entry by deleting its object from the array. Change a skill’s color Update the color hex in the relevant array entry. The same value tints the bottle liquid fill and the circular detail panel background: 
{ name: "React", color: "#6366f1", level: 90 }  // indigo instead of teal
Update a proficiency level Edit the level integer (0–100). The fill animation re-runs automatically on next render: 
{ name: "SVG Filters", color: "#0369a1", level: 88 }  // bumped from 75
Adjust the fill animation speed The bottle fill uses a Framer Motion animate transition with duration: 1. To make it slower, increase the duration: 
transition={{ duration: 2, delay: 0.5 + index * 0.1 }}

Build docs developers (and LLMs) love

Get started for freeTalk to us