Skip to main content

Documentation Index

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

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

SigilDiagram is an animated SVG component that visualizes skill proficiency across five domains as a glowing arcane sigil. Two concentric circles rotate continuously in opposite directions, a pentagram star path connects the five skill vertices, and radial lines extend from the center to each vertex scaled by that skill’s proficiency. Every element glows in its own distinct neon color drawn from the site’s palette, and Framer Motion drives the draw-in animation on page load. The component is self-contained — all skill data is hardcoded inside the source.

​
Props

SigilDiagram accepts no props in the current build. Skill domain labels, coordinates, colors, and proficiency values are hardcoded inside components/SigilDiagram.js.

​
Usage

Place SigilDiagram directly on the Skills / Arsenal page: 
import SigilDiagram from './components/SigilDiagram';
import PageTransition from './components/PageTransition';

export default function ArsenalPage() {
  return (
    <PageTransition>
      <section className="flex flex-col items-center gap-12 px-8 py-16">
        <h1 className="text-neon-lime text-4xl font-mono tracking-widest">
          [ ARSENAL ]
        </h1>
        <SigilDiagram />
        <p className="text-moonlight/50 text-sm font-mono text-center">
          Glow intensity indicates proficiency level.
        </p>
      </section>
    </PageTransition>
  );
}

​
Visual Behavior

ElementDescription
Outer ringAnimated dashed circle (r=160), electric-violet tint at 20% opacity, continuously rotating clockwise at 20 s per revolution
Inner ringAnimated solid circle (r=100), neon-lime tint at 20% opacity, continuously rotating counter-clockwise at 15 s per revolution
Pentagram pathStar polygon connecting the five nodes in pentagram order (0→2→4→1→3); hot-magenta stroke at 30% opacity, draws in over 3 s on mount
Radial linesFive lines from the center (200, 200) to each node, each scaled by the node’s proficiency value; colored and glowing in the node’s accent color
Node circlesFive small filled circles (r=4) at the tip of each radial line; drop-shadow glow in the node’s accent color
Axis labelsMonospace text adjacent to each node, offset outward from the center; colored and glow-filtered in the node’s accent color
Center orbWhite-moonlight filled circle (r=8) at the origin with a bright glow; scales in with a bounce ([0, 1.2, 1]) on mount
Responsive sizingSVG uses viewBox="0 0 400 400" so it scales proportionally inside any container; constrained to max-w-md by default

​
Skill Domain Data

The five skill nodes are defined at fixed coordinates within a 400 × 400 SVG coordinate space. Each node has a label, a position, an accent color, and a proficiency intensity value (0.0–1.0) that scales the length of its radial line: 
const skills = [
  { x: 200, y:  50, label: 'FRONTEND',     color: '#9eff5b', intensity: 0.9  },
  { x: 342, y: 153, label: 'BACKEND',      color: '#9d4dff', intensity: 0.8  },
  { x: 288, y: 320, label: 'DEVOPS',       color: '#6dffc7', intensity: 0.6  },
  { x: 112, y: 320, label: 'DATABASE',     color: '#ff4ad8', intensity: 0.7  },
  { x:  58, y: 153, label: 'ARCHITECTURE', color: '#f0eaff', intensity: 0.85 },
];
Each radial line’s endpoint is calculated as: 
endX = centerX + (nodeX - centerX) * intensity
endY = centerY + (nodeY - centerY) * intensity

​
Animation Sequence

The component draws itself in over approximately 2–3 seconds on page load:
  1. Node circles scale in from 0 staggered at 0.2 s intervals.
  2. Radial lines draw in (pathLength: 0 → 1) starting 1 s after mount, staggered at 0.2 s intervals.
  3. Pentagram path draws in over 3 s with an easeInOut curve.
  4. Labels fade in (opacity: 0 → 1) starting at 2 s, staggered at 0.1 s intervals.
  5. Center orb bounces in (scale: [0, 1.2, 1]) over 1 s.
  6. Rotating rings begin spinning immediately and loop infinitely.

​
Customization Tips

Update a proficiency value: Change the intensity field for the relevant skill entry in the skills array (range 0.0–1.0). A value of 1.0 extends the radial line all the way to the node’s position. Add or remove a skill node: Edit the skills array. Note that the node positions and the pentagram path are manually specified — you will need to recalculate coordinates and update the star-path ordering when changing the node count. Change a node’s accent color: Replace the color hex string. The same value is used for the radial line stroke, node circle fill, label text, and all associated glow filters. Change the rotation speed: Adjust the duration value on either animated ring’s transition object. The outer ring uses 20 seconds; the inner ring uses 15 seconds. Change the ring colors: Replace the stroke rgba values on the two motion.circle elements. They currently use electric-violet and neon-lime respectively.
SVG glow filters can be GPU-intensive when multiple instances are on screen simultaneously. Render only one SigilDiagram per page, and avoid placing it inside a rapidly re-rendering parent component.
Add an interactive tooltip that appears on hover over each node circle to show the exact skill name and intensity percentage — this transforms the static sigil into a fully interactive proficiency explorer.

Build docs developers (and LLMs) love

Get started for freeTalk to us