Skip to main content

Documentation Index

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

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

The Skills page (/skills) titled “Skill Galaxy Map” takes a radically visual approach: instead of progress bars or flat lists, it renders skills as pill badges orbiting a central “DEV” sun in a solar-system metaphor. Each orbit ring represents a skill category, and the badges continuously rotate at different speeds so the page has constant motion without feeling distracting. The subtitle reads “Orbiting competencies and technical gravity.”

​
Layout overview

The page uses py-12 min-h-[80vh] flex flex-col items-center. The orbit visualization sits inside a relative w-full max-w-[900px] aspect-square container. On smaller screens the map is scaled down with scale-75, and mt-[-100px] compensates for the collapsed vertical space. On md: and above it renders at full size without the negative margin. The center of the system is a w-16 h-16 rounded-full gradient sphere (bg-gradient-to-tr from-white to-aurora-turquoise) with a shadow-[0_0_50px_rgba(94,234,212,0.8)] animate-pulse glow and the text “DEV” in font-display font-bold text-space-900.

​
Orbit ring structure

Four orbit rings are defined in the source array. Each ring has:
  • name — the category label (e.g. “Core Languages”)
  • radius — the pixel radius of the orbit (120 / 220 / 320 / 420)
  • color — text-* token for badge label color
  • borderColor — border-* token for badge and dashed ring border
  • skills — array of skill strings to distribute evenly around the ring
Each ring renders as:
  1. A div with border-dashed and the ring’s borderColor/20 at width/height: radius * 2, creating the faint dashed orbit path.
  2. A motion.div with animate={{ rotate: 360 }} running in an infinite loop at duration: 30 + index * 15 seconds — outer rings rotate more slowly.
  3. Each skill badge is a counter-rotating motion.div with animate={{ rotate: -360 }} at the same duration, so the text always reads upright while the badge itself orbits.
  4. A category label badge placed at the bottom of each orbit ring, also counter-rotating to stay readable.
The counter-rotation trick (rotate: 360 on the ring, rotate: -360 on each badge) is what keeps the skill text upright as it orbits. Both animations must share the exact same duration and repeat: Infinity settings, or the text will slowly drift out of alignment.

​
Orbit ring categories

Core Languages (r:120)

Innermost orbit in text-aurora-turquoise / border-aurora-turquoise. Template skills: JavaScript, TypeScript, HTML/CSS, Python. Rotates at duration: 30s.

Frontend Universe (r:220)

Second orbit in text-aurora-teal / border-aurora-teal. Template skills: React, Next.js, Tailwind, Framer Motion. Rotates at duration: 45s.

Backend & Data (r:320)

Third orbit in text-cosmic-violet / border-cosmic-violet. Template skills: Node.js, PostgreSQL, REST APIs, GraphQL. Rotates at duration: 60s.

Tools & Tactics (r:420)

Outermost orbit in text-cosmic-magenta / border-cosmic-magenta. Template skills: Git/GitHub, Debugging, Docs, UI/UX Design. Rotates at duration: 75s.

​
Color tokens used

ElementToken / class
Center sun gradientfrom-white to-aurora-turquoise
Center glowshadow-[0_0_50px_rgba(94,234,212,0.8)]
Page heading gradientfrom-aurora-teal to-cosmic-violet
Ring 1 (Core Languages)text-aurora-turquoise, border-aurora-turquoise
Ring 2 (Frontend)text-aurora-teal, border-aurora-teal
Ring 3 (Backend)text-cosmic-violet, border-cosmic-violet
Ring 4 (Tools)text-cosmic-magenta, border-cosmic-magenta
Skill badge backgroundglass-panel + ring borderColor/50 border
Category labelbg-space-900/80 border-white/5 text-slate-500

​
Customization guide

1

Replace skill names

The skill data is compiled into the ge array in assets/main.js. To customize, fork the original source and edit the skillCategories array before rebuilding, or edit assets/main.js directly (not recommended for large changes). Each entry’s skills field is a plain string array:
const skillCategories = [
  {
    name: "Core Languages",
    radius: 120,
    color: "text-aurora-turquoise",
    borderColor: "border-aurora-turquoise",
    skills: ["JavaScript", "TypeScript", "Python", "SQL"],
  },
  {
    name: "Frontend Universe",
    radius: 220,
    color: "text-aurora-teal",
    borderColor: "border-aurora-teal",
    skills: ["React", "Next.js", "Tailwind", "Framer Motion"],
  },
  // ... remaining categories
];
2

Adjust skills per orbit

Each orbit distributes skills evenly using index / skills.length * 360 degrees. You can have any number of skills per ring — the math auto-distributes them. For best readability, keep each ring to 4–6 skills so badges don’t overlap.
3

Add or remove orbit rings

To add a fifth category, push a new entry with radius: 520 (incrementing by 100 px from the outermost ring). Choose a new color token or reuse one. The duration formula is 30 + index * 15, so a fifth ring at index 4 would rotate over 90s.
{
  name: "Cloud & DevOps",
  radius: 520,
  color: "text-aurora-green",
  borderColor: "border-aurora-green",
  skills: ["Docker", "AWS", "CI/CD", "Terraform"],
}
At very large radii the outermost badges may clip on smaller viewports. The overflow-hidden md:overflow-visible on the container hides clipped content on mobile. Test on small screens after adding outer rings.
4

Change the center label

The center sphere shows “DEV” — replace it with your initials, a short emoji, or any 1–4 character string. Keep it short: the sphere is only w-16 h-16.
<span className="font-display font-bold text-space-900 text-sm">
  ME {/* ← change this */}
</span>
5

Slow down or speed up rotations

The rotation duration formula is 30 + index * 15 seconds. To make all rings rotate faster, reduce the base (30) or multiplier (15). To make them very slow and ambient, increase to something like 60 + index * 30.
On very small screens the orbit map can feel cramped even with the scale-75 reduction. Consider adding a sm:hidden static skills list as a fallback below the orbit visualization for accessibility, using the same category colors as plain <ul> lists.

Build docs developers (and LLMs) love

Get started for freeTalk to us