skill tracker mockup — Gemini 3 Flash

Core Concept: A "Cyber-Core" software engineering skill tree. The interface is a radial/orbital map where a central "Main Core" is surrounded by orbiting skill categories, which in turn have their own orbiting sub-skill nodes.

Technical Stack:
Framework: React with Tailwind CSS.
Animations: motion/react (Framer Motion).
Icons: lucide-react.

Layout Architecture:
Radial Map: Use a coordinate system based on sin and cos to position nodes in concentric circles.
The Core: A large, pulsing central node labeled "Main Core."
Orbits: Primary categories (e.g., Frontend, Backend, DevOps) orbit the core. When a category is clicked, it expands to show sub-skill nodes (e.g., React, Node.js, Docker) in a secondary, wider orbit.
Sidebar: A right-aligned, 1/3 width slide-over panel (using AnimatePresence) that displays "System Documentation" and "Project Manifests" for the selected skill.

Visual Aesthetic (Cyber-Core):
Palette: Background: #0a0a0a (Deep Black). Accents: #22d3ee (Cyan).
Typography: Use Inter for UI and a monospace font for data strings.
Styling: Use dashed lines for orbital paths. Implement "contextual dimming" where non-active paths fade out when a category is expanded. Use thin borders and high-contrast text to maintain a professional "command center" feel rather than a gamey UI.

Key Interactions:
Node Toggles: Clicking a primary node should toggle its sub-nodes with a spring-based layout animation.
Sidebar Trigger: Clicking a sub-node should open the sidebar and populate it with mock documentation.
Motion: Use layout props in Framer Motion for smooth radial transitions. Add a subtle "pulse" animation to the central core.

Mock Data:
Include a hardcoded SKILLS_DATA constant with nested categories, sub-skills, XP values, and short descriptions to populate the map and sidebar.