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 About page (/about) tells the human story behind the code. It uses a vertical timeline to walk through career milestones and life chapters, then closes with a two-column “System Diagnostics” panel that frames personal strengths and weaknesses in developer-flavored language. The page heading is branded “Origin Story” in the template, with the sub-line “No actual astrology, just suspiciously organized files.”

​
Layout overview

The page is constrained to max-w-4xl mx-auto py-12 and divides into two major sections:
  1. Timeline — A vertical timeline built with a before: pseudo-element gradient line (from-cosmic-magenta via-cosmic-violet to-aurora-teal) running down the center on md: screens and along the left edge on mobile. Each milestone card is a motion.div that enters via whileInView scroll animation.
  2. System Diagnostics — A wide glass-panel card at the bottom with a grid grid-cols-1 md:grid-cols-2 layout. The left column lists “Strengths” in text-aurora-turquoise and the right lists “Known Bugs” in text-cosmic-magenta. Each list item uses a small colored rounded-full dot as a bullet.

​
Timeline milestone cards

The template ships with four milestones stored as an array of objects. Each card contains:
  • year — displayed in font-mono text-sm text-slate-400
  • title — displayed in font-display font-bold text-2xl with the milestone’s color token
  • desc — body text in text-slate-300 leading-relaxed
  • icon — a lucide-react icon rendered inside a rounded-full glass-panel badge on the timeline spine
  • color, bgColor, borderColor — per-card Tailwind token strings for the icon badge

Icon badges

Each milestone icon sits in a w-16 h-16 rounded-full glass-panel border-2 ring centered on the timeline line. On md: screens the ring is positioned with left-1/2 -translate-x-1/2; on mobile it’s left-8 -translate-x-1/2.

Card positioning

Cards alternate left and right on desktop via md:flex-row-reverse on even-indexed items. On mobile all cards are left-aligned with ml-24 to clear the icon badge.

whileInView entrance

Each motion.div uses initial={{ opacity: 0, y: 50 }} → whileInView={{ opacity: 1, y: 0 }} with viewport={{ once: true, margin: "-100px" }} and duration: 0.6. Cards animate as they scroll into view.

Hover state

Each glass-panel card has hover:border-aurora-turquoise/50 transition-colors duration-300 on the wrapping div, and the title gains group-hover:text-glow to simulate a soft neon highlight.

​
System Diagnostics panel

The panel at the bottom of the page uses a glass-panel p-8 rounded-3xl border-aurora-teal/30 wrapper with a blur-[80px] aurora glow positioned in the top-right corner via an absolutely-placed div.
  • Strengths column — header in text-aurora-turquoise font-mono; bullets use w-1.5 h-1.5 rounded-full bg-aurora-green dots
  • Known Bugs column — header in text-cosmic-magenta font-mono; bullets use w-1.5 h-1.5 rounded-full bg-cosmic-magenta dots

​
Color tokens used

ElementToken / class
Page heading gradientfrom-aurora-turquoise to-cosmic-violet
Timeline spine gradientfrom-cosmic-magenta via-cosmic-violet to-aurora-teal
Healthcare milestonetext-cosmic-magenta, bg-cosmic-magenta/20, border-cosmic-magenta/50
Retail milestonetext-cosmic-violet, bg-cosmic-violet/20, border-cosmic-violet/50
Inspect Element milestonetext-aurora-turquoise, bg-aurora-turquoise/20, border-aurora-turquoise/50
Dev milestonetext-aurora-teal, bg-aurora-teal/20, border-aurora-teal/50
Diagnostics panel borderborder-aurora-teal/30
Strengths bulletsbg-aurora-green
Known Bugs bulletsbg-cosmic-magenta

​
Customization guide

1

Edit or add timeline milestones

The milestones live in the pe array (compiled) — in your source, it will be a plain JS/TS array of objects. Each object follows this shape:
const milestones = [
  {
    id: "chapter-1",
    year: "2019",
    title: "Your Chapter Title",
    icon: HeartPulse,          // any lucide-react icon
    color: "text-cosmic-magenta",
    bgColor: "bg-cosmic-magenta/20",
    borderColor: "border-cosmic-magenta/50",
    desc: "A sentence or two describing this life or career chapter.",
  },
  // Add as many entries as you need — the layout handles any count
];
Use the four aurora/cosmic color tokens to keep each milestone visually distinct: cosmic-magenta, cosmic-violet, aurora-turquoise, aurora-teal.
2

Update the Strengths list

Find the unordered list under the text-aurora-turquoise header in the System Diagnostics panel. Replace the <span> text for each <li> with your own strengths:
<ul className="space-y-2 text-slate-300">
  <li className="flex items-center space-x-2">
    <span className="w-1.5 h-1.5 rounded-full bg-aurora-green" />
    <span>Your strength here</span>
  </li>
</ul>
3

Update the Known Bugs list

The right column mirrors the structure but uses bg-cosmic-magenta bullets. Keep the tone playful — this is meant to be self-deprecating humor, not a real weakness list:
<ul className="space-y-2 text-slate-300">
  <li className="flex items-center space-x-2">
    <span className="w-1.5 h-1.5 rounded-full bg-cosmic-magenta" />
    <span>Your quirk here</span>
  </li>
</ul>
4

Change the page title and subtitle

The <h1> renders “Origin Story” and the <p> renders the subtitle. Both sit inside the opening motion.div at the top of the component:
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="mb-16 text-center">
  <h1 className="text-4xl md:text-5xl font-display font-bold mb-4
                 text-transparent bg-clip-text
                 bg-gradient-to-r from-aurora-turquoise to-cosmic-violet">
    Origin Story {/* ← change this */}
  </h1>
  <p className="text-xl text-slate-400 font-mono">
    No actual astrology, just suspiciously organized files. {/* ← change this */}
  </p>
</motion.div>
To add more than four milestones, simply push additional objects into the array. The alternating md:flex-row-reverse layout is driven by the array index (index % 2 === 0), so new entries will automatically alternate sides on desktop without any extra CSS.

Build docs developers (and LLMs) love

Get started for freeTalk to us