skill container complete ui revamp
This commit is contained in:
parent
06e41a886b
commit
43534bfefd
|
@ -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,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>
|
||||
|
|
Loading…
Reference in New Issue