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.

The Home page (/) is the primary entry point of the Space Mission portfolio. It renders two stacked sections inside a single viewport: an interactive OrbitSystem SVG diagram in the upper half, and a HUD-styled Mission Briefing panel below it. The animated Starfield backdrop — complete with parallax stars and shooting-star comets — covers the entire screen as a fixed z-0 layer behind all content. Both sections enter the view with a Framer Motion whileInView fade-in/slide-up animation (initial={{ opacity: 0, y: 50 }}).

​
OrbitSystem Component

The OrbitSystem component (components/OrbitSystem.js) renders a 600px-tall perspective container centered on the page. At its core sits a glowing SYS_CORE star — a w-32 h-32 circle with a from-yellow-200 via-orange-400 to-red-600 radial gradient and a pulsing box-shadow animation (0 0 60px → 80px → 60px, repeating every 4 seconds). Five navigation planets orbit the star on independently animated elliptical paths. Each planet is a Framer Motion div that continuously rotates (animate={{ rotate: 360 }}), with a counter-rotation applied to the planet element itself so the label always stays upright. Hovering any planet scales it to 1.5× and reveals a hud-border tooltip with the page label.
Planet LabelRouteColor ClassOrbit RadiusXOrbit RadiusYPeriod
ORIGIN/aboutbg-orange-400120px60px20s
MAP/projectsbg-space-turquoise180px90px35s
SKILLS/skillsbg-space-teal240px120px45s
LOGS/workbg-indigo-400320px160px60s
COMMS/contactbg-rose-400400px200px80s
Clicking a planet uses React Router’s useNavigate hook to navigate to the corresponding route immediately.
To add a new orbit point, append an entry to the r array inside components/OrbitSystem.js. Set a unique id, label, path, radiusX/radiusY (keeping the 2:1 ratio for a consistent 3-D tilt), a Tailwind background color class, a duration (seconds per revolution), and a delay (initial offset in seconds).

​
Mission Briefing Panel

Below the orbit diagram, a max-w-3xl Mission Briefing panel slides into view using whileInView. The panel uses the .hud-border utility class — a Tailwind component that applies a 1px cyan-tinted border (border-space-turquoise/30), a bg-space-navy/80 background, a subtle cyan glow (box-shadow: 0 0 15px rgba(34,211,238,.1)), and backdrop-blur-md. The panel’s header row contains a circular CMD badge and two lines of mono text:
  • MISSION BRIEFING — displayed in text-space-turquoise tracking-widest
  • STARDATE: — auto-generated from new Date().toISOString().split('T')[0] at render time, so it always shows the current UTC date.
Four corner accent marks (two border-t/border-l and two border-b/border-r in border-space-turquoise) frame the panel to create an HUD appearance.

​
Typewriter Text Effect (TypingText)

All four lines of briefing text are rendered through the TypingText component (aliased as q in the bundle). It accepts a text string and a delay milliseconds value. After the delay, it types the string character-by-character at 30ms per character using setInterval. A blinking block cursor (w-2 h-4 bg-space-turquoise animate-pulse) is appended after the current text.

​
Mission Briefing Lines

The four lines displayed, with their staggered start delays:
DelayText
500ms> INITIALIZING TELEMETRY... SUCCESS.
1500ms> SUBJECT: Senior Software Engineer / Navigator of Code.
3000ms> STATUS: All systems nominal. Caffeine levels stable. Currently orbiting the React/TypeScript sector with occasional deep-space probes into backend nebulae.
7000ms> DIRECTIVE: Explore the star map above to access mission logs, orbital parameters, and archived transmissions.
The 7-second delay on the final line is intentional — it gives the visitor time to read the first three lines before the closing directive appears. 
// TypingText component signature
// text  — the full string to type out
// delay — milliseconds before typing begins (default: 0)
<TypingText text="> INITIALIZING TELEMETRY... SUCCESS." delay={500} />
<TypingText text="> SUBJECT: Senior Software Engineer / Navigator of Code." delay={1500} />
<TypingText text="> STATUS: All systems nominal. Caffeine levels stable. Currently orbiting the React/TypeScript sector with occasional deep-space probes into backend nebulae." delay={3000} />
<TypingText text="> DIRECTIVE: Explore the star map above to access mission logs, orbital parameters, and archived transmissions." delay={7000} />
The TypingText component cleans up both its setTimeout and setInterval references on unmount, so navigating away and returning will restart the animation from scratch.

​
Customization

1

Edit the mission briefing text

Open assets/main.js (or your pre-bundle source). Locate the four TypingText usages inside the MISSION BRIEFING panel. Replace the text prop value with your own copy. Keep the > prefix to preserve the terminal aesthetic.
2

Adjust typewriter delays

Change the delay prop on any TypingText instance. All values are in milliseconds. The four default values are 500, 1500, 3000, and 7000. Increasing the gap between lines gives the text more dramatic pacing; decreasing it makes the intro faster.
3

Change the typing speed

The setInterval callback inside TypingText fires every 30ms. Lower this number (e.g., 15) for faster typing; raise it (e.g., 60) for a slower, more deliberate effect.
4

Update the STARDATE label

The stardate is generated with new Date().toISOString().split('T')[0] — always the live UTC date. To use a fixed or custom date format, replace this expression with a string literal such as '2157.305'.

Build docs developers (and LLMs) love

Get started for freeTalk to us