Skip to main content

Documentation Index

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

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

The Home page is the first impression visitors receive — a full-viewport hero that announces your identity against an animated northern-lights backdrop. Three stat cards orbit the hero copy, each fading and sliding into view via Framer Motion, while primary and social-link CTAs anchor the bottom of the fold.
All page components for this portfolio are inlined inside assets/main.js, which is the compiled Vite production bundle. Do not edit main.js directly. Instead, make changes to the source files before running the Vite build. Editing the pre-built bundle will be overwritten on the next build.

​
What the Page Displays

The landing page (/) is composed of three stacked layers:
  1. Canvas aurora background — a <canvas> element renders procedural northern-lights particles that respond to a slow breathing animation loop.
  2. Hero text block — your name as an <h1> and a role tagline as a sub-heading directly beneath it.
  3. Stats row — three cards presented side-by-side that surface high-signal career numbers at a glance.
The default copy reads:
Alex Vance. Software developer mapping the dark parts of the web.

​
Hero Text Customization

The name and tagline live as plain string constants near the top of main.js. Search for the HERO_CONFIG object: 
// main.js
const HERO_CONFIG = {
  name: "Alex Vance",
  tagline: "Software developer mapping the dark parts of the web.",
};
Replace both values with your own name and tagline, then save. The strings are consumed directly by the JSX hero component, so no other changes are needed.

​
Stats Cards

The three cards beneath the hero copy each hold a numeric value, a unit label, and a short descriptor. 
// main.js
const STATS = [
  { value: "8.5", unit: "years", label: "Experience" },
  { value: "42",  unit: "missions", label: "Completed" },
  { value: "156", unit: "logs", label: "Technical Logs" },
];
Personalize these three stats to reflect your own career milestones — open-source contributions, clients served, countries worked in, or anything that tells your story. The cards resize automatically, so longer labels are fine.
Each object in the array maps directly to one card. Adding a fourth object renders a fourth card; removing one shrinks the row to two. The layout uses CSS flex-wrap so the grid remains responsive at all viewport widths.

​
Framer Motion Entrance Animations

Every element in the hero block uses a variants object passed to motion.div. The default stagger sequence is: 
// main.js — simplified animation config
const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.15 },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 30 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" } },
};
  • staggerChildren: 0.15 — each child (name, tagline, stats) animates in 150 ms after the previous one.
  • y: 30 → y: 0 — elements rise 30 px as they fade in for a gentle lift effect.
  • The canvas layer is excluded from the stagger and is always rendered immediately so the aurora is visible before text appears.
To slow down or speed up the entrance, adjust duration and staggerChildren to taste.

​
CTA and Social Links

Below the stats row, a primary button and two icon links sit in a flex row. 
// main.js
const SOCIAL_LINKS = [
  { platform: "GitHub",   href: "https://github.com/your-handle",        icon: Github   },
  { platform: "LinkedIn", href: "https://linkedin.com/in/your-profile",   icon: Linkedin },
];

const PRIMARY_CTA = {
  label: "View My Work",
  href: "/projects",
};
Update the href values for your real GitHub and LinkedIn profiles. The icon values are Lucide React icon components (Github and Linkedin from lucide-react) imported at the top of main.js — swap them for any other Lucide icon to change platforms (e.g., Twitter/X, Dribbble).

​
Customization Checklist

1

Update hero copy

Edit HERO_CONFIG.name and HERO_CONFIG.tagline in main.js.
2

Personalize stats

Modify the STATS array — change value, unit, and label for each card.
3

Set social links

Replace the href strings in SOCIAL_LINKS with your own profile URLs.
4

Tune animations (optional)

Adjust staggerChildren and duration inside containerVariants / itemVariants to change the entrance speed.
5

Swap the CTA

Change PRIMARY_CTA.label and PRIMARY_CTA.href to point to whichever page you want to highlight.

​
Related Pages

About

The Flight Log career narrative and timeline.

Projects

The Mission Catalog star-map of interactive project orbs.

Contact

The Signal Transmitter contact form and social links.

Skills

The Star Chart constellation map and proficiency bars.

Build docs developers (and LLMs) love

Get started for freeTalk to us