Choose Your Destiny is a single-page application that reimagines the developer portfolio as an interactive arcade experience. Instead of a conventional resume-style layout, it wraps your work history, projects, skills, and writing in a neon-lit cyberpunk shell complete with CRT scanlines, glitch-text animations, and a perspective grid that scrolls endlessly beneath every page. The result is a portfolio that feels less like a document and more like a game you inhabit.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.
Design Philosophy
Three principles drive every visual decision in Choose Your Destiny: Gamified storytelling. Navigation feels like progressing through levels. Each section of the portfolio is its own “screen” mapped to a canvas manifest, letting you jump between destinations the way a player warps between stages. Retro arcade aesthetics. Typography is pulled directly from the arcade era — pixel fonts, phosphor-green terminal text, and chunky monospace code blocks. Layouts lean into grids and scanlines rather than away from them. CRT visual effects. A fixedScanlineOverlay component (20 % opacity, pointer-events-none) sits above the entire app. A PerspectiveGrid component tiles an infinite vanishing-point grid at the bottom of every viewport. GlitchText uses CSS clip animations on ::before / ::after pseudo-elements to split and offset headlines in magenta and cyan.
Neon Color Palette
All accent colors are registered as CSS custom properties on:root in assets/main.css and are available throughout both the Tailwind utility layer and plain CSS:
| Token | Variable | Hex |
|---|---|---|
| Cyan | --neon-cyan | #22d3ee |
| Magenta | --neon-magenta | #ec4899 |
| Purple | --neon-purple | #a855f7 |
| Lime | --neon-lime | #a3e635 |
| Orange | --neon-orange | #fb923c |
.glow-{color} utility class that applies a box-shadow outer glow and inset tint, and a .text-glow-{color} class for text shadows.
Typography Stack
| Role | Font Family | Usage |
|---|---|---|
| Arcade headings | Press Start 2P | Hero titles, section headers, navigation labels |
| Terminal / body display | VT323 | Button labels, tag text, large decorative copy |
| Code blocks | JetBrains Mono | Inline code, skill badges, terminal output |
| Body prose | Inter | Paragraphs, descriptions, form fields |
@import in assets/main.css.
The Seven Portfolio Sections
The app defines seven screens incanvas.manifest.js, each with a hash-based route path and a corresponding static HTML shell in the pages/ directory:
| Section | Route | Purpose |
|---|---|---|
| Home | / | Hero screen, animated intro, primary CTA |
| About | /about | Bio, timeline, personal narrative |
| Projects | /projects | Featured work with live links and stack tags |
| Skills | /skills | Categorized technology grid |
| Writing | /writing | Blog posts and articles index |
| Case Studies | /case-studies | Deep-dive project breakdowns |
| Contact | /contact | Contact form and social links |
Choose Your Destiny uses hash-based routing. All URLs take the form
https://your-domain.com/#/about rather than https://your-domain.com/about. Each static HTML shell runs a small inline script on load that redirects bare pathnames to their #/ equivalent, so direct links and refreshes still resolve correctly without any server configuration.Tech Stack
React 18 + Vite
The app was built with Vite. The compiled React runtime and JSX transform (
jsx-runtime.js) ship as pre-built ES modules inside assets/, keeping the bundle lean and dependency-free for end users.Framer Motion
Every interactive surface —
NeonCard, NeonButton, route transitions — is wrapped in a Framer Motion motion.div. Version 11 is bundled inside assets/main.js.Tailwind CSS
Utility classes are compiled into the full Tailwind base shipped in
assets/main.css. Custom neon color tokens and .glow-* helpers extend the default palette via @layer and :root blocks.Hash Router
React Router operates in hash mode. The
canvas.manifest.js file maps seven logical screen IDs to route paths and canvas positions, enabling the useScreenInit hook to resolve the active screen from a ?mp_screen= query parameter.UI Component Library
components/UIComponents.js exports the core building blocks:
NeonCard— A dark-panel card with corner bracket accents, configurable glow color (cyan,magenta,lime,purple,orange), optional hover lift animation, and anonClickhandler.NeonButton— A terminal-styled<button>with a neon border, hover background fill, press-down translate, and Framer Motion tap feedback.TerminalLine— A pre-formatted output line with a blinking cursor, used to render step-by-step “typed” content.BlinkingCursor— A standalone_character animated with the.blinking-cursorCSS class (1 s step-end loop).
components/VisualEffects.js exports the ambient layer:
ScanlineOverlay— Fixed full-screen div with the.scanlinesbackground pattern at 20 % opacity.CRTFlicker— Fixed full-screen div with the.crt-flickeropacity animation (subtle 4 s ease-in-out loop).PerspectiveGrid— A bottom-anchored 40 vh div with a CSSperspective(500px) rotateX(60deg)grid that animatesbackground-positionto simulate infinite forward motion.GlitchText— Wraps any heading in the.glitch-wrapper/.glitch-textpattern; acceptstext,className, andasprops to control the rendered HTML element.