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 distributed Cosmic Developer repository is already the built output — it contains index.html, a compiled assets/ folder, pre-rendered pages/ stubs, and a .nojekyll file, ready to serve directly from any static host with zero additional build steps. This page explains how to deploy this repository as-is, and what changes are needed if you fork the source project and want to build your own version.
This repository contains no package.json, no vite.config.js, and no src/ directory — it is the compiled result of a Vite build, not the build source. Commands like npm install or npm run build apply only to a fork of the source project, not to this deployed repo.
What Is Already in the Repository
When you clone or fork this repository, you get everything a static host needs:
/
├── index.html ← Application entry point
├── .nojekyll ← Disables Jekyll on GitHub Pages
├── assets/
│ ├── main.js ← Compiled, minified JavaScript bundle
│ ├── main.css ← Compiled Tailwind + Google Fonts import
│ ├── jsx-runtime.js
│ ├── proxy.js
│ └── createLucideIcon.js
├── components/
│ └── cosmos/
│ ├── Navigation.js
│ ├── StarfieldBackground.js
│ ├── AuroraBackground.js
│ ├── CustomCursor.js
│ ├── Footer.js
│ ├── PageTransition.js
│ └── TeletypeText.js
└── pages/
├── About.html
├── Articles.html
├── CaseStudies.html
├── Contact.html
├── Projects.html
├── Skills.html
├── Testimonials.html
└── Work.html
Deploy to a Hosting Platform
GitHub Pages
Netlify
Vercel
Manual / CDN
The repository ships with a .nojekyll file at the root, which tells GitHub Pages to skip Jekyll processing and serve all files (including those beginning with underscores) as-is. This is essential for Vite’s hashed asset filenames to resolve correctly.Option 1 — Deploy this repo directly
- Push or fork this repository to your GitHub account.
- Go to Settings → Pages in your repository.
- Under Build and deployment, set the source to Deploy from a branch, choose the
main branch, and select the root (/) directory.
- Click Save. GitHub Pages will serve the repository root — your site will be live within a minute.
Option 2 — GitHub Actions (for source forks)If you have forked the source project and want to build and deploy automatically on every push, add the following workflow file at .github/workflows/deploy.yml. It installs dependencies, runs the Vite build, and publishes the dist/ output to the gh-pages branch.name: Deploy to GitHub Pages
on:
push:
branches:
- main
permissions:
contents: write
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: 18
- name: Install dependencies
run: npm install
- name: Build
run: npm run build
- name: Deploy to gh-pages
uses: peaceiris/actions-gh-pages@v4
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist
gh-pages branch, root directory.If your repository is hosted at a subdirectory path (e.g. https://username.github.io/cosmic-developer/), set the base option in vite.config.js (in the source project) to match: base: '/cosmic-developer/'. See the Vite configuration section for details. Netlify can deploy Cosmic Developer either by dragging the repository contents onto the Netlify dashboard, or by connecting your Git repository for automatic deployments on every push.Option 1 — Drag and drop (no build required)
- Clone or download this repository to your machine.
- Open app.netlify.com and go to the Sites tab.
- Drag the entire repository folder onto the deploy drop zone.
Your site will be live within seconds on a Netlify subdomain.Option 2 — Connect repository
- Click Add new site → Import an existing project in the Netlify dashboard.
- Authorise Netlify to access your GitHub account and select this repository.
- Because the repository is already built, clear any auto-detected build command and set:
| Setting | Value |
|---|
| Build command | (leave blank) |
| Publish directory | . (repository root) |
| Setting | Value |
|---|
| Build command | npm run build |
| Publish directory | dist |
| Node version | 18 (set as NODE_VERSION=18 under Environment variables) |
Because Cosmic Developer uses hash-based routing (/#/about, /#/projects, etc.), a Netlify _redirects file is not needed. The browser never sends the hash fragment to the server — the server always returns index.html and React Router resolves the route client-side from the hash.
Vercel can serve the repository directly without a build step when configured correctly.Option 1 — Connect repository (no build)
- Go to vercel.com/new and import this repository.
- Override the auto-detected framework settings:
- Build command: (leave blank or clear)
- Output directory:
. (repository root)
- Click Deploy.
Option 2 — Connect source fork (with build)If you have forked the source project, Vercel will auto-detect Vite and apply the correct settings:
- Build command:
npm run build
- Output directory:
dist
Option 3 — Explicit vercel.json for source forksIf auto-detection doesn’t apply the correct settings (e.g. inside a monorepo), add a vercel.json to the source project root:{
"buildCommand": "npm run build",
"outputDirectory": "dist",
"framework": "vite"
}
Hash-based routing works on Vercel without any rewrite rules. The hash fragment is handled entirely in the browser — Vercel serves index.html for every request and React Router takes over from there.
Any static file host — Amazon S3, Cloudflare Pages, Azure Static Web Apps, Firebase Hosting, a plain NGINX or Apache server — can serve Cosmic Developer. The only requirement is that your host serves index.html as the default document.Clone or download the repository
Clone this repository or download a ZIP of its contents. The root of the repository is what you will upload — there is no dist/ subfolder to unpack.
Upload the repository contents
Upload the contents of the repository root to the root of your static host or bucket. The structure on the server should look like this:/
├── index.html
├── .nojekyll
├── assets/
│ ├── main.js
│ └── main.css
├── components/
│ └── cosmos/
└── pages/
├── About.html
├── Projects.html
└── ...
Configure the default document
Ensure your host is configured to serve index.html as the fallback for all paths. With hash routing, this is the only file the browser will ever request from the server — the hash fragment (#/about, #/projects) is resolved entirely client-side.
The pages/ stubs (e.g. pages/About.html) are pre-rendered HTML files that set window.__STATIC_PAGE_ROUTE__ and redirect to the correct hash route on load. They enable users to bookmark or share direct deep-link URLs on hosts that support per-file routing (e.g. yoursite.com/pages/About.html), but are not required on hosts that support wildcard fallback to index.html.
How Hash Routing Works on Static Hosts
Cosmic Developer uses React Router’s HashRouter, which prefixes all client-side routes with a # symbol — for example /#/about, /#/projects, /#/skills. This design choice makes the portfolio compatible with every static host without any server-side configuration.
When a visitor navigates to https://yoursite.com/#/about, the browser sends a request for https://yoursite.com/ to the server. The #/about fragment is never transmitted to the server — it stays in the browser. The server returns index.html, React mounts, and React Router reads window.location.hash to render the correct page.
Browser → requests: https://yoursite.com/ (hash fragment stays local)
Server → returns: index.html
React → reads: window.location.hash = "#/about"
Router → renders: <About /> component
_redirects files, or try_files directives — the hash handles everything client-side.
Google Fonts Dependency
Cosmic Developer loads three typefaces — Inter, JetBrains Mono, and Space Grotesk — via a CSS @import baked into assets/main.css:
@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;700&family=Space+Grotesk:wght@400;600;700&display=swap";
If you are deploying to a restricted or air-gapped environment where outbound internet access is blocked, the custom typefaces will not load and the visual design will degrade. To fix this, you will need to work from the source project: download the font files from Google Fonts, add them to the public/ folder, replace the @import in the source main.css with self-hosted @font-face declarations, and rebuild with npm run build.