Skip to main content

Documentation Index

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

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

The Skills page forgoes a conventional list of progress bars in favour of an interactive pentagram — the five points of the star map to five magical disciplines, each one a school of front-end and full-stack sorcery. Hovering a vertex highlights the node and populates a detail panel on the left with the discipline’s name, subtitle, and associated tools.

​
The Five Disciplines

The skills array in assets/Skills.js defines each discipline as an object. The full dataset from the source is:

Divination — Analytics & Data

Position: top vertex (x: 100, y: 20)Description: “Scrying into the data streams to foresee user behavior and system performance.”Tools: Google Analytics, Mixpanel, Datadog

Transmutation — State & Refactoring

Position: upper-right vertex (x: 180, y: 80)Description: “Altering the fundamental structure of codebases without breaking their essence.”Tools: Redux, Zustand, Legacy Migration

Illusion — UI & Animations

Position: lower-right vertex (x: 150, y: 170)Description: “Crafting deceptive interfaces that delight the eye and guide the hand.”Tools: Framer Motion, CSS Keyframes, Three.js

Conjuration — Backend & APIs

Position: lower-left vertex (x: 50, y: 170)Description: “Summoning data from the void and binding it to the mortal realm.”Tools: Node.js, GraphQL, REST, PostgreSQL

Abjuration — Security & Testing

Position: upper-left vertex (x: 20, y: 80)Description: “Warding applications against malicious spirits and unexpected failures.”Tools: Jest, Cypress, OAuth, JWT

​
Interaction Model

State is managed with a single useState(null) that tracks the currently hovered skill id as a string (or null when nothing is hovered). The interactive SVG nodes use standard DOM event handlers: 
<g
  onMouseEnter={() => setActiveSkill(skill.id)}
  onMouseLeave={() => setActiveSkill(null)}
  className="cursor-pointer outline-none"
>
When a node is active (activeSkill === skill.id):
  • The motion.circle fill switches from fill-midnight-darker stroke-spell stroke-2 to fill-spell via a conditional class string
  • A second motion.circle with the same cx/cy animates outward — initial={{ scale: 0, opacity: 1 }} → animate={{ scale: 2, opacity: 0 }} — creating a pulsing sonar-ring effect that repeats infinitely
  • The left panel renders the matching discipline’s name, subtitle, and description using a motion.div with initial={{ opacity: 0, y: 10 }} → animate={{ opacity: 1, y: 0 }}
// Pulsing ring on active node
{activeSkill === skill.id && (
  <motion.circle
    cx={skill.x}
    cy={skill.y}
    r="16"
    fill="none"
    stroke="#2dd4bf"
    strokeWidth="1"
    initial={{ scale: 0, opacity: 1 }}
    animate={{ scale: 2, opacity: 0 }}
    transition={{ duration: 1, repeat: Infinity }}
  />
)}
When no node is hovered the panel shows a centred "Select a Discipline" placeholder in Cinzel Small Caps.

​
SVG Structure

The pentagram SVG uses viewBox="0 0 200 200" with overflow-visible to allow the pulsing rings to extend beyond the box bounds. It is built from four layers drawn in order:
1

Outer Circle

A motion.circle at cx="100" cy="100" r="90" with stroke="rgba(45,212,191,0.2)" and strokeWidth="1". It draws itself in on mount using initial={{ pathLength: 0 }} → animate={{ pathLength: 1 }} over 2 seconds.
2

Pentagon Shape

A static motion.path traces the pentagon connecting all five vertices: d="M100,20 L180,80 L150,170 L50,170 L20,80 Z" Rendered in stroke="rgba(45,212,191,0.1)" as a very faint structural guide.
3

Pentagram Star

A motion.path draws the five-pointed star by connecting every other vertex: d="M100,20 L150,170 L20,80 L180,80 L50,170 Z" Stroke is rgba(45,212,191,0.3) at strokeWidth="1.5". Like the outer circle it draws itself in on mount, delayed by 0.5 seconds.
4

Interactive Vertex Nodes

Five <g> elements wrap motion.circle hotspots at each vertex coordinate. Each motion.circle uses whileHover={{ scale: 1.5 }} for a subtle grow-on-hover in addition to the active fill swap.

​
How to Customize

Edit the skills array at the top of assets/Skills.js. Each object has id, name, subtitle, description, x, and y fields: 
// assets/Skills.js
const skills = [
  {
    id: "divination",
    name: "Divination",
    subtitle: "Analytics & Data",
    description:
      "Scrying into the data streams to foresee user behavior and system performance. (Google Analytics, Mixpanel, Datadog)",
    x: 100,  // SVG x coordinate of the vertex hotspot
    y: 20,   // SVG y coordinate of the vertex hotspot
  },
  // … four more entries
];
The x and y values must match the vertices used in the pentagon and star <path> d attributes. If you only need to rename a discipline or update its tools, change only the name, subtitle, and description strings — leave x and y untouched.
The page layout is flex flex-col lg:flex-row — on mobile the discipline panel stacks above the pentagram. The panel has a fixed h-48 height so content that is too long will overflow; keep description values to two sentences or fewer.

Build docs developers (and LLMs) love

Get started for freeTalk to us