Files
svitan.dev/app/pages/index.vue
2026-01-15 11:02:11 +01:00

131 lines
4.3 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
>
&nbsp;{{ $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" />
</div>
</div>
</template>
<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>