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.

The Footer component closes out the visual shell of the Cosmic Developer portfolio with a layer of ambient, low-key branding. Rather than a conventional link-heavy footer, it renders two tongue-in-cheek system-status messages in monospaced type at the bottom-left — a nod to the space-mission aesthetic — alongside a tiny animated rocket icon that drifts continuously across the viewport from left to right. The whole element sits in the fixed bottom layer, is invisible to pointer events, and blends into the starfield using mix-blend-screen so it never competes with page content.

​
Usage

Footer is a zero-prop component. Include it once inside the app shell, below your <main> content region: 
import { Footer } from '../components/cosmos/Footer'

<Footer />
Footer is a standalone file at components/cosmos/Footer.js. It exports the component as the named export Footer (minified export alias F). Import it directly from Footer.js, not from Navigation.js.

​
Placement

Footer uses fixed bottom-0 w-full positioning, so it occupies the very bottom of the viewport on every page without pushing any content. It sits at z-40 — one layer below the Navigation bar’s z-50 and well below the overlay’s z-[100] — so neither the top nav nor a full-screen overlay will be obscured by it. The recommended placement inside the app shell is: 
<div className="app-shell">
  <Navigation />
  <main>
    {/* page content */}
  </main>
  <Footer />                  {/* ← sits here, above absolute background layers */}
  <StarfieldBackground />     {/* absolute, z-0 */}
  <AuroraBackground />        {/* absolute, z-0 */}
</div>
Because pointer-events-none is set on the root footer element, it will never intercept clicks intended for content beneath it, which is important given its fixed layering over the page.

​
What It Renders

​
Status Messages

The left side of the footer renders a <div> with two <p> tags in font-mono text-xs text-star-dim/50. The messages are intentionally absurdist mission-control flavour text: 
<div className="font-mono text-xs text-star-dim/50 mix-blend-screen">
  <p>Latency to Mars: tolerable</p>
  <p>Currently in low orbit around production</p>
</div>
The mix-blend-screen blend mode means this text will appear to glow when overlaid on dark backgrounds and remain subtle on lighter areas, staying readable across the dynamic starfield without requiring a hard background colour.

​
Animated Rocket

A Framer Motion <motion.div> containing a rotated Lucide Rocket icon (rotate-45) traverses the full viewport width on a looping animation: 
<motion.div
  className="absolute bottom-10 text-aurora-teal/40"
  initial={{ x: '-10vw', y: 20 }}
  animate={{
    x: '110vw',
    y: [20, -10, 20],
    rotate: [0, 5, -5, 0],
  }}
  transition={{
    x:      { duration: 40, repeat: Infinity, ease: 'linear' },
    y:      { duration: 10, repeat: Infinity, ease: 'easeInOut' },
    rotate: { duration: 15, repeat: Infinity, ease: 'easeInOut' },
  }}
>
  <Rocket className="w-4 h-4 transform rotate-45" />
</motion.div>
The rocket travels from -10vw to 110vw over 40 seconds, bobs gently on the y axis every 10 seconds, and rocks on its axis every 15 seconds. The colour is text-aurora-teal/40 — partially transparent teal — so it registers as a delightful ambient detail rather than a visual distraction.

​
Customization

​
Changing the Status Messages

Open components/cosmos/Footer.js and update the two <p> children inside the font-mono div: 
<p>Uptime: 99.97%</p>
<p>Deploy pipeline: nominal</p>
These strings are hardcoded; they carry no data-fetching logic. Replace them with whatever ambient flavour copy fits your portfolio’s tone.

​
Adjusting the Rocket Speed

Modify the x.duration value in the transition prop. Lower values make the rocket cross faster; higher values slow it to a drift: 
transition={{
  x: { duration: 20, repeat: Infinity, ease: 'linear' }, // twice as fast
  ...
}}

​
Removing the Rocket

Delete the <motion.div> block entirely. The footer will then render only the status-text div, which is still a coherent standalone element.

​
Adding Social Links or Copyright

To add a right-aligned social link cluster or copyright notice, extend the root <footer> flex container with a second child. Because pointer-events-none is set on the root, any interactive children (links, buttons) must explicitly override it with pointer-events-auto: 
<footer className="fixed bottom-0 w-full p-4 z-40 pointer-events-none
                   flex justify-between items-end overflow-hidden">
  {/* existing left-side status text */}
  <div className="font-mono text-xs text-star-dim/50 mix-blend-screen">
    <p>Latency to Mars: tolerable</p>
    <p>Currently in low orbit around production</p>
  </div>

  {/* new right-side social links */}
  <div className="pointer-events-auto flex gap-4">
    <a href="https://github.com/you" className="text-star-dim/50 hover:text-aurora-teal
                                                 font-mono text-xs transition-colors">
      GitHub
    </a>
  </div>
</footer>

​
Adjusting Padding

The root element uses p-4 (16 px on all sides). Change this to px-6 pb-6 or any Tailwind spacing utility to shift the text away from the viewport edge.

​
Styling

Footer integrates seamlessly with the rest of the Cosmic Developer design language:
TokenValueUsage
text-star-dim/50Muted off-white, 50% opacityStatus message text colour
mix-blend-screenCSS blend modeKeeps text visible over starfield
text-aurora-teal/40Teal, 40% opacityRocket icon colour
font-monoMonospace typefaceStatus message font family
z-40Stack order 40Below nav bar, above background layers
If you add a copyright line, use text-star-dim/50 font-mono text-xs to match the existing status-message type style. This keeps all footer copy on the same visual tier, reinforcing the “ambient instrument readout” aesthetic.

​
Module Note

Footer lives in its own dedicated source file at components/cosmos/Footer.js and is imported separately from Navigation.js. Despite both components forming the outer shell of the app, they are not co-located in the same module. Always import Footer from Footer.js to avoid pulling in the entire Navigation bundle unnecessarily.

Build docs developers (and LLMs) love

Get started for freeTalk to us