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 About page carries the Flight Log theme — your career is framed as a series of logged missions, each entry marking a pivotal shift in your professional trajectory. As a visitor scrolls down through the narrative, the page background color slowly transitions through a palette of deep-space hues, reinforcing the feeling of moving further into an uncharted cosmos. A decorative radar panel sits in the sidebar, evoking a ship’s navigation console.
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 /about route contains three primary elements:
  1. Scroll-driven background transition — the <body> or root wrapper background color interpolates between defined color stops as the user’s scroll position increases.
  2. Career timeline — a vertical list of milestone entries written in first person, covering the journey from nursing → healthcare technology → software engineering.
  3. Observatory radar panel — an SVG decorative element in the sidebar that rotates slowly on a CSS animation loop, resembling a radar sweep.

​
Scroll-Driven Background Transition

The color transition is powered by a useScroll hook from Framer Motion combined with useTransform to map scroll progress (0–1) to a sequence of CSS color values. 
// main.js — scroll color transition
import { useScroll, useTransform, motion } from "framer-motion";

function AboutPage() {
  const { scrollYProgress } = useScroll();

  const backgroundColor = useTransform(
    scrollYProgress,
    [0, 0.33, 0.66, 1],
    ["#0a0a1a", "#0d1a2e", "#0a1f1a", "#12091a"]
  );

  return (
    <motion.div style={{ backgroundColor }} className="about-wrapper">
      {/* page content */}
    </motion.div>
  );
}
To change the color stops, edit the second array passed to useTransform. Each hex value corresponds to a scroll breakpoint defined in the first array (values between 0 and 1). Add more intermediate stops for finer-grained transitions.
Scroll progressDefault colorMood
0#0a0a1aDeep night
0.33#0d1a2eMidnight blue
0.66#0a1f1aForest dark
1#12091aNebula violet

​
Career Timeline

The timeline is driven by a TIMELINE array in main.js. Each entry has a year, role, org, and description field. 
// main.js
const TIMELINE = [
  {
    year: "2012–2016",
    role: "Registered Nurse",
    org: "General Hospital",
    description:
      "Worked in high-acuity environments, developing systematic thinking and attention to detail under pressure.",
  },
  {
    year: "2016–2020",
    role: "Healthcare Technology Analyst",
    org: "MedTech Corp",
    description:
      "Bridged the gap between clinical staff and software vendors, writing requirements and running UAT for EHR rollouts.",
  },
  {
    year: "2020–present",
    role: "Software Engineer",
    org: "Independent / Freelance",
    description:
      "Pivoted fully into engineering, building full-stack web applications with a focus on React, TypeScript, and systems design.",
  },
];
Each object renders as one timeline card in the Flight Log layout. The year field appears as a highlighted timestamp, role and org form the card heading, and description fills the card body.

​
Adding a New Entry

1

Open main.js

Locate the TIMELINE array (search for TIMELINE).
2

Append a new object

Add a new { year, role, org, description } object at the desired position in the array. Entries render in array order, top-to-bottom.
3

Write in first person

The page narrative is written in first person (“I built…”, “I transitioned…”). Keep new entries consistent with the existing voice.
4

Save and preview

The timeline component re-renders automatically — no additional wiring is needed.

​
Observatory Radar Panel

The sidebar contains a purely decorative SVG element themed as a radar / compass: 
// main.js — Observatory radar (decorative)
function RadarPanel() {
  return (
    <svg viewBox="0 0 200 200" className="radar-svg">
      <circle cx="100" cy="100" r="90" stroke="#3af" strokeWidth="1" fill="none" opacity="0.3" />
      <circle cx="100" cy="100" r="60" stroke="#3af" strokeWidth="1" fill="none" opacity="0.3" />
      <circle cx="100" cy="100" r="30" stroke="#3af" strokeWidth="1" fill="none" opacity="0.3" />
      {/* Rotating sweep line */}
      <line
        x1="100" y1="100" x2="100" y2="10"
        stroke="#3af" strokeWidth="1.5" opacity="0.6"
        style={{ transformOrigin: "100px 100px", animation: "radarSweep 4s linear infinite" }}
      />
    </svg>
  );
}
The radar panel is a decorative SVG only — it does not represent real data and has no interactive functionality. It exists purely to reinforce the navigation/observatory aesthetic of the Flight Log theme. You can safely remove the <RadarPanel /> instance from the sidebar without affecting any page content.
The sweep animation is defined in the global CSS as @keyframes radarSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }. Adjust the 4s duration to speed up or slow down the sweep.

​
Full Customization Checklist

1

Rewrite the timeline

Replace all entries in the TIMELINE array with your own career milestones.
2

Adjust the scroll colors

Edit the color-stop arrays in useTransform to match your preferred palette.
3

Edit the intro paragraph

Find the <p> intro text (the first-person opening sentence) directly in the AboutPage JSX return and rewrite it.
4

Optionally remove the radar

Delete <RadarPanel /> from the sidebar JSX if you prefer a cleaner layout.

​
Related Pages

Home

The hero section and stats cards.

Skills

The Star Chart constellation map showing your technical skills.

Build docs developers (and LLMs) love

Get started for freeTalk to us