Aurora Cosmos is a ready-made developer portfolio template that gives you a visually distinctive, space-themed identity right out of the box. Instead of spending days wiring up animations, choosing a color palette, and building a navigation shell, you get a fully realized design system — deep cosmic backgrounds, flowing aurora gradients, a parallax starfield, and frosted-glass UI panels — with all seven portfolio pages already scaffolded and connected. The repository ships as a pre-built static site; you can serve it immediately withDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/aurora-cosmos/llms.txt
Use this file to discover all available pages before exploring further.
npx serve . or any local HTTP server, no build step required. All customizable components live in components/ and styles are in assets/main.css.
Why Aurora Cosmos?
Most portfolio starters give you a blank slate that still demands significant design work before it looks like anything. Aurora Cosmos inverts that: the visual identity is complete on day one, so you can focus entirely on filling in your own content, projects, and writing. It is aimed at developers who want their portfolio to stand out with a unique aesthetic without the overhead of designing one from scratch.Tech Stack
Aurora Cosmos is built on a modern, production-ready front-end stack:| Technology | Role |
|---|---|
| React 18 | UI component model and rendering |
| Vite | Lightning-fast dev server and optimized build |
| Tailwind CSS | Utility-first styling with custom design tokens |
| Framer Motion | Declarative animations and page transitions |
| React Router | Hash-based client-side routing for static hosting |
Built-in Pages
The template ships with seven fully connected pages, each accessible from the sidebar navigation:| Route | Page | Purpose |
|---|---|---|
/ | Home | Hero landing section with animated headline and CTA |
/about | About | Personal bio, background, and values |
/projects | Projects | Showcase of portfolio work with project cards |
/skills | Skills | Visual breakdown of technical skills and tools |
/writing | Writing | Blog post listing and article previews |
/case-studies | Case Studies | In-depth write-ups of selected projects |
/contact | Contact | Contact form and social links |
Shared Background and Layout Components
Every page in Aurora Cosmos is wrapped in the same three layout primitives, which handle the visual environment automatically:AuroraBackground— Renders the animated, multi-layer aurora gradient that pulses and shifts behind all content. Uses blurred radial gradients in the aurora and cosmic color tokens to produce the characteristic glowing effect.Starfield— A parallax field of procedurally positioned stars with twinkling and shooting-star animations. Sits behind the content layer and responds subtly to scroll.Navigation— The collapsible sidebar on desktop and the slide-in overlay on mobile. Highlights the active route with a sliding turquoise indicator powered by Framer Motion’slayoutId.
Visual Identity
Aurora Cosmos uses a carefully defined design language built on two concepts — cosmic darkness and bioluminescent aurora light. Color palette:| Token | Hex | Use |
|---|---|---|
aurora-turquoise | #5eead4 | Primary accents, active states, links |
aurora-teal | #14b8a6 | Secondary accents, borders, glows |
aurora-green | #34d399 | Tertiary accents, success states |
cosmic-violet | #8b5cf6 | Gradients, decorative highlights |
cosmic-magenta | #ec4899 | Hover states, decorative highlights |
space-900 | #020617 | Page background (near-black deep space) |
space-800 | #060b1f | Glass panel base color |
- Space Grotesk — Headings and display text (
font-display). Tight tracking, geometric, authoritative. - Plus Jakarta Sans — Body copy and UI labels. Clean and readable at all sizes.
- JetBrains Mono — Code blocks, monospace labels, and the
SYS.ONLINEnav footer (font-mono).
.glass-panel— Combinesbackdrop-blur-md, a semi-transparentspace-800background, and a 1 pxwhite/10border to create the frosted-glass card aesthetic used throughout the template..box-glow— Applies a soft 30 px aurora-teal box shadow for interactive elements and the nav logo mark.
When to Use Aurora Cosmos
Aurora Cosmos is the right starting point if you:- Want a portfolio that looks distinctive rather than generic.
- Are comfortable with React and Tailwind and want to edit content, not redesign a layout.
- Need a template that deploys directly to GitHub Pages or any static file host without server configuration.
- Want animations included — smooth page entrances, hover effects, and the living background — without setting them up from scratch.
Quickstart
Clone the repo and have Aurora Cosmos running on localhost in under five minutes.
Design System
Explore the full color tokens, typography scale, and CSS utility classes.