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 Projects page (/projects) is titled “Discovered Systems” in the template, with the subtitle “Source Code, Decoded from the Void.” It renders every project as a rich card inside a responsive grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 layout. Cards enter with a staggered scale-up animation, lift on hover, and reveal an orbiting glow dot when the mouse moves over them.

​
Layout overview

The page wrapper is py-12 with no max-width constraint, allowing the three-column grid to fill the available content area (which already accounts for the sidebar via lg:pl-20 on the outer layout). Each card is a motion.div with whileHover={{ y: -10 }} to create the floating lift effect. Each project card is structured as:
  1. Hover ring — An absolutely-positioned border-aurora-turquoise/0 → group-hover:border-aurora-turquoise/30 ring that transitions in on hover, plus a single animate-orbit glow dot that traces a circular path around the card.
  2. Cover image — A h-48 image area with object-cover, a gradient overlay (from-space-900 to-transparent) fading the bottom edge, and a category badge in the top-left corner.
  3. Card body — Title, description, tech stack badges, and a footer row with demo/repo links.
The template ships with three example projects: “Nebula Dashboard” (Frontend), “Starlight API” (Backend), and “Void CLI” (Tooling). Replace these with your actual projects before deploying.

​
Card anatomy

┌─────────────────────────────────────┐
│ [Cover image + gradient overlay]    │  h-48, object-cover, opacity-60→100 on hover
│   [Category badge top-left]         │  glass pill: icon + category string
├─────────────────────────────────────┤
│ Project Title                       │  font-display font-bold text-2xl
│ Description paragraph               │  text-slate-400 text-sm, flex-grow
│                                     │
│ [Tech] [Stack] [Badges]             │  font-mono text-xs, bg-white/5 border-white/10
├─────────────────────────────────────┤
│ ↗ Run Demo    📁 Read Logs  [Mock]  │  external-link + github icons
└─────────────────────────────────────┘

​
Framer Motion animations

Staggered entrance

Each card uses initial={{ opacity: 0, scale: 0.9 }} → animate={{ opacity: 1, scale: 1 }} with delay: index * 0.1, duration: 0.5. Cards cascade in from left to right as the page loads.

Hover lift

whileHover={{ y: -10 }} on the outer motion.div lifts the entire card 10 px upward on hover, giving it a floating-object feel.

Image zoom

The cover <img> uses transform group-hover:scale-110 transition-transform duration-700 to slowly zoom in on hover without Framer Motion, keeping the animation GPU-efficient.

Orbit dot

An animate-orbit class (defined in assets/main.css) spins a w-3 h-3 bg-aurora-turquoise rounded-full dot around the card ring. It’s opacity-0 group-hover:opacity-100 pointer-events-none.

​
Color tokens used

ElementToken / class
Page heading gradientfrom-aurora-turquoise to-aurora-teal
Card border (default)border-white/5
Card border (hover)group-hover:border-aurora-turquoise/50
Card backgroundbg-space-800/80
Hover ringgroup-hover:border-aurora-turquoise/30
Category badgebg-space-900/80 backdrop-blur-md border-white/10
Category badge icontext-aurora-turquoise
Title hovergroup-hover:text-aurora-turquoise
Tech badgesbg-white/5 text-slate-300 border-white/10
Demo linktext-aurora-turquoise hover:text-white
Repo linktext-cosmic-violet hover:text-white
Orbit glow dotbg-aurora-turquoise shadow-[0_0_10px_#5eead4]

​
Adding and editing projects

The project data lives in an array of objects. Each object has this shape: 
const projects = [
  {
    id: 1,
    title: "Your Project Name",
    category: "Frontend",          // displayed in the image badge
    icon: LayoutTemplate,          // lucide-react icon for the badge
    image: "https://your-image-url.jpg",  // cover image URL
    description: "One or two sentences describing what this project does.",
    tech: ["React", "Tailwind", "TypeScript"],  // badge list
    demoUrl: "https://your-live-demo.com",
    repoUrl: "https://github.com/you/your-repo",
    mockData: false,               // set true to show the [Mock Data] label
  },
];
1

Add a new project

The project data is compiled into the ue array in assets/main.js. To add projects, fork the original source and push a new object onto the projects array before rebuilding. The grid is fully responsive — it will reflow automatically. You can have any number of cards: 1 column on mobile, 2 on md:, 3 on lg:.
2

Change the cover image

The template uses Unsplash URLs. Replace the image field with any hosted image URL, a local /public/ asset path, or an imported image. Aim for a 16:9 or 3:2 image at 800 px wide for best quality at the h-48 display height.
image: "/images/my-project-screenshot.png",
3

Update tech stack badges

The tech array is rendered as individual <span> pills. Any string is valid — use your actual stack names. The badge style is font-mono text-xs px-2 py-1 rounded-md bg-white/5 text-slate-300 border border-white/10.
4

Wire up real links

Replace the placeholder "#" strings in demoUrl and repoUrl with your actual URLs. The “Run Demo” link uses the ExternalLink icon and text-aurora-turquoise; “Read Logs” uses the Github icon and text-cosmic-violet.
5

Remove the [Mock Data] label

Set mockData: false (or omit the field) on any project to hide the [Mock Data] label in the card footer. It’s a tiny text-slate-500 font-mono uppercase badge intended for demo-only entries.
To add a fourth category color (beyond Frontend/Backend/Tooling), fork the original source and create a new icon-to-color mapping in the projects array before rebuilding. In the compiled output (assets/main.js), the project data lives in the ue array. The category badge always uses text-aurora-turquoise in the template, but you can make it dynamic by mapping category → color in the render.
The template uses live Unsplash images in the image fields. Before deploying to production, replace these with self-hosted screenshots of your actual projects to avoid broken images if Unsplash URLs change.

Build docs developers (and LLMs) love

Get started for freeTalk to us