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 React single-page application designed as a fully realized developer portfolio template with a dark mystical aesthetic. It blends modern frontend engineering with an immersive witchcraft-inspired design language — deep teal, aged parchment, and glowing amber — making it a standout starting point for developers who want their portfolio to feel like a world, not just a page.

​
Design Philosophy

Every design decision in Web Weaver reinforces a single narrative: you are a practitioner of the digital arts. The visual identity is built on restraint and atmosphere rather than noise. Color Palette — The palette is defined as CSS custom properties that cascade through every component:
TokenValueUsage
--color-ink#0f172aPage background, deep shadows
--color-teal-dark#0a3a3fBorders, subtle containers
--color-teal-mid#14b8a6Secondary accents, SVG strokes
--color-teal-bright#5eead4Primary accent, headings, hover states
--color-parchment#f4f1eaBody text, card surfaces
--color-amber#fbbf24Candle flames, star glints
Typography — Two fonts establish the dual nature of the craft: Cormorant Garamond (serif) for headings and display text lends an antique gravitas, while JetBrains Mono carries all body copy and code, grounding the mystical in the technical. Every heading is set in font-serif, every UI label in font-mono.

​
Tech Stack

Web Weaver is built with a focused, production-grade stack. No experimental dependencies — only proven tools.
TechnologyVersionRole
React18UI component model, hooks
React Routerv6Hash-based client-side routing
Framer MotionlatestPage transitions, micro-animations
Tailwind CSSv3Utility-first styling with custom tokens
VitelatestDev server, production build, bundling
React Router is configured in hash mode (HashRouter) so the app can be deployed as a fully static site — no server-side routing required. Every URL uses a # fragment: #/about, #/projects, #/skills, and so on.

​
Project Structure

The repository is organized around a flat, predictable layout optimized for static hosting: 
/
├── index.html                  # Root entry point (Hero / home route)
├── assets/
│   ├── main.js                 # Compiled React app — all routes and components
│   ├── main.css                # Tailwind output
│   ├── proxy.js                # React 18 + ReactDOM runtime
│   └── index.js                # AnimatePresence from framer-motion
├── components/
│   ├── Layout.js               # App shell: HashRouter, nav links, page transitions
│   ├── EmberCursor.js          # Custom glowing cursor trail
│   ├── FogLayer.js             # Animated fog overlay (runs on every page)
│   ├── BlackCat.js             # Decorative wandering cat
│   ├── Sigil.js                # SVG mystical sigil (used on About page)
│   ├── MoonPhase.js            # SVG moon phase indicator (new/waxing/full/waning)
│   ├── Candle.js               # Animated candle with lit/unlit state
│   ├── WaxSeal.js              # Clickable seal that reveals hidden content
│   ├── TarotCard.js            # Flip-card blog tile with suit and number
│   ├── Cauldron.js             # Bubbling SVG cauldron, reacts to form input
│   └── Familiar.js             # Animal avatar testimonial card
└── pages/
    ├── About.html
    ├── Blog.html
    ├── CaseStudies.html
    ├── Contact.html
    ├── Projects.html
    ├── Skills.html
    ├── Testimonials.html
    └── Work.html
All React source — routes, page components, and data arrays — lives in assets/main.js after the Vite build. The components/ directory holds each UI component as an ES module, imported by the main bundle.

​
Hash Router and Static HTML Pages

Web Weaver’s routing strategy makes it compatible with any static host (GitHub Pages, Netlify, Cloudflare Pages) without needing redirect rules. The Layout.js component wraps the entire app in a HashRouter. Route segments appear after the # character in the URL, so the browser never makes a request for a path like /projects — it only ever fetches index.html. Each file under pages/ is a standalone HTML document that pre-loads the same React bundle and injects a bootstrap script to force the hash to the correct route on first load: 
<script>
  window.__STATIC_PAGE_ROUTE__ = "/about";
  if (!window.location.hash || window.location.hash === "#/" || window.location.hash === "#") {
    window.location.hash = "/about";
  }
</script>
This means pages/About.html can be shared as a direct link. The browser loads the static file, the script sets window.location.hash = "/about", and React Router renders the correct page — no server configuration required.

​
Global Ambient Effects

Three components run persistently across every route, rendered once at the top level inside Layout.js:
  • EmberCursor — Replaces the default cursor with a glowing ember trail that follows mouse movement. Uses Framer Motion to animate fading particles.
  • FogLayer — A full-viewport overlay of animated, semi-transparent fog gradients. Runs on a looping requestAnimationFrame cycle and responds to scroll depth.
  • BlackCat — A small decorative cat sprite that wanders the bottom edge of the screen between routes. Idles, walks, and occasionally pauses to look at the cursor.
These three effects are what make Web Weaver feel like an environment rather than a static page. They require no interaction and degrade gracefully when motion is reduced via the OS prefers-reduced-motion setting.

​
Routes at a Glance

PathComponentDescription
/HeroSectionLanding: animated name, tagline, “Summon Me” CTA
/aboutAboutBio paragraphs, Sigil SVG, three stat counters
/projectsProjectsGallery filtered by MoonPhase selector
/skillsSkillsPentagram visualization with labeled skill nodes
/workWorkTimeline with Candle-based role selectors
/case-studiesCaseStudiesScrolls with WaxSeal content reveal
/blogBlogTarotCard grid of post tiles
/testimonialsTestimonialsFamiliar animal avatar testimonial cards
/contactContactForm with animated Cauldron

​
Explore Further

Quickstart

Clone the repo, install dependencies, and run the dev server in four steps.

Home Page

Anatomy of the Hero landing page and the HeroSection component.

Components

Reference for every UI component: props, animations, and usage examples.

Theming

Swap color tokens, fonts, and Tailwind config to make it your own.

Build docs developers (and LLMs) love

Get started for freeTalk to us