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 Projects page — labeled “PROJECTS” in the top navigation — is your main portfolio showcase. It renders project entries either as orbiting planets around a central “THE DEV” star, or as a clean list with inline tech-stack pills. A slide-in side panel reveals full details when any project is selected.

​
Route

#/projects
Rendered by the Projects page component in main.js, registered as the projects child route under /. The home page “Recent Missions” section links here via a NavLink component pointing to /projects with the label “VIEW ALL LOGS →”.

​
Static Shell

The file pages/Projects.html is the standalone entry point for direct URL navigation. It sets: 
<script>window.__STATIC_PAGE_ROUTE__ = "/projects";</script>

​
Page Layout

The page fills 100vh minus the header, split into:

Header Row

Page title “Stellar Systems” (with serif-italic text-aurora-teal on “Systems”) and a view-mode toggle. Sub-label: "MISSION LOG: DEPLOYED PROJECTS".

View Toggle

Two buttons switch between Orbit view (Orbit icon) and List view (List icon). State is managed locally with useState("orbit").

​
Orbit View

Each project orbits the central star at a different radius and speed:
ProjectOrbit sizeDuration
Nova E-Commercew-64 h-6420 s
Pulsar Analyticsw-96 h-9635 s
Quasar APIw-[30rem] h-[30rem]50 s
Nebula UIw-[40rem] h-[40rem]65 s
The project names, orbit sizes, and durations above are example defaults that ship with the template. Replace them with your own real projects by editing the projects data array in the Projects page component.
Clicking any planet dot opens the detail panel. Hovering reveals the project name in a small tooltip.

​
List View

Projects render as horizontal card rows with:
  • Colored dot (matching orbit color)
  • Project name + type label
  • Tech stack pills (hidden on mobile, visible at md: breakpoint)

​
Detail Panel

Clicking any project in either view triggers an AnimatePresence slide-in from the right (x: "100%" → 0, spring animation). The panel shows:
  • Project name and class/type
  • Description paragraph
  • ORBITAL STATS (STACK) — tech tag pills
  • RUN DEMO button (uses ExternalLink icon)
  • SOURCE CODE button (uses Github icon)
  • MISSION LOG button (uses FileText icon)

​
Project Data Structure

Projects are defined in a data array in the Projects page component. Each object has: 
{
  id: 1,                          // unique number
  name: "Nova E-Commerce",        // display name
  type: "Full Stack",             // category label (shown as "CLASS: FULL STACK")
  color: "bg-aurora-teal",        // Tailwind bg class — drives dot & glow color
  size: "w-12 h-12",              // dot size in orbit view
  orbit: "w-64 h-64",             // orbit ring diameter
  duration: 20,                   // orbit rotation duration in seconds
  desc: "A high-performance ...", // description shown in detail panel
  stack: ["React", "Node.js", "PostgreSQL"] // tech tags
}

​
Adding a New Project

1

Find the projects data array

Locate the projects data array in the Projects page component. It currently has four example entries.
2

Add a new project object

Append a new entry. Choose a color from the Tailwind theme (bg-aurora-teal, bg-aurora-violet, bg-aurora-cyan, bg-aurora-magenta, bg-sunset-orange). Increase the orbit size and duration beyond the last entry so it gets its own ring.
{
  id: 5,
  name: "Comet CLI",
  type: "Tool",
  color: "bg-aurora-magenta",
  size: "w-8 h-8",
  orbit: "w-[50rem] h-[50rem]",
  duration: 80,
  desc: "A developer CLI for scaffolding space-themed React projects in seconds.",
  stack: ["Node.js", "Commander.js", "Chalk"]
}
3

Wire up the CTA buttons

Inside the detail panel in the Projects page component, find the three CTA <button> elements. Replace the href="#" placeholders with real URLs for your live demo, GitHub repository, and case study (if applicable). Convert <button> to <a> tags with target="_blank" rel="noopener noreferrer" for external links.
The interactive CSS class is applied to clickable project items. This class signals the custom cursor (CustomCursor component) to switch to its hover state. Keep interactive on any clickable element you add to preserve the cursor behavior.

Build docs developers (and LLMs) love

Get started for freeTalk to us