From 43534bfefd0574298b381cdde91bdffe3c0cec92 Mon Sep 17 00:00:00 2001
From: matthieu42morin <matthieu.bernard.morin@gmail.com>
Date: Mon, 29 Apr 2024 05:10:56 +0200
Subject: [PATCH] skill container complete ui revamp

---
 .../components/skills/IndividualSkills.svelte | 19 +++++++++++++------
 .../components/skills/SkillContainer.svelte   |  4 ++--
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/skills/IndividualSkills.svelte b/src/lib/components/skills/IndividualSkills.svelte
index 81ce886..43a54a2 100644
--- a/src/lib/components/skills/IndividualSkills.svelte
+++ b/src/lib/components/skills/IndividualSkills.svelte
@@ -13,11 +13,11 @@
 </script>
 
 {#each list as category}
-	<div class="collapse collapse-arrow  outline-1 outline-secondary">
+	<div class="collapse collapse-arrow outline outline-2 outline-secondary ">
 		<input type="radio" name="skillAccordion" /> 
-		<div class=" flex flex-row collapse-title font-semibold space-x-4">
-			<i class="text-2xl">{category.icon}</i>
-			<h2 class="text-2xl">{category.title}</h2>
+		<div class=" flex flex-col md:flex-row collapse-title font-semibold space-x-4 space-y-4 align-middle justify-center items-center">
+			<i class="text-3xl align-bottom emoji">{category.icon}</i>
+			<h2 class="text-3xl align-middle">{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} /> -->
 		</div>
@@ -27,7 +27,7 @@
 					{#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>
+								<h3 class="text-2xl font-semibold m-2">{subCategory.title}</h3>
 								<!-- <ProgressBar value={subCategory.level} max={100} /> -->
 							</div>
 
@@ -35,7 +35,7 @@
 								{#if subCategory.skills}
 									{#each sortSkills(subCategory.skills) as skill (skill.title)}
 										<span
-											class="mt-2 badge {skill.level === 'A'
+											class="mt-2 badge badge-md md:badge-lg {skill.level === 'A'
 												? 'badge-primary'
 												: skill.level === 'B'
 												? 'badge-accent'
@@ -54,3 +54,10 @@
 	</div>
 {/each}
 
+<style>
+	  .emoji {
+	position: relative;
+	top: +0.2em;
+	line-height: 2;
+  }
+</style>
diff --git a/src/lib/components/skills/SkillContainer.svelte b/src/lib/components/skills/SkillContainer.svelte
index 8111129..24d01c0 100644
--- a/src/lib/components/skills/SkillContainer.svelte
+++ b/src/lib/components/skills/SkillContainer.svelte
@@ -4,7 +4,7 @@
 
 
 	<section
-		class="card flex flex-col items-center justify-center mx-auto w-full bg-base-300 p-8 m-8 space-y-4"
+		class="card flex flex-col items-center justify-center mx-auto w-full bg-base-300 p-8 mt-8 space-y-4"
 		id="skills"
 	>
 		<h2 class="text-4xl m-2">My skillset</h2>
@@ -18,7 +18,7 @@
 			<span class="badge badge-accent badge-lg">Experienced</span>
 			<span class="badge-ghost badge-lg">Limited Experience</span>
 		</div>
-		<div class="flex flex-col items-center justify-center mx-auto space-x-2 space-y-2">
+		<div id="categoryContainer" class="flex flex-col items-center justify-center mx-auto space-y-4">
 			<IndividualSkills />
 		</div>
 	</section>