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.

The Home page is the first thing visitors see when they arrive at the portfolio. It establishes the dark mystical aesthetic immediately — an animated candle flame flickers at the top, the developer’s name materialises in large display text, and a single call-to-action button invites visitors to make contact. There is intentionally no navigation clutter; the entire screen is devoted to atmosphere and a single clear action.

​
Route

#/
This is the default hash route. Navigating to the bare domain, or to #/, renders the Hero section.

​
Visual Layout

The page is a full-viewport centred column with three primary elements stacked vertically:

Animated Candle Flame

An SVG candle flame rendered at the top of the hero. The flame flickers continuously via a CSS keyframe animation to reinforce the mystical mood.

Hero Name

The developer’s display name — Morgan Weaver — rendered as a large h1 heading using the portfolio’s primary display typeface.

Tagline

A subtitle beneath the name: “Software Sorcery & Digital Hexes”. Styled in a lighter weight and muted colour to complement the heading.

CTA Button

A prominent “Summon Me” button that links to #/contact, scrolling the visitor to the contact form.

​
Data & Configuration

The Hero content is driven by a small set of inline string constants inside assets/main.js. There is no external data fetch or array — everything is hard-coded in the component. 
// assets/main.js — Hero constants
const heroName    = "Morgan Weaver";
const heroTagline = "Software Sorcery & Digital Hexes";
const heroCTA     = "Summon Me";
const heroCTAHref = "#/contact";

​
Customisation

1

Change the displayed name

Locate the heroName constant in assets/main.js and replace "Morgan Weaver" with your own name. This value is injected directly into the <h1> element.
2

Update the tagline

Edit heroTagline to reflect your own positioning or specialty. Keep it concise — one punchy line works best at hero scale.
3

Rename the CTA button

Change heroCTA from "Summon Me" to any label you prefer (e.g. "Hire Me", "Get in Touch"). The destination is controlled separately by heroCTAHref.
4

Reroute the CTA

heroCTAHref defaults to #/contact. You can point it at an external URL, a mailto link, or any other hash route defined in the app.
5

Swap or disable the candle animation

The flame SVG and its keyframe animation live in the CandleFlame component. To replace it with a different illustration, swap the SVG paths inside that component. To disable animation entirely, remove the animation CSS property from the flame element.

​
Key Components

ComponentDescriptionDocs
CandleFlameAnimated SVG candle flame displayed above the hero textInternal
HeroSectionWrapper that centres the name, tagline, and CTA button in the viewportInternal

​
Interactive Behaviour

  • Candle flame — loops a CSS @keyframes flicker animation indefinitely. The animation runs entirely in CSS and does not depend on JavaScript after mount.
  • “Summon Me” button — a standard anchor (<a>) tag with href="#/contact". Clicking it updates the hash route and React Router renders the Contact page without a full page reload.
The Home page has no scroll-triggered animations. All motion is contained within the candle flame component itself. If you want to add a scroll-based entrance for the heading and tagline, consider wrapping them in a Framer Motion motion.div with an initial / animate / transition config similar to the pattern used on the About page.
For the strongest first impression, keep the hero copy short. The dark background and flickering candle do the heavy lifting — resist the temptation to add more text here. Any additional information belongs on the About page.

Build docs developers (and LLMs) love

Get started for freeTalk to us