Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/webmaster/llms.txt

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

Webmaster is a Vite-powered React SPA. Getting it running locally takes one git clone, one install command, and one dev server command — the whole thing is up in under five minutes. The steps below assume you’re working from the original Vite source project.
The public repository ships pre-compiled static assets — assets/main.js, assets/main.css, and all components/*.js files are already built and can be served directly from any static host without a build step. The npm install / npm run dev workflow below applies when working from the original Vite development source (with package.json and src/). If you just want to host the site, skip to serving index.html directly.

​
Prerequisites

  • Node.js 18 or later — Vite 5 requires Node 18+. Run node -v to check your version.
  • npm (bundled with Node) — yarn and pnpm work too; see the install variants below.
1

Clone the Repository

Clone the Webmaster repo from GitHub and enter the project directory:
git clone https://github.com/apursley2012/webmaster
cd webmaster
The repository root contains index.html, the pre-built assets/ directory, components/, and pages/. The Vite source files (if present) live in the project root alongside the build output.
2

Install Dependencies

Install all npm dependencies. Webmaster’s production dependencies include React 18, React Router v6, Framer Motion, and Tailwind CSS.
npm install
If you see peer dependency warnings related to React 18 and Framer Motion, you can safely ignore them — Framer Motion fully supports React 18’s concurrent rendering model.
3

Start the Development Server

Launch the Vite dev server. Vite performs instant cold starts and serves the app with hot module replacement (HMR):
npm run dev
Vite will output something like:
  VITE v5.x.x  ready in 312 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
Open http://localhost:5173 in your browser. You’ll be greeted by:
  • A teal background (#008080) with the subtle turquoise crosshatch grid pattern
  • A rainbow ~*~ WELCOME ~*~ heading rendered in Pacifico, animated with the rainbow-bg keyframe
  • A sticky pixel navigation bar (RetroNav) at the top with links styled in VT323 font
  • A MarqueeStrip scrolling lemon-yellow text across a black band bordered in hot-pink
  • A sparkle cursor — move your mouse and ✦ glyphs burst outward in pink, turquoise, and lemon
  • A VisitorCounter LED display that ticks up from 001336 after 1.5 seconds
4

Build for Production

Compile the app into optimised static files:
npm run build
Vite bundles everything into an output directory (typically dist/), producing a structure equivalent to what already exists in the repository root:
├── index.html
├── assets/
│   ├── main.js           # Bundled React app
│   ├── main.css          # Tailwind + custom CSS
│   └── jsx-runtime.js
└── components/
    └── *.js              # Pre-loaded ES module components
The output is fully static — no Node.js server is required to host it. Drop the build output onto any static host (GitHub Pages, Netlify, Vercel, or an S3 bucket).
5

Preview the Production Build

Before deploying, verify the production build locally using Vite’s built-in preview server:
npm run preview
The preview server starts at http://localhost:4173 and serves the built files exactly as they will appear in production — including the client-side routing behaviour and all static asset paths.

​
Navigating the App

Once the dev server is running, all nine routes are available:
PathPage
/Home — welcome banner, visitor counter, webring badges
/aboutAbout — personal bio section
/skillsSkills — technology stack display
/projectsProjects — portfolio project cards
/workWork — professional experience
/casestudiesCase Studies — detailed project writeups
/blogBlog — article listing
/contactContact — contact form
/testimonialsTestimonials — social proof section
Every route change is animated via the PageTransition component, which wraps Framer Motion’s AnimatePresence around each page to produce a smooth fade-and-slide entrance.
Look for the “Best viewed at 800×600” easter egg in the site footer — a nod to the era when web designers included browser and resolution recommendations on every page. Resize your browser window to a narrow viewport to find it.

​
Troubleshooting

If the sparkle cursor effect does not appear, check whether your OS or browser has “Reduce motion” enabled in accessibility settings. SparkleCursor reads the prefers-reduced-motion media query and disables all particle effects when it is set to reduce.
If port 5173 is already in use, Vite will automatically try the next available port (5174, 5175, etc.) and print the actual URL in the terminal output.

Build docs developers (and LLMs) love

Get started for freeTalk to us