Skip to main content

Documentation Index

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

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

Getting Cosmic Developer running locally takes just a few commands. Once the dev server is up you’ll have a live-reloading React app with the full starfield, aurora glows, and all nine portfolio pages ready for you to fill with your own work.

​
Prerequisites

Before you begin, make sure you have the following installed:
  • Node.js 18 or later — nodejs.org
  • A package manager: npm (bundled with Node), yarn, or pnpm
  • Git for cloning the repository

​
Installation

1

Clone the repository

Clone the Cosmic Developer repo from GitHub to your local machine.
git clone https://github.com/apursley2012/cosmic-developer.git
cd cosmic-developer
2

Install dependencies

Install all required packages using your preferred package manager.
npm install
3

Start the development server

Launch Vite’s dev server with hot module replacement.
npm run dev
4

Open the app in your browser

Navigate to the local URL printed in your terminal. You should see the Earthrise home page with the animated starfield and aurora background.
http://localhost:5173
Vite defaults to port 5173. If that port is already in use, Vite will automatically increment to the next available port (5174, 5175, …) and print the actual URL in your terminal.

​
Project Structure

Here is an overview of the key files and directories you’ll be working with: 
cosmic-developer/
├── index.html                  # App shell — edit <title> and meta tags here
├── assets/
│   ├── main.js                 # Full compiled bundle (pages + routing + components)
│   └── main.css                # Tailwind output — includes glass-panel utility
├── components/
│   └── cosmos/                 # Reusable space-UI components
│       ├── StarfieldBackground.js   # Canvas starfield
│       ├── AuroraBackground.js      # Animated aurora blobs
│       ├── CustomCursor.js          # Magnetic three-layer cursor
│       ├── TeletypeText.js          # Animated typewriter component
│       ├── PageTransition.js        # Framer Motion route wrapper
│       ├── Navigation.js            # Fullscreen overlay nav + nav items
│       └── Footer.js                # Site-wide footer
└── pages/                      # Static HTML pages (fallback / preview)
    ├── About.html
    ├── Projects.html
    ├── Skills.html
    ├── Work.html
    ├── CaseStudies.html
    ├── Articles.html
    ├── Testimonials.html
    └── Contact.html

​
Personalizing Your Content

All nine portfolio pages are defined inside assets/main.js and wired to React Router’s hash-based routing. To update the content of a page, locate its route in the router configuration and edit the corresponding page component. The full route map is:
Hash RouteNavigation LabelPage Description
/#/EarthriseHome — hero section and introduction
/#/aboutOrigin CoordinatesAbout — your background and story
/#/projectsProbes & PayloadsProjects — showcase of your work
/#/skillsInstrumentsSkills — constellation skill visualisation
/#/workMission LogWork — employment history timeline
/#/case-studiesFlight RecordingsCase Studies — deep-dive project write-ups
/#/articlesTransmissionsArticles — blog posts and writing
/#/testimonialsGround Control SaysTestimonials — quotes from collaborators
/#/contactOpen ChannelContact — form and contact details
Navigation labels are defined in components/cosmos/Navigation.js: 
const navItems = [
  { path: '/', label: 'Earthrise', desc: 'Home' },
  { path: '/about', label: 'Origin Coordinates', desc: 'About' },
  { path: '/projects', label: 'Probes & Payloads', desc: 'Projects' },
  { path: '/skills', label: 'Instruments', desc: 'Skills' },
  { path: '/work', label: 'Mission Log', desc: 'Work' },
  { path: '/case-studies', label: 'Flight Recordings', desc: 'Case Studies' },
  { path: '/articles', label: 'Transmissions', desc: 'Articles' },
  { path: '/testimonials', label: 'Ground Control Says', desc: 'Testimonials' },
  { path: '/contact', label: 'Open Channel', desc: 'Contact' },
]
Edit the label and desc fields to rename any navigation item without touching the routing logic. The path values must remain consistent with your router configuration.

​
Next Steps

Architecture

Understand how the cosmos components layer together, how AnimatePresence drives page transitions, and how the hash router is configured for static deployment.

Components

Dive into each of the seven cosmos components — props, animation parameters, and how to compose them into your own layouts.

Customization

Swap colors in the Tailwind config, adjust aurora blob sizes and speeds, change fonts, and configure the teletype timing to match your brand.

Build docs developers (and LLMs) love

Get started for freeTalk to us