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 About page gives visitors a deeper introduction to the developer behind the portfolio. A decorative sigil SVG anchors the top of the page, followed by a multi-line biographical text that animates into view as the user scrolls. Three thematic stat counters — hours spent, hexes cast, and familiars befriended — sit below the bio as a playful alternative to the usual “years of experience” badges.

​
Route

#/about
Navigate to #/about or click the About link in the site navigation to reach this page.

​
Visual Layout

Sigil SVG

A decorative magical sigil rendered as an inline SVG at the top of the section. Sets the mystical tone before the reader reaches the text.

Animated Bio

The biographical paragraph is broken into individual lines. Each line fades and slides up into view as it enters the viewport, powered by Framer Motion’s whileInView prop.

Stat Counters

Three labelled counters displayed in a horizontal row: Hours Spent Stirring, Hexes Cast, and Familiars Befriended. Each counter is a large numeral with a caption beneath it.

Full-Width Layout

Content is centred in a single column with generous vertical padding. The dark background and subdued typography keep focus on the text.

​
Data & Configuration

All bio content and stat values live in assets/main.js. The bio is stored as an array of strings — one string per rendered line — so that Framer Motion can stagger the entrance animations line by line. 
// assets/main.js — About page data (array P)
const P = [
  "I am a weaver of webs and a binder of logic.",
  "For over a decade, I have practiced the digital arts,",
  "turning chaotic requirements into elegant, functioning systems.",
  "My preferred mediums are React, TypeScript, and Node,",
  "though I am versed in many ancient and modern dialects.",
  "When not staring into the glowing scrying glass of my monitor,",
  "I am usually found optimizing my local environment",
  "or debugging the curses left by past practitioners.",
];

// About page stats
const aboutStats = [
  { label: "Hours Spent Stirring", value: "10,000+" },
  { label: "Hexes Cast",           value: "42"      },
  { label: "Familiars Befriended", value: "15"      },
];

​
Customisation

1

Edit the bio copy

Open assets/main.js and locate the P array. Each string in the array is one animated line. You can add, remove, or reorder lines freely. Keep individual strings at a comfortable reading length — very long strings may wrap awkwardly on mobile viewports.
2

Update the stat counters

Find the aboutStats array. Change value to your real figures and label to matching captions. You can also add or remove stat objects — the layout will reflow automatically.
3

Replace the sigil

The sigil SVG is embedded inside the SigilSVG component. Open that component file and replace the <path> data with your own SVG artwork. Keep viewBox consistent so sizing stays predictable.
4

Tune the scroll animation

The stagger delay between bio lines is set in the Framer Motion variants object inside the About component. Decrease staggerChildren for a snappier reveal or increase it for a slower, more dramatic entrance.

​
Key Components

ComponentDescriptionDocs
SigilDecorative inline SVG sigil rendered at the top of the sectionSigil
AnimatedBioMaps over the P array and renders each line with a Framer Motion scroll-triggered entranceInternal
StatCounterDisplays a single numeric stat with a label; three instances are rendered side by sideInternal

​
Interactive Behaviour

Each line in the P array is wrapped in a Framer Motion motion.p element. The whileInView prop triggers an opacity fade and a y translate from 20px to 0 as each line enters the visible area of the browser. Lines are staggered so they appear one after another rather than all at once.The animation only fires once per page visit because viewport={{ once: true }} is set on the motion container. To allow the animation to replay every time the element re-enters the viewport, remove that prop.
The three stat counters are purely presentational — they display static values from the aboutStats array. They do not count up with an animated number transition by default. To add a count-up effect, integrate a library such as react-countup and trigger it onViewportEnter.
The bio lines in array P are rendered verbatim. Line breaks in the browser are controlled by the container width, not by the array boundaries — each array item is a separate <p> element, so there will always be a paragraph break between items.
You can inject inline <strong> or <em> formatting into bio lines by replacing the plain strings with JSX expressions. Update the map function in AnimatedBio from <motion.p>{line}</motion.p> to <motion.p dangerouslySetInnerHTML={{ __html: line }} /> and then use HTML tags inside the strings — but sanitise any user-supplied content before doing so.

Build docs developers (and LLMs) love

Get started for freeTalk to us