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 ships with placeholder text, initials, and a specific turquoise-and-navy colour palette. Some of those choices live in files you can edit directly inside the compiled repository — no build step required. Others are baked into the Tailwind-generated CSS and require the original Vite source to change properly. The steps below are split accordingly so you always know exactly what you can edit right now.
The Aurora Drift repository contains compiled Vite build output — the assets/, components/, and pages/ directories hold bundled JavaScript and CSS, not raw JSX source files. Steps 1–4 and step 6 below work directly on those compiled files. Steps that require the original source (hero text, project data, Tailwind colour tokens) are labelled clearly.
1

Replace the hero text

The home page hero heading and subtitle are compiled into assets/main.js, which is a minified bundle and cannot be edited safely by hand. To change the hero copy you need the original Vite source project (typically src/App.jsx or src/pages/Home.jsx). Locate the JSX that renders the large display heading and the tagline paragraph, swap the placeholder strings for your own, then run npm run build to regenerate the bundle.
// In the source project — src/pages/Home.jsx (example)
// Before
<h1>N.L.</h1>
<p>Designer & developer floating through the cosmos.</p>

// After
<h1>Your Name</h1>
<p>Your tagline here.</p>
2

Update the nav name

Open components/Nav.js directly in the compiled repository. The logo area renders the string "N.L." — find that string and replace it with your own initials or a short name. The glowing turquoise dot that follows the initials is rendered by the same component; you can remove it or keep it.
// Find the logo text node and change:
"N.L."
// to your initials, e.g.:
"A.P."
The navLinks array is also declared in this file. Each entry has a path and a label key. You can reorder entries or update label values here without rebuilding.
// Example entry — edit label values directly:
{ path: "/about", label: "About" }
3

Edit aurora wave colours

The animated background waves are drawn in components/AuroraBackground.js using three SVG <linearGradient> elements with IDs aurora1, aurora2, and aurora3. Each gradient has three stopColor values you can change directly in this compiled file:
// aurora1 — turquoise → cyan → navy fade
stopColor: "#2dd4bf", stopOpacity: "0.8"   // offset 0%
stopColor: "#06b6d4", stopOpacity: "0.4"   // offset 50%
stopColor: "#0a0e27", stopOpacity: "0"      // offset 100%

// aurora2 — purple → teal → navy fade
stopColor: "#c084fc", stopOpacity: "0.6"   // offset 0%
stopColor: "#14b8a6", stopOpacity: "0.3"   // offset 50%
stopColor: "#0a0e27", stopOpacity: "0"      // offset 100%

// aurora3 — mint → turquoise → navy fade
stopColor: "#a7f3d0", stopOpacity: "0.5"   // offset 0%
stopColor: "#2dd4bf", stopOpacity: "0.2"   // offset 50%
stopColor: "#0a0e27", stopOpacity: "0"      // offset 100%
The wave paths animate continuously via Framer Motion — the colour change takes effect as soon as you save the file, with no rebuild needed.
Changing Tailwind colour tokens (e.g. aurora-turquoise, aurora-cyan) used in utility classes elsewhere in the app requires editing tailwind.config.js in the original source project and rebuilding. Those tokens are not accessible in the compiled output.
4

Change the cursor glow colour

The custom cursor is rendered in components/CursorGlow.js. It uses a radial-gradient applied to a 300 × 300 px absolutely positioned element. Find the background style property and change the RGBA colour values:
// Current glow — turquoise at 15 % opacity:
background: "radial-gradient(circle, rgba(45,212,191,0.15) 0%, rgba(45,212,191,0) 70%)"

// Example: switch to a soft violet glow
background: "radial-gradient(circle, rgba(167,139,250,0.18) 0%, rgba(167,139,250,0) 70%)"
The component only activates on devices where pointer: fine is detected (mouse-driven devices), so mobile visitors are unaffected.
5

Replace project, blog, and work content

The Projects, Blog, Work, and Case Studies page data is compiled into assets/main.js and cannot be edited safely in the compiled output. To update this content you need the original Vite source project. Locate the data arrays in the relevant page component files (e.g. src/pages/Projects.jsx), replace the placeholder objects with your own entries, and run npm run build to regenerate the bundle.Each entry typically contains fields such as title, description, tags, date, and href. The grid layout reflows automatically as you add or remove entries.
6

Update fonts

Fonts are loaded via a Google Fonts @import at the very top of assets/main.css. This file is safe to edit directly:
@import "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Manrope:wght@300;400;500;600;700&display=swap";
Replace the @import URL with a new one from fonts.google.com to swap typefaces. Note that font-family references in the compiled Tailwind output use the tokens Instrument Serif (for headings, set via font-serif) and the system sans-serif stack for body text — updating those references requires the original source project.
Before editing any compiled file, open the deployed site in your browser and use DevTools → Elements → Computed (or the Styles panel) to inspect the exact values applied to any element. This confirms which colours, font stacks, and utility classes are active before you make changes — saving you from guesswork in minified code.

Build docs developers (and LLMs) love