TehRiehlDealandClaude Opus 4.8
f08138718a
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>
543 lines
11 KiB
Svelte
543 lines
11 KiB
Svelte
<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>
|