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.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.
Route
#/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:| Suit | Symbol | Theme |
|---|---|---|
wands | Staff / flame | Creativity, action, new ideas |
swords | Blade | Intellect, conflict, sharp thinking |
cups | Chalice | Emotion, flow, architecture decisions |
pentacles | Coin / star | Resources, performance, optimisation |
Data & Configuration
Blog posts are stored in theE array inside assets/main.js:
Field reference
| Field | Type | Purpose |
|---|---|---|
id | number | Unique identifier; used as the React list key |
title | string | Post title shown on the card face |
excerpt | string | Short teaser shown on the card reverse after flip |
suit | 'wands' | 'swords' | 'cups' | 'pentacles' | Determines which suit symbol is rendered on the card |
number | string | Roman numeral displayed in large type on the card face |
Customisation
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.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.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.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.Key Components
| Component | Description | Docs |
|---|---|---|
TarotCard | Card wrapper that manages flip state and renders front/back faces | TarotCard |
CardFace | Front face — renders suit symbol, Roman numeral, and title | Internal |
CardBack | Reverse face — renders the post excerpt and decorative border | Internal |
SuitSymbol | Maps a suit string to the corresponding SVG icon | Internal |
Interactive Behaviour
Card flip on hover
Card flip on hover
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.Touch / mobile behaviour
Touch / mobile behaviour
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.