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 Sigil component renders an intricate SVG illustration of a mystical sigil — a geometric, rune-like symbol that anchors the visual identity of Web Weaver’s About page. Unlike the motion-heavy ambient components elsewhere in the app, Sigil is intentionally static: no animations, no interactions, no state. Its power is purely visual. The sigil serves as a focal decorative element that communicates the portfolio’s witchcraft theme at a glance, and its className prop means you can slot it into any layout using standard Tailwind utility classes for sizing and spacing.

​
Visual appearance

The sigil is an inline SVG containing overlapping geometric linework — circles, triangles, and branching strokes arranged symmetrically around a central point, characteristic of occult and mystical iconography. The artwork uses currentColor for its strokes, meaning it inherits the text colour of its container and will adapt automatically to any colour theme or dark/light mode switch.

​
Where it’s used

Sigil is rendered on the About page, where it functions as a large centrepiece illustration positioned alongside the introductory text about the portfolio’s author. 
// Inside the About page component
import Sigil from "./Sigil";

export default function About() {
  return (
    <section>
      <Sigil className="h-64 w-64" />
      <div>
        <h1>About Me</h1>
        <p>/* bio text */</p>
      </div>
    </section>
  );
}

​
Props

​
className
string
A CSS class string passed directly to the root <svg> element. Use Tailwind utility classes to control the sigil’s rendered size, margins, and any additional styling. If omitted, the SVG renders at its intrinsic viewBox dimensions.Example values:
  • "h-64 w-64" — 16 rem × 16 rem (used on the About page)
  • "h-32 w-32 opacity-50" — smaller, semi-transparent variant
  • "h-full w-full" — fills its parent container

​
Usage examples

​
Default About page usage

import Sigil from "./components/Sigil";

<Sigil className="h-64 w-64" />

​
Smaller decorative accent

<Sigil className="h-24 w-24 opacity-60 mx-auto" />

​
Full-width hero background element

<div className="relative">
  <Sigil className="absolute inset-0 h-full w-full opacity-10 pointer-events-none" />
  <div className="relative z-10">
    {/* page content */}
  </div>
</div>

​
Implementation notes

currentColor inheritance

The SVG strokes are styled with currentColor, so the sigil automatically adopts the text colour of its nearest ancestor. Place it inside a container with a specific text-* class to tint it without touching the component source.

Scalable viewBox

The SVG uses a viewBox attribute rather than fixed width/height HTML attributes. This means it scales losslessly to any size specified via the className prop — no pixelation at large sizes.

aria-hidden

Because the sigil is decorative and carries no semantic information, the root <svg> element includes aria-hidden="true". Screen readers skip it entirely, keeping the page’s accessible tree clean.

No animation

Unlike most other Web Weaver components, Sigil imports neither Framer Motion nor any React state. It is a pure SVG render — zero runtime overhead beyond a single paint operation.

​
Customisation tips

Colour — Wrap <Sigil /> in a <span className="text-teal-400"> (or any Tailwind colour class) to tint the sigil without editing the SVG source. Because strokes use currentColor, the colour change propagates automatically.
Animated variant — If you want a slowly rotating or pulsing version of the sigil for a different section, wrap it in a Framer Motion motion.div with a rotate or scale animation rather than modifying the Sigil component itself. This preserves the base component’s simplicity.
Multiple instances — Sigil is lightweight enough to render multiple times on a single page at different sizes and opacities — for example, a large centrepiece at full opacity and several small ghost copies scattered in the background at opacity-5.

Build docs developers (and LLMs) love

Get started for freeTalk to us