portfolio/components/slides/Skills.vue

86 lines
2.7 KiB
Vue
Raw Permalink Normal View History

2023-02-09 20:21:20 +01:00
<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>