Skip to main content

Documentation Index

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

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

The Craft is a statically deployed React single-page application built with Vite as its bundler, React Router v6 for client-side navigation, and Framer Motion for page transitions and animations. Everything lives in two top-level directories — assets/ for page-level components and entry code, and components/ for shared UI pieces — making the project intentionally flat and easy to navigate. There is no backend, no build pipeline beyond Vite, and no external data fetching: all content is co-located as static JavaScript arrays inside each page file.

​
Directory Layout

the-craft/
├── index.html          # Vite entry point
├── assets/
│   ├── main.js         # App root, router, lazy page imports
│   ├── main.css        # Tailwind + custom tokens
│   ├── Home.js         # Home page component
│   ├── About.js        # About page component
│   ├── Projects.js     # Projects page component
│   ├── Skills.js       # Skills page component
│   ├── Work.js         # Work history page
│   ├── CaseStudies.js  # Case studies page
│   ├── Blog.js         # Blog page
│   ├── Contact.js      # Contact form page
│   ├── Testimonials.js # Testimonials page
│   └── proxy.js        # Bundled React/ReactDOM/Framer Motion
└── components/
    ├── Layout.js        # Root shell (nav + cursor + outlet)
    ├── MoonPhaseNav.js  # Moon-phase navigation bar
    ├── CursorTrail.js   # Canvas cursor particle effect
    ├── PageTransition.js # Framer Motion AnimatePresence wrapper
    ├── Sigil.js         # SVG mystical symbol
    └── Candle.js        # Animated candle for work timeline

​
How It All Connects

assets/main.js is the application’s true entry point. It creates the BrowserRouter, defines all route mappings, lazily imports every page component, and mounts the React tree onto the #root DOM node in index.html. All page routes are nested under a single parent <Route path="/" element={<Layout />}>, which means every page is automatically wrapped in the shared shell. components/Layout.js is that shell. It renders three things in sequence: the CursorTrail canvas effect (which floats above the page at z-index: 9999), the MoonPhaseNav sidebar, and the React Router <Outlet /> inside a <main> element. The <Outlet /> is where the currently matched page component appears. Two ambient glow blobs are also rendered as fixed, pointer-events-none decorations behind the content.
The MoonPhaseNav sidebar uses position: fixed and occupies the left 6rem of the viewport on desktop. Page components are offset with md:pl-24 to avoid being hidden beneath it.

​
Data Flow

The Craft has no API layer and no database. All page data — including the projects array, work history timeline entries, testimonials, blog posts, and skills list — is declared as plain JavaScript arrays or objects at the top of each respective page file. If you want to update content, you edit the source array directly in the relevant file in assets/. 
User visits /projects
    → React Router matches <Route path="projects" element={<Projects />}>
    → Projects.js lazy-loads and mounts
    → Projects.js reads from its own local `projects` array
    → Framer Motion animates the page in via PageTransition wrapper
Because data is static and co-located, there are no loading states, API keys, or environment variables to configure. The entire site works identically in local development and in the deployed GitHub Pages environment.

​
Build Output

Vite processes index.html as its entry point, resolves all import statements, applies Tailwind’s JIT purge pass on main.css, and emits a static bundle into dist/. The output is pure HTML, JS, and CSS — no server runtime required. The dist/ folder is what gets published to GitHub Pages.
Because The Craft uses the HTML5 History API for routing (via React Router’s BrowserRouter), GitHub Pages requires a 404.html redirect trick or a custom domain with proper SPA routing support. Without it, hard-refreshing on any route other than / will return a 404 from GitHub’s servers.

Build docs developers (and LLMs) love

Get started for freeTalk to us