Skip to main content

Documentation Index

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

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

Getting witch-dev running on your machine is intentionally frictionless. Because the entire portfolio is a static client-side React application with no back-end services, database connections, or environment secrets required, you can go from zero to a fully animated, particle-filled local preview in the time it takes to brew a coffee.

​
Prerequisites

Before you begin, make sure the following tools are installed:
  • Node.js 18 or later — witch-dev uses Vite 5 and React 18, both of which require a modern Node runtime. Check your version with node -v.
  • npm 9 or later — ships bundled with Node 18+. Verify with npm -v.
  • Git — needed to clone the repository. Any recent version works.

​
Setup

1

Clone the repository

Clone the witch-dev repository to your local machine:
git clone https://github.com/apursley2012/witch-dev.git
cd witch-dev
This downloads the full project including the pre-built Vite bundles in assets/ and the component source files in components/.
2

Install dependencies

Install all npm dependencies defined in package.json:
npm install
The install pulls in React 18.3.1, Vite, Framer Motion, React Router, Tailwind CSS, and Lucide React — the complete stack that powers the portfolio.
3

Start the development server

Launch the Vite dev server:
npm run dev
Vite starts on http://localhost:5173 by default and opens the portfolio in your browser. You’ll immediately see:
  • A near-black (#0a0612) background with 40 glowing green particles drifting upward and animated purple fog blobs softly pulsing behind the content
  • A green cursor glow and a trailing stream of purple particles following your mouse across the screen
  • The fixed left-side navigation bar with icon-only links and hover tooltips showing the occult labels (Summon, Origins, Grimoire, Affinities, Scrolls, Raven)
  • The Home page typewriter animation spelling out Alysha’s introduction
Vite’s hot module replacement (HMR) is active in dev mode — any changes you make to files in components/ or the source behind assets/main.js will reflect in the browser instantly without a full page reload.
4

Explore the pages

Navigate through all six sections of the portfolio using the side navigation or by visiting the hash routes directly:
RouteHash URLOccult Label
Homehttp://localhost:5173/#/Summon
Abouthttp://localhost:5173/#/aboutOrigins
Projectshttp://localhost:5173/#/projectsGrimoire
Skillshttp://localhost:5173/#/skillsAffinities
Writing / Bloghttp://localhost:5173/#/writingScrolls
Contacthttp://localhost:5173/#/contactRaven
On mobile viewports (below Tailwind’s md breakpoint), the side nav is hidden and a hamburger button appears in the top-right corner. Tapping it opens a full-screen animated overlay with staggered entry animations for each link.

​
Customizing Content

witch-dev ships as a compiled Vite build. The React application logic — including all page content, project data, skills data, and writing posts — lives inside the minified assets/main.js bundle. The key areas to update when making the portfolio your own are:

Navigation labels & icons

Route paths, occult labels, and Lucide icons are driven by the ua array in the source project’s Navigation component. Like all other component files, components/Navigation.js in the deployed output is compiled code — update the source and rebuild with npm run build to change them.

Projects list

The projects carousel data array is compiled into assets/main.js. To update your projects, edit the source data before rebuilding with npm run build.

Skills & proficiency levels

The radar chart data for the Affinities page (skill names and numeric levels) is also bundled in assets/main.js. Update the source array and rebuild to change what appears on the chart.

Writing posts

Blog/writing entries shown on the Scrolls page are stored as a data array in the bundle. Add, remove, or edit entries in the source and rebuild.

​
Navigation Routes Array

The navigation is driven by the ua array in the compiled components/Navigation.js. In readable form, each entry maps a path to an occult label and a Lucide icon: 
// readable form — compiled as `ua=[...]` in the deployed output
const ua = [
  { path: "/",         label: "Summon",     icon: rh },  // hexagon icon
  { path: "/about",    label: "Origins",    icon: fh },  // sparkles icon
  { path: "/projects", label: "Grimoire",   icon: bp },  // book-open icon
  { path: "/skills",   label: "Affinities", icon: th },  // brain-circuit icon
  { path: "/writing",  label: "Scrolls",    icon: sh },  // scroll icon
  { path: "/contact",  label: "Raven",      icon: ih }   // mail icon
]
This array is iterated twice — once for the desktop sidebar links and once for the mobile full-screen overlay. Changing a label or icon in the source and rebuilding updates both breakpoints simultaneously.

​
Hash-Based Routing

witch-dev uses React Router’s HashRouter, which prepends # to every route. This means:
  • The Home page lives at /#/ rather than /
  • The About page lives at /#/about rather than /about
  • And so on for all six routes
The index.html entry file includes a small bootstrap script that redirects any bare URL (no hash) to /#/ on first load: 
(function () {
  if (!window.location.hash || window.location.hash === "#") {
    window.location.replace(
      window.location.pathname +
      window.location.search +
      "#/"
    );
  }
})();
Hash routing is what enables zero-configuration static hosting. GitHub Pages, Netlify, Vercel, and any CDN-backed static host can serve the portfolio without needing server-side URL rewrites, because the hash fragment is never sent to the server.

​
Building for Production

When you’re ready to deploy, generate an optimised production build: 
npm run build
The output lands in the dist/ directory. You can preview the production build locally before deploying with npm run preview, which spins up a lightweight static server pointing at dist/. The preview will also use hash routing, so all six routes will work correctly without any additional server configuration.

Build docs developers (and LLMs) love

Get started for freeTalk to us