Familiar Languages is the skills page of the Digital Alchemy portfolio, rendered at routeDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/digital-alchemy/llms.txt
Use this file to discover all available pages before exploring further.
/skills. Rather than a conventional progress-bar or tag-cloud layout, this page visualizes the developer’s technical toolkit as a star map — a constellation of interconnected celestial bodies where proximity and brightness convey relationships and mastery.
What Renders on This Page
The page structure follows the same Framer Motion entrance pattern used across the site, with:- Heading: “Familiar Languages” in large parchment serif
- Subheading: “The stars that guide my craft” in uppercase turquoise
Constellation component fills the center of the page. Below it, a brief instructional caption fades in with a 1.5 s delay (long enough for the constellation to finish its own entrance animation before the hint appears):
“Hover over the celestial bodies to reveal proficiency. The brightest stars represent my core incantations, while the connecting lines show how these technologies weave together to form complete digital ecosystems.”
Constellation Component
The interactive star-map component that renders skills as celestial bodies. Handles hover-reveal proficiency, animated connecting lines between ecosystem-related technologies, and staggered star entrance animations.
How the Visualization Works
Star brightness and size
Star brightness and size
Each technology is represented as a circular node. The visual weight of the node (size and glow intensity) corresponds to the developer’s proficiency level — core skills like React and TypeScript appear as large, bright stars while supporting tools appear smaller and dimmer at the edges of the map.
Hover-reveal proficiency
Hover-reveal proficiency
Stars are interactive. Hovering over a node reveals the specific proficiency level or contextual label for that technology. This keeps the default view clean and atmospheric while rewarding exploration with richer detail.
Connecting lines and ecosystem relationships
Connecting lines and ecosystem relationships
Lines are drawn between related technologies to communicate how skills combine in practice — for example, React connects to TypeScript, Framer Motion, and Tailwind CSS, while Go connects to Docker and AWS. These relationships reflect the actual project architectures shown in Summonings.
Entrance animation
Entrance animation
The constellation uses staggered Framer Motion animations so stars appear to emerge from darkness one by one rather than all at once. The 1.5 s delay on the instructional caption ensures it appears only after the map is fully rendered.
Skills Represented
Based on the project data across the portfolio, the constellation visualizes the following technologies:Frontend Core
React, TypeScript, JavaScript, HTML5, CSS3, Tailwind CSS, Framer Motion
Backend & Services
Node.js, Next.js, GraphQL, Go, REST APIs
Data & Infrastructure
PostgreSQL, Redis, Docker, AWS
Tooling & Testing
Vite, Jest, Canvas API, WebGL, Three.js, WebSockets
Route Information
| Property | Value |
|---|---|
| Route path | /skills |
| React component | Skills (internal name k) |
| Key components | Constellation |
| Animation library | Framer Motion |
The caption text deliberately uses the alchemy metaphor — technologies are “incantations” and relationships are described as “weaving together.” This keeps the skills page tonally consistent with the rest of the portfolio without sacrificing clarity about what the skills actually are.