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 React single-page application that separates its concerns into three distinct layers: an ambient visual effects layer drawn on canvas and CSS, a fixed layout shell that handles navigation and chrome, and a routed content layer where individual portfolio pages live. These layers stack cleanly using z-index, so every cosmos effect renders behind the actual content without interfering with user interaction.

​
Component Tree

The root component CosmiApp (defined in assets/main.js) composes the full application. Every render begins here, assembling the cosmos layer, the navigation shell, and the routed main content into one coherent tree: 
<CosmiApp>                              # Root component (HashRouter + div.cosmic-black)
  ├── <CustomCursor />                  # Magnetic cursor overlay       (z-index: 9997–9999)
  ├── <StarfieldBackground />           # Canvas starfield              (z-index: -20)
  ├── <AuroraBackground />              # Framer Motion glow blobs      (z-index: -10)
  ├── <Navigation />                    # Fixed top nav + overlay menu  (z-index: 50)
  ├── <main className="relative z-10">  # Content area
  │   └── <AppRoutes />                 # React Router v6 <Routes>
  │         ├── <Route path="/" />       → Home
  │         ├── <Route path="/about" />  → About
  │         ├── <Route path="/projects" /> → Projects
  │         ├── <Route path="/skills" />  → Skills
  │         ├── <Route path="/work" />    → Work
  │         ├── <Route path="/case-studies" /> → CaseStudies
  │         ├── <Route path="/articles" /> → Articles
  │         ├── <Route path="/testimonials" /> → Testimonials
  │         └── <Route path="/contact" />  → Contact
  └── <Footer />                        # Fixed bottom bar             (z-index: 40)

​
The Cosmos Layer

The three ambient components — StarfieldBackground, AuroraBackground, and CustomCursor — are intentionally positioned outside the main content flow using fixed inset-0 and explicit z-index values. This means they always fill the full viewport and are never clipped or scrolled by page content.
  • StarfieldBackground renders onto a <canvas> element with className="fixed inset-0 w-full h-full -z-20 pointer-events-none". It generates a particle count proportional to window.innerWidth * window.innerHeight / 2000, reseeds on window resize, and cancels its requestAnimationFrame loop on unmount.
  • AuroraBackground renders four motion.div blobs with Tailwind color classes (bg-aurora-teal/30, bg-aurora-magenta/20, etc.), blur-[120px]–blur-[150px], and independent animate / transition props that run on infinite loops with staggered delays. Its parent div uses className="fixed inset-0 -z-10 … mix-blend-screen opacity-60".
  • CustomCursor sits at z-index: 9997–9999, above everything else in the tree. It uses three layered motion.div elements driven by mousemove and mouseover listeners, and expands when the pointer hovers an <a>, <button>, or any element carrying the .interactive class.
Because all cosmos components carry pointer-events-none (except CustomCursor’s three dots, which also carry pointer-events-none), they never block clicks or keyboard focus on content beneath them.

​
App Shell

CosmiApp is the single component that wires everything together. It is rendered once via ReactDOM.render into the #root div inside index.html: 
function CosmiApp() {
  return (
    <HashRouter>
      <div className="relative min-h-screen bg-cosmic-black text-star-white overflow-hidden">
        <CustomCursor />
        <StarfieldBackground />
        <AuroraBackground />
        <Navigation />
        <main className="relative z-10 flex flex-col min-h-screen">
          <AppRoutes />
        </main>
        <Footer />
      </div>
    </HashRouter>
  );
}

ReactDOM.render(<CosmiApp />, document.getElementById("root"));
The wrapping <HashRouter> from React Router v6 enables hash-based client-side routing, which works on any static host without server configuration. The root div uses bg-cosmic-black (#04050d) as its base background so the canvas layer beneath always has a dark foundation to render against.

​
Page Architecture

Each of the nine route components follows the same structural pattern. The component returns a <PageTransition> wrapper that provides Framer Motion initial, animate, and exit states — a scale + blur fade that takes 0.6 seconds with a custom cubic-bezier curve. Inside that wrapper, a flex column fills the minimum screen height and adapts its layout per page: 
// Typical page structure (e.g., About page)
function About() {
  return (
    <PageTransition>
      <div className="flex-1 flex flex-col ...">
        <header>...</header>
        {/* Page content */}
      </div>
    </PageTransition>
  );
}
PageTransition always applies className="min-h-screen w-full pt-24 pb-20 px-6 md:px-12 lg:px-24 flex flex-col", so every page starts below the fixed navigation bar (pt-24) and has consistent responsive horizontal padding.
The glass-panel CSS class is used extensively across page components for frosted-glass cards. Its definition in assets/main.css is:
backdrop-blur-md bg-cosmic-navy/40 rounded-xl border border-aurora-teal/20
Apply it to any container that should appear to float above the starfield. The bg-cosmic-navy/40 gives semi-transparency while backdrop-blur-md creates the blur effect against the layers beneath.

Routing

How HashRouter, AppRoutes, and AnimatePresence work together to handle all nine portfolio routes.

Components

The full cosmos component catalogue — naming conventions, z-index model, and prop patterns.

Build docs developers (and LLMs) love

Get started for freeTalk to us