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 uses a flat, pre-built static layout that is optimized for deployment to GitHub Pages and other file-based hosts. Every HTML file in the repository is a self-contained entry point that loads the same compiled React bundle — the only difference between them is a single window.__STATIC_PAGE_ROUTE__ assignment that tells the app which page to render. Understanding this pattern makes it straightforward to add pages, customize components, or adapt the project to a different hosting environment.

​
Directory Layout

aurora-cosmos/
├── index.html              # App entry point (root route /)
├── pages/
│   ├── Home.html           # Pre-rendered HTML for /
│   ├── About.html          # Pre-rendered HTML for /about
│   ├── Projects.html       # Pre-rendered HTML for /projects
│   ├── Skills.html         # Pre-rendered HTML for /skills
│   ├── Writing.html        # Pre-rendered HTML for /writing
│   ├── CaseStudies.html    # Pre-rendered HTML for /case-studies
│   └── Contact.html        # Pre-rendered HTML for /contact
├── components/
│   ├── AuroraBackground.js # Animated aurora gradient layers
│   ├── Navigation.js       # Sidebar + mobile nav with routing
│   └── Starfield.js        # Parallax star field component
├── assets/
│   ├── main.js             # Bundled React application
│   ├── main.css            # Compiled Tailwind CSS
│   └── proxy.js            # Shared dependency bundle
├── useScreenInit.js        # React/ReactDOM initialization module
├── canvas.manifest.js      # Build manifest
└── .nojekyll               # Disables Jekyll on GitHub Pages

​
Directory and File Reference

​
index.html — Root Entry Point

The index.html at the repository root is the entry point for the Home route (/). It loads all the JavaScript modules, the compiled stylesheet, and sets window.__STATIC_PAGE_ROUTE__ = "/" before the React app mounts. It also contains a small inline script that ensures the URL carries the #/ hash fragment on first load, which is required for the hash-based router to work correctly.
Because Aurora Cosmos uses hash-based routing, this single index.html is technically capable of serving every route at runtime — the #/about, #/projects, and other paths are all handled client-side by React Router without any server involvement. The per-route HTML files in pages/ exist so that direct navigations to sub-paths (e.g., visiting /pages/About.html directly) still land on the correct page with the correct initial route pre-set.

​
pages/ — Per-Route HTML Shells

Each file in pages/ is a minimal HTML shell that mirrors index.html almost exactly. The key distinction is the window.__STATIC_PAGE_ROUTE__ value: 
<script>
  window.__STATIC_PAGE_ROUTE__ = "/about";

  (function () {
    if (!window.location.hash || window.location.hash === "#") {
      window.location.replace(
        window.location.pathname +
        window.location.search +
        "#/about"
      );
    }
  })();
</script>
The React application reads this value at startup to initialize the router on the correct route before the first render. Every HTML file loads the same assets/main.js bundle — no page-specific JavaScript is compiled separately.

​
components/ — Shared Layout Primitives

The three JavaScript files in components/ are Vite-compiled ES modules that are preloaded by every HTML entry point:
  • AuroraBackground.js — Renders the layered aurora gradient effect. Uses absolutely positioned, blurred radial gradients in the aurora and cosmic color tokens, animated with CSS and Framer Motion to produce the slow, shifting glow visible behind all page content.
  • Navigation.js — The full navigation component. On desktop it renders a collapsible fixed sidebar (20 px collapsed, 256 px expanded) with Framer Motion layoutId for the active-route indicator. On mobile it renders a top bar and a full-screen slide-in overlay. The route list — Home, About, Projects, Skills, Writing, Case Studies, Contact — is defined as a static array within this file and maps directly to the seven application routes.
  • Starfield.js — A canvas- or DOM-based parallax starfield with twinkling star animations and shooting-star effects, rendered behind the aurora gradient and all page content.

​
assets/ — Compiled Application Bundle

The assets/ directory contains the compiled application bundles:
FileDescription
main.jsThe full bundled React application, including all page components, React Router, Framer Motion, Lucide icons, and application logic.
main.cssThe compiled Tailwind CSS output, including all utility classes used by the project and the two custom utility classes (.glass-panel, .box-glow). Also imports the three Google Fonts families at the top of the file.
proxy.jsA shared chunk containing React, ReactDOM, and other heavy dependencies that are split from main.js for efficient caching.

​
useScreenInit.js — React Initialization

This module exports React and ReactDOM so they can be shared across the pre-compiled component files loaded via <link rel="modulepreload"> tags in each HTML entry point. Keeping this as a separate module avoids bundling React multiple times.

​
canvas.manifest.js — Build Marker

A placeholder file included as part of the pre-built output. Its presence signals that the repository contains a compiled bundle rather than raw source, and it serves as a hook point for tooling that processes the static output.

​
.nojekyll — GitHub Pages Configuration

An empty file at the repository root. Its sole purpose is to tell GitHub Pages not to process the repository with Jekyll. Without this file, GitHub Pages would ignore any files or directories whose names begin with an underscore (_), which could silently break asset loading. Any repository deploying to GitHub Pages should include this file.
Do not delete .nojekyll if you are hosting on GitHub Pages. Removing it will cause GitHub Pages to run Jekyll processing, which can strip out necessary assets and break the deployed site.

​
How the Static Page Pattern Works

Every page in Aurora Cosmos follows the same three-step flow on load:
  1. The browser fetches an HTML file (e.g., pages/About.html). The inline script sets window.__STATIC_PAGE_ROUTE__ = "/about" and redirects the URL to append #/about if the hash is missing.
  2. The React bundle (assets/main.js) mounts into the <div id="root"> element. It reads window.__STATIC_PAGE_ROUTE__ to initialize React Router’s hash router at the correct route.
  3. React Router renders the matching page component, wrapping it in the shared AuroraBackground, Starfield, and Navigation layout.
From that point forward, all navigation is handled entirely client-side — clicking a link in the sidebar updates the hash fragment and React Router swaps the page component without any network request.

Build docs developers (and LLMs) love

Get started for freeTalk to us