Rewording

src/App.vue

@@ -16,12 +16,36 @@
 </template>
 
 <script setup lang="ts">
-    import { onMounted, ref } from "vue";
+    import { onMounted, ref, watch } from "vue";
     import { RouterView } from "vue-router";
     import { applyTheme } from "./utilities/theme_handler";
     import Cookie from "@/components/cookie/Cookie.vue";
     import EastereggBanner from "@/components/easteregg-banner/EastereggBanner.vue";
+    import { useRoute } from 'vue-router'
+    import { useI18n } from "vue-i18n";
 
+    const { t, locale } = useI18n({ messages: {
+        "en": {
+            "title_home": "Hello",
+            "title_about": "About",
+            "title_projects": "Projects",
+            "title_resume": "Résumé",
+            "title_contacts": "Say hello",
+
+            "log_hello": "Hello 🐡"
+        },
+        "it": {
+            "title_home": "Ciao",
+            "title_about": "Chi sono",
+            "title_projects": "Progetti",
+            "title_resume": "CV",
+            "title_contacts": "Salutami",
+
+            "log_hello": "Ciao 🐡"
+        }
+    } });
+
+    const route = useRoute()
     const easteregg = ref();
 
     onMounted(() => {
@@ -31,5 +55,12 @@
             // @ts-ignore
             easteregg.value.show(e.detail);
         });
-    })
+
+        console.log(t("log_hello"));
+    });
+
+    // Title handling
+    watch([ () => route.params, locale ], () => {
+        document.title = t(`title_${route.name as string}`);
+    });
 </script>

src/components/cookie/Cookie.vue

@@ -5,7 +5,8 @@
             <canvas ref="canvas_cookie" :width="canvas_width" :height="canvas_height"></canvas>
         </div>
         
-        <div ref="banner" class="fixed bottom-0 left-0 z-50 border bg-slate-200/90 border-slate-700 dark:bg-slate-800/90 dark:border-slate-400 rounded w-fit lg:w-1/2 p-5 m-5">
+        <div ref="banner" class="fixed bottom-0 left-0 z-50 bg-slate-200/90 border-slate-700 dark:bg-slate-800/90 dark:border-slate-400 
+                                 border rounded w-fit lg:w-1/2 p-3 px-5 m-5">
             <p class="text-sm">{{ t("cookie policy title") }}</p>
             <div class="text-xs">
                 <span>{{ t("cookie policy") }} <button :onclick="throwCookie" class="underline">{{ t("cookie policy link") }}</button></span>

src/components/easteregg-banner/eggs/Future.vue

@@ -22,7 +22,7 @@
     const { t } = useI18n({ messages: {
         "en": {
             "title": "What a wonderful future",
-            "description": "What will happen?"
+            "description": "What will happen next?"
         },
         "it": {
             "title": "Che bello il futuro",

src/views/about/About.vue

@@ -22,7 +22,7 @@
                         e giocare a giochi strategici.
                     </p>
                     <p>
-                        Secondo <a class="hover:underline" href="https://www.16personalities.com">16Personalities</a> sono un 
+                        Secondo <a class="hover:underline italic" href="https://www.16personalities.com">16Personalities</a> sono un 
                         <a class="font-mono hover:underline" href="https://www.16personalities.com/profiles/6b57f54bf1242">Architetto (INTJ)</a>. 
                         Devo dire che la descrizione è decisamente accurata.
                     </p>
@@ -42,9 +42,9 @@
                         and playing strategic games.
                     </p>
                     <p>
-                        According to <a class="hover:underline" href="https://www.16personalities.com">16Personalities</a> I'm an 
+                        According to <a class="hover:underline italic" href="https://www.16personalities.com">16Personalities</a> I'm an 
                         <a class="font-mono hover:underline" href="https://www.16personalities.com/profiles/6b57f54bf1242">Architect (INTJ)</a>. 
-                        I must admit that the description is quiet accurate.
+                        I must admit that the description is quite accurate.
                     </p>
                 </div>
 

src/views/contacts/Contacts.vue

@@ -5,7 +5,7 @@
 
     <ScreenCenter>
     <main>
-        <h1 class="text-5xl font-bold text-center">{{ t("contacts") }}</h1>
+        <!-- <h1 class="text-3xl md:text-5xl font-bold text-center mb-5">{{ t("contacts") }}</h1> -->
         
         <div class="md:flex justify-center">
             <div>

src/views/projects/cards/AnimalHouse.vue

@@ -8,6 +8,11 @@
         
         <p class="text-center">{{ t("unibo") }}</p>
         <p>{{ t('description') }}</p>
+        <ul class="list-inside list-['-_']">
+            <li>{{ t('description game') }}</li>
+            <li>{{ t('description frontoffice') }}</li>
+            <li>{{ t('description backoffice') }}</li>
+        </ul>
     </ProjectCard>
 </template>
 
@@ -19,23 +24,23 @@
 
     const { t } = useI18n({ messages: {
         en: {
-            unibo: "University of Bologna, A.Y. 2021-2022",
-            description:
+            "unibo": "University of Bologna, A.Y. 2021-2022",
+            "description":
                 "Project for the Web Technology course.\n" +
-                "Web app with three sections:.\n" +
-                "- Game: area with games and facts about animals\n" +
-                "- Frontoffice: area to access services as logged users\n" +
-                "- Backoffice: administration panel"
+                "Web app with three sections:",
+            "description game": "Game: area with games and facts about animals",
+            "description frontoffice": "Frontoffice: area to access services as a logged user",
+            "description backoffice": "Backoffice: administration panel"
 
         },
         it: {
-            unibo: "Università di Bologna, A.A. 2021-2022",
-            description:
+            "unibo": "Università di Bologna, A.A. 2021-2022",
+            "description":
                 "Progetto per il corso di Tecnologie Web.\n" +
-                "Web app suddivisa in tre sezioni:\n" +
-                "- Game: area con giochi e fatti sugli animali\n" +
-                "- Frontoffice: area con servizi per gli utenti\n" +
-                "- Backoffice: pannello di amministrazione"
+                "Web app suddivisa in tre sezioni:",
+            "description game": "Game: area con giochi e curiosità sugli animali",
+            "description frontoffice": "Frontoffice: area con servizi per gli utenti autenticati",
+            "description backoffice": "Backoffice: pannello di amministrazione"
         }
     } });
 </script>

src/views/projects/cards/PathfindingVisualizer.vue

@@ -20,7 +20,7 @@
     const { t } = useI18n({ messages: {
         en: {
             description:
-                "Visualizer for some graph search algorithms."
+                "Visualizer of some graph search algorithms."
         },
         it: {
             description:

src/views/projects/cards/SortingVisualizer.vue

@@ -20,11 +20,11 @@
     const { t } = useI18n({ messages: {
         en: {
             description:
-                "Visualizer for some sorting algorithms."
+                "Visualizer of some sorting algorithms."
         },
         it: {
             description:
-                "Visualizzazione di algoritmi di ordinamento."
+                "Visualizzazione di alcuni algoritmi di ordinamento."
         }
     } });
 </script>

src/views/projects/cards/TweetAnalysis.vue

@@ -28,7 +28,7 @@
             unibo: "Università di Bologna, A.A. 2022-2023",
             description:
                 "Progetto per il corso di Ingegneria del Software.\n" +
-                "Webapp per l'analisi di tweet sviluppato con metodologia Scrum."
+                "Webapp per l'analisi di tweet sviluppata con metodologia Scrum."
         }
     } });
 </script>

src/views/projects/cards/Wirefilter.vue

@@ -20,14 +20,14 @@
         en: {
             unibo: "University of Bologna, A.Y. 2022-2023",
             description:
-                "Virtual Distributed Ethernet (VDE) is an open source project that allows to create virtual networks through a set of plugins.\n" +
-                "Wirefilter is a plugin that allows to manipulate packets flow by changing the parameters of the virtual cable"
+                "Virtual Distributed Ethernet (VDE) is an open source project that allows the creation of virtual networks through a set of plugins.\n" +
+                "Wirefilter is a plugin that allows to manipulate packet flow by changing the parameters of the virtual cable."
         },
         it: {
             unibo: "Università di Bologna, A.A. 2022-2023",
             description:
                 "Virtual Distributed Ethernet (VDE) è un progetto open source che consente di creare reti virtuali tramite l'utilizzo modulare di plugin.\n" +
-                "Wirefilter è un plugin che consente di manipolare il flusso dei pacchetti in transito impostando parametri per il cavo virtuale"
+                "Wirefilter è un plugin che consente di manipolare il flusso dei pacchetti in transito impostando parametri per il cavo virtuale."
         }
     } });
 </script>

src/views/resume/Resume.vue

@@ -37,7 +37,7 @@
 
 <script setup lang="ts">
     import Navbar from "@/components/navbar/Navbar.vue";
-    import ExperienceTimeline from "./components/ExperienceTimeline.vue";
+    import ExperienceTimeline from "./sections/ExperienceTimeline.vue";
     import Education from "./sections/Education.vue";
     import Certificates from "./sections/Certificates.vue";
     import Skills from "./sections/Skills.vue";

src/views/resume/locale.js

@@ -33,7 +33,7 @@ export default ({
         "pcto toyota": "IT/IS Office, Internship",
         "pcto toyota description": "Internship organized during high school.\n" +
                                    "IT support, maintenance and initial setup of network devices.\n" +
-                                   "SQL programming, automations with bash and batch scripts.",
+                                   "SQL programming, automation with bash and batch scripts.",
 
         "ois": "Informatics Olympiad in Teams",
         "ois description": "Team based programming competition.",
@@ -80,7 +80,7 @@ export default ({
 
 
         "ois": "Olimpiadi di informatica a squadre",
-        "ois description": "Competizione di programmazione a squadre.",
+        "ois description": "Programmazione competitiva a squadre.",
 
         "MAST foundation": "Fondazione MAST",
         "MAST expeditions description": "Progettazione e realizzazione di una scatola IOT attraverso l'utilizzo di schede programmabili Flip & Click e " + 

src/views/resume/sections/Skills.vue

@@ -2,27 +2,11 @@
     <div class="[&_li]:mr-4">
         <h2 class="text-4xl font-bold tracking-wide">{{ t("skills") }}</h2>
 
-        <ActivityParagraph :title="t('web development')">
-            <ul class="flex flex-wrap items-center">
-                <li><ProgrammingLogo :logo="nodejs_logo" language="NodeJS" /></li>
-                <li><ProgrammingLogo :logo="php_logo" language="PHP" /></li>
-                <li><ProgrammingLogo :logo="nginx_logo" language="Nginx" /></li>
-            </ul>
-            <ul class="flex flex-wrap items-center">
-                <li><ProgrammingLogo :logo="react_logo" language="React" /></li>
-                <li><ProgrammingLogo :logo="vue_logo" language="Vue" /></li>
-            </ul>
-            <!-- <ul class="flex flex-wrap items-center">
-                <li><ProgrammingLogo :logo="html_logo" language="HTML" /></li>
-                <li><ProgrammingLogo :logo="css_logo" language="CSS" /></li>
-                <li><ProgrammingLogo :logo="js_logo" language="Javascript" /></li>
-            </ul> -->
-            <!-- <p>Bootstrap Tailwind</p> -->
-        </ActivityParagraph>
-
         <ActivityParagraph :title="t('data analysis')">
             <ul class="flex flex-wrap items-center">
                 <li><ProgrammingLogo :logo="python_logo" language="Python" /></li>
+                <li><ProgrammingLogo :logo="database_logo" language="SQL" needInvert /></li>
+                <li><ProgrammingLogo :logo="mongo_logo" language="MongoDB" /></li>
             </ul>
 
             <ul class="flex flex-wrap items-center">
@@ -41,10 +25,6 @@
             <!-- <ul class="flex flex-wrap items-center">
                 <li><ProgrammingLogo :logo="knime_logo" language="KNIME" /></li>
             </ul> -->
-            <ul class="flex flex-wrap items-center">
-                <li><ProgrammingLogo :logo="database_logo" language="SQL" needInvert /></li>
-                <li><ProgrammingLogo :logo="mongo_logo" language="MongoDB" /></li>
-            </ul>
         </ActivityParagraph>
         
         <ActivityParagraph :title="t('devops')">
@@ -60,6 +40,24 @@
                 <li><ProgrammingLogo :logo="github_actions_logo" language="Github Actions" /></li>
             </ul>
         </ActivityParagraph>
+        
+        <ActivityParagraph :title="t('web development')">
+            <ul class="flex flex-wrap items-center">
+                <li><ProgrammingLogo :logo="nodejs_logo" language="NodeJS" /></li>
+                <li><ProgrammingLogo :logo="php_logo" language="PHP" /></li>
+                <!-- <li><ProgrammingLogo :logo="nginx_logo" language="Nginx" /></li> -->
+            </ul>
+            <ul class="flex flex-wrap items-center">
+                <li><ProgrammingLogo :logo="react_logo" language="React" /></li>
+                <li><ProgrammingLogo :logo="vue_logo" language="Vue" /></li>
+            </ul>
+            <!-- <ul class="flex flex-wrap items-center">
+                <li><ProgrammingLogo :logo="html_logo" language="HTML" /></li>
+                <li><ProgrammingLogo :logo="css_logo" language="CSS" /></li>
+                <li><ProgrammingLogo :logo="js_logo" language="Javascript" /></li>
+            </ul> -->
+            <!-- <p>Bootstrap Tailwind</p> -->
+        </ActivityParagraph>
 
         <ActivityParagraph :title="t('other programming languages')">
             <ul class="flex flex-wrap items-center">