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 uses React Router for client-side routing and a small convention of per-page HTML entry files in the pages/ directory that inject the correct hash route before the SPA boots. How much of this process you can complete depends on whether you are working with the compiled repository or the original Vite source project.
Compiled repository: You can add the HTML entry file (step 2) and update the nav label text (step 4). The page component and route registration (steps 1 and 3) require the original Vite source because they involve JSX files and App.jsx, which are compiled into the minified assets/main.js bundle and cannot be safely edited by hand.
1

Create a new React page component

This step requires the original Vite source project. Create a new file in the src/pages/ directory (e.g. src/pages/Portfolio.jsx). Wrap the entire page content in the <PageTransition> component — this gives every page its smooth opacity + y + blur enter/exit animation. The PageTransition component already applies pt-24 pb-12 px-6 md:px-12 max-w-7xl mx-auto sizing and padding, so you do not need to repeat those classes on an inner wrapper.
import PageTransition from '../../components/PageTransition';

export default function PortfolioPage() {
  return (
    <PageTransition>
      <h1 className="text-5xl font-serif text-white mb-6">
        Portfolio
      </h1>
      <p className="text-slate-300 leading-relaxed">
        A curated selection of work spanning design and engineering.
      </p>

      {/* Your page content here */}
    </PageTransition>
  );
}
The PageTransition animation values (from components/PageTransition.js) are:
Stateopacityyfilter
initial020blur(10px)
animate10blur(0px)
exit0-20blur(10px)
The transition uses a duration of 0.6 s with a custom cubic-bezier ease [0.22, 1, 0.36, 1].
2

Add an HTML entry file

This step can be done directly in the compiled repository. Every page in Aurora Drift needs a matching static HTML file so that the correct hash route is set before React hydrates. Copy pages/About.html and rename the copy to match your new page (e.g. pages/portfolio.html). Make three targeted edits inside the new file:
  1. Change the <title> tag to reflect your new page name.
  2. Set window.__STATIC_PAGE_ROUTE__ to your new path string.
  3. Update the hash redirect condition to point at the same path.
<title>Portfolio | aurora-drift</title>

<script>
  window.__STATIC_PAGE_ROUTE__ = "/portfolio";
  if (
    !window.location.hash ||
    window.location.hash === "#/" ||
    window.location.hash === "#"
  ) {
    window.location.hash = "/portfolio";
  }
</script>
The rest of the file — the asset <script> and <link> tags referencing ../assets/main.js and ../assets/main.css — should remain identical to About.html. The relative paths (../assets/) are correct for files placed in the pages/ subdirectory.
3

Register the route

This step requires the original Vite source project. Open src/App.jsx and find the <Routes> block. Add a new <Route> entry alongside the existing ones:
import PortfolioPage from './pages/Portfolio';

// Inside your <Routes> block:
<Route path="/portfolio" element={<PortfolioPage />} />
Aurora Drift wraps <Routes> in <AnimatePresence> for route-change animations. Make sure your new route is a direct child of <Routes> — not wrapped in an extra element — so the presence detection works correctly.
4

Add to the Nav

Open components/Nav.js in the compiled repository and locate the navLinks array. The existing entries follow this shape:
{ path: "/about", label: "About" }
Add an object for your new page:
{ path: "/portfolio", label: "Portfolio" }
The nav maps over this array to render the desktop navigation links with their hover underline and active-state highlighting. Keep label short — the nav is designed for 2–4 word entries at most.
The mobile hamburger menu in Aurora Drift is a stub — it renders a button icon but does not open a drawer or overlay. If you need mobile navigation, you will need to implement the menu panel yourself in components/Nav.js.
5

Build and verify

If you made changes in the original source project, run the Vite build to regenerate the output:
npm run build
Check the dist/pages/ directory and confirm that Vite has emitted a portfolio.html. Open the built site locally with npm run preview and navigate directly to /pages/portfolio.html — you should see your new page render with the aurora background, nav, and page-transition animation intact.If the page is blank, double-check that:
  • The route path in window.__STATIC_PAGE_ROUTE__ exactly matches the path prop in <Route>.
  • The component is correctly imported in App.jsx.
  • <PageTransition> wraps the component’s JSX return.
Keep every page wrapped in <PageTransition>. Without it, navigating to your new page will cause an abrupt cut instead of the silky opacity + blur transition that defines the Aurora Drift aesthetic. The PageTransition component works by pairing Framer Motion’s AnimatePresence exit/enter lifecycle with the route key — removing it breaks the chain for that route.

Build docs developers (and LLMs) love

Get started for freeTalk to us