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 Blog page presents the developer’s written content as a three-column grid of tarot cards. Each card shows a suit symbol, a Roman numeral, and the post title on its face. Hovering the card triggers a flip animation that reveals the post excerpt on the reverse. The tarot card metaphor extends the portfolio’s mystical aesthetic into the content section and makes even a short list of posts feel distinctive and memorable.

Route

#/blog
Navigate to #/blog or click the Blog link in the site navigation.

Visual Layout

Three-Column Card Grid

Posts are laid out in a three-column grid on desktop. The grid collapses to two columns on tablet and a single column on mobile. Each cell contains one tarot card.

Card Face (Front)

The front of each card displays: a suit symbol (wands, swords, cups, or pentacles) at the top; a Roman numeral in large display type at the centre; and the post title near the bottom.

Card Reverse (Back)

The reverse of each card shows the post excerpt in readable body text. A decorative border or symbol fills the rest of the card back to maintain the tarot aesthetic.

Hover Flip Animation

Hovering a card triggers a 3D rotateY flip via Framer Motion (or CSS transform: rotateY(180deg)). The front face fades out as the back face rotates into view.

Tarot Suit Reference

Each suit carries a loose thematic association used when assigning posts to suits:
SuitSymbolTheme
wandsStaff / flameCreativity, action, new ideas
swordsBladeIntellect, conflict, sharp thinking
cupsChaliceEmotion, flow, architecture decisions
pentaclesCoin / starResources, performance, optimisation

Data & Configuration

Blog posts are stored in the E array inside assets/main.js:
// assets/main.js — Blog post data (array E)
const E = [
  {
    id: 1,
    title: 'The Magic of React Hooks',
    excerpt:
      'Understanding the deep incantations required to master useEffect ' +
      'without causing infinite loops.',
    suit: 'wands',
    number: 'I',
  },
  {
    id: 2,
    title: 'Defending Against Dark Arts (XSS)',
    excerpt:
      'Protecting your inputs from malicious hexes and ensuring your ' +
      'data remains pure.',
    suit: 'swords',
    number: 'II',
  },
  {
    id: 3,
    title: 'Brewing the Perfect State',
    excerpt:
      'When to use Context, Redux, or simple local state for your ' +
      'application potions.',
    suit: 'cups',
    number: 'III',
  },
  {
    id: 4,
    title: 'Wealth in Performance',
    excerpt:
      'Optimizing your bundles to save precious resources and speed ' +
      'up delivery.',
    suit: 'pentacles',
    number: 'IV',
  },
  {
    id: 5,
    title: 'Summoning APIs with GraphQL',
    excerpt:
      'Ask exactly for what you need, and the spirits of the server ' +
      'shall provide.',
    suit: 'wands',
    number: 'V',
  },
  {
    id: 6,
    title: 'Severing the Monolith',
    excerpt:
      'A tale of breaking a massive application into manageable, ' +
      'independent micro-services.',
    suit: 'swords',
    number: 'VI',
  },
];

Field reference

FieldTypePurpose
idnumberUnique identifier; used as the React list key
titlestringPost title shown on the card face
excerptstringShort teaser shown on the card reverse after flip
suit'wands' | 'swords' | 'cups' | 'pentacles'Determines which suit symbol is rendered on the card
numberstringRoman numeral displayed in large type on the card face

Customisation

1

Add a new post card

Append a new object to the E array. Choose a suit that matches the post’s theme, assign the next number in the sequence (or any Roman numeral you prefer — they do not have to be sequential), and write a concise excerpt of one to three sentences.
2

Link cards to external posts

Add a url field to each E object pointing to the full post (your blog platform, Medium, DEV.to, etc.). Update the TarotCard component to navigate to that URL when the flipped card is clicked, or add a “Read More” link on the reverse face.
3

Change a post's suit

Update the suit string in the relevant object. The TarotCard component maps suit names to SVG symbol components — changing the string is all that is needed.
4

Update the Roman numerals

The number field is a free-form string — it does not have to be a Roman numeral. You could use Arabic numerals, dates, or any short label. The field is rendered as large decorative text on the card face.
5

Adjust the grid column count

The three-column layout is set with a Tailwind grid-cols-3 class (or equivalent CSS) on the grid container. Change to grid-cols-2 for a two-column layout, or grid-cols-4 if you have eight or more posts and want a tighter grid.

Key Components

ComponentDescriptionDocs
TarotCardCard wrapper that manages flip state and renders front/back facesTarotCard
CardFaceFront face — renders suit symbol, Roman numeral, and titleInternal
CardBackReverse face — renders the post excerpt and decorative borderInternal
SuitSymbolMaps a suit string to the corresponding SVG iconInternal

Interactive Behaviour

Each TarotCard listens for the onMouseEnter and onMouseLeave events (or uses the CSS :hover pseudo-class with perspective and transform-style: preserve-3d). On hover, the card container rotates 180° around the Y axis. The front face and back face are positioned with backface-visibility: hidden so only the correct face is visible at each stage of the rotation.
On touch devices, hover events do not fire reliably. The flip is also triggered on onClick for touch compatibility — a first tap flips the card to show the excerpt; a second tap flips it back.
The number field uses Roman numerals by convention, but the component renders it as a plain string — there is no automatic conversion. If you add post number 7, write 'VII' manually rather than 7.
Keep excerpt values brief — ideally under 150 characters. The card back has limited vertical space, and very long excerpts will overflow or push the text into an unreadable size on smaller screens. Think of the excerpt as a hook, not a summary.

Build docs developers (and LLMs) love