Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/telemetry/llms.txt

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

The About page is where visitors learn who you are beyond your project list. Telemetry renders it as a space-themed “Origin Trajectory” — a vertical timeline on the left and a sticky sensor-readings panel on the right, all animating in as the user scrolls.

​
Route

#/about
Rendered by the About page component in main.js and registered as the about child route under /.

​
Static Shell

The file pages/About.html in the repository root acts as a standalone entry point for direct navigation. It sets: 
<script>window.__STATIC_PAGE_ROUTE__ = "/about";</script>
This tells the React app which route to activate when the page is loaded directly rather than via hash navigation.

​
Page Structure

The About page uses a three-column CSS grid (lg:grid-cols-3) at large breakpoints:

Timeline (left, 2 cols)

A vertical gradient line runs through the left edge. Each career milestone is a motion.div that slides in from the left (x: -50 → 0) as it enters the viewport.

Sensor Panel (right, 1 col)

A sticky card at top: 8rem with a Radar icon header, an animated radar sweep, and a scrolling terminal log of system messages.

​
Timeline Entries

The timeline data array contains five milestone objects. Each entry has:
FieldTypeDescription
idstringUnique key for React rendering
titlestringMilestone name (e.g. "Nursing Nebula")
yearstringYear or range (e.g. "2015", "2023-Present")
descstringOne-sentence description of this phase
colorstringTailwind bg class for the timeline dot (e.g. "bg-aurora-teal")
The default entries span from 2015 (healthcare) through 2023-Present (software engineering), mapping a career pivot into code.

​
Animated Radar Panel

The right sidebar includes:
  • Radar sweep — a motion.div arm that rotates 360° over 4 seconds on an infinite loop
  • Blips — three static colored dots (aurora-violet, aurora-teal, sunset-orange) representing data points on the radar
  • Terminal log — a motion.div that animates y: [-100, 0] over 10 seconds on an infinite loop, scrolling mock system messages like [SYS] Analyzing new framework...

​
Customizing the About Page

Make this page fully your own. The bio section is the most-read part of any portfolio — replace every placeholder entry with your real background, career pivots, key experiences, and personal interests. Visitors want to see the person behind the code, not a template.
1

Edit the page heading

Find the h1 near the top of the About page component. The default heading is “Origin Trajectory” — change "Origin" and "Trajectory" (the serif-italic span) to reflect your own framing, e.g. "My" and "Story".
2

Update timeline entries

Locate the timeline data array in the About page component. Each object maps to one milestone card. Edit title, year, desc, and color for each entry. Add or remove objects to match your actual career history.
// Example customized entry
{ id: "bootcamp", title: "Code Bootcamp Launch", year: "2022",
  desc: "Completed a 12-week full-stack program; shipped first React app.",
  color: "bg-aurora-cyan" }
3

Replace the terminal log messages

Inside the About page component, find the motion.div with animate={{ y: [-100, 0] }} and className="space-y-2 text-slate-400". Edit the <p> children with your own log-style messages — they can reference real tools, funny status updates, or current obsessions.
4

Update the page subtitle

The font-mono text-sm text-slate-400 paragraph below the heading currently reads "MISSION LOG: PERSONAL HISTORY & EVOLUTION". Change this to match your voice.

​
Adding a Profile Image

The current About layout has no profile image slot. To add one, insert an <img> (or next/image if you migrate to Next.js) inside the right sidebar card above the radar widget, replacing or supplementing the sensor panel: 
// Inside the right sidebar div in the About page component
<img
  src="/avatar.jpg"
  alt="Profile photo"
  className="w-full rounded-xl mb-6 object-cover aspect-square"
/>
Place your image in the assets/ directory and reference it with a root-relative path.

Build docs developers (and LLMs) love

Get started for freeTalk to us