Skip to main content

Documentation Index

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

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

The Skills page — labeled “SKILLS” in the top navigation — visualizes your technical competencies as glowing stars plotted on a grid canvas. Skills are grouped into named clusters (constellations), and hovering any star reveals its name and proficiency percentage in a scan panel on the right.

​
Route

#/skills
Rendered by the Skills page component in main.js, registered as the skills child route under /.

​
Static Shell

The file pages/Skills.html is the standalone entry point: 
<script>window.__STATIC_PAGE_ROUTE__ = "/skills";</script>

​
Page Layout

The page uses a flex-row layout at large breakpoints:

Star Map Canvas (left)

A bg-midnight-navy/20 panel with a subtle grid overlay. Skill stars are positioned absolutely using left and top percentage values from the data. Stars pulse with animate={{ scale: [1, 1.2, 1], opacity: [0.8, 1, 0.8] }} on infinite loops.

Sidebar (right, w-80)

Two panels: a Scan Readout that shows the hovered skill’s name, cluster, and a filling proficiency bar; and a System Frequencies equalizer — 20 animated bars that bounce randomly on infinite loops.
Idle state: When no star is hovered, the Scan Readout shows the Radar icon with the prompt "HOVER A STAR TO SCAN". Active state: On hover, the readout animates in with initial={{ opacity: 0, y: 10 }} → animate={{ opacity: 1, y: 0 }} and displays:
  • Cluster name (e.g. "Constellatio Frontend")
  • Skill name (e.g. "React")
  • A motion.div progress bar animating from width: 0 → width: {level}%
  • Labels: NOVICE / PROFICIENCY: {level}% / EXPERT

​
Skill Data Structure

Skills are grouped into clusters in a data array defined in the Skills page component: 
{
  id: "frontend",
  name: "Constellatio Frontend",  // cluster label shown in top-left of canvas
  icon: PanelsTopLeft,            // Lucide icon component for this cluster
  color: "text-aurora-cyan",      // color class for the cluster label and star glow
  skills: [
    { name: "React",     level: 90, x: 20, y: 30 },
    { name: "TypeScript",level: 85, x: 40, y: 20 },
    // ...
  ]
}
Each skill entry has:
FieldTypeDescription
namestringDisplay name shown in the scan readout
levelnumberProficiency 0–100 (drives star size: level / 5 px, and bar width)
xnumberHorizontal position on canvas as a percentage (0–100)
ynumberVertical position on canvas as a percentage (0–100)

​
Default Clusters

The default data ships with three clusters:
The cluster names and skills below are example defaults included with the template. Replace them with your actual skills and proficiency levels by editing the skills data array in the Skills page component.

Constellatio Frontend

React · TypeScript · Tailwind CSS · Framer Motion. Uses PanelsTopLeft icon with text-aurora-cyan.

Nebula Backend

Node.js · PostgreSQL · GraphQL · Redis. Uses Database icon with text-aurora-violet.

The Debugger's Compass

Git · Docker · Jest. Uses Cpu icon with text-sunset-orange.

​
Available Icons for Skill Categories

The following Lucide React icons are imported in the bundle and are well-suited for categorizing skill areas:

Cpu

Hardware, embedded, or systems work

Database

Databases, ORMs, data stores

Terminal

CLI tools, shell scripting, DevOps

Radar

Monitoring, observability, analytics

RadioReceiver

APIs, networking, protocols

Orbit

Core frameworks, orbiting concepts

Target

Testing, QA, focused tooling

PanelsTopLeft

Frontend, UI, design systems

​
Customizing Skills

1

Locate the skills data array

Find the skills data array in the Skills page component. Each element is one constellation cluster.
2

Edit or add a cluster

Copy an existing cluster object and change id, name, icon, and color. Choose an icon from the table above — it must already be imported in the bundle (all listed icons are).
{
  id: "cloud",
  name: "Cloud Nebula",
  icon: RadioReceiver,   // already imported in the bundle
  color: "text-aurora-magenta",
  skills: [
    { name: "AWS", level: 70, x: 65, y: 25 },
    { name: "Vercel", level: 85, x: 75, y: 40 },
    { name: "Docker", level: 60, x: 55, y: 55 },
  ]
}
3

Spread stars across the canvas

Use x and y values between 5 and 95 to keep stars inside the visible canvas area. Avoid clustering stars too close together — stars within ~5 percentage points can overlap. Larger level values produce larger, more prominent stars.
4

Set realistic proficiency levels

level: 90 = expert, level: 70 = proficient, level: 50 = intermediate, level: 30 = beginner. The star size is level / 5 pixels in width and height, so a level: 10 skill renders as a 2×2 px dot.
Do not place two stars at the exact same x/y coordinates — they will overlap and only one tooltip will be reachable on hover. Offset by at least 5 percentage points in either axis.

Build docs developers (and LLMs) love

Get started for freeTalk to us