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.

The Home page (/) is Aurora Drift’s primary landing experience, served directly from index.html paired with the compiled React bundle. Unlike the rest of the pages — which each have a dedicated HTML file under /pages/ — the Home page uses the root index.html at the project root. There is no window.__STATIC_PAGE_ROUTE__ redirect needed here because / is the default route that React Router matches without any hash manipulation.

​
Hero Section

The hero occupies the full viewport height and centers its content both vertically and horizontally. It is the most visually prominent screen in the portfolio because no glass-panel cards obstruct the AuroraBackground layer — the animated aurora gradients bleed through at full intensity. Key visual characteristics of the hero:
  • Headline typography — rendered at text-6xl on mobile, scaling up to text-9xl on larger screens using the Instrument Serif or Cormorant Garamond font family for an editorial, high-contrast feel.
  • Animated subtitle — a secondary line of text beneath the headline uses a staggered fade-in or spring animation to draw the eye down.
  • Primary CTAs — two buttons are positioned below the subtitle. The first links to /projects to showcase work, and the second links to /contact to invite collaboration.
Because the hero is full-viewport with no card panels, the aurora background and cursor glow are at their most visible on this page. Avoid adding large opaque card surfaces to the hero if you want to preserve this effect.

​
App-Shell Integration

The Home page renders inside the same shared app shell as every other route:

PageTransition

Applies pt-24 top padding to the page wrapper so hero content clears the fixed navigation bar without any manual offset.

AuroraBackground

The aurora layer sits at the lowest z-index and is fully visible behind the hero since the hero uses a transparent or semi-transparent background.

CursorGlow

The cursor glow is most noticeable on the dark, unobstructed hero canvas — particularly effective for first impressions.

Nav

The fixed nav bar overlaps the top of the hero. The pt-24 applied by PageTransition ensures headline text starts below the nav baseline.

​
Customising the Hero

All hero content — the headline text, subtitle copy, and CTA link targets — lives directly inside the React component source. There is no CMS or external data layer.
1

Locate the Home component

Open the main React source tree and find the component that renders at the / route. It will contain the full-viewport hero JSX.
2

Edit the headline

Change the large serif text string inside the text-6xl md:text-9xl element to reflect your name or personal brand statement.
3

Update the subtitle

Edit the animated subtitle text to match your role, tagline, or value proposition.
4

Adjust CTA destinations

The two CTA buttons use React Router <Link> components pointing to /projects and /contact. Update the to props if you rename or restructure those routes.
5

Swap fonts (optional)

Instrument Serif and Cormorant Garamond are loaded via the global stylesheet. To use a different serif, update the font import in assets/main.css and change the Tailwind font-family class on the headline element.
For broader changes — such as adding a new section below the hero or restructuring the page layout — see the Adapting the Portfolio guide.

Build docs developers (and LLMs) love

Get started for freeTalk to us