✨ Adds intro and contacts

app/app.vue

@@ -1,7 +1,9 @@
 <template>
+    <NuxtLayout>
         <UApp>
             <UMain>
                 <NuxtPage />
             </UMain>
         </UApp>
+    </NuxtLayout>
 </template>

app/assets/global.css

@@ -1,3 +1,5 @@
+@import "tailwindcss";
+
 @font-face {
   font-family: "JetBrains Mono";
   src: url(fonts/JetBrainsMono-Regular.ttf) format("truetype");

app/components/ArrowLink.vue

@@ -0,0 +1,16 @@
+<template>
+    <NuxtLink :to="props.link" target="_blank">
+        <img
+            :src="props.icon ?? '/icons/arrow-up-right-from-square.svg'"
+            alt="Arrow going to the top right from the center of a square, representing a link"
+            class="w-4 h-4"
+        />
+    </NuxtLink>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+    link: string;
+    icon?: string;
+}>();
+</script>

app/layouts/default.vue

@@ -0,0 +1,28 @@
+<template>
+    <slot />
+</template>
+
+<style>
+html,
+body {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+}
+</style>
+
+<script lang="ts" setup>
+import "../assets/global.css";
+
+useHead({
+    title: "Daniel's portfolio",
+    meta: [
+        {
+            name: "author",
+            content: "Daniel Svitan (streamer272 / selfsigned-ash)",
+        },
+        { name: "description", content: "Daniel Svitan's portfolio" },
+        { name: "keywords", content: "Daniel Svitan portfolio CV" },
+    ],
+});
+</script>

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>

i18n/locales/de.json

@@ -2,8 +2,9 @@
     "main.note.accessibility": "Hinweis: Diese Seite wurde zugunsten der Barrierefreiheit einfach gehalten",
     "main.intro.0": "Hallo, ich bin ",
     "main.intro.1": "Daniel Svitan",
-    "main.intro.2": "ein ",
+    "main.intro.2": "alle Pronomen",
-    "main.intro.3": "-jähriger aufstrebend Ingenieur",
+    "main.intro.3": "ein ",
+    "main.intro.4": "-jähriger aufstrebend Ingenieur",
     "main.residence": "Wohnort: Bratislava, Slowakei",
     "main.cv": "Sehen Sie sich meinen Lebenslauf an",
     "main.contacts.title": "Kontakte:",

i18n/locales/en.json

@@ -2,8 +2,9 @@
     "main.note.accessibility": "Note: this page has been kept simple in favor of accessibility",
     "main.intro.0": "Hi, I'm ",
     "main.intro.1": "Daniel Svitan",
-    "main.intro.2": " a ",
+    "main.intro.2": "any pronouns",
-    "main.intro.3": " year-old aspiring engineer",
+    "main.intro.3": " a ",
+    "main.intro.4": " year-old aspiring engineer",
     "main.residence": "Residence: Bratislava, Slovakia",
     "main.cv": "Look at my CV",
     "main.contacts.title": "Contacts:",

i18n/locales/sk.json

@@ -2,8 +2,9 @@
     "main.note.accessibility": "Poznámka: táto stránka bola z dôvodu prístupnosti navrhnutá jednoducho",
     "main.intro.0": "Ahoj, som ",
     "main.intro.1": "Daniel Svitaň",
-    "main.intro.2": "",
+    "main.intro.2": "hocijaké zámená",
-    "main.intro.3": " ročný aspirujúci inžinier",
+    "main.intro.3": "",
+    "main.intro.4": " ročný aspirujúci inžinier",
     "main.residence": "Bydlisko: Bratislava, Slovensko",
     "main.cv": "Pozrite si moje CV",
     "main.contacts.title": "Kontakty:",

nuxt.config.ts

@@ -1,6 +1,5 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-    title: "Daniel's portfolio",
     modules: ["@nuxt/a11y", "@nuxt/ui", "@nuxtjs/i18n"],
     i18n: {
         defaultLocale: "en",
@@ -11,6 +10,11 @@ export default defineNuxtConfig({
             { code: "de", name: "Deutsch", file: "de.json" },
         ],
     },
+    app: {
+        head: {
+            charset: "utf-8",
+        },
+    },
     routeRules: {
         "/": { prerender: true },
     },

tailwind.config.js

@@ -8,4 +8,4 @@ module.exports = {
     extend: {},
   },
   plugins: [],
-}
+};