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 Familiar component renders a testimonial card pairing a stylized animal illustration with a professional endorsement. Each animal — cat, raven, owl, toad, or bat — is drawn as a distinct SVG composition, reinforcing the witchcraft aesthetic while giving each testimonial a unique personality. On medium screens and above, cards alternate their indent direction (left-indented on even indices, right-indented on odd indices) to create a conversational, staggered layout rather than a monotonous left-aligned stack.

​
Where It’s Used

Familiar is used on the Testimonials section of the portfolio, rendering one card per endorsement. The list of familiars is mapped from a data array, with the index used to determine the alternating indent class applied at the md breakpoint.

​
Props

​
type
'cat' | 'raven' | 'owl' | 'toad' | 'bat'
required
Determines which animal illustration is rendered. Each value produces a visually distinct SVG or CSS-composed creature:
ValueAnimalPersonality
catBlack catSleek, discerning
ravenRavenWise, perceptive
owlOwlScholarly, precise
toadToadEarthy, dependable
batBatSwift, nocturnal
​
quote
string
required
The testimonial quote text attributed to this familiar. Displayed as the primary body text of the card. Should be written in first person and can adopt a whimsical, in-character voice to match the aesthetic.
​
author
string
required
The name of the person giving the testimonial, displayed below the quote. On the testimonials page this is the real name of the colleague or collaborator (or a playful pseudonym in keeping with the theme).
​
role
string
required
The job title or role of the testimonial author, displayed beneath the author name. Provides professional credibility alongside the thematic presentation.

​
Usage

import Familiar from "@/components/Familiar";

<Familiar
  type="cat"
  quote="Morgan's code is cleaner than my whiskers..."
  author="Luna"
  role="Lead QA Engineer"
/>
Full testimonials list with alternating indent: 
{testimonials.map((t, index) => (
  <div
    key={t.author}
    className={index % 2 === 0 ? "md:pl-24" : "md:pr-24"}
  >
    <Familiar
      type={t.familiar}
      quote={t.quote}
      author={t.author}
      role={t.role}
    />
  </div>
))}

​
Behavior Details

​
Animal Illustrations

Each type value renders a unique SVG drawn with paths, shapes, or a combination of SVG primitives and CSS. The illustrations are monochromatic or use a limited palette that complements the app’s dark background. Key visual traits per type:
  • cat — angular silhouette, prominent ears, narrow eyes.
  • raven — sleek feathered body, pointed beak, wide wings partially folded.
  • owl — round head with large circular eye rings, symmetrical wing spread.
  • toad — squat rounded form, textured skin suggestion, wide mouth.
  • bat — extended membrane wings, small body, inverted hanging pose or mid-flight.

​
Alternating Indent Layout

The indent is applied outside the Familiar component — in the parent’s mapping loop — using Tailwind’s responsive prefix:
Index parityClass appliedEffect
Even (0, 2, 4…)md:pl-24Card indented from the left on medium+ screens
Odd (1, 3, 5…)md:pr-24Card indented from the right on medium+ screens
On mobile (below md breakpoint), both classes have no effect and all cards render full-width.

​
Card Layout

Inside Familiar, the layout arranges:
  1. Animal illustration — rendered on one side (or above on mobile).
  2. Quote — the largest text element, set in a serif or italic display style.
  3. Author name — smaller, below the quote.
  4. Role — smallest, muted color, below the author name.
<div className="md:pl-24">
  <Familiar
    type="cat"
    quote="Morgan's code is cleaner than my whiskers..."
    author="Luna"
    role="Lead QA Engineer"
  />
</div>
Card is pushed right by 24 units of left padding on medium+ screens.

​
Customization Tips

Write testimonial quotes in an in-universe voice — a cat familiar might speak about cleanliness and precision, while a raven familiar might reference foresight and architecture. This strengthens the overall portfolio narrative.

New Animal Types

The type prop is a closed union — to add a new animal (e.g. 'fox'), you must add a new SVG illustration case inside Familiar.js alongside the updated TypeScript type definition.

Quote Length

Keep quotes between 10 and 30 words for best visual balance within the card. Very short quotes look sparse; very long quotes may push the card height beyond its peers.

Indent Responsibility

The md:pl-24 / md:pr-24 classes are applied by the parent, not Familiar itself. If you embed Familiar in a different layout, manage indentation externally.

Mobile Layout

On small screens the staggered indent disappears. Verify that the card reads well in a full-width stacked column before adjusting the illustration-to-text layout ratio.
Familiar is a purely presentational component with no internal state, event handlers, or side effects. All data — type, quote, author, and role — is passed in from the parent’s data array.

Build docs developers (and LLMs) love

Get started for freeTalk to us