portfolio/website/components/sections/Heading.vue

<template>
  <div class="py-40">
    <h1 class="text-primary-500 text-6xl font-bold">Timo Boomers</h1>
    <h3 class="text-primary-700 font-bold text-xl">aka Xeovalyte</h3>

    <p class="text-bright mt-10">
      Hello everyone! My name is Timo Boomers also known as Xeovalyte. I live in the Netherlands and have always found electronics and computers interesting. Since I was about 12 years old I started to wander in the world of computers and programming. At this moment I program various things like websites, Discord bots, desktop applications and Arduino.
    </p>
    <div class="text-primary-500 flex gap-5 text-lg mt-16 font-bold">
      <NuxtLink to="https://gitea.xeovalyte.dev/xeovalyte" :external="true" class="border-b pb-1 border-dotted hover:border-solid border-bright flex gap-1.5 hover:text-primary-100">
        <Icon name="simple-icons:gitea" size="1.6em"/>
        Gitea
      </NuxtLink>
      <NuxtLink to="mailto:contact@xeovalyte.dev" :external="true" class="border-b pb-1 border-dotted hover:border-solid border-bright flex gap-1.5 hover:text-primary-100">
        <Icon name="simple-icons:maildotru" size="1.5em"/>
        Email
      </NuxtLink>
    </div>
  </div>
</template>