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.

The skills.js data file drives the entire Skills section of the portfolio. It exports a named array (s) of skill objects, each consumed by the RuneTile component to render an individual skill card complete with a rune icon, mastery indicator, category label, and a one-line flavoured description. Mastery level directly controls the glow colour applied to the card — a visual language that lets visitors quickly scan the depth of each technology at a glance. Location: data/skills.js

​
Data Shape

Each element in the array conforms to the following interface: 
interface Skill {
  id: string;                    // Unique identifier, e.g. "ts", "react"
  name: string;                  // Display name, e.g. "TypeScript"
  category: string;              // One of the six defined categories (see below)
  mastery: "Master" | "Adept";  // Drives the visual mastery indicator in RuneTile
  description: string;           // Flavored one-liner about the skill
  sigilId: string;               // References a rune key in data/sigils.js (rune-1 through rune-7)
}

​
Field Reference

​
id
string
required
A short, unique identifier for the skill used as a React list key. Convention is a lowercase abbreviation, e.g. "ts" for TypeScript, "react" for React. Must be unique across the entire array.
​
name
string
required
The human-readable display name shown in the RuneTile heading, e.g. "TypeScript" or "Framer Motion". Casing is preserved exactly as written.
​
category
string
required
The category group this skill belongs to. The Skills page uses this field to group and filter tiles. Must be one of the six defined values:
ValueDescription
LanguagesProgramming and scripting languages
Front-EndUI frameworks, styling, and animation libraries
Back-End/DataServer runtimes and database query languages
DebuggingProfiling tools and testing frameworks
Git/GitHubVersion control and collaboration tooling
DesignDesign and prototyping tools
​
mastery
"Master" | "Adept"
required
The mastery level rendered as a visual indicator on the RuneTile component. Accepts exactly two values:
  • "Master" — renders with a neon-purple glow, indicating deep, daily-use proficiency.
  • "Adept" — renders with a neon-cyan glow, indicating working proficiency and active growth.
​
description
string
required
A single flavoured sentence describing the skill through the cyber-occult lens of the theme. Kept short — one sentence — to fit neatly within the tile layout without overflow.
​
sigilId
string
required
References one of the seven rune keys defined in data/sigils.js. Valid values are "rune-1" through "rune-7". The RuneTile component looks up this key to render the corresponding SVG path as the tile’s decorative icon. Multiple skills may share the same sigilId.

​
Current Skills

All 12 skills currently defined in data/skills.js: 
export const s = [
  // — Languages —
  {
    id: "ts",
    name: "TypeScript",
    category: "Languages",
    mastery: "Master",
    description: "Strict typing rituals to banish runtime errors.",
    sigilId: "rune-1",
  },
  {
    id: "js",
    name: "JavaScript",
    category: "Languages",
    mastery: "Master",
    description: "The chaotic ancient tongue of the web.",
    sigilId: "rune-2",
  },
  {
    id: "python",
    name: "Python",
    category: "Languages",
    mastery: "Adept",
    description: "Serpentine scripts for automation and data binding.",
    sigilId: "rune-3",
  },

  // — Front-End —
  {
    id: "react",
    name: "React",
    category: "Front-End",
    mastery: "Master",
    description: "Component conjuration and state alchemy.",
    sigilId: "rune-4",
  },
  {
    id: "tailwind",
    name: "Tailwind CSS",
    category: "Front-End",
    mastery: "Master",
    description: "Utility-first styling incantations.",
    sigilId: "rune-5",
  },
  {
    id: "framer",
    name: "Framer Motion",
    category: "Front-End",
    mastery: "Adept",
    description: "Breathing life into static DOM elements.",
    sigilId: "rune-6",
  },

  // — Back-End/Data —
  {
    id: "node",
    name: "Node.js",
    category: "Back-End/Data",
    mastery: "Adept",
    description: "Server-side runtime environments.",
    sigilId: "rune-7",
  },
  {
    id: "sql",
    name: "SQL",
    category: "Back-End/Data",
    mastery: "Adept",
    description: "Relational data extraction and manipulation.",
    sigilId: "rune-1",
  },

  // — Debugging —
  {
    id: "debug",
    name: "Chrome DevTools",
    category: "Debugging",
    mastery: "Master",
    description: "Peering into the void to find the source of bugs.",
    sigilId: "rune-2",
  },
  {
    id: "jest",
    name: "Jest / Vitest",
    category: "Debugging",
    mastery: "Adept",
    description: "Automated wards against regressions.",
    sigilId: "rune-3",
  },

  // — Git/GitHub —
  {
    id: "git",
    name: "Git",
    category: "Git/GitHub",
    mastery: "Master",
    description: "Timeline manipulation and alternate reality branching.",
    sigilId: "rune-4",
  },

  // — Design —
  {
    id: "figma",
    name: "Figma",
    category: "Design",
    mastery: "Adept",
    description: "Vector manipulation and interface pre-visualization.",
    sigilId: "rune-5",
  },
];

​
Mastery Levels

The mastery field accepts exactly two string literals. Anything else will silently fall through to the default style.
ValueGlow ColourIntended Meaning
"Master"Neon-purpleDeep, near-daily proficiency — a core tool in the stack
"Adept"Neon-cyanWorking proficiency — used regularly with occasional reference
There is intentionally no third tier. The binary contrast between Master and Adept keeps the visual hierarchy clean. If a skill is too new to warrant either label, leave it out of the array until it reaches Adept level.

​
Categories

The six valid category values group tiles on the Skills page. Use the exact strings below — the filter logic is case-sensitive:

Languages

Programming and scripting languages: TypeScript, JavaScript, Python.

Front-End

UI frameworks, styling libraries, and animation tooling: React, Tailwind CSS, Framer Motion.

Back-End/Data

Server runtimes and data query languages: Node.js, SQL.

Debugging

Browser DevTools and automated testing frameworks: Chrome DevTools, Jest / Vitest.

Git/GitHub

Version control and remote collaboration tooling: Git.

Design

Interface design and prototyping tools: Figma.

​
Adding a Skill

Append a new object to the end of the exported array. All six fields are required. Choose a sigilId from the table below:
sigilIdSVG Shape Description
rune-1Pointed diamond / bowtie form
rune-2Concentric diamond squares
rune-3Crossed diagonals with vertical spine
rune-4Circle bisected by crosshair
rune-5Double grid of horizontal and vertical lines
rune-6Diamond enclosing a smaller diamond
rune-7Upward-pointing triangle with inner triangle
Multiple skills may share the same sigilId. The rune acts as a decorative glyph — it does not need to be unique per skill entry. Choose whichever shape best suits the aesthetic of the skill being added.
The category field is case-sensitive and must match one of the six defined strings exactly: "Languages", "Front-End", "Back-End/Data", "Debugging", "Git/GitHub", or "Design". An unrecognised value will cause the tile to appear in an uncategorised group or be excluded from filter results.

Build docs developers (and LLMs) love

Get started for freeTalk to us