added a leftbar

components/slides/About.vue

@@ -0,0 +1,41 @@
+<template>
+  <section class="flex h-screen snap-center items-center justify-center">
+    <div
+      class="my-40 mx-3 flex w-full max-w-xl flex-wrap items-center justify-center gap-5 whitespace-pre-wrap text-lg text-primary-500"
+    >
+      <h2
+        v-animate="{ preset: 'slide-right', duration: 500 }"
+        class="mb-10 text-center text-3xl font-bold"
+      >
+        {{ t("title") }}
+      </h2>
+      <div v-animate="{ preset: 'slide-right', delay: 400, duration: 500 }">
+        {{ t("message") }}
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+const { t } = useI18n({ useScope: "local" });
+</script>
+
+<i18n lang="yaml">
+en:
+  message: |
+    Hi,
+    My name is Timo Boomers (16) also known as Xeovalyte. I live in the Netherlands and I have always found electronics and computers interesting.
+
+    When I was 12 I started programming. I now program Websites, Discord bots and Arduino.
+
+  title: "About"
+
+nl:
+  message: |
+    Hallo,
+    Mijn naam is Timo Boomers (16) ook wel bekend als Xeovalyte. Ik heb electronica en computers altijd interresant gevonden en ben toen gaan programmeren.
+
+    Toen ik 12 was begon ik met programmeren. Ondertussen programmeer ik Websites, Discord bots en Arduino.
+
+  title: "Over mij"
+</i18n>

components/slides/Heading.vue

@@ -0,0 +1,41 @@
+<template>
+  <section
+    class="relative flex h-screen snap-center items-center justify-center"
+  >
+    <div
+      class="flex flex-wrap items-center justify-center gap-5 text-center text-primary-500"
+    >
+      <img
+        v-animate="{ preset: 'slide-left', delay: 300 }"
+        src="../../assets/icons/logo.svg"
+        alt="Logo Xeovalyte"
+        width="150"
+      />
+      <div class="space-y-2">
+        <h1
+          v-animate="{ preset: 'slide-up', delay: 450 }"
+          class="sm:text-7xl text-6xl font-bold"
+        >
+          Xeovalyte
+        </h1>
+        <div
+          v-animate="{ preset: 'slide-right', delay: 600 }"
+          class="h-1 w-full rounded-full bg-primary-500"
+        />
+        <h3
+          v-animate="{ preset: 'slide-down', delay: 750 }"
+          class="text-4xl font-bold"
+        >
+          Timo Boomers
+        </h3>
+      </div>
+
+      <Icon
+        @click="scrollToElement('about')"
+        size="2em"
+        name="ph:arrow-fat-line-down"
+        class="absolute bottom-20 basis-full animate-bounce hover:cursor-pointer"
+      />
+    </div>
+  </section>
+</template>

components/slides/Skills.vue

@@ -0,0 +1,85 @@
+<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>