lunasqu.ee-nuxt/pages/index.vue

<template>
  <main>
    <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://git.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>
  </main>
</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 git)',
  },
  {
    href: 'https://social.lunasqu.ee/diamond',
    icon: 'icon-pleroma',
    name: 'Pleroma (Mastodon)',
  },
  {
    href: 'https://reddit.com/user/LunaSquee',
    icon: 'icon-reddit-alien',
    name: 'Reddit',
  },
  {
    href: 'https://github.com/LunaSquee',
    icon: 'icon-github-circled',
    name: 'GitHub (mostly archives)',
  },
];

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