TehRiehlDeal/skill-tree-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: apply Prettier formatting across codebase

Browse Source 
Isolated reformat commit so subsequent logic changes have clean diffs.
No behavior change.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Kevin Riehl
2026-06-03 09:29:52 -07:00
parent a85bd16218
commit aa58425f1a
7 changed files with 521 additions and 440 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.css
+6 -3
View File
@@ -1,14 +1,17 @@
*, *::before, *::after {
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background: #05050a;
}
}
src/lib/components/SkillTree.svelte
+355 -323
View File
File diff suppressed because it is too large Load Diff
src/lib/data.ts
+141 -107
View File
@@ -4,17 +4,17 @@ export interface TreeNode {
description: string;
x: number;
y: number;
parentId: string | null; // null means it's the root or connects to center
parentId: string | null; // null means it's the root or connects to center
category: 'origin' | 'experience' | 'projects' | 'skills' | 'education';
size: 'x-large' | 'large' | 'medium' | 'small';
icon?: string;
icon?: string;
// ========== EXPERIENCE-SPECIFIC FIELDS ==========
// ========== EXPERIENCE-SPECIFIC FIELDS ==========
company?: string;
jobTitle?: string;
startDate?: string;
endDate?: string; // Use "Present" for current role
highlights?: string[]; // Key achievements or responsibilities
endDate?: string; // Use "Present" for current role
highlights?: string[]; // Key achievements or responsibilities
// ========== CONTRACT-SPECIFIC FIELDS ==========
contractName?: string;
@@ -26,10 +26,10 @@ export interface TreeNode {
techStack?: string[];
projectUrl?: string;
repoUrl?: string;
npmUrl?: string; // For npm packages
pypiUrl?: string; // For PyPI packages
downloads?: string; // "1,000+ downloads"
stars?: number; // GitHub stars
npmUrl?: string; // For npm packages
pypiUrl?: string; // For PyPI packages
downloads?: string; // "1,000+ downloads"
stars?: number; // GitHub stars
status?: 'active' | 'maintained' | 'archived' | 'completed';
// ========== SKILL-SPECIFIC FIELDS ==========
@@ -42,7 +42,7 @@ export interface TreeNode {
field?: string;
graduationYear?: string;
// ========== ORIGIN-SPECIFIC FIELDS ==========
// ========== ORIGIN-SPECIFIC FIELDS ==========
fullName?: string;
aboutMe?: string;
location?: string;
@@ -62,7 +62,8 @@ export const treeNodes: TreeNode[] = [
{
id: 'origin',
label: 'Kevin Riehl',
description: 'Welcome to my skill tree! Click on nodes to explore my experience, projects, and skills.',
description:
'Welcome to my skill tree! Click on nodes to explore my experience, projects, and skills.',
x: 0,
y: 0,
parentId: null,
@@ -71,13 +72,14 @@ export const treeNodes: TreeNode[] = [
icon: '',
fullName: 'Kevin Riehl',
jobTitle: 'Software Development - Lead Associate',
aboutMe: 'Intermediate Software Engineer with 5+ years of experience architecting full-stack applications using React, Node.js (Hapi), and SQL. Expertise includes modernizing legacy codebases, implementing rigorous testing standards, and leading frontend architecture improvements. Passionate about leveraging modern tools like ShadCN and Docker to streamline development workflows.',
aboutMe:
'Intermediate Software Engineer with 5+ years of experience architecting full-stack applications using React, Node.js (Hapi), and SQL. Expertise includes modernizing legacy codebases, implementing rigorous testing standards, and leading frontend architecture improvements. Passionate about leveraging modern tools like ShadCN and Docker to streamline development workflows.',
location: 'Kent, WA',
email: 'kevinriehl@gmail.com',
linkedIn: 'https://www.linkedin.com/in/kevinriehl',
github: 'https://github.com/TehRiehlDeal',
website: 'https://tehriehldeal.com',
resumeUrl: '/kevin-riehl-resume.pdf',
resumeUrl: '/kevin-riehl-resume.pdf'
},
// ========== EXPERIENCE (Upper Right - Contract-Based) ==========
@@ -90,14 +92,15 @@ export const treeNodes: TreeNode[] = [
parentId: 'origin',
category: 'experience',
size: 'large',
icon: '/icons/experience.svg',
icon: '/icons/experience.svg'
},
// Contract Parent Node
{
id: 'exp-contract',
label: 'DHA - Web and Mobile Technology',
description: 'Continuous work supporting the same government client through multiple contracting companies as the contract was re-competed and awarded.',
description:
'Continuous work supporting the same government client through multiple contracting companies as the contract was re-competed and awarded.',
x: 320,
y: -220,
parentId: 'exp-branch',
@@ -107,9 +110,9 @@ export const treeNodes: TreeNode[] = [
contractName: 'DHA WMT',
client: 'Defense Health Agency',
contractStart: 'October 2020',
contractEnd: 'Present',
contractEnd: 'Present'
},
// Job 1 - First company (starting point of the arc)
{
id: 'exp-job1',
@@ -127,10 +130,10 @@ export const treeNodes: TreeNode[] = [
endDate: 'April 2021',
highlights: [
'Refactored legacy PHP endpoints into a robust Hapi.js architecture, aligning the project with modern JavaScript standards and improving API response times',
'Executed a critical database migration from MySQL to MSSQL, ensuring data integrity during the transfer and optimizing schema definitions for the new environment',
],
'Executed a critical database migration from MySQL to MSSQL, ensuring data integrity during the transfer and optimizing schema definitions for the new environment'
]
},
// Job 2 - Arc continues upward
{
id: 'exp-job2',
@@ -149,10 +152,10 @@ export const treeNodes: TreeNode[] = [
highlights: [
'Architected and built a comprehensive data analytics search engine using React and Hapi.js (TypeScript), enabling users to filter complex event datasets by location, type, and date for real-time analysis',
'Facilitated successful production releases by managing SQL database migration scripts and executing rigorous regression testing to ensure critical features remained stable during updates',
'Supported engineering team growth by conducting code reviews and leading the onboarding process for new developers, ensuring smooth knowledge transfer and adherence to coding standards',
],
'Supported engineering team growth by conducting code reviews and leading the onboarding process for new developers, ensuring smooth knowledge transfer and adherence to coding standards'
]
},
// Job 3 - Peak of the arc
{
id: 'exp-job3',
@@ -171,10 +174,10 @@ export const treeNodes: TreeNode[] = [
highlights: [
"Championed the adoption of ShadCN by conducting a live technical demonstration on the team's starter template, proving the framework's ability to accelerate development velocity and ensure UI consistency across projects",
'Developed a Web Bluetooth interface for a biometric monitoring proof-of-concept, enabling real-time data ingestion and aggregation from multiple wearable sensors (accelerometers and smartwatches) for sleep analysis',
"Supported the engineering team's migration to containerized workflows by configuring, testing, and troubleshooting custom Docker environments, ensuring consistent application behavior across development and production",
],
"Supported the engineering team's migration to containerized workflows by configuring, testing, and troubleshooting custom Docker environments, ensuring consistent application behavior across development and production"
]
},
// Job 4 - Continuing upward and right
{
id: 'exp-job4',
@@ -193,10 +196,10 @@ export const treeNodes: TreeNode[] = [
highlights: [
'Architected a secure telehealth video conferencing application using React and WebRTC, designing the core signaling class to manage complex peer-to-peer connections (SDP offers/answers) and media stream constraints',
'Implemented Google MediaPipe to develop a real-time gesture recognition feature, enabling accessibility for speech-impaired users by translating hand signs (e.g., thumbs up) into animated in-chat reactions',
'Engineered adaptive network logic that monitors packet loss in real-time and dynamically adjusts video stream quality, ensuring connection stability and optimal user experience during bandwidth fluctuations',
],
'Engineered adaptive network logic that monitors packet loss in real-time and dynamically adjusts video stream quality, ensuring connection stability and optimal user experience during bandwidth fluctuations'
]
},
// Job 5 - Current (highest point, prominent)
{
id: 'exp-job5',
@@ -212,9 +215,7 @@ export const treeNodes: TreeNode[] = [
jobTitle: 'Lead Associate',
startDate: 'January 2026',
endDate: 'Present',
highlights: [
'The journey has just begun',
],
highlights: ['The journey has just begun']
},
// ========== PROJECTS (Upper Left Quadrant) ==========
@@ -227,7 +228,7 @@ export const treeNodes: TreeNode[] = [
parentId: 'origin',
category: 'projects',
size: 'large',
icon: '/icons/projects.svg',
icon: '/icons/projects.svg'
},
// Open Source Libraries
@@ -240,7 +241,7 @@ export const treeNodes: TreeNode[] = [
parentId: 'proj-branch',
category: 'projects',
size: 'medium',
icon: '/icons/opensource.svg',
icon: '/icons/opensource.svg'
},
// Personal Tools
@@ -253,7 +254,7 @@ export const treeNodes: TreeNode[] = [
parentId: 'proj-branch',
category: 'projects',
size: 'medium',
icon: '/icons/tools.svg',
icon: '/icons/tools.svg'
},
// Games
@@ -266,14 +267,15 @@ export const treeNodes: TreeNode[] = [
parentId: 'proj-branch',
category: 'projects',
size: 'medium',
icon: '/icons/games.svg',
icon: '/icons/games.svg'
},
// ========== OPEN SOURCE CHILDREN ==========
{
id: 'proj-tvdbapi',
label: 'tvdbAPI',
description: 'Python library for accessing The TVDB API. Fetch show info, episodes, actors, and images with a simple interface. Published on PyPI.',
description:
'Python library for accessing The TVDB API. Fetch show info, episodes, actors, and images with a simple interface. Published on PyPI.',
x: -420,
y: -310,
parentId: 'proj-opensource',
@@ -288,7 +290,8 @@ export const treeNodes: TreeNode[] = [
{
id: 'proj-tmdbapi',
label: 'tmdbAPI',
description: 'Python library for The Movie Database API. Search for movies, TV shows, actors, and collections with comprehensive query options.',
description:
'Python library for The Movie Database API. Search for movies, TV shows, actors, and collections with comprehensive query options.',
x: -500,
y: -250,
parentId: 'proj-opensource',
@@ -303,7 +306,8 @@ export const treeNodes: TreeNode[] = [
{
id: 'proj-image-resize',
label: 'Image Resize Tool',
description: 'GUI-based batch image processor with intelligent whitespace trimming and automated resizing workflows. Features folder-based processing for brand-specific transformations and maintains aspect ratios.',
description:
'GUI-based batch image processor with intelligent whitespace trimming and automated resizing workflows. Features folder-based processing for brand-specific transformations and maintains aspect ratios.',
x: -460,
y: -180,
parentId: 'proj-opensource',
@@ -319,7 +323,8 @@ export const treeNodes: TreeNode[] = [
{
id: 'proj-renameshow',
label: 'Rename Show',
description: 'Desktop application for batch renaming TV show files using metadata from TVDB and TMDB. Features undo support, multi-episode detection, and automatic show searching.',
description:
'Desktop application for batch renaming TV show files using metadata from TVDB and TMDB. Features undo support, multi-episode detection, and automatic show searching.',
x: -475,
y: -135,
parentId: 'proj-tools',
@@ -327,12 +332,13 @@ export const treeNodes: TreeNode[] = [
size: 'small',
icon: '/icons/desktop.svg',
techStack: ['Python', 'Tkinter', 'tvdbAPI', 'tmdbAPI', 'PIL'],
repoUrl: 'https://github.com/TehRiehlDeal/python-file-rename',
repoUrl: 'https://github.com/TehRiehlDeal/python-file-rename'
},
{
id: 'proj-portfolio',
label: 'Skill Tree Portfolio',
description: 'This interactive portfolio you\'re exploring right now! A Path of Exile inspired skill tree built with modern web technologies.',
description:
"This interactive portfolio you're exploring right now! A Path of Exile inspired skill tree built with modern web technologies.",
x: -480,
y: -60,
parentId: 'proj-tools',
@@ -341,12 +347,13 @@ export const treeNodes: TreeNode[] = [
icon: '/icons/svelte.svg',
techStack: ['SvelteKit', 'TypeScript', 'PixiJS', 'GSAP', 'Tailwind CSS'],
projectUrl: 'https://tehriehldeal.com',
repoUrl: 'https://github.com/yourusername/skill-tree-portfolio',
repoUrl: 'https://github.com/yourusername/skill-tree-portfolio'
},
{
id: 'proj-character-builder',
label: 'Pathfinder 2E Character Builder',
description: 'Web-based character creation tool for Pathfinder 2E tabletop RPG. Features modern component-based architecture with comprehensive testing and code quality tooling.',
description:
'Web-based character creation tool for Pathfinder 2E tabletop RPG. Features modern component-based architecture with comprehensive testing and code quality tooling.',
x: -490,
y: 15,
parentId: 'proj-tools',
@@ -360,14 +367,26 @@ export const treeNodes: TreeNode[] = [
{
id: 'proj-budget',
label: 'TehRiehlBudget',
description: 'Self-hosted personal finance app tracking spending, balances, and net worth across checking, savings, credit, loans, and investments. Features field-level AES-256-GCM encryption, receipt uploads, audit logging, CSV export, and a local Ollama-powered AI advisor.',
description:
'Self-hosted personal finance app tracking spending, balances, and net worth across checking, savings, credit, loans, and investments. Features field-level AES-256-GCM encryption, receipt uploads, audit logging, CSV export, and a local Ollama-powered AI advisor.',
x: -440,
y: 75,
parentId: 'proj-tools',
category: 'projects',
size: 'small',
icon: '/icons/react.svg',
techStack: ['React', 'TypeScript', 'NestJS', 'Prisma', 'PostgreSQL', 'TailwindCSS', 'ShadCN', 'Zustand', 'Supabase', 'Ollama'],
techStack: [
'React',
'TypeScript',
'NestJS',
'Prisma',
'PostgreSQL',
'TailwindCSS',
'ShadCN',
'Zustand',
'Supabase',
'Ollama'
],
projectUrl: 'https://budget.tehriehldeal.com/',
repoUrl: 'https://git.tehriehldeal.com/TehRiehlDeal/TehRiehlBudget',
status: 'active'
@@ -377,7 +396,8 @@ export const treeNodes: TreeNode[] = [
{
id: 'proj-movieloop',
label: 'MovieLoop',
description: 'Daily challenge game where players chain movies through shared actors — a "six degrees of Kevin Bacon" reimagined for the web. Features leaderboards, daily and freeplay modes, undo support, and PWA install with push notifications.',
description:
'Daily challenge game where players chain movies through shared actors — a "six degrees of Kevin Bacon" reimagined for the web. Features leaderboards, daily and freeplay modes, undo support, and PWA install with push notifications.',
x: -260,
y: -390,
parentId: 'proj-games',
@@ -400,7 +420,7 @@ export const treeNodes: TreeNode[] = [
parentId: 'origin',
category: 'skills',
size: 'large',
icon: '/icons/skills.svg',
icon: '/icons/skills.svg'
},
// Concepts - upper right
@@ -413,7 +433,7 @@ export const treeNodes: TreeNode[] = [
parentId: 'skills-branch',
category: 'skills',
size: 'medium',
icon: '/icons/concepts.svg',
icon: '/icons/concepts.svg'
},
// Tools & DevOps - moved up slightly
@@ -426,7 +446,7 @@ export const treeNodes: TreeNode[] = [
parentId: 'skills-branch',
category: 'skills',
size: 'medium',
icon: '/icons/devops.svg',
icon: '/icons/devops.svg'
},
// Frontend - lower right
@@ -439,7 +459,7 @@ export const treeNodes: TreeNode[] = [
parentId: 'skills-branch',
category: 'skills',
size: 'medium',
icon: '/icons/frontend.svg',
icon: '/icons/frontend.svg'
},
// Backend & Real-Time - pulled closer to Skills
@@ -452,7 +472,7 @@ export const treeNodes: TreeNode[] = [
parentId: 'skills-branch',
category: 'skills',
size: 'medium',
icon: '/icons/backend.svg',
icon: '/icons/backend.svg'
},
// Languages - left side
@@ -465,33 +485,35 @@ export const treeNodes: TreeNode[] = [
parentId: 'skills-branch',
category: 'skills',
size: 'medium',
icon: '/icons/languages.svg',
icon: '/icons/languages.svg'
},
// ========== CONCEPTS CHILDREN (4) ==========
{
id: 'concept-oop',
label: 'Object Oriented Programming',
description: 'Object-Oriented Programming principles including encapsulation, inheritance, and polymorphism.',
description:
'Object-Oriented Programming principles including encapsulation, inheritance, and polymorphism.',
x: 380,
y: -120,
parentId: 'concepts',
category: 'skills',
size: 'small',
icon: '/icons/oop.svg',
proficiency: 'expert',
proficiency: 'expert'
},
{
id: 'concept-data-structure',
label: 'Data Structures & Algorithms',
description: 'Fundamental building blocks of efficient software—organizing data and solving problems with optimal time and space complexity.',
description:
'Fundamental building blocks of efficient software—organizing data and solving problems with optimal time and space complexity.',
x: 430,
y: -75,
parentId: 'concepts',
category: 'skills',
size: 'small',
icon: '/icons/datastructure.svg',
proficiency: 'advanced',
proficiency: 'advanced'
},
{
id: 'concept-tdd',
@@ -503,7 +525,7 @@ export const treeNodes: TreeNode[] = [
category: 'skills',
size: 'small',
icon: '/icons/test.svg',
proficiency: 'intermediate',
proficiency: 'intermediate'
},
{
id: 'concept-agile',
@@ -515,7 +537,7 @@ export const treeNodes: TreeNode[] = [
category: 'skills',
size: 'small',
icon: '/icons/agile.svg',
proficiency: 'advanced',
proficiency: 'advanced'
},
// ========== TOOLS & DEVOPS CHILDREN (5) ==========
@@ -529,19 +551,20 @@ export const treeNodes: TreeNode[] = [
category: 'skills',
size: 'small',
icon: '/icons/git.svg',
proficiency: 'expert',
proficiency: 'expert'
},
{
id: 'tool-docker',
label: 'Docker',
description: 'Containerization with Docker for consistent development and deployment environments.',
description:
'Containerization with Docker for consistent development and deployment environments.',
x: 560,
y: 95,
parentId: 'tools-devops',
category: 'skills',
size: 'small',
icon: '/icons/docker.svg',
proficiency: 'advanced',
proficiency: 'advanced'
},
{
id: 'tool-cicd',
@@ -553,19 +576,20 @@ export const treeNodes: TreeNode[] = [
category: 'skills',
size: 'small',
icon: '/icons/cicd.svg',
proficiency: 'intermediate',
proficiency: 'intermediate'
},
{
id: 'tool-vscod',
label: 'VSCode',
description: 'Powerful, lightweight code editor by Microsoft with built-in Git support, debugging, and a vast extension ecosystem.',
description:
'Powerful, lightweight code editor by Microsoft with built-in Git support, debugging, and a vast extension ecosystem.',
x: 520,
y: 205,
parentId: 'tools-devops',
category: 'skills',
size: 'small',
icon: '/icons/vscode-plain.svg',
proficiency: 'advanced',
proficiency: 'advanced'
},
{
id: 'tool-linux',
@@ -577,7 +601,7 @@ export const treeNodes: TreeNode[] = [
category: 'skills',
size: 'small',
icon: '/icons/linux.svg',
proficiency: 'advanced',
proficiency: 'advanced'
},
// ========== FRONTEND CHILDREN (6) ==========
@@ -591,31 +615,33 @@ export const treeNodes: TreeNode[] = [
category: 'skills',
size: 'small',
icon: '/icons/react.svg',
proficiency: 'advanced',
proficiency: 'advanced'
},
{
id: 'fe-redux',
label: 'Redux',
description: 'Predictable state management library for JavaScript applications, centralizing app state in a single store.',
description:
'Predictable state management library for JavaScript applications, centralizing app state in a single store.',
x: 450,
y: 350,
parentId: 'frontend',
category: 'skills',
size: 'small',
icon: '/icons/redux.svg',
proficiency: 'intermediate',
proficiency: 'intermediate'
},
{
id: 'fe-zustand',
label: 'Zustand',
description: 'Lightweight state management for React using a simple hooks-based API with minimal boilerplate.',
description:
'Lightweight state management for React using a simple hooks-based API with minimal boilerplate.',
x: 440,
y: 405,
parentId: 'frontend',
category: 'skills',
size: 'small',
icon: '/icons/zustand-plain.svg',
proficiency: 'intermediate',
proficiency: 'intermediate'
},
{
id: 'fe-tailwind',
@@ -627,31 +653,33 @@ export const treeNodes: TreeNode[] = [
category: 'skills',
size: 'small',
icon: '/icons/tailwindcss.svg',
proficiency: 'advanced',
proficiency: 'advanced'
},
{
id: 'fe-shadcn',
label: 'ShadCN/UI',
description: 'Beautifully designed, accessible UI components that you copy and paste into your project. Built on Radix UI and Tailwind CSS.',
description:
'Beautifully designed, accessible UI components that you copy and paste into your project. Built on Radix UI and Tailwind CSS.',
x: 340,
y: 500,
parentId: 'frontend',
category: 'skills',
size: 'small',
icon: '/icons/shadcnui.svg',
proficiency: 'advanced',
proficiency: 'advanced'
},
{
id: 'fe-pwa',
label: 'PWA',
description: 'Progressive Web Apps—web applications that deliver native app-like experiences with offline support, push notifications, and home screen installation.',
description:
'Progressive Web Apps—web applications that deliver native app-like experiences with offline support, push notifications, and home screen installation.',
x: 270,
y: 520,
parentId: 'frontend',
category: 'skills',
size: 'small',
icon: '/icons/pwa.svg',
proficiency: 'intermediate',
proficiency: 'intermediate'
},
// ========== BACKEND & REAL-TIME CHILDREN (6) ==========
@@ -665,67 +693,72 @@ export const treeNodes: TreeNode[] = [
category: 'skills',
size: 'small',
icon: '/icons/nodedotjs.svg',
proficiency: 'advanced',
proficiency: 'advanced'
},
{
id: 'be-hapi',
label: 'Hapi.js',
description: 'Enterprise-grade Node.js framework for building scalable APIs and services with built-in validation, authentication, and caching.',
description:
'Enterprise-grade Node.js framework for building scalable APIs and services with built-in validation, authentication, and caching.',
x: 175,
y: 370,
parentId: 'backend-real-time',
category: 'skills',
size: 'small',
icon: '/icons/hapi.svg',
proficiency: 'advanced',
proficiency: 'advanced'
},
{
id: 'be-nestjs',
label: 'NestJS',
description: 'Progressive Node.js framework for building efficient, scalable server-side applications with TypeScript and Angular-inspired architecture.',
description:
'Progressive Node.js framework for building efficient, scalable server-side applications with TypeScript and Angular-inspired architecture.',
x: 115,
y: 390,
parentId: 'backend-real-time',
category: 'skills',
size: 'small',
icon: '/icons/nestjs.svg',
proficiency: 'intermediate',
proficiency: 'intermediate'
},
{
id: 'be-webrtc',
label: 'WebRTC',
description: 'Real-time communication protocol enabling peer-to-peer audio, video, and data streaming directly in the browser without plugins.',
description:
'Real-time communication protocol enabling peer-to-peer audio, video, and data streaming directly in the browser without plugins.',
x: 50,
y: 385,
parentId: 'backend-real-time',
category: 'skills',
size: 'small',
icon: '/icons/webrtc.svg',
proficiency: 'intermediate',
proficiency: 'intermediate'
},
{
id: 'be-socketio',
label: 'Socket.io',
description: 'Real-time bidirectional event-based communication library for Node.js and browsers with automatic fallback support.',
description:
'Real-time bidirectional event-based communication library for Node.js and browsers with automatic fallback support.',
x: 0,
y: 355,
parentId: 'backend-real-time',
category: 'skills',
size: 'small',
icon: '/icons/socketdotio.svg',
proficiency: 'advanced',
proficiency: 'advanced'
},
{
id: 'be-restfulapi',
label: 'RESTful APIs',
description: 'Architectural style for designing networked applications using stateless HTTP methods to perform CRUD operations on resources.',
description:
'Architectural style for designing networked applications using stateless HTTP methods to perform CRUD operations on resources.',
x: -25,
y: 310,
parentId: 'backend-real-time',
category: 'skills',
size: 'small',
icon: '/icons/openapi.svg',
proficiency: 'advanced',
proficiency: 'advanced'
},
// ========== LANGUAGES CHILDREN (7) ==========
@@ -740,7 +773,7 @@ export const treeNodes: TreeNode[] = [
size: 'small',
icon: '/icons/javascript.svg',
proficiency: 'expert',
yearsOfExperience: 5,
yearsOfExperience: 5
},
{
id: 'lang-typescript',
@@ -753,7 +786,7 @@ export const treeNodes: TreeNode[] = [
size: 'small',
icon: '/icons/typescript.svg',
proficiency: 'expert',
yearsOfExperience: 5,
yearsOfExperience: 5
},
{
id: 'lang-python',
@@ -766,12 +799,13 @@ export const treeNodes: TreeNode[] = [
size: 'small',
icon: '/icons/python.svg',
proficiency: 'intermediate',
yearsOfExperience: 2,
yearsOfExperience: 2
},
{
id: 'lang-rust',
label: 'Rust',
description: 'Systems programming language focused on safety, speed, and concurrency—guaranteeing memory safety without a garbage collector.',
description:
'Systems programming language focused on safety, speed, and concurrency—guaranteeing memory safety without a garbage collector.',
x: -190,
y: 355,
parentId: 'languages',
@@ -779,12 +813,13 @@ export const treeNodes: TreeNode[] = [
size: 'small',
icon: '/icons/rust.svg',
proficiency: 'beginner',
yearsOfExperience: 1,
yearsOfExperience: 1
},
{
id: 'lang-php',
label: 'PHP',
description: 'Server-side scripting language powering much of the web—from WordPress to Laravel, built for dynamic web content.',
description:
'Server-side scripting language powering much of the web—from WordPress to Laravel, built for dynamic web content.',
x: -165,
y: 405,
parentId: 'languages',
@@ -792,7 +827,7 @@ export const treeNodes: TreeNode[] = [
size: 'small',
icon: '/icons/php.svg',
proficiency: 'intermediate',
yearsOfExperience: 2,
yearsOfExperience: 2
},
{
id: 'lang-sql',
@@ -805,7 +840,7 @@ export const treeNodes: TreeNode[] = [
size: 'small',
icon: '/icons/mysql.svg',
proficiency: 'intermediate',
yearsOfExperience: 2,
yearsOfExperience: 2
},
{
id: 'lang-bash',
@@ -818,7 +853,7 @@ export const treeNodes: TreeNode[] = [
size: 'small',
icon: '/icons/gnubash.svg',
proficiency: 'intermediate',
yearsOfExperience: 2,
yearsOfExperience: 2
},
// ========== EDUCATION (Bottom Left Quadrant) ==========
@@ -836,19 +871,18 @@ export const treeNodes: TreeNode[] = [
{
id: 'edu-degree',
label: 'University',
description: 'Bachelor\'s degree in Computer Science.',
description: "Bachelor's degree in Computer Science.",
x: -300,
y: 80,
parentId: 'edu-branch',
category: 'education',
size: 'small',
institution: 'Green River College',
degree: 'Bachelor\'s Degree of Applied Science',
degree: "Bachelor's Degree of Applied Science",
field: 'IT/Software Development',
graduationYear: '2017',
icon: '/icons/greenriver.png'
},
}
// {
// id: 'edu-cert',
// label: 'Certifications',
@@ -863,9 +897,9 @@ export const treeNodes: TreeNode[] = [
// Colors for each category (PoE-inspired)
export const categoryColors: Record<TreeNode['category'], number> = {
origin: 0xffd700, // Gold
experience: 0x4ecdc4, // Teal
projects: 0xff6b6b, // Coral red
skills: 0xf9a825, // Amber orange
education: 0xdda0dd, // Plum purple
};
origin: 0xffd700, // Gold
experience: 0x4ecdc4, // Teal
projects: 0xff6b6b, // Coral red
skills: 0xf9a825, // Amber orange
education: 0xdda0dd // Plum purple
};
src/routes/+layout.svelte
+16 -4
View File
@@ -56,14 +56,23 @@
<link rel="icon" type="image/png" sizes="512x512" href="/icons/pwa-512x512.png" />
<!-- SEO Meta Tags -->
<meta name="description" content="Interactive portfolio featuring a Path of Exile-inspired skill tree visualization showcasing Kevin Riehl's professional experience, projects, and technical skills." />
<meta name="keywords" content="portfolio, web developer, software engineer, interactive resume, skill tree" />
<meta
name="description"
content="Interactive portfolio featuring a Path of Exile-inspired skill tree visualization showcasing Kevin Riehl's professional experience, projects, and technical skills."
/>
<meta
name="keywords"
content="portfolio, web developer, software engineer, interactive resume, skill tree"
/>
<meta name="author" content="Kevin Riehl" />
<!-- Open Graph Meta Tags for social sharing -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Kevin Riehl - The Atlas of Skills" />
<meta property="og:description" content="Interactive portfolio featuring a Path of Exile-inspired skill tree visualization." />
<meta
property="og:description"
content="Interactive portfolio featuring a Path of Exile-inspired skill tree visualization."
/>
<meta property="og:url" content="https://tehriehldeal.com" />
<meta property="og:site_name" content="Atlas of Skills" />
<!-- Add og:image when screenshots are available -->
@@ -72,7 +81,10 @@
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Kevin Riehl - The Atlas of Skills" />
<meta name="twitter:description" content="Interactive portfolio featuring a Path of Exile-inspired skill tree visualization." />
<meta
name="twitter:description"
content="Interactive portfolio featuring a Path of Exile-inspired skill tree visualization."
/>
<!-- Add twitter:image when screenshots are available -->
<!-- <meta name="twitter:image" content="https://tehriehldeal.com/screenshots/preview.png" /> -->
</svelte:head>
src/routes/+layout.ts
+1 -1
View File
@@ -1 +1 @@
export const prerender = true;
export const prerender = true;
src/routes/+page.svelte
+1 -1
View File
@@ -14,4 +14,4 @@
margin: 0;
padding: 0;
}
</style>
</style>
svelte.config.js
+1 -1
View File
@@ -16,4 +16,4 @@ const config = {
}
};
export default config;
export default config;