Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/choose-your-destiny/llms.txt

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

The Skills section presents technical competencies as a video game character stat sheet under the heading CHARACTER_STATS. Four skill categories — FRONTEND, BACKEND, LANGUAGES, and TOOLS — each live in a NeonCard panel with a matching color accent. Within each panel, individual skills render as labeled progress bars that animate from zero to their percentage value when the page mounts, driven by Framer Motion’s animate prop. A fourth panel on the right lists soft skills as SPECIAL_ATTACKS with MP costs, and a final lime-colored card at the bottom displays the developer’s overall level: 42. Route: /skills (hash: #/skills)
Color themes: Neon cyan for FRONTEND; neon magenta for BACKEND; neon lime for LANGUAGES and the overall level display; neon orange for TOOLS and SPECIAL_ATTACKS

​
Skill Categories

The skill data lives in the mm array in the project source. Each category object contains a title, an icon reference, a color, and a skills sub-array. There are four distinct categories — FRONTEND, BACKEND, LANGUAGES, and TOOLS — rendered as separate NeonCard panels.
Card color: Cyan
SkillLevelDev Note
React / Next.js90%Component architecture is my love language.
TypeScript85%Strict mode always on.
Tailwind CSS95%I dream in utility classes.
Framer Motion80%Making divs dance since 2021.

​
Animated Progress Bars

Each skill bar is implemented with Framer Motion’s motion.div. On mount, bars animate from width: 0 to width: {level}% with a staggered delay calculated from the category index and skill index: 
// Skill bar animation (from source)
<motion.div
  initial={{ width: 0 }}
  animate={{ width: `${skill.level}%` }}
  transition={{
    duration: 1,
    delay: categoryIndex * 0.2 + skillIndex * 0.1,
    ease: "easeOut",
  }}
  className={`h-full bg-neon-${category.color}`}
  style={{ boxShadow: `0 0 10px var(--neon-${category.color})` }}
/>
The outer track includes a repeating linear-gradient overlay that creates a segmented / pixelated look (bg-[length:10px_100%]). Hovering a skill row reveals a comment-style developer note in gray italic below the bar (// {note}).

​
SPECIAL_ATTACKS

The SPECIAL_ATTACKS panel is an orange-accented NeonCard rendered in the right column alongside the skill categories. It lists three soft skills with an RPG ability framing — each has a name, a flavor description, and an MP or HP cost drawn from the vm array:

[DEBUGGING VISION]

Can spot a missing semicolon in a 1000-line file without a linter.
Cost: 50 MP

[DOCUMENTATION AURA]

Passively generates readable READMEs. Allies gain +10 comprehension.
Cost: 30 MP

[CAFFEINE OVERDRIVE]

Temporarily doubles typing speed. Causes crash after 4 hours.
Cost: 100 HP

​
Overall Level Display

At the bottom of the right column, a standalone lime-colored NeonCard shows the developer’s aggregate level: 
OVERALL LEVEL
    42
EXP TO NEXT LEVEL: 13,370
The 42 renders in the largest arcade font on the page (text-6xl) with a full neon-lime glow. The subtitle “EXP TO NEXT LEVEL: 13,370” is a tongue-in-cheek nod to the impossibly long XP grind of self-improvement.

​
Data Structure

// Skill category entries — mm array (source)
const mm = [
  {
    title: "FRONTEND",
    icon: FrontendIcon,
    color: "cyan",
    skills: [
      { name: "React / Next.js", level: 90, note: "Component architecture is my love language." },
      { name: "TypeScript",      level: 85, note: "Strict mode always on." },
      { name: "Tailwind CSS",    level: 95, note: "I dream in utility classes." },
      { name: "Framer Motion",   level: 80, note: "Making divs dance since 2021." },
    ],
  },
  {
    title: "BACKEND",
    icon: BackendIcon,
    color: "magenta",
    skills: [
      { name: "Node.js",    level: 75, note: "Event loop enthusiast." },
      { name: "PostgreSQL", level: 70, note: "SELECT * FROM headaches WHERE joins = complex;" },
      { name: "REST APIs",  level: 85, note: "Status 200 OK." },
    ],
  },
  {
    title: "LANGUAGES",
    icon: LanguagesIcon,
    color: "lime",
    skills: [
      { name: "JavaScript", level: 95, note: "The good, the bad, and the undefined." },
      { name: "Python",     level: 65, note: "Indentation matters." },
      { name: "HTML/CSS",   level: 98, note: "Yes, CSS is a programming language. Fight me." },
    ],
  },
  {
    title: "TOOLS",
    icon: ToolsIcon,
    color: "orange",
    skills: [
      { name: "Git",    level: 85, note: 'git commit -m "fixed stuff"' },
      { name: "Docker", level: 60, note: "It works on my machine." },
      { name: "Figma",  level: 75, note: "Pixel pushing." },
    ],
  },
];

// Soft-skill entries — vm array (source)
const vm = [
  { name: "DEBUGGING VISION",   desc: "Can spot a missing semicolon...", cost: "50 MP" },
  { name: "DOCUMENTATION AURA", desc: "Passively generates readable READMEs...", cost: "30 MP" },
  { name: "CAFFEINE OVERDRIVE", desc: "Temporarily doubles typing speed...", cost: "100 HP" },
];

​
Customizing the Skills Section

This is a pre-built static site — assets/main.js is a minified bundle and is not meant to be hand-edited. To make content changes, fork or clone the original source repository, edit the source files there, then run vite build to regenerate the bundle and redeploy.
Fork the original source repository. In the source, locate the target category object in the mm array and append a new entry to its skills sub-array with a name, a level (integer 0–100), and a note string. Rebuild with vite build — the progress bar and hover note will render automatically.
Fork the original source repository. In the source, add a new object to the mm array with a title, icon (any Lucide icon component), color, and skills array. The grid layout uses lg:col-span-2 for the category column, so the new card will stack vertically below the existing categories on the left side. Rebuild with vite build after editing.
Fork the original source repository. Search for the "OVERALL LEVEL" string in the skills page component source to locate its parent element and update the adjacent text node containing 42. Rebuild with vite build after editing.
The stagger delay formula (categoryIndex * 0.2 + skillIndex * 0.1) means the last skill in the fourth category will begin animating at approximately 0.6 + 0.2 = 0.8 s after mount. If you add more than four skills per category, consider reducing the per-skill delay multiplier to keep total animation time under 2 seconds.

Build docs developers (and LLMs) love

Get started for freeTalk to us