TheDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/full-stack-sorcerer/llms.txt
Use this file to discover all available pages before exploring further.
/skills route, titled “Tricks of the Trade”, presents the developer’s technical toolkit through a playful reveal mechanic. On page load you see a large illustrated magic hat sitting on a misty stage floor. Skills are hidden inside it until you click — at that moment each skill explodes upward as a glowing ghost-shaped bubble, drifting to a randomized position on screen. The bubbles are fully draggable, so you can grab any one and fling it around the viewport. Each bubble is sized proportionally to the skill’s proficiency level and colored to reflect its category.
Skills
| Skill | Category | Proficiency |
|---|---|---|
| Tailwind | Frontend | 95% |
| React | Frontend | 90% |
| Framer Motion | Frontend | 85% |
| TypeScript | Frontend | 85% |
| Node.js | Backend | 80% |
| PostgreSQL | Backend | 75% |
| Figma | Design | 70% |
Category Color Coding
Each skill bubble glows with a distinct color that signals its category at a glance:| Category | Glow Color | Description |
|---|---|---|
frontend | Turquoise (#3fd6c0) | UI technologies — React, TypeScript, Tailwind, Framer Motion |
backend | Blue (#60a5fa) | Server-side technologies — Node.js, PostgreSQL |
design | Orange (#f59e0b) | Design tooling — Figma |
Interactive Magic-Hat Experience
Visit /skills
Navigate to the
/skills route. You’ll see the “Tricks of the Trade” heading, a misty stage floor, and a large illustrated magic hat. A WandSparkles icon pulses above the hat and the label reads “Click the hat”.Click the magic hat
Click the hat to trigger the reveal. All seven skill bubbles are created simultaneously and launched with a Framer Motion
spring animation — each flying to a randomized x/y position on the screen with a staggered 0.1s delay per bubble.Watch the bubbles float
Once positioned, every bubble enters a continuous floating loop (
y: 0 → -10 → 0). Bubble size scales with proficiency level (scale = level / 80), so a 95% skill appears noticeably larger than a 70% skill.Adding a New Skill
Extend the skills array inassets/main.js with a new object following this shape:
| Field | Type | Allowed values | Purpose |
|---|---|---|---|
name | string | Any | Label shown beneath the ghost bubble. |
category | string | "frontend" · "backend" · "design" | Controls the glow color of the bubble. |
level | number | 0 – 100 | Proficiency percentage; also scales bubble size (scale = level / 80). |