Telemetry is a personal developer portfolio built around the aesthetic of a deep-space radio observatory. Rather than a conventional card-and-resume layout, it wraps your professional story inside the Telemetry Online Observatory brand — complete with pulsing aurora backgrounds, a live-signal navigation header, and a custom cursor that glows with teal-cyan light. This page introduces what Telemetry is, the technology that powers it, the design language it speaks, and the seven pages it ships with out of the box.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.
Tech Stack
Telemetry is a pure front-end application. There is no server, no API, and no database — it compiles to a folder of static files you can host anywhere.| Layer | Technology |
|---|---|
| UI framework | React 18 |
| Build tool | Vite |
| Routing | React Router v6 (hash-based) |
| Animation | Framer Motion |
| Styling | Tailwind CSS |
| Icons | Lucide React v0.522.0 |
#/about, #/projects, etc.) maps to a page component. This means the browser never makes a new network request when navigating between pages, making the entire portfolio hostable on any static CDN without redirect rules.
Design Philosophy
The portfolio operates under the conceit of a fictional space radio station. Every piece of copy, every animation, and every color choice reinforces this world:- Brand name: Telemetry Online Observatory — rendered in the fixed header with a
Radioicon inside an animated pulsing ring, the two-line wordmarkTelemetry Online / OBSERVATORY, and a separateActivityicon on the right side labelledRECEIVING SIGNAL. - Aurora visuals: The
AuroraBackgroundcomponent renders three animated blobs (aurora-teal,aurora-violet,aurora-cyan) blurred to 100 px and blended inmix-blend-screenover thespace-blackcanvas, simulating the Northern Lights. - Custom cursor: A glowing
aurora-cyandot (box-shadow0 0 10px #22d3ee, 0 0 20px #14b8a6) tracks mouse position with a spring animation; it scales up over interactive elements. - Monospace typography: Labels, tags, and status readouts use a monospace font with wide letter-spacing (
tracking-widest) to evoke terminal readouts and telemetry feeds.
Color Tokens
All colors are defined as Tailwind CSS custom properties inmain.css and used throughout the project via class names like bg-aurora-teal or text-aurora-cyan.
| Token | Hex | Role |
|---|---|---|
space-black | #04060f | Page background — near-absolute dark |
midnight-navy | #0a0f24 | Card and panel backgrounds |
aurora-teal | #14b8a6 | Primary accent — borders, active states |
aurora-cyan | #22d3ee | Highlights — cursor glow, hover text |
aurora-violet | #8b5cf6 | Secondary accent — timeline, backend skills |
aurora-magenta | #f0abfc | Tertiary accent — case-studies heading |
sunset-orange | #fb923c | Warning/priority states — status dots |
Pages
Telemetry ships with seven route-mapped page components, each carrying its own space-mission metaphor:| Route | Page | Mission Metaphor |
|---|---|---|
/ | Home | Mission control dashboard |
/about | About | Origin Trajectory — personal history timeline |
/projects | Projects | Stellar Systems — orbit or list view |
/skills | Skills | Skill Constellations — interactive star map |
/writing | Writing | Received Transmissions — articles feed |
/case-studies | Case Studies | Mission Dossier — deep-dive scroll narrative |
/contact | Contact | Comms Array — contact form |
Static Deployment
Because Telemetry uses hash-based routing, a singleindex.html (or per-page HTML shell) can serve every route. The pages/ directory contains pre-generated HTML shells for each route — About.html, Projects.html, and so on. Each shell sets window.__STATIC_PAGE_ROUTE__ to the correct path and redirects the browser’s hash fragment before React boots, so direct links (e.g. sharing /pages/About.html) still load the right page.
This architecture means no server-side redirect rules are needed — the portfolio deploys to Netlify, Vercel, GitHub Pages, or any CDN with a single drag-and-drop.
Explore the Docs
Getting Started
Clone the repo, install dependencies, and have the dev server running in under five minutes.
Architecture Overview
Understand how routing, component layers, and the static-deploy mechanism fit together.
Customization & Theming
Swap colors, update copy, and make the observatory your own.
Pages Reference
Deep-dive documentation for every page component and its props.