<script setup lang="ts">
import IconLink from '@/components/IconLink.vue'
import IconLinkList from '@/components/IconLinkList.vue'

import { games } from '@/games'

import FFXIV from '@/assets/icons/IconFfxiv.vue'
import Minecraft from '@/assets/icons/IconMinecraft.vue'
import Steam from '@/assets/icons/IconSteam.vue'
import BattleNet from '@/assets/icons/IconBattleNet.vue'
import PlayStation from '@/assets/icons/IconPlayStation.vue'
import Switch from '@/assets/icons/IconNintendoSwitch.vue'
import FilteredList from '@/components/FilteredList.vue'

const dob = new Date('1988-04-25')

const getAge = (dateOfBirth: Date): number => {
  const today = new Date()

  const thisYear = today.getFullYear()
  const thisMonth = today.getMonth()
  const thisDay = today.getDate()

  const dobYear = dateOfBirth.getFullYear()
  const dobMonth = dateOfBirth.getMonth()
  const dobDay = dateOfBirth.getDate()

  let age = thisYear - dobYear

  if (thisMonth < dobMonth) age--
  if (thisMonth === dobMonth && thisDay < dobDay) age--

  return age
}
</script>

<template>
  <section>
    <h1>About me</h1>
    <p>
      I'm a chill {{ getAge(dob) }} year old dude from the south of Germany pretending to be a
      dragon online.
    </p>

    <p>
      I've been in the furry fandom for over 20 years now. I became aware of it through a search in
      <a href="https://en.wikipedia.org/wiki/Kazaa" target="_blank">Kazaa</a> for
      <em>“dragon”</em> images to use as desktop wallpaper for my computer. I blindly downloaded
      everything I could get my hands on, and a not-so-innocent image with a very specific term had
      crept in when I went over all the downloads. Adolescent cruiosity got the better of me and I
      searched for it and life has never been the same 😉
    </p>

    <p>
      I quickly learned about the
      <a href="https://en.wikifur.com/wiki/Vcl" target="_blank">VCL</a> (not to be confused with the
      <a href="https://www.videolan.org/vlc/" target="_blank">media player</a>) and frequented it
      regularly. I loved the comic
      <a href="https://vixencontrolled.net/Artists/AraKaraath%20AKA%20Adrian-Maus/" target="_blank">
        <em>In a Perfect World</em>
      </a>
      by Adrian Maus (aka Arakaraath, RIP 🪦💐). I soon stumbled upon
      <a href="https://www.furaffinity.net/">Fur Affinity</a> and it has been my mainstay for many,
      many years.
    </p>

    <p>
      Being in the fandom allowed me to feel comfortable with myself and eventually come out as gay,
      not in small part to a furry comic by the name of
      <a href="https://en.wikifur.com/wiki/Associated_Student_Bodies" target="_blank">
        <em>Associated Student Bodies</em>
      </a>
      (ASB for short) a good soul lended to me which was about the very subject matter of coming out
      and navigating a world outside of its norms. Holding this physical comic in my very hands made
      the fandom all the more real to me.
    </p>

    <p>
      I couldn't imagine being the person I am today without the fandom. It was a very formative
      part of my teens and keeps being a formative part of my everyday life. I formed friendships
      for life and found the love of my life through it. I wouldn't have it any other way.
    </p>

    <h2>Tech</h2>

    <p>
      I've been coding for the web professionally since around 2012 when I started an apprenticeship
      for a small agency. Back then HTML5 was the hot new stuff and Chrome hadn't taken over the web
      yet. I'm largely self-taught with no formal education in infromation technology. In fact, my
      first steps in handling computers was issuing <code>format C:</code> without any idea how to
      reinstall my operating system. We all have to start somewhere, right?
    </p>

    <p>
      Since then I went on to fulfill my childhood dream of working with computers. It wasn't as
      streightforward a road as I would've liked. But my perseverance would eventually pay off.
      Never say Never 😃
    </p>

    <p>
      I believe in the power of the web, which is why I have dedicated myself to web development for
      over 10 years now. The field may be chaotic, but constantly moving ahead. Anyone can make the
      web their own and there is inspiration at every corner. There is practically no barrier to
      entry. A little HTML, a pinch of CSS and very beautiful things can be created.
    </p>

    <h2>Games</h2>
    <p>When I'm not making fancy websites for myself I do enjoy some fun video games.</p>

    <p>Below you'll find a selection of games I've played:</p>

    <FilteredList :data="games" />

    <h3>Games & Platforms</h3>
    <p>You'll find me playing these games and on these platforms.</p>

    <IconLinkList>
      <IconLink
        title="Sebin Nyshkim (Chaos/Cerberus)"
        href="https://eu.finalfantasyxiv.com/lodestone/character/32926097/"
        :icon="FFXIV"
        style="--color: #9f2536"
      />
      <IconLink title="SebinNyshkim" :icon="Minecraft" style="--color: #44b136" />
      <IconLink
        title="Sebin Nyshkim"
        href="https://steamcommunity.com/id/SebinNyshkim/"
        :icon="Steam"
        style="--color: #c5c3c0"
      />
      <IconLink title="SebinNyshkim#2250" :icon="BattleNet" style="--color: #148eff" />
      <IconLink title="sonofdragons" :icon="PlayStation" style="--color: #0070d1" />
      <IconLink title="SW-0267-8499-8685" :icon="Switch" style="--color: #e60012" />
    </IconLinkList>
  </section>
</template>
