Skip to main content

Documentation Index

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

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

The Skills page uses the Star Chart metaphor — each technology you know is plotted as a star on a dark celestial canvas, and lines connect related skills into constellation patterns. Below the visual map, a second section presents the same skills as animated horizontal proficiency bars, giving visitors both a poetic and a precise read of your technical capabilities.
All page components for this portfolio are inlined inside assets/main.js, which is the compiled Vite production bundle. Do not edit main.js directly. Instead, make changes to the source files before running the Vite build. Editing the pre-built bundle will be overwritten on the next build.

​
What the Page Displays

The /skills route is divided into two sections:
  1. Constellation map — an SVG canvas where skill nodes are positioned at fixed coordinates and connected by thin lines when two skills are deemed “adjacent” in your stack.
  2. Proficiency bars — a vertical list of animated <progress>-style bars, each showing a skill name and a percentage fill that animates in on first scroll into view.

​
Full Skills List

The page currently documents nine skills across frontend, backend, tooling, and systems categories:
SkillCategoryDefault Proficiency
ReactFrontend92%
TypeScriptFrontend88%
CSS / TailwindFrontend85%
Framer MotionFrontend78%
Node.jsBackend82%
SQLBackend75%
RustSystems65%
GitTooling90%
DockerTooling72%

​
Skill Data Structure

Both the constellation map and the proficiency bars are driven by the same SKILLS array in main.js: 
// main.js
const SKILLS = [
  { id: "react",          name: "React",          category: "frontend", proficiency: 92, x: 30, y: 20 },
  { id: "typescript",     name: "TypeScript",     category: "frontend", proficiency: 88, x: 50, y: 15 },
  { id: "css-tailwind",   name: "CSS / Tailwind", category: "frontend", proficiency: 85, x: 20, y: 40 },
  { id: "framer-motion",  name: "Framer Motion",  category: "frontend", proficiency: 78, x: 40, y: 35 },
  { id: "nodejs",         name: "Node.js",        category: "backend",  proficiency: 82, x: 65, y: 25 },
  { id: "sql",            name: "SQL",            category: "backend",  proficiency: 75, x: 75, y: 45 },
  { id: "rust",           name: "Rust",           category: "systems",  proficiency: 65, x: 85, y: 20 },
  { id: "git",            name: "Git",            category: "tooling",  proficiency: 90, x: 55, y: 60 },
  { id: "docker",         name: "Docker",         category: "tooling",  proficiency: 72, x: 70, y: 65 },
];

​
Field Reference

FieldTypePurpose
idstringUnique key for React rendering and SVG element IDs
namestringDisplay label shown on the constellation node and proficiency bar
categorystringUsed to color-code nodes and group bars (frontend / backend / systems / tooling)
proficiencynumberInteger 0–100 used to set the proficiency bar fill width
x, ynumberPercentage-based position on the SVG constellation canvas

​
Section 1 — Constellation Map

The constellation map renders each skill as an SVG <circle> at coordinates (x%, y%) within the viewBox. Lines between related skills are drawn as SVG <line> elements defined in a separate SKILL_CONNECTIONS array: 
// main.js
const SKILL_CONNECTIONS = [
  ["react", "typescript"],
  ["react", "framer-motion"],
  ["react", "css-tailwind"],
  ["typescript", "nodejs"],
  ["nodejs", "sql"],
  ["nodejs", "docker"],
  ["rust", "docker"],
  ["git", "docker"],
  ["git", "nodejs"],
];
Each tuple connects two skill IDs with a line. To add a connection, append a new two-element array. To remove one, delete its entry. Skill nodes are color-coded by category:
CategoryNode color
frontend#60a5fa
backend#34d399
systems#f87171
tooling#a78bfa

​
Section 2 — Proficiency Bars

Each bar animates from 0% width to the proficiency value when the element enters the viewport, using Framer Motion’s whileInView: 
// main.js — proficiency bar
<motion.div
  className="proficiency-fill"
  initial={{ width: "0%" }}
  whileInView={{ width: `${skill.proficiency}%` }}
  transition={{ duration: 1.2, ease: "easeOut", delay: index * 0.08 }}
  viewport={{ once: true }}
/>
  • viewport={{ once: true }} — the animation fires once as the section scrolls into view, not on every re-scroll.
  • delay: index * 0.08 — bars animate in a cascading sequence, each 80 ms after the previous.

​
Adding a New Skill

1

Add to the SKILLS array

Append a new object to SKILLS with a unique id, a name, a valid category, a proficiency (0–100), and x/y coordinates (0–100 as percentages).
2

Choose a position on the canvas

Pick x and y values that don’t overlap existing nodes. A gap of at least 10 units between nodes keeps labels legible.
3

Add connections (optional)

If the new skill relates to an existing one, add a tuple to SKILL_CONNECTIONS. For example, a new "graphql" skill would logically connect to "nodejs" and "react".
4

Assign a category

Use an existing category (frontend, backend, systems, tooling) or introduce a new one and add its color to the category color map in the component.
5

Verify rendering

Check both the SVG section (node appears at the right position, lines connect correctly) and the proficiency bar section (bar animates to the correct width).

​
Removing a Skill

  1. Delete the skill’s object from SKILLS.
  2. Remove any tuples in SKILL_CONNECTIONS that reference the deleted skill’s id — leaving a dangling reference will cause a runtime warning.

​
Customization Tips

Group your strongest skills by placing them closer together on the constellation canvas. A tight cluster of frontend skills visually signals specialization to visitors scanning the page quickly.
The proficiency values are self-reported and purely visual. There is no validation logic — you can freely adjust any number to better reflect your honest self-assessment.

​
Related Pages

Projects

See which skills appear in each project’s tech stack.

About

The Flight Log career timeline that provides context for how these skills were acquired.

Build docs developers (and LLMs) love

Get started for freeTalk to us