lunasqu.ee-nuxt/pages/index.vue

<template>
  <div style="display: contents">
    <NuxtLayout name="main">
      <Section>
        <template v-slot:header>
          <h1>About me</h1>
        </template>

        <div class="section-content">
          <div class="introduction">
            <p>
              Hello, my name is Evert Prants. I am a
              {{ evertAge }}-year-old self-taught Web Developer and Systems
              Administrator from Estonia. I am generally a very curious person
              and thus I am interested in a very large variety of subjects,
              including, but not limited to, space exploration, electronics,
              computers, networks, programming, aviation, ships, cars and other
              scientific fields. I like to tell everyone that I use Arch Linux -
              sorry not sorry.
            </p>
            <p>
              I can pretty much code in any language and use any library with
              the help of documentation and instructional materials, so the
              <q>Programming</q> list is not entirely comprehensive.
            </p>
          </div>

          <div class="gridbox">
            <IconLinkList :list="linksList" title="Links" />
            <IconLinkList :list="socialLinks" title="Socials" />
          </div>

          <LanguageList />
        </div>
      </Section>
    </NuxtLayout>
  </div>
</template>

<script setup lang="ts">
const linksList = [
  {
    name: 'Blog (inactive)',
    icon: 'icon-rss-box',
    href: '/blog',
  },
  {
    name: 'Web apps',
    icon: 'icon-controller-classic',
    href: 'https://lunasqu.ee/apps',
  },
  {
    name: 'GnuPG Public Key',
    icon: 'icon-key-variant',
    href: 'https://lunasqu.ee/public/keys/pgp/Evert%20Prants.pub',
    blank: true,
  },
  {
    name: 'Icy Network',
    icon: 'icon-icynet',
    href: 'https://icynet.eu/',
    blank: true,
  },
];

const socialLinks = [
  {
    href: 'https://git.icynet.eu/evert',
    icon: 'icon-gitea',
    name: 'Gitea (personal projects)',
  },
  {
    href: 'https://bsky.app/profile/lunasqu.ee',
    icon: 'icon-bluesky',
    name: 'Bluesky',
  },
  {
    href: 'https://social.lunasqu.ee/diamond',
    icon: 'icon-pleroma',
    name: 'Akkoma (aka Mastodon)',
  },
  {
    href: 'https://github.com/LunaSquee',
    icon: 'icon-github-circled',
    name: 'GitHub (contributions only)',
  },
];

const evertAge = computed(() => {
  const today = new Date();
  const birthDate = new Date('2000-04-18');
  let age = today.getFullYear() - birthDate.getFullYear();
  const m = today.getMonth() - birthDate.getMonth();
  if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
    age--;
  }
  return age;
});
</script>