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 ships as a pre-built static site — the repository you clone is the production output. There is no package.json, no src/ directory, and no build step required. You can drop the files onto any static host and your portfolio is live in minutes. This page covers how to serve the site locally for inspection, what each file does, and where to make your first personalizations.
Because this repository contains compiled output rather than source code, customizing components (React JSX, Tailwind config) requires access to the original development environment. The instructions below focus on changes you can make directly to the built files — HTML titles, inline text, and CSS token values in assets/main.css.

​
Prerequisites

Before you begin, you need:
  • Git — to clone the repository.
  • Any static file server — Python’s built-in http.server, the Live Server VS Code extension, or any host that can serve HTML files. No Node.js is required.
  • A modern browser — Chrome 112+, Firefox 113+, or Safari 16.4+. The CRT overlay and custom cursor rely on CSS pseudo-elements and mix-blend-mode: difference which are not available in legacy browsers.
The repository root contains a .nojekyll file. This empty file tells GitHub Pages to skip its default Jekyll build pipeline and serve the static files as-is. Without it, GitHub Pages would ignore any file or directory whose name begins with an underscore — potentially breaking asset loading. Do not delete this file if you plan to host on GitHub Pages.

​
Setup Steps

1

Clone the repository

Clone the project to your local machine and move into the project directory:
git clone https://github.com/apursley2012/neon-retro-web.git
cd neon-retro-web
The repository contains fully compiled, ready-to-serve static files. No install step is needed.
2

Serve the site locally

Open the project in any static file server. The simplest option with no dependencies is Python’s built-in server:
# Python 3 (available on macOS and most Linux distros by default)
python3 -m http.server 8080
Then open http://localhost:8080 in your browser. You should see the Home page with its neon glow, CRT scanline overlay, and animated page title.Alternatively, if you use VS Code, right-click index.html and choose Open with Live Server (requires the Live Server extension).
3

Update the site title

Open index.html at the repo root and change the <title> tag to your own name:
<!-- index.html -->
<title>Home | Your Name</title>
Each route also has a dedicated HTML file under /pages/. Open each one and update its <title> to match:
<!-- pages/About.html -->
<title>About | Your Name</title>
4

Make your first customization

The most impactful quick change is swapping a palette color. All Y2K color tokens are compiled into assets/main.css as Tailwind utility classes. Find the color definition you want to change — for example, to adjust the magenta accent — and do a global search-and-replace on the hex value:
/* assets/main.css — search for the hex value and replace globally */
/* Original y2k-magenta: #ec4899 */
/* Replace with your brand accent, e.g.: #ff3dac */
Because Tailwind compiles colors into every utility at build time, you must replace the hex value in every occurrence in main.css for a consistent result.To update the scrolling Marquee text, find the marquee content in the page HTML files or the compiled assets/main.js and replace the text string with your own:
<!-- Search for the marquee text content in pages/Home.html -->
YOUR NAME · DEVELOPER · DESIGNER · AVAILABLE FOR HIRE ·

​
Repository Structure

The repo contains only built output — no source files: 
neon-retro-web/
├── index.html              # Root HTML shell; bootstraps the SPA and sets route to /
├── assets/
│   ├── main.js             # Vite-bundled JS (React, Router, Framer Motion, all components)
│   ├── main.css            # Compiled Tailwind output + custom Y2K 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 (module-preloaded)
├── canvas.manifest.js      # Asset manifest consumed at runtime
└── .nojekyll               # Disables Jekyll processing on GitHub Pages

​
How Routing Works

Each HTML file in /pages/ injects window.__STATIC_PAGE_ROUTE__ with its own path and immediately redirects to the correct hash URL on load. For example, pages/About.html sets window.__STATIC_PAGE_ROUTE__ = "/about" and redirects the browser to /#/about, where React Router v6’s HashRouter takes over. 
<!-- Pattern used in every pages/*.html file -->
<script>
  window.__STATIC_PAGE_ROUTE__ = "/about";
  (function () {
    if (!window.location.hash || window.location.hash === "#") {
      window.location.replace(
        window.location.pathname + window.location.search + "#/about"
      );
    }
  })();
</script>
This means deep-linking works correctly on any static host — the server always returns a plain HTML file, and the client-side hash fragment is processed entirely by React Router. No redirect rules, _redirects files, or server configuration required.

​
Deploying to a Static Host

Because the repository is the build output, deploying is a straightforward file upload:
HostMethod
GitHub PagesPush the repo and enable Pages from the repository root (/). The .nojekyll file is already in place.
NetlifyDrag and drop the repo folder onto the Netlify dashboard, or connect the repo with publish directory set to . (root).
Cloudflare PagesConnect the repo; set build command to (empty) and output directory to ..
Any hostUpload all files — index.html, assets/, components/, pages/, useScreenInit.js, canvas.manifest.js, .nojekyll — preserving the directory structure.
Neon Retro Web ships with a custom cursor — the global cursor style is set to crosshair by default (matching the retro OS aesthetic). When a user hovers over any interactive element, a neon ring overlay appears: a 24 px circle with a #ec4899 magenta border that expands to 40 px with a semi-transparent magenta fill and a #22d3ee turquoise border, using mix-blend-mode: difference to invert colors beneath it. The cursor is driven by the .custom-cursor and .custom-cursor.hovering CSS classes in assets/main.css — adjust its size, colors, and blend mode there without touching any JavaScript.

Build docs developers (and LLMs) love

Get started for freeTalk to us