From f091bf6d55c79b86b7b65f6c0cbd34f31bc52882 Mon Sep 17 00:00:00 2001 From: Kevin Riehl Date: Sat, 10 Jan 2026 11:03:26 -0800 Subject: [PATCH] refactor(tree): update node layout and iconography --- src/lib/data.ts | 87 ++++++++++++++++++++++++------------ static/icons/backend.svg | 1 + static/icons/concepts.svg | 1 + static/icons/devops.svg | 1 + static/icons/education.svg | 3 ++ static/icons/frontend.svg | 1 + static/icons/greenriver.png | Bin 0 -> 7353 bytes static/icons/languages.svg | 1 + static/icons/projects.svg | 1 + 9 files changed, 68 insertions(+), 28 deletions(-) create mode 100644 static/icons/backend.svg create mode 100644 static/icons/concepts.svg create mode 100644 static/icons/devops.svg create mode 100644 static/icons/education.svg create mode 100644 static/icons/frontend.svg create mode 100644 static/icons/greenriver.png create mode 100644 static/icons/languages.svg create mode 100644 static/icons/projects.svg diff --git a/src/lib/data.ts b/src/lib/data.ts index 226c717..4e372ac 100644 --- a/src/lib/data.ts +++ b/src/lib/data.ts @@ -73,7 +73,7 @@ export const treeNodes: TreeNode[] = [ label: 'Experience', description: 'My professional journey.', x: 150, - y: -100, + y: -200, parentId: 'origin', category: 'experience', size: 'large', @@ -84,7 +84,7 @@ export const treeNodes: TreeNode[] = [ label: 'Software Engineer', description: 'Junior developer at the start of my career.', x: 212, - y: -191, + y: -291, parentId: 'exp-branch', category: 'experience', size: 'small', @@ -103,7 +103,7 @@ export const treeNodes: TreeNode[] = [ label: 'Software Engineer', description: 'Slightly more experienced still early in my career.', x: 337, - y: -191, + y: -291, parentId: 'exp-job1', category: 'experience', size: 'small', @@ -122,7 +122,7 @@ export const treeNodes: TreeNode[] = [ label: 'Intermediate Software Engineer', description: 'Slightly more experienced.', x: 400, - y: -100, + y: -200, parentId: 'exp-job2', category: 'experience', size: 'small', @@ -141,7 +141,7 @@ export const treeNodes: TreeNode[] = [ label: 'Intermediate Software Engineer', description: 'Where one journey ends, another begins.', x: 337, - y: -8, + y: -108, parentId: 'exp-job3', category: 'experience', size: 'small', @@ -160,7 +160,7 @@ export const treeNodes: TreeNode[] = [ label: 'Lead Associate', description: 'Where I am now.', x: 212, - y: -8, + y: -108, parentId: 'exp-job4', category: 'experience', size: 'small', @@ -183,6 +183,7 @@ export const treeNodes: TreeNode[] = [ parentId: 'origin', category: 'projects', size: 'large', + icon: '/icons/projects.svg' }, { id: 'proj-1', @@ -218,36 +219,59 @@ export const treeNodes: TreeNode[] = [ icon: '/icons/skills.svg' }, { - id: 'skill-js', - label: 'JavaScript', - description: 'Core language of the web. Proficient in modern ES6+ features.', + id: 'concepts', + label: 'Concepts', + description: 'Core concepts I have learned throughout my career.', x: 280, y: 60, parentId: 'skills-branch', category: 'skills', size: 'medium', - icon: '/icons/javascript.png', + icon: '/icons/concepts.svg', }, { - id: 'skill-ts', - label: 'TypeScript', - description: 'Type-safe JavaScript. My preferred way to write code.', + id: 'tools-devops', + label: 'Tools & DevOps', + description: 'The tools I use to get work done!', x: 320, y: 140, parentId: 'skills-branch', category: 'skills', size: 'small', - icon: '/icons/typescript.png' + icon: '/icons/devops.svg' }, { - id: 'skill-svelte', - label: 'Svelte', - description: 'The framework powering this portfolio!', + id: 'frontend', + label: 'Frontend', + description: 'The Frontend tools and frameworks I know!', x: 260, y: 200, parentId: 'skills-branch', category: 'skills', size: 'small', + icon: '/icons/frontend.svg' + }, + { + id: 'backend-real-time', + label: 'Backend & Real-Time', + description: 'The Backend frameworks and concepts I know!', + x: 150, + y: 225, + parentId: 'skills-branch', + category: 'skills', + size: 'small', + icon: '/icons/backend.svg' + }, + { + id: 'languages', + label: 'Languages', + description: 'The many languages I know!', + x: 50, + y: 200, + parentId: 'skills-branch', + category: 'skills', + size: 'small', + icon: '/icons/languages.svg' }, // ========== EDUCATION (Bottom Left Quadrant) ========== @@ -260,6 +284,7 @@ export const treeNodes: TreeNode[] = [ parentId: 'origin', category: 'education', size: 'large', + icon: '/icons/education.svg' }, { id: 'edu-degree', @@ -270,17 +295,23 @@ export const treeNodes: TreeNode[] = [ parentId: 'edu-branch', category: 'education', size: 'small', + institution: 'Green River College', + degree: 'Bachelor\'s Degree of Applied Science', + field: 'IT/Software Development', + graduationYear: '2017', + icon: '/icons/greenriver.png' + }, - { - id: 'edu-cert', - label: 'Certifications', - description: 'Additional certifications and courses completed.', - x: -280, - y: 180, - parentId: 'edu-branch', - category: 'education', - size: 'small', - }, + // { + // id: 'edu-cert', + // label: 'Certifications', + // description: 'Additional certifications and courses completed.', + // x: -280, + // y: 180, + // parentId: 'edu-branch', + // category: 'education', + // size: 'small', + // }, ]; // Colors for each category (PoE-inspired) @@ -288,6 +319,6 @@ export const categoryColors: Record = { origin: 0xffd700, // Gold experience: 0x4ecdc4, // Teal projects: 0xff6b6b, // Coral red - skills: 0x95e1d3, // Mint green + skills: 0xf9a825, // Amber orange education: 0xdda0dd, // Plum purple }; \ No newline at end of file diff --git a/static/icons/backend.svg b/static/icons/backend.svg new file mode 100644 index 0000000..1eb1d01 --- /dev/null +++ b/static/icons/backend.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/concepts.svg b/static/icons/concepts.svg new file mode 100644 index 0000000..dd764f5 --- /dev/null +++ b/static/icons/concepts.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/devops.svg b/static/icons/devops.svg new file mode 100644 index 0000000..54844c4 --- /dev/null +++ b/static/icons/devops.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/education.svg b/static/icons/education.svg new file mode 100644 index 0000000..c114075 --- /dev/null +++ b/static/icons/education.svg @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/static/icons/frontend.svg b/static/icons/frontend.svg new file mode 100644 index 0000000..e7c95e0 --- /dev/null +++ b/static/icons/frontend.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/greenriver.png b/static/icons/greenriver.png new file mode 100644 index 0000000000000000000000000000000000000000..8287653cdeb3f2c6bad05dc2614c858598ce5ff9 GIT binary patch literal 7353 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 \ No newline at end of file diff --git a/static/icons/projects.svg b/static/icons/projects.svg new file mode 100644 index 0000000..336bbc3 --- /dev/null +++ b/static/icons/projects.svg @@ -0,0 +1 @@ + \ No newline at end of file