Aurora Drift is a static portfolio template built with React and Vite that turns every page visit into a cinematic experience. Drawing on the visual language of deep space — shifting aurora light, a cursor that leaves a glowing trail, and content that floats into view on arrival — it gives developers a polished, production-ready foundation for showcasing creative or technical work without writing a single line of animation code from scratch.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 frontend-only template. It ships no backend, API, database, or CMS. All content is hardcoded in React components, making it trivially deployable to any static host — GitHub Pages, Vercel, Netlify, or a plain CDN.
What’s Inside
Aurora Drift bundles four signature visual systems and eleven fully-built route destinations into a single project you can clone and own immediately.Visual Effects
| Component | What It Does |
|---|---|
AuroraBackground | Three animated SVG paths — each driven by a separate Framer Motion animate loop with durations of 20 s, 25 s, and 30 s — layer turquoise, cyan, and teal gradients over the deep-navy background using mix-blend-screen, mix-blend-overlay, and mix-blend-color-dodge. The entire SVG layer responds to mouse position via spring-physics x/y transforms (damping 50, stiffness 400). |
CursorGlow | A 300 × 300 px radial-gradient div that tracks the mouse with Framer Motion spring values (damping 25, stiffness 200, mass 0.5), creating a soft aurora-turquoise halo that lags behind the cursor naturally. Activates only on fine-pointer devices. |
PageTransition | Wraps every page’s content in a Framer Motion div that animates opacity, y, and filter: blur() simultaneously on enter and exit — fading up from 20 px below with a 10 px blur on entry, and fading up and out on exit, over 0.6 s with a custom cubic-bezier easing. |
Nav | A fixed top bar with animated underline links, a glass-panel backdrop blur, and smooth active-state indicators driven by React Router’s useLocation. |
Included Pages
Aurora Drift ships ten named pages out of the box, covering every section a professional portfolio typically needs. Home is served from the root route; the remaining nine plus a case study detail view each have their own HTML file inpages/.
Home
Hero landing with full aurora backdrop and a prominent call to action.
About
Personal biography section with a two-column layout and timeline.
Projects
Project grid with hover-reveal case study links and tech-stack badges.
Skills
Categorised skill matrix with animated progress indicators.
Work
Employment history in a scrolling timeline with glass-panel cards.
Case Studies
Long-form case study index with featured-image previews.
Blog
Article listing page with tag filtering and date sorting.
Blog Post
Single-post reading view with a prose-optimised layout.
Contact
Contact form with aurora-accented inputs, validation states, and social links.
Testimonials
Carousel of testimonial cards with animated spotlight transitions.
Tech Stack
| Technology | Version | Role |
|---|---|---|
| React | 18 | Component model and state |
| Vite | 4+ | Build tool and dev server |
| Framer Motion | 10+ | All animations and spring physics |
| React Router DOM | v6 | Client-side routing (hash mode) |
| Tailwind CSS | 3 | Utility-first styling |
Aurora Color Palette
The entire visual identity flows from five custom Tailwind color tokens compiled into the project’s CSS output:| Token | Hex | Usage |
|---|---|---|
aurora-turquoise | #2DD4BF | Primary glow, cursor halo, active links |
aurora-cyan | #22D3EE | Secondary gradient stops, highlights |
aurora-teal | #14B8A6 | Borders, selection backgrounds, third layer |
aurora-magenta | #EC4899 | Accent contrast, hover states, second SVG layer |
navy | #050814 | Page background, the “deep space” base |
The repository is a compiled output — it contains the pre-built
assets/ bundle and does not include source files such as tailwind.config.js or vite.config.js. To modify Tailwind tokens or Vite settings you will need the original project source, which you can reconstruct by bootstrapping a Vite + React project and re-adding the components.Where to Go Next
Quickstart
Clone the repo, install dependencies, and have the dev server running in under two minutes.
Project Structure
Understand how components, pages, and assets are organised before you start editing.
AuroraBackground
Deep-dive into the three-layer animated SVG aurora effect and its motion parameters.
Color System
Swap palette tokens to retheme the entire site from a single Tailwind config change.