Skip to main content

Documentation Index

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

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

Cosmic Developer is a fully animated, space-themed single-page portfolio built with React and Vite. It’s designed for developers, designers, and creatives who want a portfolio that feels as expansive as deep space — complete with a living starfield canvas, aurora-glow backgrounds, a custom magnetic cursor, and cinematic page transitions. Every element of the UI is tuned to evoke the silence and grandeur of the cosmos while communicating your work with clarity.

​
Key Features

Starfield Background

A canvas-based starfield renders hundreds of individually animated star particles that drift, twinkle, and respond to the viewport — all at 60 fps with zero layout impact.

Aurora Glow

Four large, Framer Motion–animated radial blobs in aurora-teal, aurora-magenta, aurora-green, and aurora-violet slowly pulse and drift behind every page using mix-blend-screen.

Custom Cursor

A three-layer magnetic cursor replaces the default pointer. A teal dot snaps instantly to mouse position, a larger ring follows with spring damping, and a blurred magenta ghost trails behind for depth.

Teletype Text

The TeletypeText component types out strings character by character at 50 ms intervals, with a blinking aurora-teal cursor block until the sequence completes. Supports a configurable delay prop.

Page Transitions

The PageTransition wrapper animates every route in and out with a synchronized opacity + scale + blur sequence (0.6 s, custom cubic easing) powered by Framer Motion’s AnimatePresence.

Glass Panels

The glass-panel utility class applies backdrop-blur-md, a semi-transparent cosmic-navy background, and an aurora-teal border — ready to drop onto any card, modal, or sidebar.

Orbital Navigation

A full-screen overlay navigation menu slides in with staggered item animations, each nav label rendered in large Space Grotesk headings with an animated underline on hover.

Constellation Skill Map

The Skills page (/skills) visualises your technology proficiencies as a connected constellation graph — nodes glow in the aurora palette and are laid out across the canvas.

​
Tech Stack

Cosmic Developer is built entirely with modern, widely-supported open-source libraries:
  • React 18 — concurrent rendering and hooks throughout
  • Vite — instant dev server HMR and optimised production builds
  • Framer Motion — declarative animations, AnimatePresence, and spring physics
  • Tailwind CSS — utility-first styling with a custom deep-space design token set
  • React Router v6 — hash-based client-side routing for static hosting
  • Lucide React — pixel-perfect SVG icon set (Compass, Menu, X, and more)

​
Project Structure

The deployed project ships as a self-contained static bundle. Here is the top-level layout: 
cosmic-developer/
├── index.html                  # App shell — mounts #root and loads assets
├── assets/
│   ├── main.js                 # Compiled React app bundle (all pages + routing)
│   ├── main.css                # Tailwind output including glass-panel utility
│   ├── jsx-runtime.js          # React JSX transform shim
│   ├── proxy.js                # Framer Motion motion.* proxy
│   └── createLucideIcon.js     # Lucide icon factory
├── components/
│   └── cosmos/                 # Seven reusable deep-space UI components
│       ├── StarfieldBackground.js
│       ├── AuroraBackground.js
│       ├── CustomCursor.js
│       ├── TeletypeText.js
│       ├── PageTransition.js
│       ├── Navigation.js
│       └── Footer.js
└── pages/                      # Static HTML fallback pages (About, Projects, …)
    ├── About.html
    ├── Articles.html
    ├── CaseStudies.html
    ├── Contact.html
    ├── Projects.html
    ├── Skills.html
    ├── Testimonials.html
    └── Work.html
Cosmic Developer is a static single-page application that uses hash-based routing (e.g. /#/about, /#/skills). This means it can be deployed to any static host — GitHub Pages, Netlify, Vercel, Cloudflare Pages — without any server-side configuration or redirect rules.

Build docs developers (and LLMs) love

Get started for freeTalk to us