Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/a-master-artificer/llms.txt

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

The AstrolabeNav component is the primary navigation control for the A Master Artificer theme. Rather than a traditional top bar or sidebar, it presents itself as a single Compass button fixed to the bottom-right corner of every page. When activated, the button opens an animated astrolabe-style ring that fans all nine portfolio destinations around a full 360° arc. Each link sits at a fixed radius from the centre, positioned using polar coordinates so the ring feels like a navigational instrument rather than an ordinary menu.

​
Route Map

The component uses a hardcoded rs array that defines every destination in the portfolio. Each entry carries a path matching the React Router route, a display label shown in a tooltip on hover, and a Unicode icon displayed on the circular button face.
IconLabelPath
⚝Cover/
👁The Practitioner/about
✧Conjurings/projects
⚗Athenaeum/skills
📜Past Covens/work
☾Field Notes/case-studies
🪶Loose Pages/blog
⚕Whispers/testimonials
✉Send Familiar/contact

​
Route Config Array

The full array as it appears in AstrolabeNav.js: 
const rs = [
  { path: "/",            label: "Cover",           icon: "⚝" },
  { path: "/about",       label: "The Practitioner", icon: "👁" },
  { path: "/projects",    label: "Conjurings",       icon: "✧" },
  { path: "/skills",      label: "Athenaeum",        icon: "⚗" },
  { path: "/work",        label: "Past Covens",      icon: "📜" },
  { path: "/case-studies",label: "Field Notes",      icon: "☾" },
  { path: "/blog",        label: "Loose Pages",      icon: "🪶" },
  { path: "/testimonials",label: "Whispers",         icon: "⚕" },
  { path: "/contact",     label: "Send Familiar",    icon: "✉" },
];
Each route occupies an equal arc segment. With nine routes, each link is placed every 40° around the ring (360 ÷ 9 = 40).

​
Visual Behaviour

Toggle Button

Renders as a w-16 h-16 rounded button anchored at fixed bottom-8 right-8 z-50. Uses the Lucide Compass icon at 32px. When the ring is closed, a border-grimoire-glow animate-ping overlay pulses at 20% opacity to draw attention. When the ring is open, the ping disappears and the compass icon rotates 180° via a spring transition (duration 0.5s).

Outer Ring

A w-80 h-80 absolute circle centred on the toggle button. The outer border uses animate-spin-slow (clockwise). An inner ring at inset-4 is dashed, rendered with border-dashed border-grimoire-accent/30, and spins in reverse at 30s duration.

​
Ring Entry Animation

The ring container itself is wrapped in Framer Motion AnimatePresence with Up (the AnimatePresence component). Entry and exit use spring physics: 
initial:  { opacity: 0, scale: 0.5, rotate: -90 }
animate:  { opacity: 1, scale: 1,   rotate: 0   }
exit:     { opacity: 0, scale: 0.5, rotate: 90  }
transition: { type: "spring", stiffness: 200, damping: 20 }

​
Link Positioning

Each link <div> is positioned at the centre of the ring container and then translated outward to a radius of 120px using the polar-to-Cartesian formula: 
const angle  = index * (360 / rs.length) * (Math.PI / 180);
const radius = 120;
const x      = Math.cos(angle) * radius;
const y      = Math.sin(angle) * radius;
Each link animates from { opacity: 0, x: 0, y: 0 } to its computed { x, y } position with a stagger delay of index * 0.05 seconds.

​
Active State

When the current browser pathname matches a route’s path, the link receives these additional CSS classes: 
bg-grimoire-glow/20   — teal background at 20% opacity
border-grimoire-glow  — full-brightness teal border
box-glow              — custom glow box-shadow utility
The default (inactive) link uses border-grimoire-glow/30 and bg-grimoire-dark.

​
Hover State

On hover, each circular button transitions to border-grimoire-glow (full brightness) and hover:box-glow. The icon text gains the text-glow class. The tooltip label (absolute -top-8) fades in with opacity-0 group-hover:opacity-100 and uses font-title text-grimoire-glow tracking-wider text-sm.

​
Adding or Removing Routes

Edit the rs array directly in components/grimoire/AstrolabeNav.js. To add a route, append a new entry object. To remove a route, delete its object from the array. 
// Add a new "Commissions" page
{ path: "/commissions", label: "Commissions", icon: "🔮" },
The angular spacing recalculates automatically — no other changes are needed. With fewer routes the gaps between links widen; with more routes they tighten. Keep in mind that twelve or more entries will start to crowd the 120px radius.
Every path value in the rs array must match a route registered in your React Router config (typically assets/main.js). A path that has no matching route will navigate to a 404 or empty page. Always add the corresponding <Route> element before adding a new entry here.

​
CSS Classes Reference

ClassApplied WhenEffect
animate-spin-slowAlways (outer ring)Slow clockwise spin
animate-pingToggle button, ring closedPulsing border glow
box-glowActive route / hoverTeal box-shadow glow
text-glowIcon on hoverTeal text glow
bg-grimoire-glow/20Active route20% opacity teal fill
border-grimoire-glowActive route / hoverFull-brightness teal border
border-grimoire-glow/30Default link30% opacity teal border
font-titleTooltip labelsGrimoire display typeface

Build docs developers (and LLMs) love

Get started for freeTalk to us