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 Home section is the first thing visitors encounter — an atmospheric cyberpunk landing screen that sets the visual tone for the entire portfolio. A large glitched title announces CHOOSE YOUR DESTINY while a perspective grid pulses beneath it in neon cyan, scanlines flicker across the full viewport, and six character-select-style navigation cards sit in the foreground waiting to be chosen. Every visual layer is deliberate: this page is meant to feel like booting into a retro arcade machine.

​
Visual Features

Glitch Title Effect

The main heading uses the GlitchText component (glitch-wrapper / glitch-text CSS classes with a data-text attribute). It renders a chromatic-aberration–style split on the letters using CSS pseudo-elements, cycling between offset states with a keyframe animation.

Perspective Grid Background

The PerspectiveGrid component renders a fixed, full-viewport grid using two overlaid CSS linear-gradient backgrounds converging toward a vanishing point. The grid color uses rgba(34, 211, 238, 0.2) — the neon-cyan accent — and sits at z-index: 0 behind all content.

CRT Scanline Overlay

Two stacked fixed-position overlays sit at z-index: 49–50: the Scanlines component adds subtle horizontal scan-line stripes at opacity: 0.20, and CRTFlicker adds a very faint white wash (opacity: 0.015) with a CSS flicker animation to simulate phosphor persistence.

Navigation Cards

Six NeonCard components, each mapped to a route, are styled as file-system entries. Labels follow the pattern PROJECTS.exe, ABOUT.txt, SKILLS.cfg, WRITING.log, CASE_STUDIES/, and CONTACT.run. Cards animate upward on hover (-translate-y-1) and glow in the section’s assigned neon color.

​
Color Theme

The Home section uses the neon-cyan (#22D3EE) color theme. The perspective grid, card borders, corner accents, and glow effects all derive from the --neon-cyan CSS custom property defined in the global stylesheet.

​
Navigation Destinations

Card LabelRouteSection Color
ABOUT.txt/aboutMagenta
PROJECTS.exe/projectsPurple
SKILLS.cfg/skillsLime/Cyan
WRITING.log/writingOrange
CASE_STUDIES//case-studiesCyan
CONTACT.run/contactMagenta

​
Component Tree

// Home page render structure (simplified from source)
<div className="flex flex-col min-h-screen relative">
  {/* CRT / scanline overlays — VisualEffects.js */}
  <Scanlines />
  <CRTFlicker />

  {/* Animated perspective grid */}
  <PerspectiveGrid color="cyan" />

  {/* Glitch hero title */}
  <GlitchText text="CHOOSE YOUR DESTINY" as="h1" />

  {/* Navigation cards */}
  <NeonCard color="cyan" hover onClick={() => navigate("/about")}>
    ABOUT.txt
  </NeonCard>
  {/* ...five more cards */}
</div>
The home route is / and the app uses hash-based routing. The static HTML page at pages/Home.html contains a bootstrap script that redirects bare URLs to #/ on load, so the canonical in-browser URL for the home view is always #/. All internal links should use the hash-prefixed form (e.g., #/about) when referenced from outside the SPA.

​
Customizing the Home Section

This is a pre-built static site — assets/main.js is a minified bundle and is not meant to be hand-edited. To customize the home section, fork or clone the original source repository, make changes to the source files, then run vite build to regenerate the bundle and redeploy.
Fork the original source repository. The glitch title is rendered by the GlitchText component defined in components/VisualEffects.js. The text prop and the data-text attribute must match for the CSS pseudo-element effect to work correctly:
// components/VisualEffects.js
const GlitchText = ({ text, className = "", as: Tag = "h1" }) =>
  <div className={`glitch-wrapper ${className}`}>
    <Tag className="glitch-text font-arcade" data-text={text}>
      {text}
    </Tag>
  </div>;
Update the text value passed in from the Home page component in the source, then rebuild with vite build.
Fork the original source repository. The navigation card array is defined inline in the Home page component source. Each entry has a label (the displayed file-system name), a path (the hash route), and a color (one of the Tailwind neon color names). Reorder or extend the array to change what appears on the home screen, then rebuild with vite build.
The perspective grid’s vanishing-point illusion depends on the container being at least 200% wide and positioned with a negative left offset. If you change the viewport layout, verify that left: -50% and width: 200% are still in effect on the inner grid element to maintain the effect.

Build docs developers (and LLMs) love

Get started for freeTalk to us