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.

Space Mission is a fully animated, space-themed personal portfolio SPA built for developers who want their work to stand out. Powered by React 18 and TypeScript, it pairs a rich visual layer — live starfields, orbiting planet systems, constellation skill maps — with practical content pages covering projects, work history, case studies, a blog, and a contact form. Whether you’re a frontend engineer, full-stack developer, or creative technologist, Space Mission gives you a polished, production-ready portfolio that feels genuinely different from the standard template.

​
Key Features

Animated Starfield

A canvas-based Starfield component renders hundreds of procedurally placed, parallax-scrolling stars as a persistent full-viewport background across every page.

Orbit System

The OrbitSystem component displays an animated solar system on the home page, with planets tracing elliptical paths around a central star — all driven by Framer Motion.

Scroll-Driven Career Timeline

The Work page renders an interactive career timeline whose entries animate into view as you scroll, giving recruiters and collaborators a cinematic look at your experience.

Draggable Project Star Map

Projects are plotted as interactive stars on a navigable star map. Each node is draggable and reveals a project card on click, turning your portfolio into an explorable galaxy.

Skill Constellations

Technologies are grouped into constellations on the Skills page. SVG lines connect related skills, forming recognizable patterns that visually communicate your expertise clusters.

HUD Navigation

A heads-up-display navigation bar built with Lucide React icons and Space Mono monotype font gives the site a mission-control aesthetic on desktop and collapses to a mobile-friendly menu.

Page Transitions

The PageTransition wrapper component uses Framer Motion’s AnimatePresence to slide and fade between routes, eliminating jarring full-page refreshes.

Blog & Case Studies

Built-in blog and case study sections support slug-based detail pages, letting you publish long-form technical writing without a CMS — all content lives in JS data arrays.

Contact Form

The Contact page includes a ready-to-wire contact form styled to match the HUD design language, with field validation handled client-side.

Fully Responsive

Every page is built with Tailwind CSS v3 responsive utilities, ensuring the layout adapts gracefully from 320 px mobile screens to ultra-wide desktop monitors.

​
Pages Overview

RoutePageWhat It Shows
/HomeAnimated starfield hero, OrbitSystem visual, mission briefing intro panel, HUD navigation
/aboutAboutPersonal bio, avatar, background story, and highlighted personal facts
/projectsProjectsInteractive star-map of projects; each star expands to a project detail card
/skillsSkillsConstellation diagram of technologies grouped by domain (frontend, backend, tooling, etc.)
/workWorkScroll-driven career timeline with employer entries, roles, and date ranges
/case-studiesCase StudiesGrid of featured case study cards linking to full write-ups
/case-studies/:slugCase Study DetailFull-length individual case study with headings, body copy, and imagery
/blogBlogIndex of blog post cards sorted by date
/blog/:slugBlog PostFull individual blog post rendered from a JS data object
/testimonialsTestimonialsCarousel or grid of testimonial quotes from colleagues and clients
/contactContactContact form + social links

​
Tech Stack

LayerTechnology
UI FrameworkReact 18
LanguageTypeScript
Build ToolVite
StylingTailwind CSS v3
AnimationFramer Motion
RoutingReact Router v6
IconsLucide React
FontsSpace Mono · Fraunces · Inter (Google Fonts)
DeploymentGitHub Pages (static SPA, hash routing)

​
Project Structure

The repository is a pre-built Vite output — the source has already been compiled and the resulting static files are what you clone and deploy. Here is how the repo is laid out: 
space-mission/
├── index.html                  # SPA entry point — mounts <div id="root">
├── assets/
│   ├── main.js                 # Bundled application entry (React bootstrap + all page logic)
│   ├── index.js                # Bundled shared chunk (React, React DOM, router, Framer Motion)
│   ├── proxy.js                # Bundled proxy/polyfill chunk
│   └── main.css                # Compiled Tailwind stylesheet + Google Fonts import
├── components/
│   ├── Navigation.js           # HUD nav bar with all route links (pre-loaded module)
│   ├── Starfield.js            # Canvas starfield background component
│   ├── OrbitSystem.js          # Framer Motion orbit animation component
│   └── PageTransition.js       # AnimatePresence route-transition wrapper
└── pages/
    ├── About.html              # Static HTML shell for /about (hash routing fallback)
    ├── Blog.html               # Static HTML shell for /blog
    ├── BlogDetail.html         # Static HTML shell for /blog/:slug
    ├── CaseStudies.html        # Static HTML shell for /case-studies
    ├── CaseStudyDetail.html    # Static HTML shell for /case-studies/:slug
    ├── Contact.html            # Static HTML shell for /contact
    ├── Projects.html           # Static HTML shell for /projects
    ├── Skills.html             # Static HTML shell for /skills
    ├── Testimonials.html       # Static HTML shell for /testimonials
    └── Work.html               # Static HTML shell for /work
Each file under pages/ is a minimal HTML shell that loads the same assets/main.js bundle. React Router’s hash-based strategy (HashRouter) interprets the URL fragment to render the correct page component without requiring server-side rewrites — which makes the site trivially deployable on any static host, including GitHub Pages.
All portfolio content — project entries, blog posts, case studies, work history, skills, and testimonials — is stored as JavaScript arrays and objects inside assets/main.js. To customise the site’s content you edit the source data arrays and rebuild. See Content Data for a detailed walkthrough.

​
Color Palette

The visual identity is built on five core design tokens defined as Tailwind custom colors:
TokenHexUsage
space-navy#020617Global background, deepest dark
space-turquoise#22d3eePrimary accent — links, active states, glows
space-teal#14b8a6Secondary accent — hover states, borders
space-white#f1f5f9Body copy and UI text
space-violet#7c3aedTertiary accent — tags, badges, constellation lines
The three font families each serve a distinct role: Inter (sans-serif) is the default body font; Space Mono (monospace) is used for the HUD navigation, code snippets, and any terminal-style labels; Fraunces (high-contrast serif) is reserved for large decorative headings to give the design an editorial quality.

Build docs developers (and LLMs) love

Get started for freeTalk to us