Skip to main content

Documentation Index

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

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

The Skills page (/skills) translates a technical CV into an RPG skill-tree screen. The page headline reads SKILL TREE in GlitchText, with the subtitle ALLOCATE YOUR POINTS WISELY. Skills are grouped into four thematic paths — FRONTEND, BACKEND, DEBUG, and DESIGN — each rendered as a vertical column of node chips in a four-column grid. A fixed bottom bar reports global progress (SKILLS UNLOCKED: 27 / ∞) and shows a live training progress bar for the skill currently being learned.

​
Skill Path Data

Four paths are defined in the source. Each path has an id, a title, an icon, a colour class pair, and an array of nodes: 
const skillPaths = [
  {
    id: "frontend",
    title: "FRONTEND PATH",
    icon: <MonitorIcon className="text-neon-cyan" />,
    color: "border-neon-cyan text-neon-cyan",
    nodes: ["HTML/CSS", "JavaScript", "React", "Vue",
            "Tailwind", "Framer Motion", "Three.js"],
  },
  {
    id: "backend",
    title: "BACKEND PATH",
    icon: <ServerIcon className="text-neon-magenta" />,
    color: "border-neon-magenta text-neon-magenta",
    nodes: ["Node.js", "Express", "Python",
            "PostgreSQL", "MongoDB", "Redis", "GraphQL"],
  },
  {
    id: "debug",
    title: "DEBUG PATH",
    icon: <BugIcon className="text-neon-green" />,
    color: "border-neon-green text-neon-green",
    nodes: ["Jest", "Cypress", "Chrome DevTools",
            "Git", "Docker", "CI/CD"],
  },
  {
    id: "design",
    title: "DESIGN PATH",
    icon: <PenToolIcon className="text-neon-yellow" />,
    color: "border-neon-yellow text-neon-yellow",
    nodes: ["Figma", "UI/UX", "Wireframing",
            "Prototyping", "Design Systems"],
  },
];

​
Path Column Layout

Each skill path renders as a single flex column inside one of four grid slots. The column structure is:
  1. Path header card — a pixel-bordered box showing the path icon and title in the path’s accent colour.
  2. Node list — each skill name is a chip that enters from x: -20, opacity: 0 and animates to x: 0, opacity: 1 on viewport entry, with a staggered delay per index. Chips are styled with the path’s accent colour.
  3. Connector line — a short vertical line between nodes creates the branching tree visual.
// Hover state highlights the entire column
<div
  onMouseEnter={() => setActiveId(path.id)}
  onMouseLeave={() => setActiveId(null)}
>
  {/* Header */}
  <div>{path.icon} {path.title}</div>
  {/* Nodes */}
  {path.nodes.map((node, i) => (
    <motion.div
      key={i}
      initial={{ opacity: 0, x: -20 }}
      whileInView={{ opacity: 1, x: 0 }}
      viewport={{ once: true }}
      transition={{ delay: i * 0.05 }}
    >
      {node}
    </motion.div>
  ))}
</div>
The viewport={{ once: true }} flag means nodes animate in only the first time they scroll into view. Remove it if you want the animation to replay every time the section is revisited.

​
Skill Path Summary

FRONTEND PATH

7 nodes · neon-cyan accent HTML/CSS · JavaScript · React · Vue · Tailwind · Framer Motion · Three.js

BACKEND PATH

7 nodes · neon-magenta accent Node.js · Express · Python · PostgreSQL · MongoDB · Redis · GraphQL

DEBUG PATH

6 nodes · neon-green accent Jest · Cypress · Chrome DevTools · Git · Docker · CI/CD

DESIGN PATH

5 nodes · neon-yellow accent Figma · UI/UX · Wireframing · Prototyping · Design Systems

​
Fixed Bottom HUD Bar

A permanently visible bar is fixed to the bottom of the viewport. It contains two regions: Left — Skill counter: 
<span>
  SKILLS UNLOCKED: <span>27 / ∞</span>
</span>
Update the 27 to reflect your actual skill count. The ∞ is intentional — skills are unbounded. Right — Active training bar: 
<span>NOW TRAINING: RUST</span>
<motion.div
  initial={{ width: "0%" }}
  animate={{ width: "35%" }}
  transition={{ duration: 2, ease: "easeOut" }}
/>
The NOW TRAINING label and the 35% progress value are hardcoded strings. Change RUST to whatever skill you are currently learning and adjust the target width percentage to match your progress.

​
Customisation

1

Add a skill to an existing path

Locate the relevant path object in the skill paths array and append the new skill name string to its nodes array. A new chip will be generated automatically.
2

Add a new skill path

Append a new object with id, title, icon, color, and nodes. Also update the grid container from four to five columns to accommodate the extra column.
3

Update the skill counter

Change 27 in the bottom HUD bar to reflect the total number of skills across all paths.
4

Update the training skill

Edit the NOW TRAINING: RUST string and the width: "35%" animation target to reflect your current learning focus and estimated completion.
Each path colour is controlled by two Tailwind classes in the color field: one for border-* and one for text-*. These must be complete class names (not interpolated strings) so Tailwind’s JIT scanner can detect them. Add custom colours to tailwind.config.js under theme.extend.colors if you need a fifth path colour beyond the existing neon palette.

Build docs developers (and LLMs) love

Get started for freeTalk to us