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.

Aurora Cosmos is a pre-built static site — the compiled JavaScript, CSS, and HTML are already in the repository. You clone one repository and open index.html in a browser (or serve the directory with any local HTTP server) to see the full portfolio with animated aurora backgrounds, a starfield, and all seven pre-wired pages. No Node.js installation or build step is required to run the template as-is.

​
Prerequisites

Before you begin, make sure you have the following:
  • Git — git-scm.com
  • A web browser
  • Optionally, a local HTTP server (e.g., the Live Server VS Code extension, Python’s http.server, or any static file server) — recommended because some browsers restrict ES module loading from file:// URLs

​
Installation

1

Clone the repository

Clone Aurora Cosmos from GitHub and move into the project directory:
git clone https://github.com/apursley2012/aurora-cosmos.git && cd aurora-cosmos
2

Serve the project

Because Aurora Cosmos loads JavaScript as ES modules, it is best served over HTTP rather than opened directly as a file:// URL. Use any static file server — for example, Python’s built-in server:
python3 -m http.server 8080
Then open http://localhost:8080 in your browser. The aurora background and starfield will start animating immediately.
If you use VS Code, the Live Server extension (right-click index.html → “Open with Live Server”) is a convenient alternative. Any other static file server works equally well — there is no Node.js build step or dev server to configure.
3

Navigate all seven pages

The collapsible sidebar on the left lists all seven built-in routes. Hover over the sidebar to expand it, then click through each page to confirm everything is working:
  • Home (#/) — Animated hero with headline and call-to-action
  • About (#/about) — Personal bio section
  • Projects (#/projects) — Portfolio project cards
  • Skills (#/skills) — Skills and tools overview
  • Writing (#/writing) — Blog post listing
  • Case Studies (#/case-studies) — In-depth project write-ups
  • Contact (#/contact) — Contact form and social links
Aurora Cosmos uses hash-based routing — all URLs use the #/ prefix (e.g., http://localhost:8080/#/about). This allows the single index.html entry point to serve every route, making the app fully compatible with static hosts like GitHub Pages that cannot handle server-side URL rewriting.
4

Explore and edit page content

The editable source files are the JavaScript components in components/ and the compiled bundles in assets/. The HTML shells in pages/ set the initial route for each page via window.__STATIC_PAGE_ROUTE__. The repository layout is:
aurora-cosmos/
├── index.html              # Home page entry (route: /)
├── pages/
│   ├── Home.html           # Sets route: /
│   ├── About.html          # Sets route: /about
│   ├── Projects.html       # Sets route: /projects
│   ├── Skills.html         # Sets route: /skills
│   ├── Writing.html        # Sets route: /writing
│   ├── CaseStudies.html    # Sets route: /case-studies
│   └── Contact.html        # Sets route: /contact
├── components/
│   ├── AuroraBackground.js
│   ├── Navigation.js
│   └── Starfield.js
└── assets/
    ├── main.js             # Bundled React application
    └── main.css            # Compiled Tailwind CSS
To customize page content or visual behavior, edit the corresponding component files in components/ or the application bundle in assets/main.js. See Project Structure for a full explanation of every file.

​
Project Layout at a Glance

Once cloned, your working directory will contain the following top-level structure: 
aurora-cosmos/
├── index.html              # App entry point — serves the Home route
├── pages/                  # HTML shells for each route
├── components/             # AuroraBackground, Starfield, Navigation
├── assets/                 # Compiled JS/CSS bundles (main.js, main.css, proxy.js)
├── useScreenInit.js        # React/ReactDOM initialization module
├── canvas.manifest.js      # Build manifest
└── .nojekyll               # Disables Jekyll processing on GitHub Pages
See Project Structure for a full explanation of every file and directory.

​
Next Steps

Project Structure

Understand how every file and directory fits together, from the compiled bundles to the static HTML shells.

Design System

Learn the color tokens, typography scale, and CSS utilities so you can customize the look confidently.

Build docs developers (and LLMs) love

Get started for freeTalk to us