Customizing Choose Your Destiny: Colors, Content, and Fonts

Choose Your Destiny is designed to be forked and made your own. The retro neon aesthetic is driven by CSS custom properties you can override at runtime without rebuilding anything, while deeper changes to portfolio content, fonts, and routes require the original source project. This guide covers what you can change directly on the deployed files, and what requires rebuilding from source.

1. Changing Neon Colors

All five neon accent colors and both background shades are declared as CSS custom properties on :root in assets/main.css. Every glow-*, text-glow-*, border-neon-*, and bg-neon-* utility class reads from these variables at runtime.

/* assets/main.css — :root block */
:root {
  --neon-magenta: #ec4899;
  --neon-cyan:    #22d3ee;
  --neon-purple:  #a855f7;
  --neon-lime:    #a3e635;
  --neon-orange:  #fb923c;
  --bg-dark:      #050505;
  --bg-panel:     #0a0a0a;
}

Each variable is used consistently across the app:

Variable	Default value	Used by
`--neon-magenta`	`#ec4899`	About page, Contact page, nav P1
`--neon-cyan`	`#22d3ee`	Home cards, scrollbar, general accents
`--neon-purple`	`#a855f7`	Skills page, comm channels
`--neon-lime`	`#a3e635`	Status indicator, cursor, special attacks
`--neon-orange`	`#fb923c`	Writing page, tools skill group
`--bg-dark`	`#050505`	Main page background
`--bg-panel`	`#0a0a0a`	Card and panel backgrounds

You can override colors without touching the compiled main.css at all. Create a separate overrides.css file and load it after main.css in your HTML shells. CSS custom properties cascade, so a later :root block will override the values in main.css:

/* overrides.css */
:root {
  --neon-cyan:  #00ffe0;  /* teal instead of sky-blue */
  --neon-lime:  #39ff14;  /* brighter neon green */
}

<!-- In index.html / pages/*.html — add after the existing link tag -->
<link rel="stylesheet" href="./overrides.css">

This approach works directly on the deployed repository — no rebuild required.

2. Updating Portfolio Content

All page content — projects, skill levels, writing log entries, case-study stages, and about text — is defined as static data arrays in the original React source files. In the deployed repository these arrays are inlined into assets/main.js and cannot be edited directly in place.

This repository contains only the pre-built output. To update portfolio content you need the original source project. Edit the data arrays there, rebuild, and redeploy the output.

The data arrays in the source follow this structure:

Page	Array variable	Example fields
Projects	`ys`	`title`, `category`, `color`, `desc`, `tech`, `demoMode`
Skills	`mm`	`title`, `icon`, `color`, `skills[{name, level, note}]`
Writing	`ym`	`id`, `date`, `tag`, `title`, `excerpt`, `color`
Case Studies	`ai`	`id`, `title`, `icon`, `color`, `hp`, `desc`

For example, a project entry in the source looks like:

// In the Projects page source (variable ys)
{
  id: 5,
  title: "GHOST_SIGNAL",
  category: "FULLSTACK",
  color: "purple",
  image: "https://images.unsplash.com/photo-XXXXXXX",
  desc: "Real-time encrypted messaging with a cyberpunk twist.",
  tech: ["Next.js", "WebSockets", "Redis"],
  demoMode: true,
}

3. Changing Fonts

The four Google Fonts families are loaded via a single @import at the very top of assets/main.css:

@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800
  &family=JetBrains+Mono:wght@400;700
  &family=Press+Start+2P
  &family=VT323
  &display=swap";

These font families are mapped to utility classes that are compiled into assets/main.css:

Utility class	Font family	Used for
`font-arcade`	Press Start 2P	Page headings, logo, arcade titles
`font-terminal`	VT323	Navigation, labels, UI chrome
`font-code`	JetBrains Mono	Code snippets, descriptions
`font-sans`	Inter	Body text

To swap a font without rebuilding, you can override the @import by adding a second stylesheet after main.css in your HTML shells. Update the Google Fonts URL for your chosen family, then use a CSS rule to re-declare the font-family for the relevant CSS class or element selector. For a full font substitution across all utility classes, updating the source and rebuilding is the cleaner approach.

4. Section Color Themes

Each page component passes a color prop to NeonCard (Eu) and NeonButton (Lu) components. The color determines which --neon-* variable is used for borders, glows, and text highlights throughout that page.

// Home page — cyan cards, navigation uses per-route colors
<NeonCard color="cyan" hover onClick={() => navigate(path)}>

To change a page’s accent color in the source, update the color prop on its top-level NeonCard and the color value on any PageHeader component in that page.

5. Deploying to a Static Host

The repository is a fully self-contained static site ready to deploy. Upload the directory contents to any static host. The .nojekyll file at the root tells GitHub Pages not to run the output through Jekyll, which would otherwise strip files and directories whose names start with an underscore.

GitHub Pages
Netlify
Vercel

Best for: Personal portfolios hosted at username.github.io/repo-name

Push the repository

Push your repository to GitHub. The files at the repo root (including index.html and .nojekyll) should be at the top level of the branch you deploy from.

Configure GitHub Pages

In your repository settings, go to Pages and set the source to the branch and folder containing your files. The .nojekyll file must be present — it prevents Jekyll from interfering with assets/ and other directories.

Verify the base URL

If your repo is not at the root (e.g. username.github.io/choose-your-destiny), the hash-based routing still works — all navigation is in the fragment and requires no server path configuration.

Note: No redirect rules are needed — HashRouter handles all navigation in the fragment. The .nojekyll file ensures assets/ and other directories are served correctly.

Best for: Instant previews, form handling, and custom domains

Connect your repo

In the Netlify dashboard, click Add new site → Import an existing project and select your GitHub repository.

Set publish settings

Set the publish directory to / (the repo root) and leave the build command blank — the site is already built.

Deploy

Netlify will publish the repository contents automatically on every push to your default branch. No _redirects file is needed because HashRouter handles routing client-side.

Note: Netlify deploys the .nojekyll file harmlessly — it has no effect outside GitHub Pages.

Best for: Zero-config deploys with automatic preview URLs per branch

Import the project

In the Vercel dashboard, click Add New → Project and import your GitHub repository.

Set the framework to Other

Because there is no package.json or build step, select Other as the framework preset and set the output directory to / (the repo root). Leave the build command blank.

Deploy

Vercel publishes on every push. Branch pushes get unique preview URLs automatically.

Note: No vercel.json or redirect configuration is required for this project because all routing is handled by HashRouter in the browser.

Host Comparison

Feature	GitHub Pages	Netlify	Vercel
Cost (static sites)	Free	Free tier	Free tier
Requires `.nojekyll`	✅ Yes	No	No
Requires redirect rules	No	No	No
Custom domain	✅	✅	✅
Preview deployments per branch	❌	✅	✅
Build minutes included	2 000/mo	300/mo	100/mo
CDN / edge distribution	Limited	Global CDN	Global Edge

Overview

Portfolio Sections

Design System

Technical Reference

Customizing Choose Your Destiny: Colors, Content, and Fonts

1. Changing Neon Colors

2. Updating Portfolio Content

3. Changing Fonts

4. Section Color Themes

5. Deploying to a Static Host

Host Comparison

Build docs developers (and LLMs) love

Overview

Portfolio Sections

Design System

Technical Reference

Documentation Index

​1. Changing Neon Colors

​2. Updating Portfolio Content

​3. Changing Fonts

​4. Section Color Themes

​5. Deploying to a Static Host

​Host Comparison

Build docs developers (and LLMs) love

1. Changing Neon Colors

2. Updating Portfolio Content

3. Changing Fonts

4. Section Color Themes

5. Deploying to a Static Host

Host Comparison