Skip to main content

Documentation Index

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

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

This page walks you through everything you need to go from zero to a fully running Sorcerer portfolio on your local machine. You will clone the repository, install dependencies, fire up the Vite dev server, and learn exactly where to edit your personal content so the site reflects your own work and identity. The entire process takes under two minutes on a modern machine with Node.js already installed.
1

Prerequisites

Before you begin, make sure you have the following installed:
  • Node.js 18 or later — Vite and the React 18 ecosystem require Node 18+. Check your version with node -v. Download the latest LTS release from nodejs.org if needed.
  • npm (bundled with Node.js) or yarn — either package manager works. The examples in these docs use npm, but equivalent yarn and pnpm commands are provided in the CodeGroup below.
No global CLI tools, no Docker, no database setup — Sorcerer is a plain static site.
2

Clone the Repository

Clone the Sorcerer repo from GitHub and navigate into the project directory:
git clone https://github.com/apursley2012/sorcerer.git && cd sorcerer
You will land in the project root, which contains package.json, vite.config.js, tailwind.config.js, and the src/ directory where all React source lives.
3

Install Dependencies

Install all project dependencies with npm:
npm install
This pulls in React 18, React Router v6, Framer Motion, Tailwind CSS, Vite, and all supporting packages listed in package.json. Expect the install to take 20–40 seconds depending on your connection speed.
4

Start the Dev Server

Start the Vite development server:
npm run dev
Vite will compile the project and open the portfolio at http://localhost:5173. The terminal will confirm the address once the server is ready. You will see the full Sorcerer portfolio — animated cursor trail, MoonPhaseNav, and all nine pages — live in your browser.
5

Customize Your Content

All page content in Sorcerer — your name, project descriptions, listed skills, work history entries, testimonials, and blog posts — lives as plain JavaScript arrays and string literals inside the compiled source. To update any content, open assets/main.js and search for the relevant data. You will find clearly structured arrays such as project objects, skill entries, and testimonial records that you can edit directly.For example, to update your displayed name from “Alex Weaver, Full Stack Sorcerer” to your own, search main.js for the string Alex Weaver and replace it with your name. To add a new project, locate the projects array and append a new object following the same shape as the existing entries.Because Sorcerer has no CMS or database, every content change is a direct file edit — fast, version-controlled, and fully under your control.

Build for Production

When you are ready to deploy, Vite compiles and optimizes the entire site into a dist/ folder:
npm run build
The output in dist/ is a self-contained static bundle — an index.html file, the minified assets/main.js bundle, and any static assets. Upload the contents of dist/ to any static hosting provider (Netlify, Vercel, GitHub Pages, Cloudflare Pages) and your portfolio is live. To verify the production build locally before deploying, run the Vite preview server:
npm run preview
This serves the dist/ folder on a local port so you can confirm animations, routing, and assets all behave identically to the deployed version.
# Install
npm install

# Dev server
npm run dev

# Production build
npm run build

# Preview production build
npm run preview
Always run npm run preview (or the equivalent for your package manager) before pushing to production. The preview server serves the exact same static bundle your hosting provider will deliver, so it catches any asset path issues, broken routes, or animation glitches that only surface in the optimized build — not in the dev server.
Vite ships with Hot Module Replacement (HMR) enabled out of the box. While the dev server is running, any change you save to a source file is reflected in the browser instantly — without a full page reload and without losing component state. This makes iterating on content, colors, and animations exceptionally fast.

Build docs developers (and LLMs) love