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 is organized as a collection of eleven separate HTML entry files. Each file is a self-contained portfolio page with its own <head>, preloaded module graph, and React component tree. There is no client-side router — navigating between sections means following a standard <a href> link to the next .html file. This flat structure makes the theme trivially deployable to GitHub Pages without any build pipeline or server-side configuration.

Pages at a Glance

The table below lists every page, its filename, and its primary role in the portfolio.
FilePurpose
index.htmlMain homepage and GitHub Pages entry point; features a hero introduction, animated project previews, and sigil navigation
about.htmlBiography and background; renders TraitSigilGrid for personality traits and TimelineEntry for work/education history
articles.htmlArticle index listing all published writing by date and channel
casestudies.htmlDetailed project and technical breakdowns rendered through the RitualReport component
contact.htmlContact details and communication links; hosts the SummoningForm component
placeholders.htmlPlaceholder content reserved for future sections not yet populated
projects.htmlFeatured project portfolio rendered through the ProjectPanel component grid
skills.htmlTechnologies and capabilities displayed in a RuneTile grid, grouped by category
testimonials.htmlTestimonials and peer feedback
work.htmlProfessional experience and formal work history
writing.htmlWriting archive rendered through a TomeCard grid, sourced from data/writing.js

index.html — Homepage

The GitHub Pages entry point. Presents the hero introduction with the portfolio owner’s name and headline, animated project previews via SummoningCircle, and the sigil navigation grid that links to every section. Must remain at the repository root.

about.html — Biography

Renders a biography text block, the TraitSigilGrid with five animated personality sigils, and the vertical TimelineEntry work/education history. The primary page for personal storytelling.

projects.html — Portfolio

Displays featured projects via the ProjectPanel component. Each entry is sourced from data/projects.js and includes a title, description, technology tags, project image, demo link, source link, and themed binding notes.

skills.html — Capabilities

Renders a grid of RuneTile components populated by data/skills.js. Skills are organized into six categories: Languages, Front-End, Back-End/Data, Debugging, Git/GitHub, and Design — each with a mastery level and themed description.

writing.html — Archive

Displays published writing through a TomeCard grid. Each card is sourced from data/writing.js and shows the article title, excerpt, date, and channel (Technical, Reflections, Bug Reports, Project Writeups, General Audience).

casestudies.html — Deep Dives

Renders full-length project breakdowns via the RitualReport component. Each study from data/caseStudies.js is divided into named sections: Problem, Goal, Process, Design Decisions, Dev Decisions, Testing & Debugging, Result, and Skills Demonstrated.

contact.html — Contact

Hosts the SummoningForm component alongside direct contact links for email, GitHub, LinkedIn, and a downloadable résumé. All external href values are placeholder # links until replaced with real URLs.

testimonials.html — Feedback

Collects testimonials and peer feedback. Update this page with quotes, names, and roles from real colleagues, clients, or collaborators.

work.html — Experience

A dedicated professional experience page. Complements the timeline on about.html with a fuller presentation of roles, responsibilities, and dates.

articles.html — Index

A standalone article index page distinct from the full writing archive. Use it to surface the most recent or featured posts.

placeholders.html — Reserved

Placeholder content used where additional sections can be added later. Remove, rename, or replace this file as the portfolio grows.

Data Files and the Pages They Power

Content-heavy pages pull their data from JavaScript files inside the data/ directory. Each data file exports a plain array of objects that the corresponding React component maps over to render cards, tiles, or panels.
Data FilePowersExported Records
data/projects.jsprojects.html4 projects (VOID TRACKER, NEXUS DASHBOARD, SPELL.CHK CLI, ALCHEMY UI)
data/skills.jsskills.html12 skills across 6 categories (Languages, Front-End, Back-End/Data, Debugging, Git/GitHub, Design)
data/writing.jswriting.html5 articles across 5 channels
data/caseStudies.jscasestudies.html2 full case studies (Nexus Dashboard Rebuild, Accessible Alchemy UI)
data/sigils.jsAll pagesSVG path registry for every sigil ID used across all components
data/sigils.js is preloaded on every page via a <link rel="modulepreload"> tag in each HTML file’s <head>. It is not a content file you edit regularly — it defines the SVG drawing paths for every sigil and rune symbol referenced by ID throughout the component system.

How SPA Routing Works

Sys.Witch V2 does not use a client-side router. There is no React Router, no hash-based navigation, and no single application shell. Instead, each portfolio section is a fully independent HTML file with its own <head> block, its own list of <link rel="modulepreload"> module hints, and its own <script type="module"> entry point in assets/main.js.
<!-- Each page's <head> explicitly preloads only what it needs -->
<link rel="modulepreload" crossorigin href="./data/projects.js">
<link rel="modulepreload" crossorigin href="./components/projects/ProjectPanel.js">
Navigation between pages is handled with standard anchor tags pointing to sibling .html files:
<a href="projects.html">Projects</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
This approach means each page loads independently, browser history works as expected, and there are no hydration mismatches or routing edge cases to debug. The trade-off is that shared UI (the PortalNav, ParticleField, and Layout wrapper) is re-mounted on every navigation.

The index.html Entry Point

index.html is the GitHub Pages entry point. GitHub Pages serves index.html automatically when a visitor navigates to the root URL of the repository site (e.g. https://apursley2012.github.io/sys.witch-v2/). It must remain at the repository root — not inside any subfolder.
Never rename index.html to home.html or move it into a subdirectory. GitHub Pages will serve a 404 for the root URL if index.html is missing from the repository root.
A companion .nojekyll file sits alongside index.html at the root. This empty file instructs GitHub Pages to publish the files as-is without running them through the Jekyll static site generator, which would otherwise interfere with the JavaScript module paths inside assets/.

Build docs developers (and LLMs) love