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 Vite-powered React application with no back-end dependencies. From a fresh clone to a running dev server takes a single install command, and from there to a live static deployment takes one more. This guide walks you through every step — prerequisites, local development, production build, and the static-hosting pattern that makes direct-link sharing work on any CDN.
Telemetry uses hash-based routing (#/about instead of /about). This means no server-side redirects are needed — every URL is technically the same HTML file with a different hash fragment.

​
Local Development

1

Prerequisites

Make sure you have the following installed before you begin:
  • Node.js 18 or later — check with node -v
  • npm (bundled with Node) or pnpm — check with npm -v or pnpm -v
Any LTS release of Node 18+ works. The project has no native add-ons that require a specific patch version.
2

Clone the repository

Clone from GitHub and change into the project directory:
git clone https://github.com/apursley2012/telemetry.git && cd telemetry
The repository is entirely front-end source code — no .env files or secrets are needed to run the project locally.
3

Install dependencies

Install the project’s npm dependencies. Choose your preferred package manager:
npm install
Key packages installed include react, react-dom, react-router-dom, framer-motion, lucide-react, and the Vite build toolchain with the Tailwind CSS plugin.
4

Start the development server

Launch the Vite dev server:
npm run dev
Vite starts in milliseconds. Open your browser to http://localhost:5173 to see the observatory home screen with the aurora background, pulsing navigation header, and custom cursor.The dev server supports Hot Module Replacement — editing any component or page file updates the browser instantly without a full reload.
5

Explore the seven pages

Navigate between all seven routes to see each page component in action:
URL (hash format)Page
http://localhost:5173/#/Home — mission control dashboard
http://localhost:5173/#/aboutAbout — origin trajectory timeline
http://localhost:5173/#/projectsProjects — stellar systems orbit/list view
http://localhost:5173/#/skillsSkills — constellation star map
http://localhost:5173/#/writingWriting — received transmissions feed
http://localhost:5173/#/case-studiesCase Studies — mission dossier narrative
http://localhost:5173/#/contactContact — comms array form
The navigation bar in the fixed header links to all seven routes and highlights the active page with a Framer Motion spring-animated pill.
6

Build for production

Compile the project into a fully static output folder:
npm run build
Vite bundles React, Framer Motion, React Router, and all page components into the dist/ directory. The output contains:
  • dist/index.html — the root entry point
  • dist/assets/main.js — the compiled application bundle
  • dist/assets/main.css — the compiled Tailwind stylesheet
  • dist/pages/ — static HTML shells for each route (for direct-URL support)
The dist/ folder is entirely self-contained — no Node.js runtime is required to serve it.
7

Preview the production build

Vite includes a local preview server that serves dist/ exactly as a CDN would:
npm run preview
The preview server starts at http://localhost:4173. Use this to verify that the static-routing mechanism works correctly before deploying — click through to each route and test that reloading a deep link (e.g. #/projects) lands on the right page.

​
Static Deployment

The dist/ folder is a fully static artifact — no server, no runtime, no environment variables. Deploy it to any CDN or static hosting platform.

​
Netlify

The easiest option for a first deployment:
  1. Drag and drop — go to app.netlify.com, open the Sites tab, and drag the dist/ folder onto the deploy zone. Your site is live in seconds.
  2. Continuous deployment — connect your GitHub repository in Netlify’s UI, set the Build command to npm run build, and the Publish directory to dist. Every push to main triggers a new deploy automatically.

​
Vercel

From the project root (with the Vercel CLI installed): 
vercel --prod
Vercel auto-detects the Vite framework and sets the output directory to dist/ without any additional configuration.

​
GitHub Pages

Push the contents of dist/ to the gh-pages branch of your repository: 
# Using the gh-pages npm package
npx gh-pages -d dist
Then enable GitHub Pages in your repository’s Settings → Pages and set the source branch to gh-pages. Your portfolio will be live at https://<your-username>.github.io/<repo-name>/.

​
How window.__STATIC_PAGE_ROUTE__ Works

Because Telemetry uses React Router in hash mode, the browser only ever requests a single HTML document — the hash fragment (#/about, #/projects, etc.) is processed entirely in JavaScript and never sent to the server. This works perfectly for soft navigation between pages. The challenge arises with direct URLs: if a visitor opens https://yourdomain.com/pages/About.html directly, the browser serves that HTML file but the hash fragment starts empty. The app would boot on the home page instead of the About page. Telemetry solves this with a small inline script in each page’s HTML shell. Every file in pages/ sets window.__STATIC_PAGE_ROUTE__ to its canonical route and then redirects the hash if it is missing: 
<script>
window.__STATIC_PAGE_ROUTE__ = "/about";
(function () {
  if (!window.location.hash || window.location.hash === "#") {
    window.location.replace(
      window.location.pathname +
      window.location.search +
      "#/about"
    );
  }
})();
</script>
What this does, step by step:
  1. The window.__STATIC_PAGE_ROUTE__ variable is set before React loads — the app can read it to know which route was intended.
  2. The IIFE checks whether the URL already has a meaningful hash fragment.
  3. If the hash is missing or empty, it calls window.location.replace to rewrite the URL, appending #/about (or whichever route the shell belongs to).
  4. The page reloads with the correct hash, React Router matches /about, and the About page renders.
This pattern requires zero server configuration and works identically on Netlify, Vercel, GitHub Pages, and any S3-compatible CDN.
When deploying to a subdirectory (e.g. GitHub Pages with a repo name prefix), update the href paths in each page shell’s <link> and <script src> tags to use the correct relative prefix so assets resolve correctly.

Build docs developers (and LLMs) love

Get started for freeTalk to us