refactor: extract leaf UI components from SkillTree.svelte
Phase 4 (behavior-preserving): split the monolithic component's DOM overlays into focused children, each owning its markup + scoped CSS: - LoadingIndicator.svelte, WelcomeTitle.svelte, Tooltip.svelte - NodeModal.svelte (modal + ~280 lines CSS; onClose callback, category-narrowed) - StatsPanel.svelte (toggle + backdrop + panel + ~340 lines CSS; onToggle/ onToggleBranch callbacks). Kept the .stats-panel-toggle class name stable so the entrance-animation GSAP querySelector still resolves. SkillTree.svelte drops from 2453 -> ~600 lines. Modernized the moved event handlers (on:click -> onclick), clearing the 9 Svelte deprecation warnings. svelte-check: 0 errors, 0 warnings. lint/test/build clean. Verified the stats panel renders identically in-browser (LVL/mastery/branches all correct). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,44 @@
|
||||
<!-- Loading spinner shown during PixiJS init (also serves as Lighthouse LCP element). -->
|
||||
<div class="loading-indicator">
|
||||
<div class="spinner"></div>
|
||||
<p>Loading Atlas of Skills...</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.loading-indicator {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
z-index: 1000;
|
||||
color: var(--color-gold);
|
||||
}
|
||||
|
||||
.loading-indicator p {
|
||||
font-family: 'Cinzel Decorative', 'Trajan Pro', serif;
|
||||
font-size: 1.2rem;
|
||||
margin-top: 1rem;
|
||||
color: var(--color-gold);
|
||||
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 4px solid rgba(255, 215, 0, 0.2);
|
||||
border-top: 4px solid var(--color-gold);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,542 @@
|
||||
<script lang="ts">
|
||||
import type { TreeNode } from '$lib/data';
|
||||
import { categoryColorHex } from '$lib/theme';
|
||||
|
||||
const { node, visible, onClose }: { node: TreeNode; visible: boolean; onClose: () => void } =
|
||||
$props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="modal-backdrop"
|
||||
class:visible
|
||||
onclick={onClose}
|
||||
onkeydown={(e) => e.key === 'Escape' && onClose()}
|
||||
role="presentation"
|
||||
aria-label="Modal backdrop. Click to close or press Escape."
|
||||
>
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<!-- svelte-ignore a11y_interactive_supports_focus -->
|
||||
<div
|
||||
class="modal"
|
||||
class:visible
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-title"
|
||||
aria-describedby="modal-description"
|
||||
style="--node-color: {categoryColorHex[node.category]}"
|
||||
>
|
||||
<button class="close-btn" onclick={onClose} aria-label="Close dialog">✕</button>
|
||||
|
||||
<h2 id="modal-title">
|
||||
{#if node.icon}
|
||||
<img src={node.icon} alt="" class="modal-icon" />
|
||||
{/if}
|
||||
{node.label}
|
||||
</h2>
|
||||
|
||||
<span class="category-badge">{node.category}</span>
|
||||
|
||||
<div id="modal-description">
|
||||
<!-- Origin-specific content -->
|
||||
{#if node.category === 'origin'}
|
||||
{#if node.jobTitle}
|
||||
<div class="origin-title">{node.jobTitle}</div>
|
||||
{/if}
|
||||
{#if node.location}
|
||||
<div class="origin-location">📍 {node.location}</div>
|
||||
{/if}
|
||||
{#if node.aboutMe}
|
||||
<p class="about-me">{node.aboutMe}</p>
|
||||
{/if}
|
||||
{#if node.email || node.linkedIn || node.github || node.website}
|
||||
<div class="social-links">
|
||||
{#if node.email}
|
||||
<a href="mailto:{node.email}" title="Email" aria-label="Send email">✉️ Email</a>
|
||||
{/if}
|
||||
{#if node.linkedIn}
|
||||
<a
|
||||
href={node.linkedIn}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
title="LinkedIn"
|
||||
aria-label="LinkedIn profile (opens in new tab)">💼 LinkedIn</a
|
||||
>
|
||||
{/if}
|
||||
{#if node.github}
|
||||
<a
|
||||
href={node.github}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
title="GitHub"
|
||||
aria-label="GitHub profile (opens in new tab)">💻 GitHub</a
|
||||
>
|
||||
{/if}
|
||||
{#if node.website}
|
||||
<a
|
||||
href={node.website}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
title="Website"
|
||||
aria-label="Personal website (opens in new tab)">🌐 Website</a
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
{#if node.resumeUrl}
|
||||
<a href={node.resumeUrl} download class="resume-button"> 📄 Download Resume </a>
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<!-- Experience-specific content -->
|
||||
{#if node.category === 'experience' && node.company}
|
||||
<div class="meta-info">
|
||||
<span class="company">{node.company}</span>
|
||||
{#if node.startDate}
|
||||
<span class="dates">{node.startDate} — {node.endDate || 'Present'}</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Education-specific content -->
|
||||
{#if node.category === 'education' && node.institution}
|
||||
<div class="meta-info">
|
||||
<span class="company">{node.institution}</span>
|
||||
{#if node.degree}
|
||||
<span class="dates">{node.degree} in {node.field || 'N/A'}</span>
|
||||
{/if}
|
||||
{#if node.graduationYear}
|
||||
<span class="dates">Graduated {node.graduationYear}</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Skill-specific content -->
|
||||
{#if node.category === 'skills' && node.proficiency}
|
||||
<div class="meta-info">
|
||||
<span class="proficiency-badge {node.proficiency}">{node.proficiency}</span>
|
||||
{#if node.yearsOfExperience}
|
||||
<span class="dates">{node.yearsOfExperience} years experience</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if node.category !== 'origin'}
|
||||
<p>{node.description}</p>
|
||||
{/if}
|
||||
|
||||
<!-- Highlights (for experience) -->
|
||||
{#if node.category === 'experience' && node.highlights && node.highlights.length > 0}
|
||||
<ul class="highlights">
|
||||
{#each node.highlights as highlight (highlight)}
|
||||
<li>{highlight}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
|
||||
<!-- Tech stack (for projects) -->
|
||||
{#if node.category === 'projects' && node.techStack && node.techStack.length > 0}
|
||||
<div class="tech-stack">
|
||||
{#each node.techStack as tech (tech)}
|
||||
<span class="tech-tag">{tech}</span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Project status badge -->
|
||||
{#if node.category === 'projects' && node.status}
|
||||
<div class="project-status">
|
||||
<span class="status-badge {node.status}">{node.status}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Links (for projects) -->
|
||||
{#if node.category === 'projects' && (node.projectUrl || node.repoUrl || node.pypiUrl || node.npmUrl)}
|
||||
<div class="links">
|
||||
{#if node.projectUrl}
|
||||
<a
|
||||
href={node.projectUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Live site (opens in new tab)">🔗 Live Site</a
|
||||
>
|
||||
{/if}
|
||||
{#if node.repoUrl}
|
||||
<a
|
||||
href={node.repoUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Code repository (opens in new tab)">💻 Repository</a
|
||||
>
|
||||
{/if}
|
||||
{#if node.pypiUrl}
|
||||
<a
|
||||
href={node.pypiUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Python package on PyPI (opens in new tab)">📦 PyPI</a
|
||||
>
|
||||
{/if}
|
||||
{#if node.npmUrl}
|
||||
<a
|
||||
href={node.npmUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="npm package (opens in new tab)">📦 npm</a
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
transition: background 0.2s ease;
|
||||
backdrop-filter: blur(0px);
|
||||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.modal-backdrop.visible {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: linear-gradient(145deg, var(--panel-from) 0%, var(--panel-to) 100%);
|
||||
border: 1px solid var(--node-color);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
max-width: 420px;
|
||||
width: 100%;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
box-shadow:
|
||||
0 0 40px color-mix(in srgb, var(--node-color) 30%, transparent),
|
||||
0 0 80px color-mix(in srgb, var(--node-color) 15%, transparent),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
opacity: 0;
|
||||
transform: scale(0.9) translateY(20px);
|
||||
transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
.modal.visible {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
|
||||
.modal h2 {
|
||||
color: var(--node-color);
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.3rem;
|
||||
text-shadow: 0 0 20px var(--node-color);
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.modal-icon {
|
||||
width: 1.4em;
|
||||
height: 1.4em;
|
||||
vertical-align: middle;
|
||||
margin-right: 0.5rem;
|
||||
filter: drop-shadow(0 0 8px var(--node-color));
|
||||
}
|
||||
|
||||
.category-badge {
|
||||
display: inline-block;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--node-color),
|
||||
color-mix(in srgb, var(--node-color) 70%, black)
|
||||
);
|
||||
color: #0a0a0f;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.modal p {
|
||||
color: var(--text-muted);
|
||||
line-height: 1.7;
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #666;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
transition: all 0.15s;
|
||||
border-radius: 4px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: white;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Origin-specific styles */
|
||||
.origin-title {
|
||||
color: var(--node-color);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.25rem;
|
||||
text-shadow: 0 0 10px var(--node-color);
|
||||
}
|
||||
|
||||
.origin-location {
|
||||
color: #888;
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.about-me {
|
||||
color: var(--text-muted);
|
||||
line-height: 1.7;
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.social-links a {
|
||||
color: #ccc;
|
||||
text-decoration: none;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.social-links a:hover {
|
||||
color: var(--node-color);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: var(--node-color);
|
||||
}
|
||||
|
||||
/* Meta info styles */
|
||||
.meta-info {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.meta-info .company {
|
||||
display: block;
|
||||
color: var(--node-color);
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.meta-info .dates {
|
||||
display: block;
|
||||
color: #888;
|
||||
font-size: 0.8rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.proficiency-badge {
|
||||
display: inline-block;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.proficiency-badge.beginner {
|
||||
background: #4a5568;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.proficiency-badge.intermediate {
|
||||
background: #2b6cb0;
|
||||
color: #bee3f8;
|
||||
}
|
||||
|
||||
.proficiency-badge.advanced {
|
||||
background: #2f855a;
|
||||
color: #c6f6d5;
|
||||
}
|
||||
|
||||
.proficiency-badge.expert {
|
||||
background: #b7791f;
|
||||
color: #fefcbf;
|
||||
}
|
||||
|
||||
.highlights {
|
||||
margin: 0.75rem 0 0 0;
|
||||
padding-left: 1.2rem;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.highlights li {
|
||||
margin-bottom: 0.4rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.tech-stack {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.tech-tag {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ccc;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.7rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.links a {
|
||||
color: var(--node-color);
|
||||
text-decoration: none;
|
||||
font-size: 0.8rem;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
.links a:hover {
|
||||
opacity: 0.8;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.resume-button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
padding: 0.75rem 1rem;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--node-color),
|
||||
color-mix(in srgb, var(--node-color) 70%, black)
|
||||
);
|
||||
color: #0a0a0f;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 0 20px color-mix(in srgb, var(--node-color) 30%, transparent);
|
||||
}
|
||||
|
||||
.resume-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 0 30px color-mix(in srgb, var(--node-color) 50%, transparent);
|
||||
}
|
||||
|
||||
.resume-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.project-status {
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.6rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.status-badge.active {
|
||||
background: #2f855a;
|
||||
color: #c6f6d5;
|
||||
}
|
||||
|
||||
.status-badge.maintained {
|
||||
background: #2b6cb0;
|
||||
color: #bee3f8;
|
||||
}
|
||||
|
||||
.status-badge.completed {
|
||||
background: #6b5b95;
|
||||
color: #e2d8f0;
|
||||
}
|
||||
|
||||
.status-badge.archived {
|
||||
background: #4a5568;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
/* Mobile-specific styles */
|
||||
@media (max-width: 767px) {
|
||||
.modal {
|
||||
padding: 1.25rem;
|
||||
max-height: 85vh;
|
||||
border-radius: 16px 16px 0 0;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
align-items: flex-end;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.modal h2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.social-links a {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.35rem 0.5rem;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
font-size: 1.75rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+25
-1222
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,501 @@
|
||||
<script lang="ts">
|
||||
import { slide } from 'svelte/transition';
|
||||
import { treeNodes, type SkillNode } from '$lib/data';
|
||||
|
||||
const {
|
||||
visible,
|
||||
playerLevel,
|
||||
playerClass,
|
||||
skillCounts,
|
||||
totalSkills,
|
||||
skillsByBranch,
|
||||
expandedBranches,
|
||||
onToggle,
|
||||
onToggleBranch
|
||||
}: {
|
||||
visible: boolean;
|
||||
playerLevel: number;
|
||||
playerClass: string;
|
||||
skillCounts: { expert: number; advanced: number; intermediate: number; beginner: number };
|
||||
totalSkills: number;
|
||||
skillsByBranch: Record<string, { label: string; skills: SkillNode[] }>;
|
||||
expandedBranches: Set<string>;
|
||||
onToggle: () => void;
|
||||
onToggleBranch: (branchId: string) => void;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<!-- Stats Panel Toggle Button -->
|
||||
<button
|
||||
class="stats-panel-toggle"
|
||||
class:open={visible}
|
||||
onclick={onToggle}
|
||||
title="Character Stats (C)"
|
||||
aria-label="Toggle Character Stats Panel (Keyboard shortcut: C)"
|
||||
aria-expanded={visible}
|
||||
aria-controls="stats-panel"
|
||||
>
|
||||
⚙️
|
||||
</button>
|
||||
|
||||
<!-- Stats Panel Backdrop -->
|
||||
{#if visible}
|
||||
<div
|
||||
class="stats-panel-backdrop visible"
|
||||
onclick={onToggle}
|
||||
onkeydown={(e) => e.key === 'Escape' && onToggle()}
|
||||
role="presentation"
|
||||
aria-label="Stats panel backdrop. Click to close or press Escape."
|
||||
></div>
|
||||
{/if}
|
||||
|
||||
<!-- Stats Panel -->
|
||||
<div
|
||||
id="stats-panel"
|
||||
class="stats-panel"
|
||||
class:visible
|
||||
role="complementary"
|
||||
aria-label="Character Statistics"
|
||||
aria-hidden={!visible}
|
||||
>
|
||||
<!-- Character Card -->
|
||||
<div class="character-card">
|
||||
<img src="/headshot.jpg" alt="Character Portrait" class="character-portrait" />
|
||||
|
||||
<div class="character-stats-bar">
|
||||
<div class="stat-item">
|
||||
<span>⚔️</span>
|
||||
<span class="stat-label">LVL</span>
|
||||
<span>{playerLevel}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="character-name">Kevin Riehl</h1>
|
||||
<p class="character-title">{playerClass}</p>
|
||||
</div>
|
||||
|
||||
<!-- Skills Section -->
|
||||
<div class="skills-section">
|
||||
<!-- Proficiency Summary -->
|
||||
<div class="proficiency-summary">
|
||||
<h3>⚡ Skill Mastery</h3>
|
||||
<div class="proficiency-row">
|
||||
<span class="proficiency-label">⭐⭐⭐ Expert</span>
|
||||
<span class="proficiency-count">{skillCounts.expert}</span>
|
||||
</div>
|
||||
<div class="proficiency-row">
|
||||
<span class="proficiency-label">⭐⭐ Advanced</span>
|
||||
<span class="proficiency-count">{skillCounts.advanced}</span>
|
||||
</div>
|
||||
<div class="proficiency-row">
|
||||
<span class="proficiency-label">⭐ Intermediate</span>
|
||||
<span class="proficiency-count">{skillCounts.intermediate}</span>
|
||||
</div>
|
||||
<div class="proficiency-row">
|
||||
<span class="proficiency-label">Beginner</span>
|
||||
<span class="proficiency-count">{skillCounts.beginner}</span>
|
||||
</div>
|
||||
<div
|
||||
class="proficiency-row"
|
||||
style="border-top: 1px solid rgba(255,255,255,0.1); margin-top: 0.5rem; padding-top: 0.5rem;"
|
||||
>
|
||||
<span class="proficiency-label">Total Skills</span>
|
||||
<span class="proficiency-count">{totalSkills}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Skill Branches -->
|
||||
{#each Object.entries(skillsByBranch) as [branchId, branch] (branchId)}
|
||||
<div class="skill-branch">
|
||||
<div
|
||||
class="branch-header"
|
||||
onclick={() => onToggleBranch(branchId)}
|
||||
onkeydown={(e) => e.key === 'Enter' && onToggleBranch(branchId)}
|
||||
tabindex="0"
|
||||
role="button"
|
||||
aria-expanded={expandedBranches.has(branchId)}
|
||||
>
|
||||
<img
|
||||
src={treeNodes.find((n) => n.id === branchId)?.icon || ''}
|
||||
alt=""
|
||||
class="branch-icon"
|
||||
/>
|
||||
<span class="branch-title">{branch.label}</span>
|
||||
<span class="branch-count">({branch.skills.length})</span>
|
||||
<span class="expand-icon" class:expanded={expandedBranches.has(branchId)}>▼</span>
|
||||
</div>
|
||||
|
||||
{#if expandedBranches.has(branchId)}
|
||||
<div class="skill-list" transition:slide={{ duration: 300 }}>
|
||||
{#each branch.skills as skill (skill.id)}
|
||||
<div class="skill-item">
|
||||
{#if skill.icon}
|
||||
<img src={skill.icon} alt="" class="skill-item-icon" />
|
||||
{/if}
|
||||
<span class="skill-name">{skill.label}</span>
|
||||
<span class="skill-proficiency">
|
||||
{#if skill.proficiency === 'expert'}
|
||||
<span class="proficiency-stars">⭐⭐⭐</span>
|
||||
{:else if skill.proficiency === 'advanced'}
|
||||
<span class="proficiency-stars">⭐⭐</span>
|
||||
{:else if skill.proficiency === 'intermediate'}
|
||||
<span class="proficiency-stars">⭐</span>
|
||||
{/if}
|
||||
<span>{skill.proficiency || ''}</span>
|
||||
</span>
|
||||
{#if skill.yearsOfExperience}
|
||||
<span class="skill-years">{skill.yearsOfExperience}y</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* ========== STATS PANEL STYLES ========== */
|
||||
|
||||
/* Toggle Button */
|
||||
.stats-panel-toggle {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: linear-gradient(145deg, var(--panel-from) 0%, var(--panel-to) 100%);
|
||||
border: 2px solid var(--color-gold);
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
z-index: 950;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
color: var(--color-gold);
|
||||
box-shadow:
|
||||
0 0 20px rgba(255, 215, 0, 0.3),
|
||||
0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.stats-panel-toggle:hover:not(.open) {
|
||||
transform: scale(1.05);
|
||||
box-shadow:
|
||||
0 0 30px rgba(255, 215, 0, 0.5),
|
||||
0 4px 16px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.stats-panel-toggle.open:hover {
|
||||
box-shadow:
|
||||
0 0 30px rgba(255, 215, 0, 0.5),
|
||||
0 4px 16px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.stats-panel-toggle.open {
|
||||
transform: translateX(380px) rotate(180deg);
|
||||
}
|
||||
|
||||
/* Panel and Backdrop */
|
||||
.stats-panel {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 380px;
|
||||
height: 100vh;
|
||||
background: linear-gradient(145deg, var(--panel-from) 0%, var(--panel-to) 100%);
|
||||
border-right: 2px solid var(--color-gold);
|
||||
box-shadow:
|
||||
4px 0 40px rgba(255, 215, 0, 0.3),
|
||||
8px 0 80px rgba(255, 215, 0, 0.15);
|
||||
z-index: 900;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
/* Custom scrollbar styling for stats panel */
|
||||
.stats-panel::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.stats-panel::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-left: 1px solid rgba(255, 215, 0, 0.1);
|
||||
}
|
||||
|
||||
.stats-panel::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(180deg, var(--color-gold) 0%, #b7941f 100%);
|
||||
border-radius: 5px;
|
||||
border: 2px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.stats-panel::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(180deg, #ffed4e 0%, #d4af37 100%);
|
||||
}
|
||||
|
||||
.stats-panel.visible {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.stats-panel-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 899;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
/* Character Card */
|
||||
.character-card {
|
||||
padding: 2rem 1.5rem;
|
||||
border-bottom: 2px solid rgba(255, 215, 0, 0.2);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.character-portrait {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid var(--color-gold);
|
||||
box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
|
||||
margin: 0 auto 1rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.character-stats-bar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-weight: bold;
|
||||
color: var(--color-gold);
|
||||
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
|
||||
}
|
||||
|
||||
.character-name {
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
color: var(--color-gold);
|
||||
text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
|
||||
margin-bottom: 0.25rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.character-title {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Skills Section */
|
||||
.skills-section {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.proficiency-summary {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 215, 0, 0.2);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.proficiency-summary h3 {
|
||||
color: var(--color-gold);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.proficiency-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.4rem 0;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.proficiency-label {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.proficiency-count {
|
||||
color: var(--color-gold);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.skill-branch {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.branch-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.branch-header:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(255, 215, 0, 0.3);
|
||||
}
|
||||
|
||||
.branch-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
filter: drop-shadow(0 0 8px rgba(249, 168, 37, 0.5));
|
||||
}
|
||||
|
||||
.branch-title {
|
||||
flex: 1;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: var(--color-skills);
|
||||
text-shadow: 0 0 10px rgba(249, 168, 37, 0.3);
|
||||
}
|
||||
|
||||
.branch-count {
|
||||
font-size: 0.8rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.expand-icon.expanded {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.skill-list {
|
||||
margin-top: 0.5rem;
|
||||
padding-left: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skill-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.6rem 0.75rem;
|
||||
margin-bottom: 0.25rem;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid transparent;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.skill-item:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-left-color: var(--color-skills);
|
||||
}
|
||||
|
||||
.skill-item-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.skill-name {
|
||||
flex: 1;
|
||||
font-size: 0.85rem;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.skill-proficiency {
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-muted);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.proficiency-stars {
|
||||
color: var(--color-gold);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.skill-years {
|
||||
font-size: 0.7rem;
|
||||
color: #666;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
/* Mobile Responsive */
|
||||
@media (max-width: 767px) {
|
||||
.stats-panel-toggle {
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
top: auto;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.stats-panel-toggle.open {
|
||||
transform: translateY(-85dvh) rotate(180deg);
|
||||
}
|
||||
|
||||
.stats-panel {
|
||||
width: 100%;
|
||||
height: 85dvh;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-top: 2px solid var(--color-gold);
|
||||
border-radius: 16px 16px 0 0;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
transform: translateY(100%);
|
||||
box-shadow:
|
||||
0 -4px 40px rgba(255, 215, 0, 0.3),
|
||||
0 -8px 80px rgba(255, 215, 0, 0.15);
|
||||
}
|
||||
|
||||
.stats-panel.visible {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.character-portrait {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.character-name {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.character-stats-bar {
|
||||
gap: 1rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,72 @@
|
||||
<script lang="ts">
|
||||
import type { TreeNode } from '$lib/data';
|
||||
|
||||
const { node, style, colorHex }: { node: TreeNode; style: string; colorHex: string } = $props();
|
||||
</script>
|
||||
|
||||
<div class="tooltip" role="tooltip" aria-live="polite" style="{style} --node-color: {colorHex};">
|
||||
<h3>
|
||||
{#if node.icon}
|
||||
<img src={node.icon} alt="" class="tooltip-icon" />
|
||||
{/if}
|
||||
{node.label}
|
||||
</h3>
|
||||
<p>{node.description}</p>
|
||||
<span class="hint">Click for details</span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.tooltip {
|
||||
position: fixed;
|
||||
background: linear-gradient(145deg, var(--panel-from) 0%, #12121a 100%);
|
||||
border: 1px solid var(--node-color);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem 1rem;
|
||||
max-width: 280px;
|
||||
pointer-events: none;
|
||||
z-index: 500;
|
||||
box-shadow:
|
||||
0 0 20px color-mix(in srgb, var(--node-color) 25%, transparent),
|
||||
0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
animation: tooltipFadeIn 0.15s ease-out;
|
||||
}
|
||||
|
||||
@keyframes tooltipFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(5px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip h3 {
|
||||
color: var(--node-color);
|
||||
margin: 0 0 0.35rem 0;
|
||||
font-size: 0.95rem;
|
||||
text-shadow: 0 0 10px var(--node-color);
|
||||
}
|
||||
|
||||
.tooltip p {
|
||||
color: var(--text-muted);
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.tooltip .hint {
|
||||
color: #666;
|
||||
font-size: 0.7rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.tooltip-icon {
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
vertical-align: middle;
|
||||
margin-right: 0.4rem;
|
||||
filter: drop-shadow(0 0 4px var(--node-color));
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!-- Welcome title card shown during the entrance animation. -->
|
||||
<div class="welcome-title">
|
||||
<h1>Kevin Riehl</h1>
|
||||
<p>The Atlas of Skills</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.welcome-title {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
animation: titleFadeInOut 2.5s ease-in-out forwards;
|
||||
}
|
||||
|
||||
.welcome-title h1 {
|
||||
font-size: 2.5rem;
|
||||
color: var(--color-gold);
|
||||
margin: 0;
|
||||
text-shadow:
|
||||
0 0 20px rgba(255, 215, 0, 0.8),
|
||||
0 0 40px rgba(255, 215, 0, 0.5),
|
||||
0 0 60px rgba(255, 215, 0, 0.3);
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.welcome-title p {
|
||||
font-size: 1rem;
|
||||
color: var(--text-muted);
|
||||
margin: 0.5rem 0 0 0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3em;
|
||||
}
|
||||
|
||||
@keyframes titleFadeInOut {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(0.9);
|
||||
}
|
||||
20% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
85% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.welcome-title {
|
||||
animation: titleFadeInOutMobile 1.5s ease-in-out forwards;
|
||||
}
|
||||
|
||||
.welcome-title h1 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.welcome-title p {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes titleFadeInOutMobile {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(0.9);
|
||||
}
|
||||
25% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
75% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(1.05);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user