Skip to main content

Documentation Index

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

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

This guide walks you through cloning Digital Alchemy and getting a fully working local development environment running. By the end you’ll have the Vite dev server live at localhost:5173 with hot module replacement, the full Framer Motion animation system active, and the complete nine-section portfolio navigable in your browser. The only things you need beforehand are Node.js, a package manager, and Git.

​
Prerequisites

Before you begin, make sure the following are installed on your machine:
  • Node.js 18 or later — Digital Alchemy uses Vite, which requires Node 18+. Check your version with node -v.
  • A package manager — npm (bundled with Node), yarn, or pnpm all work.
  • Git — needed to clone the repository.
1

Clone the repository

Clone the Digital Alchemy repository from GitHub and move into the project directory:
git clone https://github.com/apursley2012/digital-alchemy.git && cd digital-alchemy
The repository is self-contained — the assets/, components/, pages/, and images/ directories are all committed, so the project is ready to run immediately after cloning.
2

Install dependencies

Install the project’s Node dependencies. Use whichever package manager you prefer:
npm install
This installs React 18, React Router v6, Framer Motion, Tailwind CSS, and the Vite build toolchain, along with all supporting packages declared in package.json.
3

Start the development server

Launch the Vite dev server:
npm run dev
Vite will start the server — typically at http://localhost:5173 — and print the local URL to the terminal. The dev server supports hot module replacement (HMR), so changes to component files and stylesheets are reflected in the browser instantly without a full page reload.
VITE v5.x.x  ready in Xms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
4

Open the app in your browser

Navigate to http://localhost:5173 in your browser. You will land on The Sanctum (the home page).Digital Alchemy uses React Router with hash-based routing for static deployment compatibility. All navigation is encoded in the URL hash — for example, the about page is at http://localhost:5173/#/about and the projects page is at http://localhost:5173/#/projects. This means no server-side routing configuration is needed and the app works correctly when served from any static file host, including GitHub Pages.To jump directly to any section during development, you can manually edit the hash in the browser’s address bar.

​
Project Structure

After cloning, the repository has the following layout: 
digital-alchemy/
├── assets/          # Compiled JS and CSS bundles (Vite output)
│   ├── main.js      # Primary application bundle
│   ├── main.css     # Compiled Tailwind stylesheet with all utility classes
│   ├── index.js     # React Router and animation shared chunk
│   └── proxy.js     # React/Framer Motion shared internals chunk
├── components/      # React component modules (compiled, one file per component)
│   ├── Layout.js    # Navigation shell wrapping all pages
│   ├── CursorWisp.js    # Custom animated cursor component
│   ├── SpellCircle.js   # Home page rotating glyph SVG
│   ├── TarotCard.js     # Flip-animated project cards
│   ├── PotionBottle.js  # Liquid-fill skill meter component
│   ├── Constellation.js # Star-map skills visualization
│   ├── CandleTimeline.js # Animated work history timeline
│   ├── Grimoire.js      # Case study parchment layout
│   ├── Bookshelf.js     # Article bookshelf grid
│   ├── CrystalBall.js   # Testimonial fog-reveal component
│   └── SpellForm.js     # Animated contact form
├── images/          # Screenshot assets used in project cards and case studies
├── pages/           # Pre-generated static HTML per route (for GitHub Pages)
│   ├── About.html       # Sets hash to /#/about on load
│   ├── Projects.html    # Sets hash to /#/projects on load
│   ├── Skills.html      # Sets hash to /#/skills on load
│   ├── Work.html        # Sets hash to /#/work on load
│   ├── CaseStudies.html # Sets hash to /#/case-studies on load
│   ├── Articles.html    # Sets hash to /#/articles on load
│   ├── Testimonials.html # Sets hash to /#/testimonials on load
│   └── Contact.html     # Sets hash to /#/contact on load
└── index.html       # SPA entry point — mounts the React root
The pages/ directory is what makes deep-linking work on GitHub Pages. Each file is a minimal HTML shell that injects the correct hash route via window.location.hash before React mounts, ensuring that navigating directly to https://your-username.github.io/digital-alchemy/pages/About.html lands the user on the correct view rather than the home page.
When developing locally, you’ll notice the site hides the default system cursor and replaces it with the CursorWisp — a dual-layer animated wisp made of a small turquoise dot and a larger blurred teal halo that trails behind your mouse with spring physics. This is entirely intentional. If you are working in an environment without a mouse (e.g. a VM, a remote dev container, or a touch-only device) and find the hidden cursor disorienting, you can temporarily restore the default system cursor by adding the following override to assets/main.css:
body {
  cursor: auto;
}
Remember to remove this override before deploying — the hidden cursor is a core part of the designed experience.

​
Building for Production

When you’re ready to generate the static output, run: 
npm run build
Vite bundles and tree-shakes all JavaScript, processes Tailwind CSS down to only the utility classes actually used, and writes the output to the dist/ directory. The result is a fully static site — no runtime server required — that can be deployed directly to GitHub Pages, Netlify, Vercel, or any other static hosting provider. For the complete deployment walkthrough, including how to configure the pages/ deep-link files and set up GitHub Pages deployment via GitHub Actions, see the Build and Deploy guide.

Build docs developers (and LLMs) love

Get started for freeTalk to us