<script setup lang="ts">
const age =
  new Date(Number(new Date()) - Number(new Date('2003-09-18'))).getFullYear() -
  1970

const meta = {
  title: 'About Me',
  description: `Nice to meet you!~ I'm Andrew, a ${age}-year-old developer from Kaluga, Russia.`,
  image: 'https://enderman.ch/images/logo.png',
  url: 'https://enderman.ch/about',
}

useSeoMeta({
  title: meta.title,
  description: meta.description,
  ogTitle: meta.title,
  ogDescription: meta.description,
  ogImage: meta.image,
  ogUrl: meta.url,
  ogType: 'website',
  twitterTitle: meta.title,
  twitterDescription: meta.description,
  twitterImage: meta.image,
  twitterCard: 'summary',
})

useHead({
  title: 'About',
  htmlAttrs: {
    lang: 'en',
  },
  link: [
    {
      rel: 'icon',
      type: 'image/x-icon',
      href: '/favicon.ico',
    },
  ],
})
</script>

<template>
  <section>
    <h3 class="alex">About me</h3>
    <hr />
    <p>
      <strong>🚧 This page is currently under construction.</strong> Expect a
      lot more content to be added as time passes.
      <em>Please report all bugs you encounter via the link in the footer</em>,
      I will make sure to sand them down.
    </p>
    <hr />
    <p>
      Nice to meet you! I'm Andrew, a {{ age }}-year-old guy from Kaluga,
      Russia. I have been developing software since I was 10, and I have always
      been interested in technology. I'm a middle-senior C/++ developer and a
      junior full-stack engineer.
      <sup>1</sup>
    </p>
    <p class="font-small">
      <sup>1</sup>
      All titles are based on knowledge and confidence, not on official work
      experience.
    </p>
    <p><strong>Here's a little more about myself:</strong></p>
    <ul>
      <li>My favorite season is winter.</li>
      <li>My favorite bands are Black Sabbath, Metallica and Opeth.</li>
      <li>My favorite field in mathematics is Algebraic Geometry.</li>
    </ul>
    <p>
      I work on all sorts of projects, most of the times simultaneously, which
      doesn't help with adhering to deadlines at all. However, you can always
      check them out!
    </p>
    <h5 class="alex">FAQ</h5>
    <ul class="list-style-type-faq">
      <li><strong>Why are you called Endermanch?</strong></li>
      <li>
        There's no particular reason to it. When I was rebranding my YouTube
        channel from Ender's Show to Enderman, the short URL was taken. I went
        thinking for quite some time, and then concluded that adding «ch» at the
        end sounded pretty good. I was 14 at the time of making that decision.
      </li>
    </ul>
  </section>
</template>
