Updated skill node layout, added more icons

This commit is contained in:
TehRiehlDeal committed 2026-01-11 12:08:07 -08:00
1 parent c279112778
commit 92f00c75a4
1 file changed
+444 -77
+444 -77
View File
@@ -67,110 +67,114 @@ export const treeNodes: TreeNode[] = [
website: 'https://tehriehldeal.com',
},
// ========== EXPERIENCE (Top Right Quadrant) ==========
// ========== EXPERIENCE (Upper Right - Timeline Path) ==========
{
id: 'exp-branch',
label: 'Experience',
description: 'My professional journey.',
x: 150,
y: -200,
x: 200,
y: -150,
parentId: 'origin',
category: 'experience',
size: 'large',
icon: '/icons/experience.svg'
icon: '/icons/experience.svg',
},
{
id: 'exp-job1',
label: 'Software Engineer',
description: 'Junior developer at the start of my career.',
x: 212,
y: -291,
x: 300,
y: -200,
parentId: 'exp-branch',
category: 'experience',
size: 'small',
icon: '/icons/insightglobal.webp',
company: 'Insight Global',
jobTitle: 'Software Engineer',
startDate: 'October 2020',
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'
]
icon: '/icons/insightglobal.webp',
company: 'Insight Global',
jobTitle: 'Software Engineer',
startDate: 'October 2020',
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',
],
},
{
id: 'exp-job2',
label: 'Software Engineer',
description: 'Slightly more experienced still early in my career.',
x: 337,
y: -291,
x: 400,
y: -280,
parentId: 'exp-job1',
category: 'experience',
size: 'small',
icon: '/icons/bluewater.png',
jobTitle: 'Software Engineer',
startDate: 'April 2021',
endDate: 'February 2024',
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'
]
icon: '/icons/bluewater.png',
company: 'Bluewater Federal Solutions',
jobTitle: 'Software Engineer',
startDate: 'April 2021',
endDate: 'February 2024',
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',
],
},
{
id: 'exp-job3',
label: 'Intermediate Software Engineer',
description: 'Slightly more experienced.',
x: 400,
y: -200,
description: 'Stepping into a more senior role.',
x: 500,
y: -220,
parentId: 'exp-job2',
category: 'experience',
size: 'small',
icon: '/icons/sempervalens.png',
jobTitle: 'Intermediate Software Engineer',
startDate: 'February 2024',
endDate: 'June 2025',
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"
]
icon: '/icons/sempervalens.png',
company: 'Semper Valens Solutions',
jobTitle: 'Intermediate Software Engineer',
startDate: 'February 2024',
endDate: 'June 2025',
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",
],
},
{
id: 'exp-job4',
label: 'Intermediate Software Engineer',
description: 'Where one journey ends, another begins.',
x: 337,
y: -108,
x: 580,
y: -300,
parentId: 'exp-job3',
category: 'experience',
size: 'small',
icon: '/icons/chenega.jpg',
jobTitle: "Intermediate Software Engineer",
startDate: 'June 2025',
endDate: 'January 2026',
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'
]
icon: '/icons/chenega.jpg',
company: 'Chenega',
jobTitle: 'Intermediate Software Engineer',
startDate: 'June 2025',
endDate: 'January 2026',
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',
],
},
{
id: 'exp-job5',
label: 'Lead Associate',
description: 'Where I am now.',
x: 212,
y: -108,
x: 650,
y: -380,
parentId: 'exp-job4',
category: 'experience',
size: 'small',
icon: '/icons/peraton.png',
jobTitle: 'Lead Associate',
startDate: 'January 2026',
endDate: 'Present',
highlights: [
'The Journey has just begun'
]
size: 'medium',
icon: '/icons/peraton.png',
company: 'Peraton',
jobTitle: 'Lead Associate',
startDate: 'January 2026',
endDate: 'Present',
highlights: [
'The journey has just begun',
],
},
// ========== PROJECTS (Top Left Quadrant) ==========
@@ -216,62 +220,425 @@ export const treeNodes: TreeNode[] = [
parentId: 'origin',
category: 'skills',
size: 'large',
icon: '/icons/skills.svg'
icon: '/icons/skills.svg',
},
// Concepts - upper right
{
id: 'concepts',
label: 'Concepts',
description: 'Core concepts I have learned throughout my career.',
x: 280,
y: 60,
x: 350,
y: -50,
parentId: 'skills-branch',
category: 'skills',
size: 'medium',
icon: '/icons/concepts.svg',
icon: '/icons/concepts.svg',
},
// Tools & DevOps - moved up slightly
{
id: 'tools-devops',
label: 'Tools & DevOps',
description: 'The tools I use to get work done!',
x: 320,
y: 140,
x: 450,
y: 100,
parentId: 'skills-branch',
category: 'skills',
size: 'small',
icon: '/icons/devops.svg'
size: 'medium',
icon: '/icons/devops.svg',
},
// Frontend - lower right
{
id: 'frontend',
label: 'Frontend',
description: 'The Frontend tools and frameworks I know!',
x: 260,
y: 200,
x: 350,
y: 350,
parentId: 'skills-branch',
category: 'skills',
size: 'small',
icon: '/icons/frontend.svg'
size: 'medium',
icon: '/icons/frontend.svg',
},
// Backend & Real-Time - pulled closer to Skills
{
id: 'backend-real-time',
label: 'Backend & Real-Time',
description: 'The Backend frameworks and concepts I know!',
x: 150,
y: 225,
y: 280,
parentId: 'skills-branch',
category: 'skills',
size: 'small',
icon: '/icons/backend.svg'
size: 'medium',
icon: '/icons/backend.svg',
},
// Languages - left side
{
id: 'languages',
label: 'Languages',
description: 'The many languages I know!',
x: 50,
y: 200,
x: -100,
y: 280,
parentId: 'skills-branch',
category: 'skills',
size: 'medium',
icon: '/icons/languages.svg',
},
// ========== CONCEPTS CHILDREN (4) ==========
{
id: 'concept-oop',
label: 'Object Oriented Programming',
description: 'Object-Oriented Programming principles including encapsulation, inheritance, and polymorphism.',
x: 380,
y: -120,
parentId: 'concepts',
category: 'skills',
size: 'small',
icon: '/icons/languages.svg'
icon: '/icons/oop.svg',
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.',
x: 430,
y: -75,
parentId: 'concepts',
category: 'skills',
size: 'small',
icon: '/icons/datastructure.svg',
proficiency: 'advanced',
},
{
id: 'concept-tdd',
label: 'Test Driven Development',
description: 'Unit testing, integration testing, and test-driven development practices.',
x: 435,
y: -20,
parentId: 'concepts',
category: 'skills',
size: 'small',
icon: '/icons/test.svg',
proficiency: 'intermediate',
},
{
id: 'concept-agile',
label: 'Agile',
description: 'Agile methodologies including Scrum and Kanban for iterative development.',
x: 395,
y: 30,
parentId: 'concepts',
category: 'skills',
size: 'small',
icon: '/icons/agile.svg',
proficiency: 'advanced',
},
// ========== TOOLS & DEVOPS CHILDREN (5) ==========
{
id: 'tool-git',
label: 'Git',
description: 'Version control with Git, branching strategies, and collaborative workflows.',
x: 530,
y: 40,
parentId: 'tools-devops',
category: 'skills',
size: 'small',
icon: '/icons/git.svg',
proficiency: 'expert',
},
{
id: 'tool-docker',
label: 'Docker',
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',
},
{
id: 'tool-cicd',
label: 'CI/CD',
description: 'Continuous integration and deployment pipelines with GitHub Actions and Jenkins.',
x: 555,
y: 150,
parentId: 'tools-devops',
category: 'skills',
size: 'small',
icon: '/icons/cicd.svg',
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.',
x: 520,
y: 205,
parentId: 'tools-devops',
category: 'skills',
size: 'small',
icon: '/icons/vscode-plain.svg',
proficiency: 'advanced',
},
{
id: 'tool-linux',
label: 'Linux',
description: 'Linux system administration, shell scripting, and server management.',
x: 470,
y: 245,
parentId: 'tools-devops',
category: 'skills',
size: 'small',
icon: '/icons/linux.svg',
proficiency: 'advanced',
},
// ========== FRONTEND CHILDREN (6) ==========
{
id: 'fe-react',
label: 'React',
description: 'Building user interfaces with React, hooks, and state management.',
x: 420,
y: 295,
parentId: 'frontend',
category: 'skills',
size: 'small',
icon: '/icons/react.svg',
proficiency: 'advanced',
},
{
id: 'fe-redux',
label: 'Redux',
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',
},
{
id: 'fe-zustand',
label: 'Zustand',
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',
},
{
id: 'fe-tailwind',
label: 'Tailwind CSS',
description: 'Utility-first CSS framework for rapid UI development.',
x: 400,
y: 460,
parentId: 'frontend',
category: 'skills',
size: 'small',
icon: '/icons/tailwindcss.svg',
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.',
x: 340,
y: 500,
parentId: 'frontend',
category: 'skills',
size: 'small',
icon: '/icons/shadcnui.svg',
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.',
x: 270,
y: 520,
parentId: 'frontend',
category: 'skills',
size: 'small',
icon: '/icons/pwa.svg',
proficiency: 'intermediate',
},
// ========== BACKEND & REAL-TIME CHILDREN (6) ==========
{
id: 'be-nodejs',
label: 'Node.js',
description: 'Server-side JavaScript runtime for building scalable applications.',
x: 220,
y: 330,
parentId: 'backend-real-time',
category: 'skills',
size: 'small',
icon: '/icons/nodedotjs.svg',
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.',
x: 175,
y: 370,
parentId: 'backend-real-time',
category: 'skills',
size: 'small',
icon: '/icons/hapi.svg',
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.',
x: 115,
y: 390,
parentId: 'backend-real-time',
category: 'skills',
size: 'small',
icon: '/icons/nestjs.svg',
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.',
x: 50,
y: 385,
parentId: 'backend-real-time',
category: 'skills',
size: 'small',
icon: '/icons/webrtc.svg',
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.',
x: 0,
y: 355,
parentId: 'backend-real-time',
category: 'skills',
size: 'small',
icon: '/icons/socketdotio.svg',
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.',
x: -25,
y: 310,
parentId: 'backend-real-time',
category: 'skills',
size: 'small',
icon: '/icons/openapi.svg',
proficiency: 'advanced',
},
// ========== LANGUAGES CHILDREN (7) ==========
{
id: 'lang-javascript',
label: 'JavaScript',
description: 'The language of the web. ES6+ features and beyond.',
x: -135,
y: 205,
parentId: 'languages',
category: 'skills',
size: 'small',
icon: '/icons/javascript.svg',
proficiency: 'expert',
yearsOfExperience: 5,
},
{
id: 'lang-typescript',
label: 'TypeScript',
description: 'Type-safe JavaScript for scalable applications.',
x: -175,
y: 250,
parentId: 'languages',
category: 'skills',
size: 'small',
icon: '/icons/typescript.svg',
proficiency: 'expert',
yearsOfExperience: 5,
},
{
id: 'lang-python',
label: 'Python',
description: 'Versatile language for scripting, data science, and backend.',
x: -195,
y: 300,
parentId: 'languages',
category: 'skills',
size: 'small',
icon: '/icons/python.svg',
proficiency: 'intermediate',
yearsOfExperience: 2,
},
{
id: 'lang-rust',
label: 'Rust',
description: 'Systems programming language focused on safety, speed, and concurrency—guaranteeing memory safety without a garbage collector.',
x: -190,
y: 355,
parentId: 'languages',
category: 'skills',
size: 'small',
icon: '/icons/rust.svg',
proficiency: 'beginner',
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.',
x: -165,
y: 405,
parentId: 'languages',
category: 'skills',
size: 'small',
icon: '/icons/php.svg',
proficiency: 'intermediate',
yearsOfExperience: 2,
},
{
id: 'lang-sql',
label: 'SQL',
description: 'Structured Query Language for database management.',
x: -125,
y: 450,
parentId: 'languages',
category: 'skills',
size: 'small',
icon: '/icons/mysql.svg',
proficiency: 'intermediate',
yearsOfExperience: 2,
},
{
id: 'lang-bash',
label: 'Bash',
description: 'Shell scripting for automation and system tasks.',
x: -75,
y: 485,
parentId: 'languages',
category: 'skills',
size: 'small',
icon: '/icons/gnubash.svg',
proficiency: 'intermediate',
yearsOfExperience: 2,
},
// ========== EDUCATION (Bottom Left Quadrant) ==========