From e49c5001c214e4ab5e84a376684e0d6844660e7a Mon Sep 17 00:00:00 2001
From: matthieu42morin <matthieu.bernard.morin@gmail.com>
Date: Sun, 28 Apr 2024 01:15:26 +0200
Subject: [PATCH] skills

---
 src/content/skills.ts                         | 73 ++++++++++---------
 src/lib/components/SkillContainer.svelte      | 18 -----
 .../components/skills/IndividualSkills.svelte | 57 +++++++++++++++
 .../components/skills/SkillContainer.svelte   | 27 +++++++
 4 files changed, 124 insertions(+), 51 deletions(-)
 delete mode 100644 src/lib/components/SkillContainer.svelte
 create mode 100644 src/lib/components/skills/IndividualSkills.svelte
 create mode 100644 src/lib/components/skills/SkillContainer.svelte

diff --git a/src/content/skills.ts b/src/content/skills.ts
index 604204e..dd41d25 100644
--- a/src/content/skills.ts
+++ b/src/content/skills.ts
@@ -1,52 +1,52 @@
-export type SkillLevel = 'A' | 'B' | 'C'; // A: Proficient, B: Experienced, C: limited Experience
+export type Level = 'A' | 'B' | 'C'; // A: Proficient, B: Experienced, C: limited Experience
 
 export interface Skill {
 	title: string;
-	level: SkillLevel;
+	level: Level;
 }
-export interface SkillSubCategory {
+export interface SubCategory {
 	title: string;
 	level: number;
 	skills: Skill[];
 }
-export interface SkillCategory {
+export interface Category {
+	icon: string;
 	title: string;
 	level: number;
-	subCategories: SkillSubCategory[];
+	subCategories: SubCategory[];
 }
 // prettier-ignore
-const skillCategories: SkillCategory[] = [
-	{title:'Software Development', level: 70, subcategories: [
-		{title:'Programming Languages', level: 75, skills: [
+const list: Category[] = [
+	{ icon: '🚀', title:'Software Development', level: 70, subCategories: [
+		{ title:'Programming Languages', level: 75, skills: [
 			{ title: 'JavaScript/TypeScript', level: 'A' },
 			{ title: 'Python', level: 'B' },
-			{ title: 'Rust', level: 'C' },
 			{ title: 'Bash', level: 'B' },
 			{ title: 'SQL', level: 'B' },
-			{ title: 'LaTeX', level: 'B' },
+			{ title: 'Rust', level: 'C' },
 		]},
-		{title:'Web Frameworks', level: 70, skills: [
+		{ title:'Web Frameworks', level: 70, skills: [
 			{ title: 'Svelte(Kit)', level: 'A' },
 			{ title: 'React', level: 'C'},
 		]},
-		{title:'Configuration and Performance', level: 70, skills: [
+		{ title:'Configuration and Performance', level: 70, skills: [
 			{ title: 'SEO', level: 'B'},
 			{ title: 'Performance', level: 'B'},
 			{ title: 'Obfuscation', level: 'B'},
 		]},
-		{title:'Databases', level: 70, skills: [
+		{ title:'Databases', level: 70, skills: [
 			{ title: 'PostgreSQL', level: 'A' },
 			{ title: 'MariaDB', level: 'B' },
 			{ title: 'MongoDB', level: 'C' }
 		]},
-		{title:'Testing & Validation', level: 50, skills: [
+		{ title:'Testing & Validation', level: 50, skills: [
 			{ title: 'ajv', level: 'A' },
 			{ title: 'Playwright', level: 'B'},
 			{ title: 'SEO, performance optimizations', level: 'B'},
 		]},
 	]},
-	{title:'DevOps', level: 70, subcategories: [
-		{title:'Infrastructure & Configuration Management', level: 80, skills: [
+	{ icon: '🔁🔁', title:'DevOps', level: 70, subCategories: [
+		{ title:'Infrastructure & Configuration Management', level: 80, skills: [
 			{ title: 'Terraform & tooling', level: 'A'},
 			{ title: 'Ansible', level: 'A'},
 			{ title: 'Docker, Docker-Compose', level: 'A' },
@@ -54,18 +54,16 @@ const skillCategories: SkillCategory[] = [
 		]},
 		{ title: 'Version Control & CI/CD', level: 90, skills: [
 			{ title: 'Git', level: 'A' },
-			{ title: 'GitHub Ecosystem', level: 'A' },
-			{ title: 'Gitea', level: 'A' },
+			{ title: 'GitHub & Gitea Ecosystem', level: 'A' },
 			{ title: 'Gitlab Ecosystem', level: 'B' }
 		]},
 		{ title: 'Monitoring & Observability ', level: 90, skills: [
 			{ title: 'Grafana', level: 'B' },
 			{ title: 'Prometheus', level: 'B' },
 		]},
-		{title:'Vercel', level: 100, skills: []},
 	]},
-	{title:'Cloud Computing', level: 70, subcategories: [
-		{title:'AWS', level: 80, skills: [
+	{ icon: '⛅', title:'Cloud Computing', level: 70, subCategories: [
+		{ title:'AWS', level: 80, skills: [
 			{ title: 'EC2', level: 'A' },
 			{ title: 'RDS', level: 'A'},
 			{ title: 'S3', level: 'A'},
@@ -79,11 +77,11 @@ const skillCategories: SkillCategory[] = [
 			{ title: 'Vault', level: 'B' },
 			{ title: 'Consul', level: 'C' },
 		]},
-		{title:'Vercel', level: 100, skills: []},
-		{title:'DigitalOcean', level: 100, skills: []},
+		{ title:'Vercel', level: 100, skills: []},
+		{ title:'DigitalOcean', level: 100, skills: []},
 	]},
-	{title:'System Administration', level: 75, subcategories: [
-		{title:'Operating Systems', level: 80, skills: [
+	{ icon: '🔧💻🔒⚙️', title:'System Administration', level: 75, subCategories: [
+		{ title:'Operating Systems', level: 80, skills: [
 			{ title: 'Debian / Ubuntu', level: 'A' },
 			{ title: 'Nix(OS)', level: 'B' },
 			{ title: 'Arch Linux', level: 'B' },
@@ -105,8 +103,8 @@ const skillCategories: SkillCategory[] = [
 			{ title: 'AWS Secrets Manager', level: 'B' },
 		]}
 	]},
-	{title:"Some fun geek skillz", level: 70,  subcategories: [
-		{title:'mini hardware', level: 80, skills: [
+	{ icon: '', title:"Some fun geek skillz", level: 70,  subCategories: [
+		{ title:'mini hardware', level: 80, skills: [
 			{ title: 'Raspberry Pi', level: 'A' },
 			{ title: 'ESP8266, ESP32', level: 'A' },
 			{ title: 'Arduino', level: 'A' },
@@ -121,19 +119,28 @@ const skillCategories: SkillCategory[] = [
 			{ title: 'Ultimaker Cura', level: 'B' },
 		]},
 	]},
-	{title:'Languages', level: 70, skills: [
+	{ icon: '🤐💬', title:'Languages', level: 70, subCategories: [
 		{ title: 'English', level: 'A' },
 		{ title: 'Czech', level: 'A' },
 		{ title: 'French', level: 'B' },
 		{ title: 'German', level: 'C' }
 	]},
-	{title:'Design', level: 70, skills: [
-		{ title: 'Figma', level: 'A' },
+	{ icon: '🎨✏️📐', title:'Design', level: 70, subCategories: [
 		{ title: 'UI/UX', level: 'B' },
 		{ title: 'LaTeX', level: 'C' },
-		{ title: 'Wireframing & Prototyping', level: 'B' },
-		{ title: 'Myriads of image manipulation and generation tools', level: 'B' },
+		{ title: 'Wireframing, Prototyping, Diagramming', level: 'B', skills: [
+			{ title: 'Figma', level: 'A' },
+			{ title: 'Devops diagram tool - '}
+
+		] },
+		{ title: 'Images, Diagrams, Vectors', level: 'B', skills: [
+			//only foss
+			{ title: 'Inkscape', level: 'A' },
+			{ title: 'Gimp', level: 'A' },
+			{ title: 'Blender', level: 'B'},
+			{ title: 'Adobe PS, AI, InDesign'}
+		]},
 	]}
 ];
 
-export default skillCategories;
+export default list;
diff --git a/src/lib/components/SkillContainer.svelte b/src/lib/components/SkillContainer.svelte
deleted file mode 100644
index e15f75a..0000000
--- a/src/lib/components/SkillContainer.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-	import skills from '$content/skills';
-</script>
-
-<div
-	class="card flex flex-col items-center justify-center mx-auto w-3/4 bg-surface-50 bg-opacity-50 p-8 m-8"
-	id="skills"
->
-	<h2 class="h2 m-2">My skillset</h2>
-	{#each skills as skill}
-		<div class="text-lg font-bold m-2">{skill.title}</div>
-		<div class="flex flex-wrap justify-center space-x-2 m-2">
-			{#each skill.list as s}
-				<div class="chip variant-outline-primary">{s}</div>
-			{/each}
-		</div>
-	{/each}
-</div>
diff --git a/src/lib/components/skills/IndividualSkills.svelte b/src/lib/components/skills/IndividualSkills.svelte
new file mode 100644
index 0000000..729d7b5
--- /dev/null
+++ b/src/lib/components/skills/IndividualSkills.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { AccordionItem, ProgressBar } from '@skeletonlabs/skeleton';
+
+	import type { Skill } from '$content/skills';
+	import list from '$content/skills';
+
+	function sortSkills(skills: Skill[]): Skill[] {
+		return skills.sort((a, b) => {
+			if (a.level < b.level) return -1;
+			if (a.level > b.level) return 1;
+			return 0;
+		});
+	}
+</script>
+
+{#each list as category}
+	<AccordionItem>
+		<svelte:fragment slot="lead">
+			<i class="text-3xl">{category.icon}</i>
+		</svelte:fragment>
+		<svelte:fragment slot="summary">
+			<h2 class="h2 font-bold m-2">{category.title}</h2>
+			<!-- Progresses are stupidly subjective and I don't know how to grade this so no progress bars for now. 
+			 <ProgressBar class="min-w-[100px] h-2" value={category.level} max={100} /> -->
+		</svelte:fragment>
+		<svelte:fragment slot="content">
+			<div class="flex flex-col justify-center m-2 space-y-8">
+				{#if category.subCategories}
+					{#each category.subCategories as subCategory (subCategory.title)}
+						<div class="flex flex-col space-y-2">
+							<div class="flex flex-row justify-center items-center">
+								<p class="text-xl font-medium m-2">{subCategory.title}</p>
+								<!-- <ProgressBar value={subCategory.level} max={100} /> -->
+							</div>
+
+							<div class="flex flex-wrap justify-center space-x-2 m-2">
+								{#if subCategory.skills}
+									{#each sortSkills(subCategory.skills) as skill (skill.title)}
+										<span
+											class="chip {skill.level === 'A'
+												? 'variant-filled-primary'
+												: skill.level === 'B'
+												? 'variant-outline-primary'
+												: 'variant-outline-tertiary'}"
+										>
+											{skill.title}
+										</span>
+									{/each}
+								{/if}
+							</div>
+						</div>
+					{/each}
+				{/if}
+			</div>
+		</svelte:fragment>
+	</AccordionItem>
+{/each}
diff --git a/src/lib/components/skills/SkillContainer.svelte b/src/lib/components/skills/SkillContainer.svelte
new file mode 100644
index 0000000..89a1f32
--- /dev/null
+++ b/src/lib/components/skills/SkillContainer.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Accordion } from '@skeletonlabs/skeleton';
+	import IndividualSkills from './IndividualSkills.svelte';
+</script>
+
+<section>
+	<Accordion
+		class="card flex flex-col items-center justify-center mx-auto w-3/4 bg-surface-50 bg-opacity-50 p-8 m-8 space-y-4"
+		autocollapse
+		id="skills"
+	>
+		<h2 class="h2 m-2">My skillset</h2>
+		<p class="text-center">
+			Below is a list of tools, frameworks, languages and skills <br />I use or have used to
+			varying degrees and a subjective rating
+		</p>
+		<span class="h6 m-2">based on my proficiency:</span>
+		<div class="flex flex-wrap justify-center space-x-2 m-2">
+			<span class="chip variant-filled-primary text-lg">Proficient</span>
+			<span class="chip variant-outline-primary text-lg">Experienced</span>
+			<span class="chip variant-outline-tertiary text-lg">Limited Experience</span>
+		</div>
+		<div class="flex flex-col items-center justify-center mx-auto space-x-2 space-y-2">
+			<IndividualSkills />
+		</div>
+	</Accordion>
+</section>