Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/magical/llms.txt

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

The Grimoire (/#/projects) is the portfolio’s project showcase — a grid of interactive flip-cards, each representing a completed work. On hover, every card rotates 180° to reveal its description, tech stack, and links. The underlying data that powers this gallery lives in the projects array near the top of assets/main.js.

​
Project Object Shape

Each entry in the projects array is a plain JavaScript object with the following fields: 
{
  id: number,          // Unique integer — increment from the last existing id
  title: string,       // Project name displayed on the card front
  category: string,    // Shown as a small label, e.g. "Full Stack", "Frontend", "Data Viz"
  sigilType: 'star' | 'moon' | 'alchemy' | 'eye',  // Animated SVG sigil on the card
  image: string,       // URL to a project screenshot (1200×800 px recommended)
  mockNote: string,    // Small italic disclaimer displayed on the card front
  description: string, // Full project description shown on the card back ("The Incantation")
  tech: string[],      // Array of technology badge strings shown on the card back
  demoUrl: string,     // URL for the "Cast Demo" live demo link
  sourceUrl: string,   // URL for the "Reveal Source" GitHub link
  readmeUrl: string,   // URL for the "Read Tome" documentation/README link
}

​
Steps to Add a New Project

1

Open assets/main.js

Open assets/main.js in your editor. Search for the projects array — it is declared as a const and begins with the Apothecary Inventory entry. You will see the four existing entries in order:
  1. Apothecary Inventory (Full Stack, alchemy)
  2. Lunar Phase Tracker (Frontend, moon)
  3. Grimoire CMS (Architecture, star)
  4. The Scrying Pool (Data Viz, eye)
2

Prepare your project image

Host your project screenshot somewhere publicly accessible. Unsplash works well for placeholder images during development (see the tip below). The recommended dimensions are 1200×800 px, but the card image area crops to a 600×400 px region, so landscape images work best.
3

Append a new object to the array

Add your new entry as the last item in the projects array. Give it the next sequential id (e.g., 5 if you are adding after the four existing projects). Make sure to place a comma after the preceding closing brace } before your new entry.
// Inside the projects array, after the last existing entry:
{
  id: 5,
  title: "Enchanted Weather",
  category: "Frontend",
  sigilType: "moon",
  image: "https://images.unsplash.com/photo-1504608524841-42584120d693?auto=format&fit=crop&q=80&w=600&h=400",
  mockNote: "Powered by celestial weather APIs",
  description: "A weather dashboard with animated moon phase indicators and storm sigils.",
  tech: ["React", "TypeScript", "OpenWeather API", "Framer Motion"],
  demoUrl: "https://enchanted-weather.example.com",
  sourceUrl: "https://github.com/yourname/enchanted-weather",
  readmeUrl: "https://github.com/yourname/enchanted-weather#readme"
}
4

Save and verify

Save assets/main.js. If the dev server is running (npm run dev), navigate to http://localhost:5173/#/projects. Your new card should appear at the end of the grid. Hover over it to confirm the flip animation works and the back-face content (description, tech badges, links) renders correctly.

​
Complete Example Entry

Here is a fully fleshed-out example you can copy and adapt: 
{
  id: 5,
  title: "Enchanted Weather",
  category: "Frontend",
  sigilType: "moon",
  image: "https://images.unsplash.com/photo-1504608524841-42584120d693?auto=format&fit=crop&q=80&w=600&h=400",
  mockNote: "Powered by celestial weather APIs",
  description: "A weather dashboard with animated moon phase indicators and storm sigils. Features real-time data from the OpenWeather API, a 7-day forecast rendered as lunar phases, and Framer Motion transitions between weather states.",
  tech: ["React", "TypeScript", "OpenWeather API", "Framer Motion"],
  demoUrl: "https://enchanted-weather.example.com",
  sourceUrl: "https://github.com/yourname/enchanted-weather",
  readmeUrl: "https://github.com/yourname/enchanted-weather#readme"
}

​
Choosing a Sigil Type

The sigilType field controls the small animated SVG sigil rendered in the top-right corner of each card front, and also the large background sigil used in the home navigation cards. There are four options:
Match the sigil to the energy of your project category:
sigilTypeBest for
"star"Architecture, design systems, foundational infrastructure projects
"moon"Frontend, UI-heavy, or creative/artistic projects
"alchemy"Full stack, data transformation, backend-heavy projects
"eye"Data visualization, analytics, observability, or monitoring tools
There is no hard rule — choose whichever feels right for the work you are showcasing.
Using Unsplash images is the easiest way to get a polished placeholder while building. Append Unsplash image transformation parameters to crop and optimize the image for the card:
?auto=format&fit=crop&q=80&w=600&h=400
For example:
https://images.unsplash.com/photo-1504608524841-42584120d693?auto=format&fit=crop&q=80&w=600&h=400
When you are ready to use your own screenshots, host them on a CDN (e.g., Cloudinary, GitHub raw, or your own domain) and update the image URL accordingly.

Build docs developers (and LLMs) love

Get started for freeTalk to us