Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/space-mission/llms.txt

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

By the end of this guide you will have a fully running local copy of the Space Mission portfolio displaying in your browser, understand how to build it for production, and know how to preview the production build before deploying. The whole process — from cloning to a live dev server — takes under five minutes on a modern machine.
The GitHub repository at https://github.com/apursley2012/space-mission contains the pre-built static output that is deployed directly to GitHub Pages. It does not include a package.json, vite.config, or src/ directory. Steps 2–6 below (install, dev server, build, preview) apply when you have the original Vite source project. If you only cloned the deployed repo, skip to the static serving note after Step 1.

​
Prerequisites

Make sure you have the following tools installed before you begin:
  • Node.js 18 or later — Download from nodejs.org. Verify with node --version.
  • Git — Download from git-scm.com. Verify with git --version.
  • A modern browser — Chrome, Firefox, Edge, or Safari (latest stable). The animated canvas and CSS backdrop filters require a current rendering engine.

​
Steps

1

Clone the repository

Clone the Space Mission repo from GitHub to your local machine.
git clone https://github.com/apursley2012/space-mission.git
cd space-mission
This downloads the pre-built static site — index.html, assets/, components/, and pages/ — into a new space-mission/ directory. Because this repo is the compiled output, you can open index.html directly in a browser or serve the folder with any static file server right away:
# Quick static preview without npm (requires npx / Node installed)
npx serve .
To run the Vite development server with hot-module replacement, you need the original source project (not this repo). The remaining steps assume you are working from a source copy that includes package.json and src/.
2

Install dependencies

Install all Node.js dependencies listed in package.json. Use whichever package manager you prefer:
npm install
This pulls in React 18, TypeScript, Vite, Tailwind CSS, Framer Motion, React Router v6, and Lucide React, along with their transitive dependencies. On a fast connection the install typically completes in 30–60 seconds.
3

Start the development server

Launch the Vite dev server with hot module replacement enabled:
npm run dev
Vite will start almost instantly and print output similar to:
  VITE v5.x.x  ready in 300 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
The dev server runs on http://localhost:5173 by default. If that port is already in use, Vite will automatically increment to the next available port (e.g. 5174) and display the updated URL in the terminal.
4

Open the site in your browser

Navigate to http://localhost:5173 in your browser. You should be greeted immediately by the Space Mission home page — a deep-navy canvas starfield with an orbiting solar system and the HUD navigation bar along the top.The dev server supports hot module replacement: any changes you make to source files will be reflected in the browser instantly without a full page reload.
5

Build for production

When you are ready to deploy, generate an optimised production build from the source project:
npm run build
Vite bundles and minifies all JavaScript, processes Tailwind CSS with PurgeCSS tree-shaking, and outputs the compiled static site into the dist/ directory. The build typically completes in under 15 seconds. The resulting dist/ layout mirrors what is already deployed in the GitHub Pages repo:
dist/
├── index.html
├── assets/
│   ├── main-[hash].js
│   ├── main-[hash].css
│   └── ...
└── pages/
    └── ...
The space-mission GitHub Pages repository is this built output — the source project’s dist/ contents are committed directly to the main branch for zero-configuration static hosting.
6

Preview the production build

Before pushing to a host, you can serve and inspect the production build locally:
npm run preview
Vite’s preview server starts on http://localhost:4173 by default and serves the exact files from dist/ — giving you a faithful reproduction of what visitors will see on your deployed site, including hash routing behaviour.
# Example output
  ➜  Local:   http://localhost:4173/
  ➜  Network: use --host to expose

​
What You’ll See

When you first open the site at http://localhost:5173, the Home page loads with several animated layers working together:
  • Starfield background — The Starfield canvas component fills the entire viewport with hundreds of white and cyan star particles at varying depths, creating a subtle parallax effect as you move the cursor or scroll.
  • Orbit System — Centred on the home page, the OrbitSystem component animates a small solar system with a glowing central star and multiple planets tracing smooth elliptical orbits, all powered by Framer Motion motion elements.
  • HUD Navigation bar — Across the top of the screen, the Navigation component renders a heads-up-display-style bar in Space Mono monospace font. Each route link glows in space-turquoise (#22d3ee) on hover and the active route stays highlighted. On smaller screens the nav collapses into a mobile menu.
  • Mission briefing panel — Below the orbital visual, a translucent panel introduces you (or your portfolio’s subject) with a headline and short bio copy, styled with a subtle backdrop blur over the starfield.
Clicking any nav link triggers the PageTransition wrapper, which fades and slides the outgoing page out while the new one animates in — no jarring full-page loads.

​
Next Steps

Architecture Overview

Deep-dive into how the component tree is structured, how React Router handles hash-based navigation, and how the bundled assets relate to the source modules.

Customising Content Data

Learn how to update the JavaScript data arrays inside assets/main.js to swap in your own projects, work history, blog posts, case studies, and testimonials.

Changing the Color Palette

Find out how the five space-* Tailwind tokens are defined and how to retheme the site to your own colour scheme without touching component markup.

Deploying to GitHub Pages

Step-by-step instructions for configuring the Vite base path, enabling the .nojekyll file, and pushing your production build to GitHub Pages for free static hosting.

Build docs developers (and LLMs) love

Get started for freeTalk to us