Skip to main content

Documentation Index

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

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

NeonRetro Sys_Admin is a pure client-side single-page application. There is no server, no database, and no backend — every page is rendered in the browser from the compiled JavaScript bundle. This means the entire site can be served from any static file host: a GitHub Pages repository, a Netlify site, a Vercel project, an S3 bucket, or even a basic CDN. The only step between your edited mockData.js and a live URL is a Vite build.

​
Building for production

Run the build command from the project root. Vite compiles, tree-shakes, and hashes the output into a dist/ directory that is completely self-contained. 
npm run build
# Output: dist/
The output structure mirrors the repository layout — index.html at the root, compiled code split across assets/, components/, data/, and pages/ subdirectories: 
dist/
├── index.html
├── .nojekyll
├── assets/
│   ├── main.js
│   ├── main.css
│   ├── jsx-runtime.js
│   ├── createLucideIcon.js
│   └── proxy.js
├── components/
│   ├── layout/
│   │   ├── RetroNav.js
│   │   ├── Footer.js
│   │   ├── Layout.js
│   │   ├── Marquee.js
│   │   └── CursorTrail.js
│   └── ui/
│       ├── RetroWindow.js
│       └── Sticker.js
├── data/
│   └── mockData.js
└── pages/
    ├── About.html
    ├── CaseStudies.html
    ├── Contact.html
    ├── Projects.html
    ├── Skills.html
    └── Writing.html
Every file in dist/ is safe to serve as-is. The SPA handles client-side routing internally via React Router v6.

​
GitHub Pages

1

Configure the homepage URL

In your Vite config (or package.json), set the base path to match your GitHub Pages URL so that asset references resolve correctly:
// vite.config.js
export default {
  base: '/your-repo-name/',
}
If you are deploying to a custom domain (e.g. https://yourname.github.io), set base: '/'.
2

Build the project

npm run build
3

Deploy the dist/ folder

Push the contents of dist/ to the gh-pages branch of your repository, or configure GitHub Actions to do it automatically on every push to main. A minimal workflow using the popular peaceiris/actions-gh-pages action looks like this:
# .github/workflows/deploy.yml
name: Deploy to GitHub Pages
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist
4

Enable GitHub Pages in repository settings

Go to Settings → Pages in your GitHub repository, set the source to the gh-pages branch, and save. GitHub will publish the site within a minute and show the live URL.

​
The .nojekyll file

The repository ships with a .nojekyll file at the root, which Vite copies into dist/ during the build. This file tells GitHub Pages to skip Jekyll processing entirely. It is critical for Vite projects because Vite’s output includes files and directories that start with an underscore (e.g. assets/_chunks/). Without .nojekyll, GitHub Pages would silently ignore those files and the deployed site would fail to load.

​
Netlify

1

Connect the repository

Log in to Netlify, click Add new site → Import an existing project, and authorize GitHub. Select your fork of the NeonRetro Sys_Admin repository.
2

Configure the build settings

Netlify will attempt to auto-detect the framework. Confirm or set these values manually:
SettingValue
Build commandnpm run build
Publish directorydist
Node version20 (set in Environment variables as NODE_VERSION=20)
3

Deploy

Click Deploy site. Netlify runs the build, publishes dist/, and assigns a *.netlify.app subdomain. Every subsequent push to your main branch triggers a new deploy automatically.

​
Vercel

1

Import the repository

Log in to Vercel, click Add New → Project, and import your GitHub repository.
2

Confirm the framework preset

Vercel auto-detects Vite projects. The following settings are pre-filled — confirm they are correct:
SettingValue
Framework presetVite
Build commandnpm run build
Output directorydist
3

Deploy

Click Deploy. Vercel builds the project, deploys to its global edge network, and provides a *.vercel.app URL. Git-push deployments and pull-request preview URLs are enabled by default.

​
Environment variables

No environment variables are required to build or run NeonRetro Sys_Admin. The application has no backend, no API keys, and no third-party service credentials. The only external network requests at runtime are the Google Fonts @import in main.css — and even those can be self-hosted by downloading the font files and updating the @import path if you need a fully offline-capable build.

​
Contact form

The contact / guestbook form in the portfolio is front-end only. It validates and renders submission state in the UI, but it does not send data anywhere out of the box. To actually receive messages, wire the form’s submit handler to a form backend:
  • Formspree — add a <form action="https://formspree.io/f/<your-id>"> endpoint; no server required.
  • Resend — call the Resend REST API from a lightweight serverless function on Vercel or Netlify.
  • Netlify Forms — add netlify attribute to the <form> element; Netlify captures submissions automatically with no extra code when deployed to Netlify.
Both Netlify and Vercel support drag-and-drop deployment of a pre-built dist/ folder — no Git connection required. After running npm run build locally, drag the dist/ folder onto the Netlify or Vercel dashboard to get an instant preview URL. This is useful for sharing work-in-progress with collaborators before committing to a branch.
The contact form is entirely front-end: submissions are not persisted or emailed unless you integrate a backend service. The guestbook seed entries in data/mockData.js are static display data and are not affected by form submissions. See Editing Mock Data for details on the seed entries.

Build docs developers (and LLMs) love

Get started for freeTalk to us