<template>
  <section class="flex h-screen snap-center items-center justify-center">
    <div
      class="my-40 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>
