Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/choose-your-destiny/llms.txt

Use this file to discover all available pages before exploring further.

The visual identity of Choose Your Destiny is built entirely around the tension between deep, near-black backgrounds and five saturated neon accent colors. Every section of the site is assigned exactly one accent — a consistent signal that tells visitors where they are — while the typography system layers four distinct typefaces to reinforce the retro arcade fantasy: pixel-art headers, cathode-ray terminal labels, monospaced code blocks, and clean body copy. This page documents the complete design token set so you can reproduce any element in the project faithfully.

​
Color Palette

​
Neon Accent Colors

All five accent colors are declared as CSS custom properties on the :root element, making them available everywhere through var(--neon-*) references as well as Tailwind’s text-neon-*, border-neon-*, and bg-neon-* utilities. 
:root {
  --neon-magenta: #ec4899;
  --neon-cyan:    #22d3ee;
  --neon-purple:  #a855f7;
  --neon-lime:    #a3e635;
  --neon-orange:  #fb923c;
}

​
Background Colors

Two background shades produce the layered depth that makes neon elements pop. The main page canvas sits at near-absolute black, while panels and cards step one shade lighter. 
:root {
  --bg-dark:  #050505; /* body background, full-page canvas */
  --bg-panel: #0a0a0a; /* NeonCard fill, sidebar panels     */
}
A third tone — rgb(23 23 23) — is available as the Tailwind class bg-dark-lighter (and border-dark-lighter) for subtle borders and separators between dark surfaces.

​
Section-to-Color Mapping

Each route in the portfolio has a canonical accent color. Use these when you need to match a section’s glow, borders, or interactive states.
SectionAccentCSS VariableHex
HomeCyan--neon-cyan#22d3ee
AboutMagenta--neon-magenta#ec4899
ProjectsPurple--neon-purple#a855f7
SkillsLime--neon-lime#a3e635
WritingOrange--neon-orange#fb923c
Case StudiesCyan--neon-cyan#22d3ee
ContactMagenta--neon-magenta#ec4899

​
Typography

​
Font Families

Four typefaces are loaded from Google Fonts and exposed as Tailwind utility classes. Each is reserved for a specific layer of the UI — mixing them outside of their intended roles will break the aesthetic. 
/* Tailwind utility → CSS font-family */
.font-arcade    { font-family: 'Press Start 2P', cursive; }
.font-terminal  { font-family: VT323, monospace; }
.font-code      { font-family: JetBrains Mono, monospace; }
.font-sans      { font-family: Inter, sans-serif; }
ClassTypefaceWeights loadedIntended use
.font-arcadePress Start 2P400Section headers, GlitchText titles, hero displays
.font-terminalVT323400Nav items, UI labels, stat readouts, button text
.font-codeJetBrains Mono400, 700Inline code, form labels, terminal log entries
.font-sansInter400, 600, 800Body copy, project descriptions, prose paragraphs

​
Google Fonts Import

The stylesheet imports all four families in a single request at the very top of main.css, before any Tailwind directives: 
@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";
The display=swap parameter ensures text remains visible during font loading using system fallbacks, then swaps in the custom faces once they arrive.

​
Neon Glow Utilities

​
Box-Shadow Glow Classes

These classes apply a two-layer neon box shadow — one outer diffuse glow and one inner inset — plus set border-color to match. They are primarily used on NeonCard and interactive widgets. 
.glow-magenta {
  box-shadow: 0 0 10px var(--neon-magenta), inset 0 0 10px #ec489933;
  border-color: var(--neon-magenta);
}
.glow-cyan {
  box-shadow: 0 0 10px var(--neon-cyan), inset 0 0 10px #22d3ee33;
  border-color: var(--neon-cyan);
}
.glow-lime {
  box-shadow: 0 0 10px var(--neon-lime), inset 0 0 10px #a3e63533;
  border-color: var(--neon-lime);
}
.glow-purple {
  box-shadow: 0 0 10px var(--neon-purple), inset 0 0 10px #a855f733;
  border-color: var(--neon-purple);
}
.glow-orange {
  box-shadow: 0 0 10px var(--neon-orange), inset 0 0 10px #fb923c33;
  border-color: var(--neon-orange);
}

​
Text-Shadow Glow Classes

Three text-glow classes are available for headings and labels that need luminous prominence without a surrounding border. 
.text-glow-magenta { text-shadow: 0 0 8px var(--neon-magenta); }
.text-glow-cyan    { text-shadow: 0 0 8px var(--neon-cyan); }
.text-glow-lime    { text-shadow: 0 0 8px var(--neon-lime); }
The full palette is also available as Tailwind color utilities — text-neon-cyan, border-neon-orange, bg-neon-lime, and so on — so you can compose neon accents directly in JSX className strings without writing custom CSS. For interactive hover states, combine them with Tailwind’s hover modifier: hover:border-neon-purple, hover:text-neon-cyan.

​
Scrollbar Styling

The custom scrollbar reinforces the cyberpunk palette. The thumb inherits the --neon-cyan border and transitions to a solid cyan fill on hover, making even scrolling feel intentional. 
::-webkit-scrollbar       { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-dark); border-left: 1px solid #333; }
::-webkit-scrollbar-thumb { background: #333; border: 1px solid var(--neon-cyan); }
::-webkit-scrollbar-thumb:hover { background: var(--neon-cyan); }

​
Text Selection

The global text selection color is overridden to magenta with white text, turning every highlighted passage into a neon accent moment: 
.selection\:bg-neon-magenta ::selection { background-color: #ec4899; }
.selection\:text-white      ::selection { color: #ffffff; }

Build docs developers (and LLMs) love

Get started for freeTalk to us