Madmin
/
old-portfolio-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

skill container complete ui revamp

This commit is contained in:
matthieu42morin 2024-04-29 05:10:56 +02:00
parent 06e41a886b
commit 43534bfefd
2 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/lib/components/skills/IndividualSkills.svelte
View File

@ -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>

4
src/lib/components/skills/SkillContainer.svelte
View File

@ -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>