Skip to main content

Documentation Index

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

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

Sys.Witch V2 separates content from presentation so you can personalize the theme without touching any CSS or component logic. Your portfolio content lives in the JavaScript data files inside the data/ folder. Each file defines a structured collection — projects, skills, writing posts, or case studies — that the React components consume and render automatically. Update the data files, and the theme renders your content through the existing component architecture.

​
Where Content Lives

The theme organizes editable content into structured data files:

Page-Level Content

Your name, headline, biography, and contact details live as text inside the React page components. Edit the string content directly inside the relevant page component in the pages/ directory.

Data Files

data/projects.js, data/skills.js, data/writing.js, and data/caseStudies.js hold structured portfolio content rendered by the theme’s React components.

​
Step-by-Step Personalization

1

Update your name, headline, and introduction

Open the home page component and replace the portfolio-owner name, professional headline, and homepage introduction with your own. This is the first page visitors see, so it should reflect your identity clearly.
The homepage headline uses the font-display class (Tektur typeface), so short, punchy titles read best at this level.
2

Update your biography and background

Open the About page component and replace the biography, background story, and career narrative with your own. The timeline structure works well for milestone-based career histories.
3

Update data/projects.js — Featured Work

Open data/projects.js and replace each project object with your own work. Each entry in the array follows this shape:
// data/projects.js — full object shape
{
  id: "void-tracker",
  title: "VOID TRACKER",
  description: "A dark-mode first task management system utilizing local storage and a custom drag-and-drop interface. Built to organize chaos into structured data.",
  tags: ["React", "TypeScript", "Tailwind", "Zustand"],
  image: "https://images.unsplash.com/photo-1555949963-aa79dcee981c?auto=format&fit=crop&q=80&w=800",
  demoUrl: "#",
  sourceUrl: "#",
  bindingNotes: "Data persists locally. No external database summoned."
}
FieldRequiredDescription
idYesUnique slug for the project (no spaces)
titleYesDisplay title — shown in all caps by the component
descriptionYesShort paragraph describing the project
tagsYesArray of technology or skill labels
imageYesURL to a project screenshot or cover image
demoUrlNoLink to a live demo
sourceUrlNoLink to the source code repository
readmeUrlNoLink to an extended README or documentation
bindingNotesNoA thematic annotation — displayed as flavour text on the card
Fields demoUrl, readmeUrl, and bindingNotes are all optional. If you omit them, the ProjectPanel component will not render those links or annotations for that entry.
4

Update data/skills.js — Skills and Technologies

Open data/skills.js and replace the skill entries with your own. Each skill maps to a RuneTile component that displays the name, category, mastery level, and description together with a decorative sigil.
// data/skills.js — full object shape
{
  id: "ts",
  name: "TypeScript",
  category: "Languages",
  mastery: "Master",
  description: "Strict typing rituals to banish runtime errors.",
  sigilId: "rune-1"
}
FieldRequiredDescription
idYesUnique identifier string
nameYesDisplay name of the skill or technology
categoryYesGroup label — used to organize tiles by section
masteryYesEither "Master" or "Adept"
descriptionYesOne-sentence description in the theme’s voice
sigilIdYesReferences a key in data/sigils.js — controls the decorative SVG icon
The current categories in the default data are Languages, Front-End, Back-End/Data, Debugging, Git/GitHub, and Design. You can use any category names you like — the component groups tiles by the category value automatically.Valid sigilId values are: rune-1, rune-2, rune-3, rune-4, rune-5, rune-6, rune-7.
5

Update data/writing.js — Writing Archive

Open data/writing.js and replace the writing entries with your own posts, articles, or essays. Each entry is rendered by the TomeCard component on the Writing page.
// data/writing.js — full object shape
{
  id: "1",
  title: "Banishing Memory Leaks in React Applications",
  excerpt: "A deep dive into common useEffect pitfalls that lead to memory leaks, and how to properly cleanse your component lifecycle.",
  date: "2025-10-31",
  channel: "Technical",
  url: "#"
}
FieldRequiredDescription
idYesUnique string identifier
titleYesFull title of the post or article
excerptYesOne- or two-sentence summary shown on the card
dateYesPublication date in YYYY-MM-DD format
channelYesCategory label such as "Technical", "Reflections", or "Project Writeups"
urlYesLink to the full post — can be an external URL or "#" for future content
6

Update data/caseStudies.js — Detailed Project Breakdowns

Open data/caseStudies.js and replace the case study entries with your own project post-mortems or technical deep-dives. Each entry is rendered as a RitualReport on the Case Studies page. The sections array controls the structured breakdown content.
// data/caseStudies.js — full object shape
{
  id: "nexus-rebuild",
  title: "RITUAL REPORT: NEXUS DASHBOARD REBUILD",
  sigilId: "case-studies",
  sections: [
    {
      heading: "Problem",
      content: "The legacy dashboard was suffering from severe performance degradation when rendering more than 500 data points."
    },
    {
      heading: "Goal",
      content: "Refactor the visualization layer to handle 10,000+ data points at 60fps without sacrificing the interactive tooltips and glowing neon aesthetics."
    },
    {
      heading: "Process",
      content: "Initiated a profiling ritual using Chrome DevTools to identify the exact bottlenecks."
    },
    {
      heading: "Result",
      content: "Achieved stable 60fps rendering 15,000 data points. Payload size decreased by 40%."
    }
  ]
}
FieldRequiredDescription
idYesUnique slug for the case study
titleYesDisplay title — the theme prefixes these with "RITUAL REPORT:" by convention
sigilIdYesControls the decorative sigil shown with the report
sectionsYesArray of { heading, content } objects forming the report body
The default case studies use a consistent set of section headings: Problem, Goal, Process, Design Decisions, Dev Decisions, Testing & Debugging, Result, and Skills Demonstrated. You can use any headings that suit your project narrative.
7

Update contact details and social links

Open the Contact page component and replace all placeholder contact information with your own. This includes:
  • Email address — the primary contact method
  • GitHub profile URL — link to your public GitHub account
  • LinkedIn profile URL — link to your LinkedIn profile
  • Résumé or CV download link — a direct link to a PDF or hosted document
  • Any additional external profiles you want to surface
The SummoningForm component handles the contact form UI. If you want to wire the form to a backend service (e.g. Formspree, Netlify Forms), update the form submission handler in the component.
Remove all placeholder links (those pointing to "#") before publishing your personalized site. Any # href tells visitors the link is not yet wired up.

​
Editing Checklist

Use this table as a final review before publishing your personalized site.
LocationWhat to Update
Home page componentPortfolio-owner name, professional headline, homepage introduction
About page componentBiography, background narrative, timeline milestones, trait descriptions
data/projects.jsProject titles, descriptions, tags, images, demo/source URLs, binding notes
data/skills.jsSkill names, categories, mastery levels, descriptions, sigil IDs
data/writing.jsPost titles, excerpts, publication dates, channel labels, article URLs
data/caseStudies.jsCase study titles, section headings, section content, sigil IDs
Contact page componentEmail, GitHub, LinkedIn, résumé link, any additional social profiles

Build docs developers (and LLMs) love

Get started for freeTalk to us