Skip to main content

Documentation Index

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

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

The Skills page (/skills) is titled Affinities and subtitled “Circle of Competencies.” It replaces a traditional skills list with an interactive orbital visualisation: a spinning circular center hub surrounded by seven skill-category nodes arranged in a perfect circle, connected by dashed SVG lines. Hovering any node reveals a tooltip card listing that category’s individual skills.

​
Visual & UX Overview

Circular Center Hub

The center hub is a w-32 h-32 rounded-full motion.div with border-2 border-mystic-violet/50 bg-mystic-950. It contains an inner w-24 h-24 rounded-full border border-mystic-teal/30 circle housing a Sparkles icon. The outer hub animates with a continuous rotate: 360 spin over 60 seconds, signalling the system is “active.”

Orbital Node Positioning

Seven skill nodes are arranged in a circle of radius 220px around the hub. Each node’s (x, y) position is calculated as: angle = (index / skills.length) × 2π − π/2 x = 220 × cos(angle), y = 220 × sin(angle) The −π/2 offset places the first node at the 12 o’clock position.

SVG Connector Lines

Each node renders its own <svg> element (absolutely positioned, overflow visible) with a <line> drawn from (0,0) back to the hub. Lines use strokeDasharray="4 4". When a node is active (hovered), its line stroke uses the node’s color; inactive lines use #2d1b4e.

Skill Tooltip Cards

Hovering a node triggers a floating tooltip that appears via AnimatePresence. It shows the category label and a list of individual skills, each animated in with a staggered delay: index * 0.05s. The tooltip is positioned at the bottom of the container on mobile, or centered on desktop.

​
Skill Categories Data

The seven skill categories are defined in a static array. Each category has an id, display label, color (hex value for accent styling), and a skills string array: 
const skills = [
  { id: "lang",  label: "Incantations", color: "#a855f7", skills: ["JavaScript (ES6+)", "TypeScript", "HTML5", "CSS3/Sass"] },
  { id: "front", label: "Illusions",    color: "#2dd4bf", skills: ["React", "Next.js", "Tailwind CSS", "Framer Motion"] },
  { id: "back",  label: "Deep Magic",   color: "#a7f3d0", skills: ["Node.js", "Express", "PostgreSQL", "REST APIs"] },
  { id: "debug", label: "Divination",   color: "#f43f5e", skills: ["Chrome DevTools", "Jest", "React Testing Library", "Console.log() Divination"] },
  { id: "docs",  label: "Scribing",     color: "#fbbf24", skills: ["Markdown", "JSDoc", "Technical Writing", "Architecture Diagrams"] },
  { id: "git",   label: "Time Travel",  color: "#60a5fa", skills: ["Git", "GitHub Actions", "CI/CD", "Branching Strategies"] },
  { id: "ui",    label: "Aesthetics",   color: "#c084fc", skills: ["Figma", "UI/UX Principles", "Accessibility (a11y)", "Responsive Design"] },
];

​
Category Summary Table

#IDLabelColorIndividual Skills
1langIncantations#a855f7JavaScript (ES6+), TypeScript, HTML5, CSS3/Sass
2frontIllusions#2dd4bfReact, Next.js, Tailwind CSS, Framer Motion
3backDeep Magic#a7f3d0Node.js, Express, PostgreSQL, REST APIs
4debugDivination#f43f5eChrome DevTools, Jest, React Testing Library, Console.log() Divination
5docsScribing#fbbf24Markdown, JSDoc, Technical Writing, Architecture Diagrams
6gitTime Travel#60a5faGit, GitHub Actions, CI/CD, Branching Strategies
7uiAesthetics#c084fcFigma, UI/UX Principles, Accessibility (a11y), Responsive Design

​
Orbital Position Calculation

Node positions are computed at render time (not hardcoded) so that adding or removing categories automatically redistributes all nodes evenly: 
const ORBIT_RADIUS = 220; // px
const hub = { x: 0, y: 0 };

skills.map((skill, index) => {
  const angle = (index / skills.length) * Math.PI * 2 - Math.PI / 2;
  const x = hub.x + ORBIT_RADIUS * Math.cos(angle);
  const y = hub.y + ORBIT_RADIUS * Math.sin(angle);
  // node is rendered at position (x, y)
});
The ORBIT_RADIUS of 220px is calibrated for a container of w-full max-w-3xl h-[600px]. The container uses flexbox centering so the hub sits at the geometric center, and node coordinates are offsets from that center.

​
Hover Interaction Flow

1. User hovers over a skill node
2. Node scale: 1.0 → 1.1 (Framer Motion whileHover spring)
3. Node border color changes to the category color
4. SVG connector line: stroke changes from #2d1b4e to the node's color, strokeWidth 1 → 2
5. Tooltip: AnimatePresence mounts the card, fades + scales in
6. User moves cursor off node
7. All above values reverse; AnimatePresence unmounts the tooltip

​
Customization

Append an entry to the skills array. The orbital layout recalculates automatically — no manual position values needed. Choose a unique hex color that doesn’t clash with existing nodes. If adding an eighth category, the orbit spacing becomes 360° / 8 = 45° per node, which remains visually comfortable.
Edit the skills string array inside the relevant category object. There is no enforced maximum, but more than six items may overflow the tooltip card. Consider splitting oversized categories into two if the list grows.
Adjust the ORBIT_RADIUS constant (currently 220). Increase it to give more space between the hub and nodes; decrease it for a more compact layout. The SVG connector lines will stretch or shrink automatically since they are drawn to the same computed (x, y) positions.
The center hub uses a Sparkles (Oe) icon from lucide-react. Swap this for any other Lucide icon by importing it and replacing the JSX element. The spinning animation is applied to the outer motion.div wrapper, not the icon itself.

​
Component Dependencies

ComponentSourceRole
Sigilcomponents/Sigil.jsOptional decorative sigils on node backgrounds
BackgroundEffectscomponents/BackgroundEffects.jsAmbient particle and blur layer
Navigationcomponents/Navigation.jsFixed top navigation bar
Sparkles (Lucide)lucide-reactCenter hub icon
motion / AnimatePresenceFramer MotionNode entrance spring, hover scale, tooltip mount/unmount
The "Console.log() Divination" skill in the Divination category is an intentional Easter egg — a humorous nod to debugging culture. If you want to keep the tone strictly professional, replace it with "Lighthouse Auditing" or "a11y Inspection".

Build docs developers (and LLMs) love

Get started for freeTalk to us