Skip to main content

Documentation Index

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

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

The Skills page replaces the conventional progress-bar or percentage list with a full pentagram visualisation. Each of the five points of the star represents a core skill — the vertex position and the size of a pulsing halo around each node reflect the developer’s self-assessed proficiency level. Two overlapping SVG pentagrams (styled as a wand star and a chalice star) animate their path lengths on mount, drawing themselves into view before the skill labels appear.

​
Route

#/skills
Navigate to #/skills or click the Skills link in the site navigation.

​
Visual Layout

Dual Pentagram SVG

Two five-pointed star paths drawn one on top of the other. The wand star uses a warmer stroke colour; the chalice star uses a cooler tone. Both animate their pathLength from 0 to 1 on mount via Framer Motion.

Skill Nodes

A circular node sits at each pentagram vertex. The node’s outer glow (halo) pulses in a looping animation — the halo radius is proportional to the skill’s level value, giving a visual weight to higher-rated skills.

Skill Labels

Each node is accompanied by a text label showing the skill name. Labels are positioned outward from the vertex so they never overlap the pentagram lines.

Mastery Centre Text

The word “Mastery” is rendered at the geometric centre of the pentagram, anchoring the composition and reinforcing the section’s theme.

​
Pentagram Geometry

Skills are placed at pentagram vertices calculated from a central origin. The angle field in each skill object specifies the vertex offset in degrees, starting from the top (12 o’clock position) and moving clockwise in 72° increments.
VertexDegrees from topSkill
10°React
272°TypeScript
3144°Node.js
4216°CSS / Tailwind
5288°GraphQL

​
Data & Configuration

Skills are stored in the T array inside assets/main.js: 
// assets/main.js — Skills data (array T)
const T = [
  { name: 'React',        level: 90, angle: 0   },
  { name: 'TypeScript',   level: 85, angle: 72  },
  { name: 'Node.js',      level: 80, angle: 144 },
  { name: 'CSS/Tailwind', level: 95, angle: 216 },
  { name: 'GraphQL',      level: 75, angle: 288 },
];

​
Field reference

FieldTypePurpose
namestringSkill label displayed next to the node
levelnumber (0–100)Proficiency score; drives the pulsing halo size
anglenumber (degrees)Vertex position on the pentagram (0 = top, clockwise)

​
Customisation

1

Update skill names and levels

Edit the name and level fields in the T array. level should be an integer between 0 and 100. Changing a level value automatically resizes that node’s pulsing halo — no other changes are needed.
2

Add a sixth skill (advanced)

The pentagram is a five-point figure, so adding a sixth item requires changing the visualisation from a pentagram to a hexagram (or another polygon). Update the SVG path data in the PentagramSVG component and add corresponding vertex angles at 60° increments for a hexagram, then append the new skill object to T.
3

Change the star stroke colours

The wand-star and chalice-star stroke colours are defined as CSS custom properties (or Tailwind classes) inside the PentagramSVG component. Update those values to match your preferred palette.
4

Adjust animation speed

The pathLength animation duration is configured in the Framer Motion transition object on each motion.path. Increase duration for a slower, more dramatic draw; decrease it for a snappier reveal.
5

Change the centre label

The “Mastery” text is a hard-coded string inside the PentagramSVG component. Replace it with any single word or short phrase that fits inside the inner pentagon of the star.

​
Key Components

ComponentDescriptionDocs
PentagramSVGDraws the two overlapping star paths and manages the pathLength animationInternal
SkillNodeRenders the pulsing halo circle and skill label at a given vertexInternal

​
Interactive Behaviour

Both pentagram paths use a Framer Motion motion.path with initial={{ pathLength: 0 }} and animate={{ pathLength: 1 }}. The two paths animate with a slight stagger so the wand star finishes first, then the chalice star draws over it. This creates a layered, ritual-like reveal.
Each SkillNode renders a motion.circle that loops between two r (radius) values using Framer Motion’s animate with repeat: Infinity and repeatType: 'mirror'. The base radius and pulse delta are derived from the skill’s level — a level of 95 produces a noticeably larger and more active pulse than a level of 75.
The angle field is measured in degrees clockwise from the top of the circle. The component converts it to SVG coordinates internally using Math.sin and Math.cos. You do not need to calculate SVG x/y positions manually — just set the angle and the component does the rest.
Keep the number of skills at exactly five to preserve the pentagram shape. If you genuinely have more than five skills to highlight, consider grouping related technologies (e.g. “CSS & Design Systems”) rather than extending the polygon, to maintain the visual clarity of the star motif.

Build docs developers (and LLMs) love

Get started for freeTalk to us