Cosmic Developer: Configuration, Content, and Build Setup

Cosmic Developer is designed to be forked and personalized. Nearly every visible piece of content — project titles, skill names, work history entries, testimonials, and navigation labels — lives in plain JavaScript arrays inside the source components. Visual theming is controlled by Tailwind CSS design tokens in tailwind.config.js, and build behaviour is configured through vite.config.js. Both of these configuration files exist in the source project (your fork), not in the distributed pre-built repository. This guide maps out every configuration surface so you know exactly where to look when making a change.

Configuration Areas

Color Palette

Change the aurora teal, cosmic navy, and star-white tokens that define the portfolio’s colour scheme. All colours are declared as Tailwind custom tokens and can be swapped without touching component code.

Typography

Cosmic Developer uses Space Grotesk for headings, Inter for body text, and JetBrains Mono for code. Learn how to swap typefaces or adjust the font-weight scale loaded from Google Fonts.

Animations

The starfield, aurora glow, page transitions, and teletype effects are all configurable. This section covers the keyframe and Framer Motion settings behind each animation.

Deployment Settings

The distributed repo is already built and ready to deploy. This section covers base-path configuration for subdirectory deployments when building from a source fork.

Content Data Locations

Every portfolio page is driven by a data array defined in the source component (or in a co-located data file). To update the content for a page, open the corresponding source file and edit the array values. No build configuration or environment variables are required — the data is compiled directly into the JavaScript bundle by Vite.

Page	Data to Edit	Location in Source
Home	Hero text, subtitle	`Home` component
About	Sector names and content	`sectors` array
Projects	Project name, description, tech stack, orbit label	`projects` array
Skills	Skill name, position, magnitude, category	`skills` array
Work	Year, role, company, description, status	`workHistory` array
Case Studies	Title, subtitle, description, accent colour	`caseStudies` array
Articles	Date, title, excerpt, tags	`articles` array
Testimonials	Quote, author name, author role	`testimonials` array
Navigation	Path, label, description	`navItems` array in `Navigation.js`

The distributed repository contains a pre-bundled assets/main.js. Editing raw source arrays requires either the original unbundled source files or a fork of the repository that includes src/. See the tip at the bottom of this page for the recommended workflow.

Vite Configuration

vite.config.js lives in the source project root — it is not present in the distributed pre-built repository. For most deployments the defaults work without modification, but one common change is required when deploying to a subdirectory path on GitHub Pages or a similar host. If your site will be served from https://username.github.io/cosmic-developer/ rather than the domain root, set the base option to match the subdirectory:

// vite.config.js  (in your source fork — not in the pre-built repo)
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/cosmic-developer/', // Set to '/' for root-domain deployments
  build: {
    outDir: 'dist',
  },
})

If you deploy to a subdirectory without setting base, all asset paths in index.html will be relative to the domain root (/assets/main.js) instead of the subdirectory (/cosmic-developer/assets/main.js), and the page will load as a blank white screen.

Tailwind Configuration

tailwind.config.js lives in the source project root — it is not present in the distributed pre-built repository. Visual design tokens — colours, font families, custom animations, and extended spacing — are declared here. Cosmic Developer defines a custom colour palette under theme.extend.colors that maps short semantic names (like aurora-teal and cosmic-black) to exact hex values, keeping component class names readable. To add a new accent colour or modify an existing token in your source fork:

// tailwind.config.js  (in your source fork — not in the pre-built repo)
export default {
  content: ['./index.html', './src/**/*.{js,jsx}'],
  theme: {
    extend: {
      colors: {
        // Existing cosmic palette
        'cosmic-black':  '#04050d',
        'cosmic-navy':   '#0a1535',
        'aurora-teal':   '#3dd6c4',
        'aurora-violet': '#6b4fe0',
        'aurora-green':  '#7af0a8',
        'aurora-magenta':'#d96cf0',
        'star-white':    '#f5fbff',
        'star-dim':      '#8b9bb4',
        // Add your own tokens here
        'nebula-orange': '#f97316',
      },
      fontFamily: {
        heading: ['Space Grotesk', 'sans-serif'],
        mono:    ['JetBrains Mono', 'monospace'],
      },
    },
  },
  plugins: [],
}

After adding a new token, use it in any component with the standard Tailwind class syntax — for example text-nebula-orange or bg-nebula-orange/20.

Adding a New Page

Adding a page to Cosmic Developer involves four coordinated steps: creating the component, registering its route, adding it to the navigation, and — if you need direct-URL access on static hosts — creating an HTML stub in the pages/ folder. All steps except the last require the source project.

Create the page component

Create a new React component file in src/pages/ (or wherever the existing pages live in your fork). Follow the same pattern as an existing page — import the shared layout components and export a default function:

// src/pages/Contact.jsx
import PageTransition from '../components/cosmos/PageTransition'

export default function Contact() {
  return (
    <PageTransition>
      <main className="min-h-screen pt-24 px-6 lg:px-24">
        <h1 className="font-heading text-4xl text-star-white">Contact</h1>
        {/* Your content here */}
      </main>
    </PageTransition>
  )
}

Open the file that defines your application’s route tree (typically src/AppRoutes.jsx or equivalent) and add an entry for the new page:

import Contact from './pages/Contact'

// Inside your route definitions:
<Route path="/contact" element={<Contact />} />

Because HashRouter is in use, this route will be accessible at /#/contact.

Add the nav item to Navigation.js

Open src/components/cosmos/Navigation.js and append an entry to the navItems array. Each item needs at minimum a path, a label, and optionally a description shown in the expanded navigation panel:

const navItems = [
  // ... existing items
  {
    path: '/contact',
    label: 'Contact',
    description: 'Get in touch',
  },
]

Create the HTML stub in pages/ (optional)

The pages/ folder contains pre-rendered HTML stubs that set window.__STATIC_PAGE_ROUTE__ and window.location.hash on load, enabling direct URL access (e.g. visiting yoursite.com/pages/Contact.html will redirect the user into the React app at /#/contact). Copy an existing stub and update the route value:

<!-- pages/Contact.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Contact | cosmic-developer</title>
    <script type="module" crossorigin src="../assets/main.js"></script>
    <link rel="modulepreload" crossorigin href="../assets/jsx-runtime.js">
    <link rel="modulepreload" crossorigin href="../assets/proxy.js">
    <link rel="modulepreload" crossorigin href="../assets/createLucideIcon.js">
    <link rel="modulepreload" crossorigin href="./components/cosmos/Navigation.js">
    <link rel="modulepreload" crossorigin href="./components/cosmos/StarfieldBackground.js">
    <link rel="modulepreload" crossorigin href="./components/cosmos/AuroraBackground.js">
    <link rel="modulepreload" crossorigin href="./components/cosmos/CustomCursor.js">
    <link rel="modulepreload" crossorigin href="./components/cosmos/Footer.js">
    <link rel="modulepreload" crossorigin href="./components/cosmos/PageTransition.js">
    <link rel="modulepreload" crossorigin href="./components/cosmos/TeletypeText.js">
    <link rel="stylesheet" crossorigin href="../assets/main.css">
    <script>
      window.__STATIC_PAGE_ROUTE__ = "/contact";
      if (!window.location.hash || window.location.hash === "#/" || window.location.hash === "#") {
        window.location.hash = "/contact";
      }
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

This step is optional if your host supports wildcard fallback to index.html.

Working From Source

The distributed repository contains a compiled, minified bundle in assets/main.js. While the site runs perfectly from this bundle, editing content or components requires the original pre-build source files.

Fork the repository and work from source files for the best developer experience. With the full source tree you get:

Hot module replacement via npm run dev
Readable, editable component files in src/
Access to all data arrays (projects, skills, workHistory, etc.) as plain JS objects
The ability to add new pages, components, and routes without decompiling a bundle
Access to vite.config.js and tailwind.config.js for build and design token customisation

Clone your fork, run npm install, then npm run dev to start the local development server at http://localhost:5173. All changes are reflected instantly in the browser without a rebuild.

Theming

Deployment

Cosmic Developer: Configuration, Content, and Build Setup

Configuration Areas

Color Palette

Typography

Animations

Deployment Settings

Content Data Locations

Vite Configuration

Tailwind Configuration

Adding a New Page

Working From Source

Build docs developers (and LLMs) love

Theming

Deployment

Documentation Index

​Configuration Areas

Color Palette

Typography

Animations

Deployment Settings

​Content Data Locations

​Vite Configuration

​Tailwind Configuration

​Adding a New Page

​Working From Source

Build docs developers (and LLMs) love

Configuration Areas

Content Data Locations

Vite Configuration

Tailwind Configuration

Adding a New Page

Working From Source