lunasqu.ee-nuxt/pages/index.vue

194 lines
5.2 KiB
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 = 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>