✨ Adds intro and contacts

app/pages/index.vue

@@ -0,0 +1,130 @@
+<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>