Skip to main content

Documentation Index

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

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

Aurora Drift is a deliberately lean project — no src/ directory, no deeply nested module tree. Every file either belongs to the compiled asset bundle, to the set of four shared UI components, to one of the ten page HTML shells, or to the static image gallery. Understanding this flat layout makes it straightforward to locate the file responsible for any visual behaviour you want to change.

​
Directory Tree

aurora-drift/
├── index.html              # App entry point
├── .nojekyll               # Prevents GitHub Pages from running Jekyll
├── assets/
│   ├── main.js             # Compiled React app bundle
│   ├── main.css            # Tailwind CSS output
│   ├── proxy.js            # React + Framer Motion re-exports
│   └── use-spring.js       # Spring animation hook
├── components/
│   ├── AuroraBackground.js # Animated aurora SVG layer
│   ├── CursorGlow.js       # Mouse-tracking radial glow
│   ├── Nav.js              # Fixed top navigation bar
│   └── PageTransition.js   # Enter/exit page animation wrapper
├── pages/
│   ├── About.html
│   ├── Blog.html
│   ├── BlogPost.html
│   ├── CaseStudies.html
│   ├── CaseStudyDetail.html
│   ├── Contact.html
│   ├── Projects.html
│   ├── Skills.html
│   ├── Testimonials.html
│   └── Work.html
└── images/
    └── screenshots/        # 14 screenshot PNGs/JPGs
This repository is a compiled output — it does not include source files such as vite.config.js or tailwind.config.js. The assets/ directory contains pre-built bundles. To modify build configuration or Tailwind tokens, you will need the original Vite project source.

​
Top-Level Directories

The root HTML document that bootstraps the entire React application. It declares the <div id="root"> mount point and uses <script type="module"> to load assets/main.js. It also includes <link rel="modulepreload"> hints for every component module so the browser pre-fetches them in parallel before they are needed, shaving render time on the first navigation.
Contains the four files produced by (or supporting) the Vite build:
  • main.js — The compiled React application. It includes all page components, React Router configuration, and the full Framer Motion AnimatePresence wrapper in a single ES module bundle.
  • main.css — The Tailwind CSS output. All utility classes used in the project — including custom aurora-* color tokens for #2DD4BF, #22D3EE, #14B8A6, #EC4899, and the navy #050814 background — are compiled here as plain CSS.
  • proxy.js — Re-exports React, React DOM’s JSX runtime, and Framer Motion’s motion object under short internal aliases (r, j, l). Component files import from this proxy rather than directly from node_modules, keeping each component file small and ensuring a single shared instance of React across the app.
  • use-spring.js — Exports two helpers from Framer Motion’s spring system: useMotionValue (aliased u) and useSpring (aliased a). Both AuroraBackground and CursorGlow import from this file to drive their physics-based motion values.
The four building blocks assembled on every page. Each file is a self-contained ES module that imports its dependencies from assets/proxy.js and assets/use-spring.js.
FileResponsibility
AuroraBackground.jsRenders a fixed inset-0 z-[-1] container holding three motion.path SVG elements. Each path animates between two keyframe shapes on a 20 s, 25 s, and 30 s loop respectively, and the entire SVG layer responds to mouse movement via spring-physics x/y translate values (damping 50, stiffness 400).
CursorGlow.jsRenders a fixed 300 × 300 px motion.div with a radial-gradient background. It tracks mousemove events and feeds clientX/clientY into Framer Motion spring values (damping 25, stiffness 200, mass 0.5), producing a cursor halo that lags naturally. The component renders null on touch/coarse-pointer devices.
Nav.jsThe fixed top navigation bar. Contains the route list for eight pages (Home, About, Projects, Skills, Work, Case Studies, Blog, and Contact), renders active-link underline animations using motion.span, and uses a backdrop-blur glass panel style.
PageTransition.jsA wrapper component accepted as children. It animates opacity (0→1→0), y (20→0→−20 px), and filter: blur() (10 px→0→10 px) on mount and unmount via Framer Motion’s initial/animate/exit props, over a 0.6 s custom cubic-bezier [0.22, 1, 0.36, 1] transition.
Each of the ten sub-pages ships as a standalone .html file. These files are structurally identical to index.html — they mount the same React root and load the same asset bundle — but they each inject a small inline <script> block into <head> that sets window.__STATIC_PAGE_ROUTE__ to the page’s logical path (e.g. "/about") and sets the URL hash so that React Router’s hash-based routing can pick up the correct route on a hard reload or direct link. See Routing below for a full explanation.
Holds 14 screenshot PNG and JPEG files showing the template’s pages at various viewport sizes. These are used in the README and in the project cards on the Projects page as placeholder images. Replace them with your own work samples when adapting the template.

​
Routing

Aurora Drift uses React Router DOM v6 in hash-based routing mode. URLs look like https://yoursite.com/#/about rather than https://yoursite.com/about. This matters because the project deploys as a collection of static HTML files — there is no server to rewrite arbitrary URL paths to index.html. The multi-page setup works as follows:
  1. A visitor navigates directly to pages/About.html.
  2. The inline script at the top of that file sets window.__STATIC_PAGE_ROUTE__ = "/about" and assigns window.location.hash = "/about" if no hash is already present. The browser automatically prepends #, producing #/about in the address bar.
  3. The React app bundle mounts, reads the hash, and React Router renders the <About> component — matching the URL the visitor expected.
This pattern lets every page HTML file act as a deep-linkable entry point while the SPA handles all subsequent navigation through hash changes without any server involvement.
Because routing is hash-based, all internal links in the Nav and throughout page components use hash href values (e.g. href="#/projects"). If you migrate to a host that supports URL rewriting (Vercel, Netlify edge redirects), you can switch to BrowserRouter and update all links accordingly.

​
The proxy.js Pattern

assets/proxy.js re-exports React and Framer Motion under internal aliases. Each component imports: 
import { r as React, j as jsx, l as motion } from "../assets/proxy.js";
import { u as useMotionValue, a as useSpring } from "../assets/use-spring.js";
This serves two purposes. First, it guarantees that AuroraBackground, CursorGlow, Nav, and PageTransition all share the same React instance — critical for hooks to work across module boundaries. Second, it keeps each component file compact enough to be served as a fast <link rel="modulepreload"> without pulling in duplicate copies of the framework.

​
Explore Further

Core Components

Detailed documentation for AuroraBackground, CursorGlow, Nav, and PageTransition.

Animation System

How Framer Motion spring values, motion variants, and AnimatePresence are wired together.

Pages Overview

What each of the ten pages renders and which components it composes.

Customization

Step-by-step guide to replacing placeholder content with your own work.

Build docs developers (and LLMs) love

Get started for freeTalk to us