464 lines
17 KiB
Vue
464 lines
17 KiB
Vue
<template>
|
|
<div class="w-screen h-full flex items-center justify-start flex-col">
|
|
<div class="w-1 h-10 shrink-10" />
|
|
|
|
<div
|
|
class="w-[90vw] sm:w-[80vw] m:w-[70vw] lg:w-[60vw] xl:w-[50vw] border-solid border-black border-1 p-3 shrink-0 overflow-auto relative"
|
|
>
|
|
<div class="absolute top-2 right-2 flex gap-x-2">
|
|
<button
|
|
v-for="locale in locales.filter(
|
|
(l) => l.code !== $i18n.locale
|
|
)"
|
|
@click="setLocale(locale.code)"
|
|
class="cursor-pointer underline"
|
|
>
|
|
{{ locale.code.toUpperCase() }}
|
|
</button>
|
|
</div>
|
|
|
|
<p class="mr-16">{{ $t("main.note.accessibility") }}</p>
|
|
<div class="h-4" />
|
|
|
|
<h1 class="text-xl">
|
|
{{ $t("main.intro.0") }}
|
|
<span class="font-bold">{{ $t("main.intro.1") }}</span> ({{
|
|
$t("main.intro.2")
|
|
}}), {{ $t("main.intro.3") }} {{ years
|
|
}}{{ $t("main.intro.4") }}
|
|
</h1>
|
|
<p>{{ $t("main.residence") }}</p>
|
|
<a href="/cv1.pdf" target="_blank" class="underline">
|
|
{{ $t("main.cv") }}
|
|
</a>
|
|
<div class="h-4" />
|
|
|
|
<p>{{ $t("main.contacts.title") }}</p>
|
|
<ul class="list-none">
|
|
<li>
|
|
<a
|
|
href="mailto:daniel@svitan.dev"
|
|
target="_blank"
|
|
class="underline"
|
|
>
|
|
daniel@svitan.dev
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="tel:+421948309804"
|
|
target="_blank"
|
|
class="underline"
|
|
>
|
|
+421 948 309 804</a
|
|
>
|
|
{{ $t("main.contacts.signal") }}
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="https://matrix.to/#/@selfsigned-ash:svitan.dev"
|
|
target="_blank"
|
|
class="underline"
|
|
>
|
|
@selfsigned-ash:svitan.dev
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div class="h-4" />
|
|
|
|
<p>{{ $t("main.socials.title") }}</p>
|
|
<ul class="list-none">
|
|
<li>
|
|
<a
|
|
href="https://github.com/Streamer272"
|
|
target="_blank"
|
|
class="underline"
|
|
>
|
|
GitHub
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="https://gitea.svitan.dev/Streamer272"
|
|
target="_blank"
|
|
class="underline"
|
|
>
|
|
Gitea
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="https://codeberg.org/selfsigned-ash"
|
|
target="_blank"
|
|
class="underline"
|
|
>
|
|
Codeberg
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="https://kolektiva.social/@selfsigned_ash"
|
|
rel="me"
|
|
target="_blank"
|
|
class="underline"
|
|
>
|
|
Mastodon
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="https://pixelfed.de/selfsigned-ash"
|
|
target="_blank"
|
|
class="underline"
|
|
>
|
|
Pixelfed
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div class="h-6" />
|
|
|
|
<h2 class="text-lg">{{ $t("main.experience.title") }}</h2>
|
|
<table class="w-full">
|
|
<thead>
|
|
<tr>
|
|
<th class="max-w-48">
|
|
<p class="px-1">
|
|
{{ $t("main.experience.header.when") }}
|
|
</p>
|
|
</th>
|
|
<th>
|
|
<p class="px-1">
|
|
{{ $t("main.experience.header.occupation") }}
|
|
</p>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>{{ $t("main.experience.0.when") }}</td>
|
|
<td>
|
|
{{ $t("main.experience.0.occupation") }}<br />
|
|
{{ $t("main.experience.0.occupation.details") }}
|
|
|
|
<ul class="list-disc mt-2">
|
|
<li>{{ $t("main.experience.0.details.0") }}</li>
|
|
<li>{{ $t("main.experience.0.details.1") }}</li>
|
|
<li>{{ $t("main.experience.0.details.2") }}</li>
|
|
<li>{{ $t("main.experience.0.details.3") }}</li>
|
|
</ul>
|
|
<p class="mt-2 flex items-center gap-x-1">
|
|
{{ $t("main.experience.publications") }}
|
|
<ArrowLink
|
|
link="https://ieeexplore.ieee.org/document/10844607"
|
|
/>
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="h-6" />
|
|
|
|
<h2 class="text-lg">{{ $t("main.education.title") }}</h2>
|
|
<table class="w-full">
|
|
<thead>
|
|
<tr>
|
|
<th class="max-w-48">
|
|
<p class="px-1">
|
|
{{ $t("main.education.header.when") }}
|
|
</p>
|
|
</th>
|
|
<th>
|
|
<p class="px-1">
|
|
{{ $t("main.education.header.where") }}
|
|
</p>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>{{ $t("main.education.0.when") }}</td>
|
|
<td>{{ $t("main.education.0.where") }}</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>{{ $t("main.education.1.when") }}</td>
|
|
<td>{{ $t("main.education.1.where") }}</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>{{ $t("main.education.2.when") }}</td>
|
|
<td>{{ $t("main.education.2.where") }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="h-6" />
|
|
|
|
<h2 class="text-lg">{{ $t("main.skills.title") }}</h2>
|
|
<ul class="ml-4">
|
|
<li>{{ $t("main.skills.languages") }}</li>
|
|
<li>{{ $t("main.skills.data-science") }}</li>
|
|
<li>{{ $t("main.skills.sysadmin") }}</li>
|
|
<li>{{ $t("main.skills.frontend") }}</li>
|
|
<li>{{ $t("main.skills.backend") }}</li>
|
|
<li>{{ $t("main.skills.database") }}</li>
|
|
<li>{{ $t("main.skills.math") }}</li>
|
|
<li>{{ $t("main.skills.other") }}</li>
|
|
</ul>
|
|
|
|
<p class="mt-1">{{ $t("main.skills.0") }}</p>
|
|
<p>{{ $t("main.skills.1") }}</p>
|
|
<p>{{ $t("main.skills.2") }}</p>
|
|
<p>{{ $t("main.skills.3") }}</p>
|
|
<p>{{ $t("main.skills.4") }}</p>
|
|
<div class="h-6" />
|
|
|
|
<h2 class="text-lg">{{ $t("main.projects.title") }}</h2>
|
|
<table class="w-full">
|
|
<thead>
|
|
<tr>
|
|
<th class="max-w-60">
|
|
<p class="px-1">
|
|
{{ $t("main.projects.header.name") }}
|
|
</p>
|
|
</th>
|
|
<th class="max-w-28">
|
|
<p class="px-1">
|
|
{{ $t("main.projects.header.reference") }}
|
|
</p>
|
|
</th>
|
|
<th>
|
|
<p class="px-1">
|
|
{{ $t("main.projects.header.description") }}
|
|
</p>
|
|
</th>
|
|
<th class="max-w-32">
|
|
<p class="px-1">
|
|
{{ $t("main.projects.header.tags") }}
|
|
</p>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>{{ $t("main.projects.0.name") }}</td>
|
|
<td class="flex gap-x-2">
|
|
<ArrowLink
|
|
link="https://gitea.svitan.dev/Streamer272/soc-2024"
|
|
/>
|
|
<ArrowLink
|
|
link="https://github.com/Streamer272/soc-2024"
|
|
/>
|
|
</td>
|
|
<td>{{ $t("main.projects.0.description") }}</td>
|
|
<td class="flex gap-1 flex-wrap text-sm">
|
|
<span class="hashtag">
|
|
{{ $t("main.projects.0.tags.0") }}
|
|
</span>
|
|
<span class="hashtag">
|
|
{{ $t("main.projects.0.tags.1") }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>{{ $t("main.projects.1.name") }}</td>
|
|
<td class="flex gap-x-2">
|
|
<ArrowLink
|
|
link="https://gitea.svitan.dev/Streamer272/state-soc-cross"
|
|
/>
|
|
</td>
|
|
<td>{{ $t("main.projects.1.description") }}</td>
|
|
<td class="flex gap-1 flex-wrap text-sm">
|
|
<span class="hashtag">
|
|
{{ $t("main.projects.1.tags.0") }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>{{ $t("main.projects.2.name") }}</td>
|
|
<td class="flex gap-x-2">
|
|
<ArrowLink
|
|
link="https://gitea.svitan.dev/Streamer272/door-alarm"
|
|
/>
|
|
</td>
|
|
<td>{{ $t("main.projects.2.description") }}</td>
|
|
<td class="flex gap-1 flex-wrap text-sm">
|
|
<span class="hashtag">
|
|
{{ $t("main.projects.2.tags.0") }}
|
|
</span>
|
|
<span class="hashtag">
|
|
{{ $t("main.projects.2.tags.1") }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>{{ $t("main.projects.3.name") }}</td>
|
|
<td class="flex gap-x-2">
|
|
<ArrowLink
|
|
link="https://github.com/Streamer272/green-school"
|
|
/>
|
|
<ArrowLink link="https://zelena.svr.sk/" />
|
|
</td>
|
|
<td>{{ $t("main.projects.3.description") }}</td>
|
|
<td class="flex gap-1 flex-wrap text-sm">
|
|
<span class="hashtag">
|
|
{{ $t("main.projects.3.tags.0") }}
|
|
</span>
|
|
<span class="hashtag">
|
|
{{ $t("main.projects.3.tags.1") }}
|
|
</span>
|
|
<span class="hashtag">
|
|
{{ $t("main.projects.3.tags.2") }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>{{ $t("main.projects.4.name") }}</td>
|
|
<td class="flex gap-x-2">
|
|
<ArrowLink
|
|
link="https://github.com/Streamer272/automod"
|
|
/>
|
|
</td>
|
|
<td>{{ $t("main.projects.4.description") }}</td>
|
|
<td class="flex gap-1 flex-wrap text-sm">
|
|
<span class="hashtag">
|
|
{{ $t("main.projects.4.tags.0") }}
|
|
</span>
|
|
<span class="hashtag">
|
|
{{ $t("main.projects.4.tags.1") }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>{{ $t("main.projects.5.name") }}</td>
|
|
<td class="flex gap-x-2">
|
|
<ArrowLink
|
|
link="https://gitea.svitan.dev/Streamer272/pwetty"
|
|
/>
|
|
</td>
|
|
<td>{{ $t("main.projects.5.description") }}</td>
|
|
<td class="flex gap-1 flex-wrap text-sm">
|
|
<span class="hashtag">
|
|
{{ $t("main.projects.5.tags.0") }}
|
|
</span>
|
|
<span class="hashtag">
|
|
{{ $t("main.projects.5.tags.1") }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>{{ $t("main.projects.6.name") }}</td>
|
|
<td class="flex gap-x-2">
|
|
<ArrowLink
|
|
link="https://gitea.svitan.dev/Streamer272/keys"
|
|
/>
|
|
</td>
|
|
<td>{{ $t("main.projects.6.description") }}</td>
|
|
<td class="flex gap-1 flex-wrap text-sm">
|
|
<span class="hashtag">
|
|
{{ $t("main.projects.6.tags.0") }}
|
|
</span>
|
|
<span class="hashtag">
|
|
{{ $t("main.projects.6.tags.1") }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>{{ $t("main.projects.7.name") }}</td>
|
|
<td class="flex gap-x-2">
|
|
<ArrowLink
|
|
link="https://github.com/7274-dev/AdventnaVyzva-React"
|
|
/>
|
|
<ArrowLink link="https://github.com/7274-dev" />
|
|
</td>
|
|
<td>{{ $t("main.projects.7.description") }}</td>
|
|
<td class="flex gap-1 flex-wrap text-sm">
|
|
<span class="hashtag">
|
|
{{ $t("main.projects.7.tags.0") }}
|
|
</span>
|
|
<span class="hashtag">
|
|
{{ $t("main.projects.7.tags.1") }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<p class="mt-1">{{ $t("main.projects.footer") }}</p>
|
|
<div class="h-6" />
|
|
|
|
<h2 class="text-lg">{{ $t("main.interests.title") }}</h2>
|
|
<p>{{ $t("main.interests.0") }}</p>
|
|
<p>{{ $t("main.interests.1") }}</p>
|
|
<p>{{ $t("main.interests.2") }}</p>
|
|
<p>{{ $t("main.interests.3") }}</p>
|
|
<div class="h-6" />
|
|
|
|
<p>
|
|
{{ $t("main.note.source.0") }}
|
|
<a
|
|
href="https://gitea.svitan.dev/Streamer272/svitan.dev"
|
|
target="_blank"
|
|
class="underline"
|
|
>
|
|
{{ $t("main.note.source.1") }}
|
|
</a>
|
|
{{ $t("main.note.source.2") }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="w-1 h-10 shrink-0" />
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
td {
|
|
vertical-align: top;
|
|
}
|
|
|
|
td.flex {
|
|
padding: 0.25rem 0 0.5rem 0;
|
|
}
|
|
|
|
th {
|
|
text-align: left;
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
tr {
|
|
border-bottom: 1px solid black;
|
|
}
|
|
|
|
tr:last-of-type {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.hashtag {
|
|
padding: 0 0.2rem;
|
|
background-color: #e8e8e8;
|
|
border-radius: 0.25rem;
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts" setup>
|
|
const { locales, setLocale } = useI18n();
|
|
|
|
const now = new Date();
|
|
let years = now.getFullYear() - 2006 - 1;
|
|
if (now.getMonth() > 7 || (now.getMonth() === 7 && now.getDate() >= 23)) {
|
|
years++;
|
|
}
|
|
let a = years === 18 ? "an " : "a ";
|
|
</script>
|