Add contacts page

src/assets/icons/linkedin.svg

@@ -0,0 +1 @@
+<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px">    <path d="M41,4H9C6.24,4,4,6.24,4,9v32c0,2.76,2.24,5,5,5h32c2.76,0,5-2.24,5-5V9C46,6.24,43.76,4,41,4z M17,20v19h-6V20H17z M11,14.47c0-1.4,1.2-2.47,3-2.47s2.93,1.07,3,2.47c0,1.4-1.12,2.53-3,2.53C12.2,17,11,15.87,11,14.47z M39,39h-6c0,0,0-9.26,0-10 c0-2-1-4-3.5-4.04h-0.08C27,24.96,26,27.02,26,29c0,0.91,0,10,0,10h-6V20h6v2.56c0,0,1.93-2.56,5.81-2.56 c3.97,0,7.19,2.73,7.19,8.26V39z"/></svg>

src/assets/icons/mail.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M24 44q-4.15 0-7.8-1.575-3.65-1.575-6.35-4.275-2.7-2.7-4.275-6.35Q4 28.15 4 24t1.575-7.8Q7.15 12.55 9.85 9.85q2.7-2.7 6.35-4.275Q19.85 4 24 4t7.8 1.575q3.65 1.575 6.35 4.275 2.7 2.7 4.275 6.35Q44 19.85 44 24v2.65q0 2.8-1.975 4.725Q40.05 33.3 37.2 33.3q-1.8 0-3.4-.875-1.6-.875-2.45-2.475-1.3 1.7-3.25 2.525T24 33.3q-3.9 0-6.625-2.7T14.65 24q0-3.9 2.725-6.65Q20.1 14.6 24 14.6t6.625 2.75Q33.35 20.1 33.35 24v2.65q0 1.55 1.125 2.6T37.2 30.3q1.55 0 2.675-1.05Q41 28.2 41 26.65V24q0-7.1-4.95-12.05Q31.1 7 24 7q-7.1 0-12.05 4.95Q7 16.9 7 24q0 7.1 4.95 12.05Q16.9 41 24 41h10.7v3Zm0-13.7q2.65 0 4.5-1.825T30.35 24q0-2.7-1.85-4.55-1.85-1.85-4.5-1.85t-4.5 1.85Q17.65 21.3 17.65 24q0 2.65 1.85 4.475Q21.35 30.3 24 30.3Z"/></svg>

src/assets/icons/telegram.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M25,2c12.703,0,23,10.297,23,23S37.703,48,25,48S2,37.703,2,25S12.297,2,25,2z M32.934,34.375	c0.423-1.298,2.405-14.234,2.65-16.783c0.074-0.772-0.17-1.285-0.648-1.514c-0.578-0.278-1.434-0.139-2.427,0.219	c-1.362,0.491-18.774,7.884-19.78,8.312c-0.954,0.405-1.856,0.847-1.856,1.487c0,0.45,0.267,0.703,1.003,0.966	c0.766,0.273,2.695,0.858,3.834,1.172c1.097,0.303,2.346,0.04,3.046-0.395c0.742-0.461,9.305-6.191,9.92-6.693	c0.614-0.502,1.104,0.141,0.602,0.644c-0.502,0.502-6.38,6.207-7.155,6.997c-0.941,0.959-0.273,1.953,0.358,2.351	c0.721,0.454,5.906,3.932,6.687,4.49c0.781,0.558,1.573,0.811,2.298,0.811C32.191,36.439,32.573,35.484,32.934,34.375z"/></svg>

src/views/contacts/ContactLink.vue

@@ -0,0 +1,19 @@
+<template>
+    <p class="my-4 text-center">
+        <a :href="props.url">
+            <div class="inline-flex items-center">
+                <img :src="props.icon" alt="Github" class="h-7 mr-2 dark:invert" /> 
+                <span class="text-xl truncate">{{ props.label }}</span>
+            </div>
+        </a>
+    </p>
+</template>
+
+
+<script setup lang="ts">
+    const props = defineProps({
+        url: String,
+        label: String,
+        icon: String, alt: String
+    });
+</script>

src/views/contacts/Contacts.vue

@@ -1,11 +1,21 @@
 <template>
-    <Navbar />
+    <div class="relative z-10">
+        <Navbar />
+    </div>
 
-    <main>
-        <div class="container mx-auto">
-            <h1 class="text-5xl font-bold">
-                {{ t("hello") }}
-            </h1>
+    <main class="absolute top-0 h-screen w-screen z-0">
+        <div class="flex justify-center items-center h-full w-full">
+            <div>
+                <h1 class="text-5xl font-bold text-center">{{ t("contacts") }}</h1>
+                
+                <div class="flex justify-center">
+                    <div>
+                        <ContactLink label="tcxia2001@gmail.com" url="mailto:tcxia2001@gmail.com" :icon="mail_icon" alt="E-mail" />
+                        <ContactLink label="t.me/notxia" url="https://t.me/notxia" :icon="telegram_icon" alt="Telegram" />
+                        <ContactLink label="linkedin.com/in/tian-cheng-xia" url="https://www.linkedin.com/in/tian-cheng-xia/" :icon="linkedin_icon" alt="LinkedIn" />
+                    </div>
+                </div>
+            </div>
         </div>
     </main>
 </template>
@@ -15,6 +25,11 @@
     import Navbar from "@/components/navbar/Navbar.vue";
     import { useI18n } from "vue-i18n";
     import locale from "./locale.json";
+    import ContactLink from "./ContactLink.vue";
+
+    import mail_icon from "@/assets/icons/mail.svg";
+    import telegram_icon from "@/assets/icons/telegram.svg";
+    import linkedin_icon from "@/assets/icons/linkedin.svg";
 
     const { t } = useI18n({ messages: locale });
 </script>

src/views/contacts/locale.json

@@ -1,8 +1,8 @@
 {
     "en": {
-        "hello": "Hello"
+        "contacts": "Contacts"
     },
     "it": {
-        "hello": "Ciao"
+        "contacts": "Contatti"
     }
 }