Skip to main content

Documentation Index

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

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

Web Weaver is a static React SPA — there is no backend, no database, and no build-time data fetching. Getting it running locally takes about two minutes, and personalizing it to your own work requires editing a single compiled file. This guide walks through everything from first clone to production deployment.

​
Prerequisites

Before you begin, make sure you have the following installed:
  • Node.js 18 or later — Web Weaver uses Vite 5, which requires Node 18+. Check your version with node -v.
  • A package manager — npm (ships with Node), yarn, or pnpm all work.
  • Git — to clone the repository.
Web Weaver uses hash-based routing (HashRouter from React Router v6). All routes are prefixed with # in the URL — for example, http://localhost:5173/#/projects. This means the dev server serves only index.html for every path, and there is no need for a custom Vite historyApiFallback configuration. The same behavior carries through to production: you can deploy the dist/ folder to any static host without server-side redirect rules.The pages/ directory contains standalone HTML files (e.g. pages/About.html) that each set window.__STATIC_PAGE_ROUTE__ and redirect the hash on load — enabling direct-link sharing of individual pages even on hosts that don’t support catch-all redirects.

​
Setup

1

Clone the repository

Clone Web Weaver to your local machine and navigate into the project directory.
git clone https://github.com/apursley2012/web-weaver.git
cd web-weaver
2

Install dependencies

Install the project’s dependencies. This pulls in React 18, React Router v6, Framer Motion, Tailwind CSS, and Vite.
npm install
3

Start the dev server

Run the Vite development server. It starts on port 5173 by default with Hot Module Replacement enabled.
npm run dev
Open http://localhost:5173 in your browser. You should see the Hero landing page with Morgan Weaver’s name, the animated candle, and the glowing EmberCursor following your mouse.
The FogLayer and BlackCat components run on every page. If your machine is under heavy load, open the browser DevTools Performance panel and throttle the CPU to confirm animations stay smooth — Framer Motion uses will-change and GPU-composited transforms throughout.
4

Build for production

When you’re ready to deploy, run the build command. Vite compiles and bundles everything into the dist/ directory.
npm run build
The output in dist/ is a self-contained static site. Upload the entire dist/ folder to GitHub Pages, Netlify, Cloudflare Pages, or any static host. No server configuration is required.

​
Customizing Your Content

All portfolio content lives as JavaScript data arrays and string constants inside assets/main.js. After the Vite build this file is minified, but the source variable names are preserved and can be located with a quick search.

​
Your Name and Tagline

The hero landing page renders the string "Morgan Weaver" as the display name and "Software Sorcery & Digital Hexes" as the tagline. Both are hardcoded inside the HeroSection (I in the minified bundle) component: 
// Inside HeroSection in assets/main.js
children: "Morgan Weaver"          // <-- your name here
children: "Software Sorcery & Digital Hexes"  // <-- your tagline here
Search for Morgan Weaver in assets/main.js and replace it with your own name.

​
Projects (M array)

Projects are stored in the M array. Each entry has the following shape: 
const M = [
  {
    id: '1',
    title: 'Aether API',
    phase: 'full',       // 'new' | 'waxing' | 'full' | 'waning'
    description: 'A fully realized, high-throughput GraphQL API serving millions of requests daily. Bound with Redis caching and PostgreSQL.',
    tech: ['Node.js', 'GraphQL', 'PostgreSQL']
  },
  {
    id: '2',
    title: 'Shadow DOM Component Library',
    phase: 'waxing',
    description: 'A brewing collection of accessible, unstyled React components. Currently in active development and testing.',
    tech: ['React', 'TypeScript', 'Tailwind']
  },
  {
    id: '3',
    title: 'Project Obsidian',
    phase: 'new',
    description: 'An unreleased experiment in WebGL and generative art. The incantations are still being written.',
    tech: ['Three.js', 'WebGL', 'GLSL']
  },
  {
    id: '4',
    title: 'Legacy Monolith',
    phase: 'waning',
    description: 'An older PHP application currently being slowly deprecated and replaced by microservices.',
    tech: ['PHP', 'MySQL', 'jQuery']
  }
];
The phase field controls which MoonPhase filter tab a project appears under on the /projects route:
PhaseMoon IconMeaning
full🌕 Full MoonLive, shipped work
waxing🌔 WaxingIn active development
new🌑 New MoonUnreleased / experimental
waning🌘 WaningDeprecated or winding down

​
Skills (T array)

Skills are rendered as labeled nodes on a pentagram SVG at /skills. Each entry specifies a name, a proficiency level from 0–100, and an angle that places the node on the circle: 
const T = [
  { name: 'React',        level: 90, angle: 0   },
  { name: 'TypeScript',   level: 85, angle: 72  },
  { name: 'Node.js',      level: 80, angle: 144 },
  { name: 'CSS/Tailwind', level: 95, angle: 216 },
  { name: 'GraphQL',      level: 75, angle: 288 }
];
The five nodes sit at 72° increments around the circle, forming the five points of the pentagram. Add, remove, or reorder entries — the SVG draws the star between whatever points are present.

​
Work History (x array), Case Studies (F array), Blog Posts (E array), and Testimonials (q array)

The remaining content arrays follow the same pattern — find them by searching for their variable names in assets/main.js:
  • x — Work experience entries used by the Candle-selector timeline at /work. Each entry has id, title, company, period, description, and isLit.
  • F — Case study entries used by the WaxSeal scrolls at /case-studies. Each has id, title, summary, and details (revealed when the seal is broken).
  • E — Blog post entries rendered as TarotCards at /blog. Each has id, title, excerpt, suit (wands / swords / cups / pentacles), and number (Roman numeral displayed on the card).
  • q — Testimonials rendered with Familiar animal avatars at /testimonials. Each has type (cat / raven / owl / toad / bat), quote, author, and role.

​
Theming

Web Weaver’s entire color system is defined as CSS custom properties in assets/main.css (the Tailwind output). The six core tokens map directly to Tailwind utility classes used throughout the components: 
:root {
  --color-teal-dark:   #0a3a3f;
  --color-teal-mid:    #14b8a6;
  --color-teal-bright: #5eead4;
  --color-parchment:   #f4f1ea;
  --color-ink:         #0f172a;
  --color-amber:       #fbbf24;
}
Fonts are loaded from Google Fonts and referenced in the Tailwind config: font-serif resolves to Cormorant Garamond and font-mono resolves to JetBrains Mono.
For a deeper walkthrough of swapping the palette, adjusting font scales, and extending Tailwind’s theme config, see the Theming guide.

Build docs developers (and LLMs) love

Get started for freeTalk to us