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 home page is the first impression Telemetry makes on every visitor. It combines a layered orbital animation, a character-by-character typewriter greeting, a large glitching name display, a telemetry status bar, and a horizontal-scroll preview of your recent projects — all built with Framer Motion and Tailwind CSS.

​
Route

The home page renders at the root hash route #/ (React Router v6 index route under path /).

​
Hero Section

The top section fills 100vh and centers all content both vertically and horizontally.

​
Orbital Rings Animation

Three concentric animated rings surround a glowing center node:
RingClass offsetDirectionDuration
Outerinset-0Clockwise (rotate: 360)20 s
Middleinset-4Counter-clockwise (rotate: -360)15 s
Innerinset-12Static backdrop — pulsing radial gradient5 s (bg cycle)
Each ring uses motion.div with animate and transition: { repeat: Infinity, ease: "linear" }. The inner node contains a radial-gradient that continuously transitions between aurora-teal and aurora-violet hues.

​
Typewriter Component

The Typewriter component renders text one character at a time and is reusable across any page: 
// Props
// text  — string to type out
// delay — milliseconds before typing begins (default: 0)

<Typewriter text="Signal Established // Identity:" delay={500} />
How it works:
  • A setTimeout fires after delay ms, then a setInterval appends one character every 50 ms.
  • The blinking cursor is a motion.span with animate={{ opacity: [1, 0] }} toggling at 0.8 s intervals on an infinite repeat.
  • The cursor is styled w-2 h-[1em] bg-aurora-cyan and sits align-middle after the typed text.

​
Name Display

The large h1 below the typewriter line displays the portfolio owner’s name in two parts: 
// In the Home page component — h1 children:

<span className="relative inline-block">
  <motion.span
    animate={{ x: [-2, 2, -1, 1, 0] }}
    transition={{ duration: 0.2, delay: 1.5, repeat: 3, repeatType: "reverse" }}
    className="inline-block"
  >
    ALEX   {/* ← change this text node */}
  </motion.span>
</span>
<br />
<span className="font-serif-italic text-aurora-cyan text-glow">
  Cosmos  {/* ← change this text node */}
</span>
1

Open the Home page component

Locate the Home page component function. Find the h1 element near the Typewriter usage.
2

Replace the ALEX text node

Change "ALEX" to your preferred first name or handle. The glitch animation targets this motion.span.
3

Replace the Cosmos text node

Change "Cosmos" to your surname or brand name. This span has font-serif-italic text-aurora-cyan text-glow for the signature italic glow look.
The subtitle paragraph below the h1 ("Currently Debugging Reality…") fades in at a 2.5 s delay via initial={{ opacity: 0 }} / animate={{ opacity: 1 }}.

​
Status Bar

A full-width motion.div strip sits below the hero, entering with a whileInView slide-up animation (y: 20 → 0). It displays four metrics in font-mono text-xs using Lucide React icons:

UPTIME

Terminal icon (teal) — UPTIME: 99.9%

COMMITS_THIS_WEEK

GitCommitHorizontal icon (violet) — COMMITS_THIS_WEEK: 42

READING

BookOpen icon (cyan) — READING: "Three-Body Problem"

SYSTEMS NOMINAL

Pulsing orange dot (animated animate-ping) — SYSTEMS NOMINAL

​
Customizing Status Bar Items

Each metric is a hardcoded string inside the Home page component. Find them by their icon or label: 
// Metric 1 — find the Terminal icon usage
<span>UPTIME: 99.9%</span>           {/* ← edit this string */}

// Metric 2 — find the GitCommitHorizontal icon usage
<span>COMMITS_THIS_WEEK: 42</span>   {/* ← edit this string */}

// Metric 3 — find the BookOpen icon usage
<span>READING: "Three-Body Problem"</span>  {/* ← edit this string */}

// Metric 4 — the pulsing orange dot block
<span>SYSTEMS NOMINAL</span>         {/* ← edit this string */}
Replace any string with real data — for example, pull COMMITS_THIS_WEEK from the GitHub API at build time, or swap READING for a currently-playing track from Spotify.

​
Recent Missions Section

Below the status bar, the page continues to min-h-[200vh] and mounts a “Recent Missions” section at mt-32. It enters via whileInView animation as the user scrolls down.

Section Heading

"Recent Missions" with a decorative w-8 h-[1px] bg-aurora-teal rule preceding the text.

View All Link

A NavLink to /projects with label "VIEW ALL LOGS →". Clicking it navigates to the full Projects page.
The card row is a horizontally scrollable snap-x snap-mandatory flex container with hide-scrollbar. Each placeholder card shows:
  • Mission number — MISSION 001, MISSION 002, etc. (font-mono, aurora-violet)
  • Title — "Project Nebula 1" etc. (hover turns aurora-cyan)
  • Description — placeholder body text
  • Tech tags — React, TypeScript pill badges
The four placeholder project cards ([1, 2, 3, 4].map(...)) are static. To show real projects here, replace the .map array with your own project data objects and render their actual fields. The full project list lives in the projects data array defined in the Projects page component.

​
Scroll Parallax

The home page uses Framer Motion’s useScroll hook to track scrollYProgress (0 → 1 as the user scrolls from top to bottom of the 200vh page). A useTransform call maps that range to a background-position shift of "0%" → "50%" for a subtle parallax effect on the aurora background layer. 
const { scrollYProgress } = useScroll();
// scrollYProgress drives a background-Y transform via useTransform(t, [0,1], ["0%","50%"])
The AuroraBackground component reads this value to shift its gradient layer as you scroll.

Build docs developers (and LLMs) love

Get started for freeTalk to us