Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/neon-retro-web/llms.txt

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

Neon Retro Web is a single-page portfolio template that channels the visual energy of the late-1990s and early-2000s web — neon glows, CRT scanline overlays, retro OS window chrome, and blinking marquee banners — rebuilt with a fully modern React 18 stack. It exists because personal portfolio sites deserve personality: the same pixel-grid opulence of the Y2K era lives side-by-side with production-grade tooling, giving you a starting point that stands out from every minimalist card layout without sacrificing maintainability.

​
Architecture

Neon Retro Web is a Vite-bundled SPA that ships a single index.html entry point. Routing is handled by React Router v6’s HashRouter, meaning all navigation happens on the client via the URL hash (e.g. https://yoursite.com/#/about). At build time, Vite also emits a flat collection of per-page HTML files inside the /pages/ directory — one file per route — so the project works on any static host (GitHub Pages, Netlify, Cloudflare Pages) without requiring server-side redirect rules.

​
Directory Structure

neon-retro-web/
├── index.html              # Root HTML shell; bootstraps the SPA
├── assets/
│   ├── main.js             # Vite-bundled JS (React, Router, Framer Motion)
│   ├── main.css            # Compiled Tailwind output + custom utilities
│   └── createLucideIcon.js # Bundled Lucide icon helper (module-preloaded)
├── components/
│   ├── RetroElements.js    # Marquee, BadgeNew, UnderConstruction, HitCounter
│   └── Window.js           # Retro OS window chrome component
├── pages/
│   ├── Home.html
│   ├── About.html
│   ├── Projects.html
│   ├── Skills.html
│   ├── Writing.html
│   ├── CaseStudies.html
│   └── Contact.html
├── useScreenInit.js        # Screen / cursor initialisation hook
├── canvas.manifest.js      # Asset manifest consumed by the build
└── .nojekyll               # Disables Jekyll processing on GitHub Pages

​
Tech Stack

React 18

Concurrent rendering, useId, and the latest hooks. All components are function-based; no class components.

Vite

Sub-second HMR in development and an optimised production bundle with code-splitting via Rollup.

React Router v6

HashRouter + Routes / Route for fully client-side navigation. Hash-based URLs require zero server configuration.

Framer Motion

AnimatePresence wraps every route change; each page fades and scales in via motion.div with spring transitions.

Tailwind CSS

Extended with a full Y2K token set — custom colors, font families (VT323, JetBrains Mono, Space Grotesk), and bespoke utility classes.

Lucide React

Lightweight, tree-shakeable SVG icon library. Used in the Window chrome (minimize, maximize, close) and throughout the UI.

​
Design Philosophy

The aesthetic is unapologetically Y2K. Every design decision is rooted in the visual language of the late-1990s to early-2000s web:
  • Deep-space backgrounds — the base canvas (#05050d) mimics a powered-off CRT, dark enough to make neon colors vibrate.
  • Neon palette — a curated set of electric tones (teal, turquoise, magenta, lime, violet, orange) applied through Tailwind tokens so every component speaks the same visual language.
  • CRT scanline overlay — the .crt-overlay utility adds a pseudo-element with an alternating horizontal scanline gradient and a subtle RGB fringe, recreating the phosphor-dot texture of period monitors.
  • Retro OS window chrome — the Window component wraps page content in a panel with a teal title bar, bevelled minimize/maximize/close buttons, and a scrollbar-retro track that matches the neon palette.
  • Motion as decoration — Framer Motion page transitions use a spring (stiffness: 300, damping: 25) that feels snappy rather than cinematic, matching the immediacy of the era.
  • Pixel typography — VT323 (a pixel/bitmap display face) is used for all headings; JetBrains Mono for code and data; Space Grotesk for body copy.

​
Routes

PathPageBuild Output
/Homepages/Home.html
/aboutAboutpages/About.html
/projectsProjectspages/Projects.html
/skillsSkillspages/Skills.html
/writingWritingpages/Writing.html
/case-studiesCase Studiespages/CaseStudies.html
/contactContactpages/Contact.html
Hash-based routing means users navigate to https://yoursite.com/#/projects, not /projects. This is intentional: the hash fragment is handled entirely by the browser, so the server always serves the same index.html regardless of which route is requested.

​
Custom Tailwind Color Tokens

The entire neon palette is registered as named Tailwind tokens so you can use them in any utility class (bg-y2k-teal, border-y2k-magenta, text-y2k-lime, etc.). 
// tailwind.config equivalent — actual values extracted from compiled CSS
theme: {
  extend: {
    colors: {
      "y2k-bg":        "#05050d",  // Near-black base background
      "y2k-panel":     "#0a0a1a",  // Slightly lighter panel/card surface
      "y2k-teal":      "#06b6d4",  // Primary accent — borders, title bars, scrollbars
      "y2k-turquoise": "#22d3ee",  // Lighter teal for hover states and gradients
      "y2k-magenta":   "#ec4899",  // Hot pink — marquee bars, glows, selection highlight
      "y2k-lime":      "#a3ff12",  // Acid green — HitCounter digits, badge accents
      "y2k-violet":    "#a78bfa",  // Soft purple — gradient midpoints, window shadows
      "y2k-orange":    "#ff8c00",  // Amber — UnderConstruction warnings, alert tones
    },
  },
},

​
CSS Utility Reference

ClassEffect
.text-glow-tealDual-layer teal text-shadow glow (#06b6d4)
.text-glow-magentaDual-layer magenta text-shadow glow (#ec4899)
.crt-overlayScanline + RGB-fringe pseudo-element overlay
.scrollbar-retroTeal 16 px scrollbar with arrow buttons
.bg-dots-patternRadial-gradient dot grid (turquoise, 20 px pitch)
.animate-marqueeInfinite right-to-left translate on a 20 s loop
.animate-blinkStep-end opacity blink at 1.5 s — used by BadgeNew
.animate-spin-slowFull 360° rotation on a 4 s linear loop

Build docs developers (and LLMs) love

Get started for freeTalk to us