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.

The Skills page (/skills) visualizes technical competencies through three distinct UI regions: a radar chart rebranded as a “SigilDiagram,” a grid of equipped technology glyphs, and a passive buffs panel that lists developer soft skills as RPG-style leveled attributes. The left–right split layout on desktop gives the radar chart and icon grid equal visual weight, while the buffs panel spans the full width below.

​
Route & Navigation

PropertyValue
Route/skills
Nav LabelARSENAL
Page HeadingARSENAL & APTITUDE
Subheading// QUANTIFIED MYSTICISM

​
Visual Structure

​
SigilDiagram (Radar Chart)

The left panel contains a radar chart labeled DOMAIN_MASTERY_SIGIL. The chart plots proficiency across multiple technical domains on a polygon grid, rendered using SVG. Axis labels use the same uppercase monospace style as the rest of the site. The radar chart is a custom SVG component (not a third-party library), which means the polygon path data is calculated from the skill data array at render time. Each axis corresponds to a skill domain, and the plotted area is filled with a semi-transparent accent color. To adjust the radar chart values, locate the skill domain data array and update the numeric proficiency levels (typically on a 0–10 or 0–100 scale).

​
Equipped Glyphs (Icon Grid)

The right panel displays eight technology icons arranged in a grid. Each glyph is a labeled icon representing a core tool or platform in the developer’s stack:
Glyph NameTechnology
REACT_COREReact
NODE_RUNTIMENode.js
POSTGRES_DBPostgreSQL
TYPESCRIPTTypeScript
GRAPH_QLGraphQL
AUTH_ZAuthentication / Authorization
BASH_SCRIPTBash / Shell scripting
AWS_CLOUDAmazon Web Services
Each glyph is rendered as an icon (SVG or icon font) with a label below it, wrapped in a styled tile with the same glass-panel border treatment used elsewhere on the site. Hover effects illuminate the tile.

​
Passive Buffs Panel

Below the two-column section, a full-width panel lists soft skills as “passive buffs” — persistent character bonuses that are always active. Each buff shows a name and a level value:
BuffLevel
Rapid Context Switching8
Legacy Code Resistance5
Documentation Clairvoyance7
Levels are displayed as a numeric badge and optionally as a segmented bar or pip indicator.

​
Animations

The SigilDiagram animates its polygon path from a zero-area center point to its full plotted shape on mount, using a Framer Motion path or opacity transition. The glyph icons entrance-animate with a staggered fade-in. The passive buffs panel slides up from below on mount. 
// Radar polygon draw-in animation pattern
<motion.polygon
  points={polygonPoints}
  initial={{ opacity: 0, scale: 0 }}
  animate={{ opacity: 1, scale: 1 }}
  transition={{ duration: 0.8, ease: "easeOut" }}
/>
The SigilDiagram is a bespoke SVG component. It does not use Chart.js, D3, or Recharts. All axis positioning and polygon math is computed inline. When adding new skill domains, you must add both a data entry and ensure the SVG viewBox still accommodates the extra axis without clipping labels.

​
Customization

Updating skill domain values: Locate the skills data array (likely near the top of the Skills component or in a separate data/skills.js file) and update the proficiency values for each domain. 
// Example skill domain entry shape
{
  label: "Frontend",
  value: 90  // 0-100 scale
}
Adding a new equipped glyph: Append an entry to the glyphs array. The grid uses CSS Grid with grid-cols-4, so adding a ninth item will wrap to a third row. Consider adjusting to grid-cols-3 if you want a cleaner odd-count layout. 
// Glyph entry shape
{
  name: "REDIS_CACHE",
  icon: RedisIcon,  // imported SVG or icon component
  label: "Redis"
}
Editing passive buffs: Find the buffs array and update the name and level fields. Level values are display-only and do not affect any computed behavior — set them to whatever communicates the right impression. 
// Buff entry shape
{
  name: "Rapid Context Switching",
  level: 8
}
The level numbers for passive buffs are arbitrary flavor text. Use them to communicate relative strength (higher = stronger) rather than exact metrics. Keeping levels between 1 and 10 maintains the RPG stat aesthetic.
If you remove a skill domain from the radar chart data, the SVG polygon will recalculate with one fewer vertex. Verify the resulting shape still looks intentional — an odd number of axes can produce asymmetric polygons that may appear broken rather than stylized.

Build docs developers (and LLMs) love

Get started for freeTalk to us