86 lines
2.7 KiB
Vue
86 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<section class="flex h-screen snap-center items-center justify-center">
|
||
|
|
<div
|
||
|
|
class="my-40 mx-5 flex w-full max-w-3xl flex-col text-primary-500"
|
||
|
|
v-animate="{ stagger: true, preset: 'slide-left', duration: 500 }"
|
||
|
|
>
|
||
|
|
<h2 class="mb-10 text-center text-3xl font-bold">
|
||
|
|
{{ t("skills.skills") }}
|
||
|
|
</h2>
|
||
|
|
<h2 class="text-lg font-bold">Arduino</h2>
|
||
|
|
<div class="mb-5 grid grid-cols-5 items-center gap-x-4">
|
||
|
|
<div
|
||
|
|
class="col-span-5 h-4 w-full rounded-full bg-dark-600 sm:col-span-4"
|
||
|
|
>
|
||
|
|
<div class="h-4 w-3/5 rounded-full bg-primary-100" />
|
||
|
|
</div>
|
||
|
|
<h2 class="hidden text-lg font-bold sm:inline-block">
|
||
|
|
{{ t("skills.intermediate") }}
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
<h2 class="text-lg font-bold">Docker</h2>
|
||
|
|
<div class="mb-5 grid grid-cols-5 items-center gap-x-4">
|
||
|
|
<div
|
||
|
|
class="col-span-5 h-4 w-full rounded-full bg-dark-600 sm:col-span-4"
|
||
|
|
>
|
||
|
|
<div class="h-4 w-4/5 rounded-full bg-primary-100" />
|
||
|
|
</div>
|
||
|
|
<h2 class="hidden text-lg font-bold sm:inline-block">
|
||
|
|
{{ t("skills.advanced") }}
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
<h2 class="text-lg font-bold">Javascript</h2>
|
||
|
|
<div class="mb-5 grid grid-cols-5 items-center gap-x-4">
|
||
|
|
<div
|
||
|
|
class="col-span-5 h-4 w-full rounded-full bg-dark-600 sm:col-span-4"
|
||
|
|
>
|
||
|
|
<div class="h-4 w-2/3 rounded-full bg-primary-100" />
|
||
|
|
</div>
|
||
|
|
<h2 class="hidden text-lg font-bold sm:inline-block">
|
||
|
|
{{ t("skills.intermediate") }}
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
<h2 class="text-lg font-bold">Linux</h2>
|
||
|
|
<div class="mb-5 grid grid-cols-5 items-center gap-x-4">
|
||
|
|
<div
|
||
|
|
class="col-span-5 h-4 w-full rounded-full bg-dark-600 sm:col-span-4"
|
||
|
|
>
|
||
|
|
<div class="h-4 w-4/5 rounded-full bg-primary-100" />
|
||
|
|
</div>
|
||
|
|
<h2 class="hidden text-lg font-bold sm:inline-block">
|
||
|
|
{{ t("skills.advanced") }}
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
<h2 class="text-lg font-bold">Nuxt</h2>
|
||
|
|
<div class="mb-5 grid grid-cols-5 items-center gap-x-4">
|
||
|
|
<div
|
||
|
|
class="col-span-5 h-4 w-full rounded-full bg-dark-600 sm:col-span-4"
|
||
|
|
>
|
||
|
|
<div class="h-4 w-3/5 rounded-full bg-primary-100" />
|
||
|
|
</div>
|
||
|
|
<h2 class="hidden text-lg font-bold sm:inline-block">
|
||
|
|
{{ t("skills.intermediate") }}
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
const { t } = useI18n({ useScope: "local" });
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<i18n lang="yaml">
|
||
|
|
en:
|
||
|
|
skills:
|
||
|
|
skills: "Skills"
|
||
|
|
intermediate: "Intermediate"
|
||
|
|
advanced: "Advanced"
|
||
|
|
|
||
|
|
nl:
|
||
|
|
skills:
|
||
|
|
skills: "Vaardigheden"
|
||
|
|
intermediate: "Gemiddeld"
|
||
|
|
advanced: "Geavanceerd"
|
||
|
|
</i18n>
|