Adds nav bar

Signed-off-by: Ash Svitan <selfsigned-ash@proton.me>
This commit is contained in:
2026-04-24 08:53:10 +02:00
parent f3f36110c9
commit 8c087e6322
3 changed files with 469 additions and 403 deletions
+439 -375
View File
@@ -19,411 +19,467 @@
</button>
</div>
<p class="mr-16">{{ $t("main.note.accessibility") }}</p>
<div class="h-4" />
<NuxtImg
<!-- <NuxtImg
src="/images/selfie.png"
alt="Selfie"
class="lg:float-right w-80 mb-4 lg:mb-0"
/>
/> -->
<h1 class="text-xl">
<h1 class="text-xl mr-12">
{{ $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") }}
<span class="font-bold">{{ $t("main.intro.1") }}</span
>, {{ $t("main.intro.2") }}{{ years }}{{ $t("main.intro.3") }}
</h1>
<p>{{ $t("main.residence") }}</p>
<a href="/cv1.pdf" target="_blank" class="underline">
{{ $t("main.cv") }}
</a>
<br />
<a href="/key.asc" target="_blank" class="underline">
{{ $t("main.gpg") }}
</a>
<div class="h-4" />
<p>{{ $t("main.contacts.title") }}</p>
<ul class="list-none">
<li>
<a
href="mailto:selfsigned-ash@proton.me"
target="_blank"
class="underline"
>
selfsigned-ash@proton.me</a
>
/
<a
href="mailto:ash@svitan.dev"
target="_blank"
class="underline"
>
ash@svitan.dev
</a>
</li>
<li>
<a
href="tel:+421948309804"
target="_blank"
class="underline"
>
+421 948 309 804</a
>&nbsp;<a
href="https://signal.me/#eu/spS_7L9Ln0xOql7JZMEusWCSmR95-cMnVTgB-zbQBVM54M6FUnRBUZMjGmr-_6qA"
target="_blank"
class="underline"
>
{{ $t("main.contacts.signal") }}
</a>
</li>
<li>
<a
href="https://matrix.to/#/@selfsigned-ash:matrix.org"
target="_blank"
class="underline"
>
@selfsigned-ash:matrix.org
</a>
</li>
</ul>
<div
class="flex items-center justify-center flex-wrap gap-x-4 my-4"
>
<ul>
<li>
<a href="#experience" class="underline">
./experience
</a>
</li>
<li>
<a href="#education" class="underline">./education</a>
</li>
</ul>
<ul>
<li><a href="#skills" class="underline">./skills</a></li>
<li>
<a href="#projects" class="underline">./projects</a>
</li>
</ul>
<ul>
<li>
<a href="#about-me" class="underline">./about-me</a>
</li>
<li>
<a href="#contacts" class="underline">./contacts</a>
</li>
</ul>
</div>
<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" />
<section id="experience">
<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>
<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") }}
<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>
</section>
<div class="h-8" />
<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") }}
<section id="education">
<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>
</section>
<div class="h-8" />
<section id="skills">
<h2 class="text-lg">{{ $t("main.skills.title") }}</h2>
<ul>
<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-2">{{ $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>
</section>
<div class="h-8" />
<section id="projects">
<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://ieeexplore.ieee.org/document/10844607"
link="https://gitea.svitan.dev/Streamer272/soc-2024"
/>
</p>
</td>
</tr>
</tbody>
</table>
<div class="h-6" />
<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>
<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>
<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>
<tbody>
<tr>
<td>{{ $t("main.education.0.when") }}</td>
<td>{{ $t("main.education.0.where") }}</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.education.1.when") }}</td>
<td>{{ $t("main.education.1.where") }}</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.education.2.when") }}</td>
<td>{{ $t("main.education.2.where") }}</td>
</tr>
</tbody>
</table>
<div class="h-6" />
<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>
<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>
<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>
<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" />
<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>
</td>
</tr>
<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>
<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>
<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>
<p class="mt-1">{{ $t("main.projects.footer") }}</p>
</section>
<div class="h-8" />
<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>
<section id="about-me">
<h2 class="text-lg">
{{ $t("main.about.title") }}
</h2>
<p>{{ $t("main.about.residence") }}</p>
<p>{{ $t("main.about.citizenship") }}</p>
<p>{{ $t("main.about.0") }}</p>
<p>{{ $t("main.about.1") }}</p>
<p>{{ $t("main.about.2") }}</p>
<p>{{ $t("main.about.3") }}</p>
</section>
<div class="h-8" />
<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>
<section id="contacts">
<h2 class="text-lg">{{ $t("main.contacts.title") }}</h2>
<ul class="list-none">
<li>
<a
href="mailto:selfsigned-ash@proton.me"
target="_blank"
class="underline"
>
selfsigned-ash@proton.me</a
>
/
<a
href="mailto:ash@svitan.dev"
target="_blank"
class="underline"
>
ash@svitan.dev</a
>
(<a href="/key.asc" target="_blank" class="underline"
>{{ $t("main.contacts.gpg") }} </a
>)
</li>
<li>
<a
href="tel:+421948309804"
target="_blank"
class="underline"
>
+421 948 309 804</a
>&nbsp;<a
href="https://signal.me/#eu/spS_7L9Ln0xOql7JZMEusWCSmR95-cMnVTgB-zbQBVM54M6FUnRBUZMjGmr-_6qA"
target="_blank"
class="underline"
>
{{ $t("main.contacts.signal") }}
</a>
</li>
<li>
<a
href="https://matrix.to/#/@selfsigned-ash:matrix.org"
target="_blank"
class="underline"
>
@selfsigned-ash:matrix.org
</a>
</li>
</ul>
<div class="h-4" />
<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>
</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.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>
</section>
<div class="h-8" />
<p>
{{ $t("main.note.source.0") }}
@@ -472,6 +528,14 @@ tr:last-of-type {
border: 1px solid var(--catppuccin-color-text);
border-radius: 1rem;
}
section {
margin-left: 1rem;
}
section h2 {
margin-left: -1rem;
}
</style>
<script lang="ts" setup>