Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/witch-dev/llms.txt

Use this file to discover all available pages before exploring further.

The Projects page (be component) — themed as the Grimoire of Builds — displays a horizontally scrollable row of circular project cards. A tag filter bar above the carousel lets visitors narrow the visible cards by technology. All filtering happens client-side with no network requests.

​
Project Data

Projects are defined in the v array. Each object describes one card: 
const v = [
  {
    id: 1,
    title: "Necromancer CRM",
    desc: "A customer relationship manager for reviving dead leads.",
    tags: ["React", "Node.js", "PostgreSQL"],
    mocked: true,
  },
  {
    id: 2,
    title: "Potion.io",
    desc: "Real-time inventory tracking for alchemical ingredients.",
    tags: ["Next.js", "Socket.io", "Tailwind"],
    mocked: false,
  },
  {
    id: 3,
    title: "Hex Weather",
    desc: "Forecasts for supernatural occurrences and blood moons.",
    tags: ["Vue", "Weather API", "CSS Grid"],
    mocked: true,
  },
  {
    id: 4,
    title: "Coven Chat",
    desc: "End-to-end encrypted messaging for secret societies.",
    tags: ["React Native", "Firebase", "Crypto"],
    mocked: false,
  },
];

​
Circular Card Design

Each project is rendered as a circular glass panel (aspect-square, rounded-full) with a full-bleed background image.

​
Idle state

  • The background image is rendered with mix-blend-mode: luminosity, desaturating it into a dark, atmospheric silhouette.
  • No text is visible; only the image and, when applicable, the mocked-data badge (see below).

​
Hover state

On pointer hover, the card transitions to its active state:
  1. The image blend mode shifts to normal, restoring full colour.
  2. A semi-transparent dark overlay fades in over the image.
  3. Three elements appear from the overlay:
    • Project title — bold, centred
    • Project description — smaller text beneath the title
    • Three action buttons displayed in a row:
ButtonPurpose
Open.exeOpens the live demo (or mocked preview)
Source SpellLinks to the project’s source code repository
Read IncantationOpens a detailed case study or README
All transitions use a CSS duration-300 ease-in-out to keep the reveal smooth.

​
Mocked Data Badge

When a project’s mocked field is true, a TriangleAlert icon badge is pinned to the card edge with the tooltip / label “Demo uses mocked data”. This badge is rendered at all times (not just on hover) so visitors are never surprised by placeholder content in a live demo.
Always set mocked: true if the project’s live link uses seeded, fake, or otherwise non-production data. This keeps expectations accurate for recruiters and collaborators viewing the portfolio.

​
Tag Filtering

A filter bar above the carousel contains:
  • An “All Spells” reset button (always visible, clears the active filter)
  • One pill per unique tag drawn from every project’s tags array
The complete tag set across the current four projects is: React · Node.js · PostgreSQL · Next.js · Socket.io · Tailwind · Vue · Weather API · CSS Grid · React Native · Firebase · Crypto

​
How filtering works

  1. The active filter tag is stored in local component state (e.g. activeTag).
  2. When a pill is clicked, activeTag is set to that tag’s string.
  3. The carousel renders only cards whose tags array includes activeTag.
  4. Clicking “All Spells” resets activeTag to null, showing every card.
Filtering is entirely client-side — no re-fetch or route change occurs.
Tags are matched with a simple Array.prototype.includes check, so tag strings are case-sensitive. Ensure new project tags use exactly the same casing as the pills (e.g. "React", not "react").

​
Scroll Behavior

The carousel container is configured for a smooth, snapping horizontal scroll experience:
CSS utilityEffect
overflow-x-autoEnables horizontal scrolling
no-scrollbarHides the native scrollbar for a cleaner look
snap-x snap-mandatorySnaps each card into the viewport on scroll
cursor-grabSignals that the carousel can be click-dragged
On touch devices the native momentum scroll is preserved; on desktop, users can grab-drag or use a horizontal scroll wheel.

​
Adding a New Project

Append a new object to the v array. All five fields are required: 
{
  id: 5,                          // Unique number — increment from the last entry
  title: "My New Spell",          // Display title shown on hover
  desc: "Short description.",     // One-sentence summary shown on hover
  tags: ["React", "Tailwind"],    // Must match existing pill strings exactly (case-sensitive)
  mocked: false,                  // true = show TriangleAlert badge
}
If you introduce a new tag (one not already in v), it will automatically appear as a new filter pill — no changes to the filter UI are needed.

Build docs developers (and LLMs) love

Get started for freeTalk to us