Skip to main content

Documentation Index

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

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

Getting y2k-web running on your machine takes less than five minutes. The project has no backend — it is a fully static React 18 SPA bundled by Vite — so all you need is Node.js, a package manager, and a terminal. Follow the steps below to go from zero to a glowing retro portfolio in your browser.
1

Prerequisites

Make sure the following are installed before you begin:
  • Node.js 18 or later — Vite 5 and Framer Motion 11 both require Node 18+. Check your version with:
node --version
  • Git — needed to clone the repository. Verify with:
git --version
If you need to manage multiple Node versions, nvm or fnm are both excellent choices. Run nvm use 18 (or nvm install 18) to switch to a compatible version.
2

Clone the repository

Clone the repository from GitHub and change into the project directory:
git clone https://github.com/apursley2012/y2k-web.git && cd y2k-web
The repository includes the pre-built assets/ output, the components/ source files, and the pages/ static HTML shells — everything you need is already in the repo.
3

Install dependencies

Install all project dependencies using your preferred package manager:
npm install
This installs React 18, React Router, Framer Motion 11, Tailwind CSS, Vite, and all their transitive dependencies into node_modules/.
4

Start the development server

Launch the Vite dev server with hot-module replacement:
npm run dev
Vite will start and print a local URL to your terminal. Open it in your browser:
➜  Local:   http://localhost:5173/
y2k-web uses hash-based routing, so all routes are accessed via the # fragment — for example http://localhost:5173/#/about or http://localhost:5173/#/projects. This means the Vite dev server serves a single index.html entry point and React Router handles everything after the # entirely in the browser.
5

Build for production

When you are ready to deploy, generate an optimised production bundle:
npm run build
Vite compiles and minifies the entire application into the dist/ directory. The output includes:
  • dist/assets/main.js — the bundled and tree-shaken JavaScript
  • dist/assets/main.css — the compiled Tailwind stylesheet
  • dist/index.html — the root entry point
  • dist/pages/ — the static HTML shells for each hash route
6

Preview the production build

Before deploying, you can serve the dist/ output locally to verify everything looks correct:
npm run preview
Vite’s preview server starts on port 4173 by default:
➜  Local:   http://localhost:4173/
This is the same bundle that will be served in production — a great final sanity-check before pushing to GitHub Pages or any other static host.

​
Your first customization

The most common first edit is updating the navigation links to reflect your own page labels or to add a new route. The navbar is driven by a simple array of { path, label } objects defined in the application source. Here is the full nav items array as it ships: 
const navItems = [
  { path: '/',            label: 'Home'          },
  { path: '/about',       label: 'About Me'      },
  { path: '/projects',    label: 'Projects'      },
  { path: '/work',        label: 'Resume'        },
  { path: '/case-studies',label: 'Case Studies'  },
  { path: '/blog',        label: 'Blog'          },
  { path: '/testimonials',label: 'Testimonials'  },
  { path: '/contact',     label: 'Contact'       },
];
To rename a link — for example, changing "Resume" to "CV" — update the corresponding label value: 
{ path: '/work', label: 'CV' },
To add a brand-new page (e.g. /photography):
  1. Add an entry to the array:
{ path: '/photography', label: 'Photography' },
  1. Create a corresponding component and register it with React Router alongside the existing routes.
  2. Copy one of the existing files in pages/ (for example pages/About.html) and update the injected window.__STATIC_PAGE_ROUTE__ value and hash redirect to match your new path: 
<script>
  window.__STATIC_PAGE_ROUTE__ = "/photography";
  if (!window.location.hash || window.location.hash === "#/" || window.location.hash === "#") {
    window.location.hash = "/photography";
  }
</script>
y2k-web uses hash-based routing (#/about-style URLs) via React Router’s HashRouter. This is intentional — hash routing requires zero server-side configuration, which makes the site fully compatible with GitHub Pages and other static file hosts that cannot be configured to rewrite all requests to index.html.
The pages/ directory contains a dedicated HTML file for every route (e.g. pages/About.html, pages/Blog.html). Each file is a minimal shell that loads the shared Vite bundle and injects a small <script> block that sets window.location.hash to the correct route before React mounts. This lets visitors bookmark or share direct deep-links (like https://yoursite.com/pages/About.html) and land on the right page rather than being dropped at the root. When adding a new route, always create its corresponding file in pages/ to support direct linking.

Build docs developers (and LLMs) love

Get started for freeTalk to us