Skip to main content

Documentation Index

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

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

Dark Retro Webpage is a Vite + React 18 static site. The repository contains the pre-built output alongside the original component source, so you can run the site immediately after cloning or modify the source and rebuild. This guide walks you through every step from cloning to a live deployment.

​
Local Setup

1

Clone the repository

Pull the repo from GitHub and move into the project directory:
git clone https://github.com/apursley2012/dark-retro-webpage.git
cd dark-retro-webpage
2

Install dependencies

Install the Node dependencies with your preferred package manager. These commands apply when working from the original Vite source project (the published repository is the pre-built static output and does not include a package.json):
npm install
3

Start the development server

Launch Vite’s dev server with hot module replacement (requires the original Vite source project with a package.json):
npm run dev
Vite will start at http://localhost:5173 by default and print the exact URL to the terminal. Changes to components or styles reload the browser instantly.
4

Open the site in your browser

Navigate to the home route in your browser:
http://localhost:5173/#/
The #/ prefix is required — the site uses hash-based routing, so all routes live under the hash fragment rather than as server paths.
Dark Retro Webpage uses React Router configured with a hash history, meaning every route is prefixed with /#/. The full list of routes is: /#/, /#/about, /#/projects, /#/skills, /#/writing, /#/case-studies, and /#/contact. Because routing happens entirely client-side via the URL hash, no server-side rewrite rules are needed on any static host.

​
Build for Production

Run the Vite production build to generate an optimized, minified static bundle (requires the original Vite source project with a package.json): 
npm run build
The compiled output lands in the dist/ directory. The folder is self-contained — copy its contents to any web server, CDN bucket, or static host and the site is live. The published repository is itself the pre-built output, so you can also deploy directly from the repo root without running a build step.
To preview the production build locally before deploying, run npm run preview. Vite starts a local HTTP server serving the dist/ output at http://localhost:4173.

​
Project Structure

The repository is the pre-built static output of the Vite project. The key files and directories are: 
dark-retro-webpage/
├── index.html           # Entry point with hash routing init
├── .nojekyll            # Prevents GitHub Pages Jekyll processing
├── canvas.manifest.js   # Canvas/preload manifest
├── useScreenInit.js     # React + dependencies bundle
├── assets/
│   ├── main.js          # Bundled React app
│   ├── main.css         # Tailwind + custom retro CSS
│   └── jsx-runtime.js
├── components/
│   ├── Win98Window.js   # Bevel window component
│   └── Marquee.js       # Animated ticker component
└── pages/               # Per-route static HTML shells
    ├── Home.html
    ├── About.html
    ├── Projects.html
    ├── Skills.html
    ├── Writing.html
    ├── CaseStudies.html
    └── Contact.html
  • index.html — The root HTML shell. Includes a small inline script that redirects bare-path requests to the #/ hash so the router initializes correctly on first load.
  • .nojekyll — Empty file that prevents GitHub Pages from running Jekyll processing on the Vite output.
  • canvas.manifest.js — Preload manifest used by the bundler to declare module dependencies for the canvas entry.
  • useScreenInit.js — The React 18 runtime and shared dependencies (Framer Motion, React Router) extracted into a separate module for preloading.
  • assets/main.js — The full bundled React application, including all page components, routing logic, and Framer Motion.
  • assets/main.css — The Tailwind CSS output plus all custom retro tokens, .bevel-* classes, .crt-overlay, and Google Fonts imports.
  • components/Win98Window.js and components/Marquee.js — The two reusable UI components, shipped as ES modules so they can be imported independently if needed.
  • pages/ — Static HTML shells for each route. Each file mirrors index.html but sets window.__STATIC_PAGE_ROUTE__ to its own path so server-side prerendering metadata is accurate.

​
Deploying

The dist/ build output (or the repo root itself, since it is already the built site) can be deployed to any static hosting service.

​
GitHub Pages

Push the repo to a GitHub repository and enable Pages from the repository Settings → Pages menu. Set the source to the branch containing the built files (e.g. main) and the root directory /. The .nojekyll file in the repo root is already present to prevent Jekyll from interfering with the Vite output. 
# If deploying from the repo root (already-built site):
git push origin main
# Then enable GitHub Pages in repo settings → Pages

​
Netlify

Drag the repo root folder into the Netlify dashboard, or connect the repository. If deploying from the pre-built repo root directly, leave the build command blank and set the publish directory to /. If building from the original Vite source, set:
SettingValue
Build commandnpm run build
Publish directorydist
Because all routing is hash-based, no _redirects file or redirect rules are needed.

​
Vercel

Import the repository in the Vercel dashboard. Vercel auto-detects Vite and sets the correct build command and output directory. No additional configuration is required for hash routing.

​
Troubleshooting

This only occurs if you are not using hash-based URLs. Make sure you are visiting http://localhost:5173/#/about and not http://localhost:5173/about. All routes must include the #/ prefix. If you are on a custom host, ensure you are accessing the root index.html — the site does not need or use server-side routing.
Ensure assets/main.css is being served and loaded. In development, Vite injects styles via HMR; in production, the <link> tag in index.html loads ./assets/main.css via a relative path. If you move index.html out of the project root, update the asset paths accordingly. Also confirm your browser is not blocking Google Fonts requests, as the three typefaces (Press Start 2P, DM Mono, Space Grotesk) are loaded from fonts.googleapis.com.
Framer Motion respects the operating system’s prefers-reduced-motion setting. If you have reduced motion enabled in your OS accessibility settings, animations will be disabled automatically. To test animations regardless of this setting, temporarily override the media query in DevTools or disable reduced motion in your OS preferences.

Build docs developers (and LLMs) love

Get started for freeTalk to us