Skip to main content

Documentation Index

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

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

RuneTile renders a single skill as a bordered interactive tile — showing a Sigil glyph, the skill name, a mastery level badge, and a short description. On hover, the tile’s border brightens to neon-lime, a glow shadow appears, and the heading shifts to text-neon-lime. Skills are rendered in a responsive grid on the Skills page, with each tile stagger-animated into view as it enters the viewport.

​
Props

​
skill
Skill
required
The skill data object to render. See the Skill Object Shape section below for required fields.
​
index
number
required
The zero-based position of this tile in the skills array. Used to calculate the stagger delay for the scroll-triggered entrance animation (delay: index * 0.05).

​
Skill Object Shape

FieldTypeDescription
sigilIdstringSigil ID from sigils.js used to render the tile’s glyph icon
mastery'Master' | 'Adept' | 'Initiate'Proficiency tier — controls badge color
namestringDisplay name shown on the tile (e.g. "TypeScript")
descriptionstringOne-line flavor text shown beneath the skill name

​
Usage

import { RuneTile } from './components/skills/RuneTile.js';
import { skills } from './data/skills.js';

// Render all skills in a grid
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
  {skills.map((skill, i) => (
    <RuneTile key={skill.sigilId} skill={skill} index={i} />
  ))}
</div>

​
Mastery Levels

LevelBadge ColorMeaning
MasterLimeHighly proficient — used daily, comfortable with advanced patterns
AdeptPurpleComfortable and productive — solid working knowledge
InitiateCyanFoundational familiarity — actively developing this skill

​
Animation

Each RuneTile uses Framer Motion’s whileInView to fade and slide in from { opacity: 0, y: 20 } to { opacity: 1, y: 0 } once it enters the viewport. The viewport is configured with once: true so the animation fires only on first appearance. The index prop controls the stagger: delay: index * 0.05.
Each skill entry references a sigilId. Use one of the rune-1 through rune-7 sigils for generic skill icons, or define a custom sigil path in sigils.js if you want a distinctive glyph for a specific technology.

Build docs developers (and LLMs) love

Get started for freeTalk to us