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.

Telemetry is a single-page React 18 application bundled by Vite. The compiled output ships as a set of static files — assets/main.js, assets/main.css, and assets/proxy.js — with no server-side rendering and no API layer. The browser downloads assets/main.js once, and React Router v6 takes over all subsequent navigation entirely on the client.

​
File structure

telemetry/
├── index.html              # Entry point for /
├── canvas.manifest.js      # Vite module entry
├── useScreenInit.js        # React re-export shim
├── assets/
│   ├── main.js             # Full compiled app bundle
│   ├── main.css            # Compiled Tailwind styles
│   └── proxy.js            # Framer Motion + JSX runtime exports
├── components/
│   ├── Navigation.js       # Fixed top navigation bar
│   ├── AuroraBackground.js # Full-screen animated background
│   └── CustomCursor.js     # Animated magnetic cursor
└── pages/
    ├── Home.html           # Static shell → #/
    ├── About.html          # Static shell → #/about
    ├── Projects.html       # Static shell → #/projects
    ├── Skills.html         # Static shell → #/skills
    ├── Writing.html        # Static shell → #/writing
    ├── CaseStudies.html    # Static shell → #/case-studies
    └── Contact.html        # Static shell → #/contact

​
Rendering model

Every HTML file in the project — both index.html and every file under pages/ — contains a single <div id="root">. The app mounts exactly once into that element via ReactDOM.render, and React Router handles all navigation client-side from that point forward. No full page reloads occur as the user moves between routes.

​
Layout composition

The root App component (called us in the compiled bundle) renders four top-level pieces on every route without exception:
  1. CustomCursor — replaces the system cursor with an animated two-layer pointer.
  2. AuroraBackground — paints the full-screen nebula and starfield behind all content.
  3. Navigation — the fixed header bar with logo and nav links.
  4. <main className="pt-24"> — the scrollable content area, padded to clear the fixed nav.
Inside <main>, Framer Motion’s AnimatePresence (with mode="wait") wraps a motion.div that fades and blurs page content in and out on each route change. React Router’s <Outlet> renders the active page component inside that wrapper.

​
Component tree

App
├── CustomCursor         (fixed overlay, z-9999)
├── AuroraBackground     (fixed bg, z-[-1])
├── Navigation           (fixed header, z-50)
└── main (pt-24)
    └── AnimatePresence
        └── motion.div   (page transition wrapper)
            └── <Outlet> (current route page)

​
Module graph

main.js is the single compiled entry point. At runtime it imports:
  • proxy.js — re-exports Framer Motion (motion, AnimatePresence) and the React JSX runtime.
  • useScreenInit.js — re-exports React itself (hooks, Component, etc.).
  • components/Navigation.js — exports the Navigation component plus the hash router wrapper and NavLink.
  • components/CustomCursor.js — exports the CustomCursor component.
  • components/AuroraBackground.js — exports the AuroraBackground component.
For a detailed walkthrough of how routes are defined and how the static page shells redirect to hash URLs, see Routing. For a prop-by-prop breakdown of each component, see Components.

Build docs developers (and LLMs) love

Get started for freeTalk to us