Add home page

src/components/random-something/RandomSomething.vue

@@ -12,21 +12,33 @@
     import { addFoundEasterEgg } from "@/utilities/easteregg_handler";
     import penguin_image from "@/assets/images/penguin.png";
     import llama_image from "@/assets/images/llama.png";
+    import rock_image from "@/assets/images/rock.png";
+    import coconut_image from "@/assets/images/coconut.png";
+    import red_panda_image from "@/assets/images/red-panda.png";
 
     const { t } = useI18n({ messages: {
         "en": {
             "penguin": "This is a penguin",
-            "llama": "This is a llama"
+            "llama": "This is a llama",
+            "rock": "This is a rock",
+            "coconut": "This is a coconut",
+            "red panda": "This is a red panda"
         },
         "it": {
             "penguin": "Questo è un pinguino",
-            "llama": "Questo è un lama"
+            "llama": "Questo è un lama",
+            "rock": "Questo è un sasso",
+            "coconut": "Questa è una noce di cocco",
+            "red panda": "Questo è un panda rosso"
         }
     } });
 
     const things = [
         { name: "penguin", image: penguin_image },
-        { name: "llama", image: llama_image }
+        { name: "llama", image: llama_image },
+        { name: "rock", image: rock_image },
+        { name: "coconut", image: coconut_image },
+        { name: "red panda", image: red_panda_image }
     ];
 
     const current_name = ref("");

src/views/home/Home.vue

@@ -1,18 +1,30 @@
 <template>
-    <Navbar />
+    <div class="relative z-10" >
+        <Navbar />
+    </div>
 
+    <ScreenCenter>
     <main>
-        <div class="container mx-auto">
-            <h1 class="text-5xl font-bold">
-                {{ t("hello") }}
-            </h1>
+        <div class="block md:flex justify-center items-center">
+            <div class="text-center md:text-left">
+                <p class="text-2xl md:text-3xl font-semibold uppercase">{{ t("i am a") }}</p>
+                <p class="text-4xl md:text-5xl font-semibold uppercase">{{ t("cs student") }}</p>
+                <p class="text-xl lowercase">{{ t("a very accurate description of me") }}</p>
+            </div>
+
+            <div class="w-fit mx-auto mt-5 md:m-0 md:ml-10">
+                <RandomSomething />
+            </div>
         </div>
     </main>
+    </ScreenCenter>
 </template>
 
 
 <script setup lang="ts">
     import Navbar from "@/components/navbar/Navbar.vue";
+    import ScreenCenter from "@/components/screen-center/ScreenCenter.vue";
+    import RandomSomething from "@/components/random-something/RandomSomething.vue";
     import { useI18n } from "vue-i18n";
     import locale from "./locale.json";
 

src/views/home/locale.json

@@ -1,8 +1,12 @@
 {
     "en": {
-        "hello": "Hello"
+        "i am a": "I'm a",
+        "cs student": "Computer Science Student",
+        "a very accurate description of me": "Sometimes a bit distracted"
     },
     "it": {
-        "hello": "Ciao"
+        "i am a": "Sono uno",
+        "cs student": "Studente di Informatica",
+        "a very accurate description of me": "A volte un po' distratto"
     }
 }