lunasqu.ee-nuxt/pages/index.vue

<template>
  <Section>
    <template v-slot:header>
      <h1>About me</h1>
    </template>

    <div class="section-content">
      <div class="introduction">
        <p>
          Hello, my name is Evert <q>Diamond</q> 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 very comprehensive.
        </p>
      </div>

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

      <LanguageList />
    </div>
  </Section>

  <Section>
    <template v-slot:header>
      <h1>Featured projects</h1>
    </template>

    <FeaturedProject
      variant="left"
      title="Icy Network"
      image="/images/projects/icy_network_portal.png"
      href="https://icynet.eu"
    >
      <p>
        <b>Icy Network</b> is a single-sign-on (SSO) provider for projects
        created by me and my friends.
      </p>
      <p>
        The Icy Network website provides authorization using the
        industry-standard OAuth 2.0 protocol.
      </p>
      <h3>Features</h3>
      <ul>
        <li>User accounts with display names and avatars</li>
        <li>
          Administration panel created using Vue.js for managing users and OAuth
          clients
        </li>
        <li>A news outlet</li>
      </ul>
    </FeaturedProject>

    <FeaturedProject
      variant="right"
      title="Various web-based games"
      image="/images/projects/games.png"
      href="/apps"
    >
      <p>
        I have also created various experimental web-based games in order to
        learn Canvas APIs.
      </p>
      <h3>Games include..</h3>
      <ul>
        <li>Battleship</li>
        <li>Connect Four</li>
        <li>Tower Defense</li>
        <li>Minesweeper</li>
        <li>Hook Miner</li>
        <li>Tile-based modifyable world</li>
      </ul>
    </FeaturedProject>

    <FeaturedProject
      variant="left"
      title="Icy Network TV"
      image="/images/projects/icytv.png"
      href="https://tv.icynet.eu"
    >
      <p>
        <b>Icy Network TV</b> is a livestreaming platform for Icy Network
        affiliates.
      </p>
      <p>
        This project uses
        <a href="https://github.com/arut/nginx-rtmp-module" target="_blank"
          >nginx-rtmp-module</a
        >
        as the livestream server and channels are created for select Icy Network
        users only.
      </p>
      <h3>Features</h3>
      <ul>
        <li>Integrated video player</li>
        <li>Video dashboard</li>
        <li>HLS video output</li>
      </ul>
    </FeaturedProject>
  </Section>

  <footer>
    <p>
      There are no cookies. There is no data collection.
      <a href="https://gitlab.icynet.eu/evert/lunasqu.ee-nuxt" target="_blank"
        >Source code</a
      >
    </p>
    <p>
      <img
        src="/images/mail.gif"
        style="user-select: none; margin: auto; display: block; border: 0"
        alt="evert at sign luna squ dot ee"
      />
    </p>
    <p>&copy; 2018 - {{ currentYear }} Evert Prants</p>
  </footer>
</template>

<script setup lang="ts">
const linksList = [
  {
    name: 'Blog (inactive)',
    icon: 'icon-rss-box',
    href: '/blog',
  },
  {
    name: 'Web apps',
    icon: 'icon-controller-classic',
    href: '/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://gitlab.icynet.eu/evert',
    icon: 'icon-gitlab',
    name: 'GitLab',
  },
  {
    href: 'https://social.lunasqu.ee/diamond',
    icon: 'icon-pleroma',
    name: 'Pleroma',
  },
  {
    href: 'https://reddit.com/user/LunaSquee',
    icon: 'icon-reddit-alien',
    name: 'Reddit',
  },
  {
    href: 'https://github.com/LunaSquee',
    icon: 'icon-github-circled',
    name: 'GitHub (old stuff)',
  },
];

const currentYear = new Date().getFullYear();
const evertAge = (() => {
  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>