Add résumé section

src/components/screen-center/ScreenCenter.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex flex-1 items-center pb-12">
+    <div class="flex flex-1 items-center py-0">
         <div class="w-full">
             <slot></slot>
         </div>

src/shims-vue.d.ts

@@ -1 +1,2 @@
-declare module '*.vue';
+declare module '*.vue';
+declare module '*.js';

src/views/resume/ExperienceTimeline.vue

@@ -5,20 +5,20 @@
                 :right="[
                     { 
                         title: t('diploma'), time_label: '2015 - 2020',
-                        description: t('diploma description'), 
+                        description: t('aldini'), 
                         start: new Date(2015, september, 1), end: new Date(2020, june, 1)
                     },
                     { 
-                        title: t('bachelor'), time_label: '2020 - 2023',
+                        title: t('bs in cs'), time_label: '2020 - 2023',
-                        description: t('bachelor description'), 
+                        description: t('unibo'), 
                         start: new Date(2020, september, 1), end: new Date(), current: true
                     }
                 ]"
                 :left="[
                     { 
-                        title: t('it/is pcto toyota'), time_label: `${t('december')} 2019 | ${t('july')} 2019 | ${t('february')} 2022`,
+                        title: t('it/is pcto toyota'), time_label: `${t('m_12')} 2019 | ${t('m_7')} 2019 | ${t('m_2')} 2019`,
                         description: 'Toyota Material Handling Manufacturing Italy',
-                        start: new Date(2019, february, 1), end: new Date(2019, november, 1)
+                        start: new Date(2019, february, 1), end: new Date(2019, december, 1)
                     },
                     { 
                         title: 'CS50’s Introduction to AI with Python', time_label: '2022',
@@ -40,33 +40,16 @@
 <script setup lang="ts">
     import Timeline from "@/components/timeline/Timeline.vue";
     import { useI18n } from "vue-i18n";
+    import locale from "./locale.js";
 
-    const { t } = useI18n({ messages: {
+    const timeline_locale = locale;
-        "en": {
+    // @ts-ignore
-            "january": "January", "february": "February", "march": "March", "april": "April", "may": "May", "june": "June", 
+    timeline_locale.en["like timelines"] = "I like timelines";
-            "july": "July", "august": "August", "september": "September", "october": "October", "november": "November", "december": "December",
+    // @ts-ignore
-            "like timelines": "I like timelines",
+    timeline_locale.it["like timelines"] = "Mi piacciono le linee del tempo";
 
-            "diploma": "Secondary school diploma in IT",
+    // @ts-ignore
-            "diploma description": "Aldini Valeriani, Bologna, Italy",
+    const { t } = useI18n({ messages: timeline_locale});
-            "bachelor": "Bachelor's degree in Computer Science",
-            "bachelor description": "Alma Mater Studiorum, University of Bologna",
-
-            "it/is pcto toyota": "IT/IS office, Internship"
-        },
-        "it": {
-            "january": "Gennaio", "february": "Febbraio", "march": "Marzo", "april": "Aprile", "may": "Maggio", "june": "Giugno", 
-            "july": "Luglio", "august": "Agosto", "september": "Settembre", "october": "Ottobre", "november": "Novembre", "december": "Dicembre",
-            "like timelines": "Mi piacciono le linee del tempo",
-
-            "diploma": "Diploma di perito informatico",
-            "diploma description": "I.T.I Aldini Valeriani, Bologna",
-            "bachelor": "Laurea triennale in Informatica",
-            "bachelor description": "Alma Mater Studiorum, Università di Bologna",
-
-            "it/is pcto toyota": "Ufficio IT/IS, Stage"
-        }
-    } });
 
     const january = 0, february = 1, march = 2, april = 3, may = 4, june = 5, july = 6, august = 7, september = 8, october = 9, november = 10, december = 11;
 </script>

src/views/resume/Resume.vue

@@ -2,7 +2,35 @@
     <Navbar />
 
     <main>
-        <ExperienceTimeline />
+        <div class="flex justify-center items-start mt-2 mb-6">
+            <div class="w-20 mx-5">
+                <a :href="t('cv_link')">
+                    <img :src="pdf_image" alt="Download" class="h-10 mx-auto dark:invert">
+                    <p class="text-sm text-center mt-1">CV</p>
+                </a>
+            </div>
+
+            <div class="w-20 mx-5">
+                <a :href="t('cv_link_color')">
+                    <img :src="pdf_image" alt="Download" class="h-10 mx-auto dark:invert">
+                    <p class="text-sm text-center mt-1">CV<span class="text-xs">, {{ t("with_colors") }}</span></p>
+                </a>
+            </div>
+        </div>
+
+        <div class="flex flex-col md:flex-row">
+            <div class="w-full md:w-2/3 order-1 md:order-2 md:pl-4 [&>*]:mt-8 first:[&>*]:mt-0">
+                <Education /> 
+                <Certificates /> 
+                <Work />
+                <Skills />
+                <Other />
+            </div>
+
+            <div class="w-full md:w-1/3 mt-5 md:mt-0 order-2 md:order-1">
+                <ExperienceTimeline />
+            </div>
+        </div>
     </main>
 </template>
 
@@ -10,8 +38,29 @@
 <script setup lang="ts">
     import Navbar from "@/components/navbar/Navbar.vue";
     import ExperienceTimeline from "./ExperienceTimeline.vue";
+    import Education from "./sections/Education.vue";
+    import Certificates from "./sections/Certificates.vue";
+    import Skills from "./sections/Skills.vue";
+    import Work from "./sections/Work.vue";
+    import Other from "./sections/Other.vue";
     import { useI18n } from "vue-i18n";
-    import locale from "./locale.json";
 
-    const { t } = useI18n({ messages: locale });
+    import pdf_image from "@/assets/icons/pdf.svg";
+    import cv_it from "@/assets/cv/it.pdf";
+    import cv_en from "@/assets/cv/en.pdf";
+    import cv_it_color from "@/assets/cv/it_color.pdf";
+    import cv_en_color from "@/assets/cv/en_color.pdf";
+
+    const { t } = useI18n({ messages: {
+        "en": {
+            "cv_link": cv_en,
+            "cv_link_color": cv_en_color,
+            "with_colors": "but colored"
+        },
+        "it": {
+            "cv_link": cv_it,
+            "cv_link_color": cv_it_color,
+            "with_colors": "ma colorato"
+        }
+    } });
 </script>

src/views/resume/components/ActivityParagraph.vue

@@ -6,7 +6,7 @@
         </div>
         <div class="leading-5 text-gray-500 dark:text-gray-400">{{ props.subtitle }}</div>
 
-        <div class="mt-1">
+        <div class="mt-1 whitespace-pre-wrap">
             <slot></slot>
         </div>
     </div>

src/views/resume/locale.js

@@ -0,0 +1,87 @@
+export default ({
+    "en": {
+        "education": "Education",
+        "working experience": "Work experience",
+        "certificates": "Certificates",
+        "skills": "Skills",
+        "other": "Other activities",
+        "link to certificate": "Link to certificate",
+
+        "january": "January", "february": "February", "march": "March", "april": "April", "may": "May", "june": "June", 
+        "july": "July", "august": "August", "september": "September", "october": "October", "november": "November", "december": "December",
+        "m_1": "Jan", "m_2": "Feb", "m_3": "Mar", "m_4": "Apr", "m_5": "May", "m_6": "June", 
+        "m_7": "July", "m_8": "Aug", "m_9": "Sept", "m_10": "Oct", "m_11": "Nov", "m_12": "Dec",
+        "present": "present",
+
+        "final degree": "Final degree",
+        "with honors": "with honors",
+        "bs in cs": "Bachelor's Degree in Computer Science",
+        "unibo": "Alma Mater Studiorum, University of Bologna",
+        "diploma": "High school diploma, major in IT",
+        "aldini": "Aldini Valeriani, Bologna, Italy",
+        "web development": "Web development",
+        "devops": "DevOps",
+        "data analysis": "Data analysis",
+        "other programming languages": "Other programming languages",
+
+        "cisco it essentials description": "Maintenance and administration of IT systems.\n" +
+                                           "Configuration and management of network devices.",
+        "cs50 ai description": "Problem solving through algorithms based on graphs, statistics, optimization and machine learning.",
+
+
+        "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.",
+
+        "ois": "Informatics Olympiad in Teams",
+        "ois description": "Team based programming competition.",
+
+        "MAST foundation": "MAST Foundation",
+        "MAST expeditions description": "Design and implementation of an IOT box with Flip & Click programmable microcontrollers and " + 
+                                        "Zerynth Studio development environment."
+    },
+    "it": {
+        "education": "Istruzione",
+        "working experience": "Esperienze lavorative",
+        "certificates": "Certificati",
+        "skills": "Competenze",
+        "other": "Altre attività",
+        "link to certificate": "Link al certificato",
+
+        "january": "Gennaio", "february": "Febbraio", "march": "Marzo", "april": "Aprile", "may": "Maggio", "june": "Giugno", 
+        "july": "Luglio", "august": "Agosto", "september": "Settembre", "october": "Ottobre", "november": "Novembre", "december": "Dicembre",
+        "m_1": "Gen", "m_2": "Feb", "m_3": "Mar", "m_4": "Apr", "m_5": "Mag", "m_6": "Giu", 
+        "m_7": "Lug", "m_8": "Ago", "m_9": "Set", "m_10": "Ott", "m_11": "Nov", "m_12": "Dic",
+        "present": "in corso",
+
+        "final degree": "Valutazione finale",
+        "with honors": "e lode",
+        "bs in cs": "Laurea Triennale in Informatica",
+        "unibo": "Alma Mater Studiorum, Università di Bologna",
+        "diploma": "Diploma di perito informatico",
+        "aldini": "I.T.I Aldini Valeriani, Bologna",
+        "web development": "Sviluppo web",
+        "devops": "DevOps",
+        "data analysis": "Data analysis",
+        "other programming languages": "Altri linguaggi di programmazione",
+
+        "cisco it essentials description": "Manutenzione e amministrazione di sistemi informatici.\n" +
+                                           "Configurazione e gestione di apparati di rete.",
+        "cs50 ai description": "Risoluzione di problemi con algoritmi basati su grafi, statistica, ottimizzazione e machine learning.",
+
+
+        "pcto toyota": "Ufficio IT/IS, Stage",
+        "pcto toyota description": "Percorsi per le Competenze Trasversali e per l'Orientamento (PCTO)\n" +
+                                   "Attività di helpdesk, manutenzione e configurazione di apparati di rete.\n" +
+                                   "Programmazione SQL, automazioni con script bash e batch.",
+
+
+        "ois": "Olimpiadi di informatica a squadre",
+        "ois description": "Competizione di programmazione 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 " + 
+                                        "l'ambiente di sviluppo Zerynth Studio."
+    }
+});

src/views/resume/locale.json

@@ -1,28 +0,0 @@
-{
-    "en": {
-        "education": "Education",
-        "working experience": "Working experience",
-        "certificates": "Certificates",
-        "skills": "Skills",
-        "other": "Other activities",
-        "present": "present",
-
-        "web development": "Web development",
-        "devops": "DevOps",
-        "data analysis": "Data analysis",
-        "programming languages": "Programming languages"
-    },
-    "it": {
-        "education": "Istruzione",
-        "working experience": "Esperienze lavorative",
-        "certificates": "Certificati",
-        "skills": "Competenze",
-        "other": "Altre attività",
-        "present": "in corso",
-
-        "web development": "Sviluppo web",
-        "devops": "DevOps",
-        "data analysis": "Data analysis",
-        "programming languages": "Linguaggi di programmazione"
-    }
-}

src/views/resume/sections/Certificates.vue

@@ -0,0 +1,24 @@
+<template>
+    <div>
+        <h2 class="text-4xl font-bold tracking-wide">{{ t("certificates") }}</h2>
+
+        <ActivityParagraph title="CS50’s Introduction to AI with Python" subtitle="HarvardX" right_text="2022">
+            <a class="font-mono hover:underline" href="https://certificates.cs50.io/bb09e788-f9da-4055-8645-aba7ef163683.pdf?size=a4">{{ t("link to certificate") }}</a>
+            <p>{{ t("cs50 ai description") }}</p>
+        </ActivityParagraph>
+
+        <ActivityParagraph title="CISCO: IT Essentials" subtitle="CISCO Networking Academy" right_text="2018">
+            {{ t("cisco it essentials description") }}
+        </ActivityParagraph>
+    </div>
+</template>
+
+
+<script setup lang="ts">
+    import { useI18n } from "vue-i18n";
+    import ActivityParagraph from "../components/ActivityParagraph.vue";
+    import locale from "../locale.js";
+
+    // @ts-ignore
+    const { t } = useI18n({ messages: locale});
+</script>

src/views/resume/sections/Education.vue

@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <h2 class="text-4xl font-bold tracking-wide">{{ t("education") }}</h2>
+
+        <ActivityParagraph :title="t('bs in cs')" :subtitle="t('unibo')" :right_text="`2020 - ${t('present')}`">
+        </ActivityParagraph>
+
+        <ActivityParagraph :title="t('diploma')" :subtitle="t('aldini')" right_text="2015 - 2020">
+            {{ t("final degree") }}: 100/100 {{ t("with honors") }}
+        </ActivityParagraph>
+    </div>
+</template>
+
+
+<script setup lang="ts">
+    import { useI18n } from "vue-i18n";
+    import ActivityParagraph from "../components/ActivityParagraph.vue";
+    import locale from "../locale.js";
+
+    // @ts-ignore
+    const { t } = useI18n({ messages: locale });
+</script>

src/views/resume/sections/Other.vue

@@ -0,0 +1,23 @@
+<template>
+    <div>
+        <h2 class="text-4xl font-bold tracking-wide">{{ t("other") }}</h2>
+
+        <ActivityParagraph :title="t('ois')" :subtitle="t('aldini')" right_text="2017-18 | 2018-19 | 2019-20">
+            {{ t("ois description") }}
+        </ActivityParagraph>
+
+        <ActivityParagraph title="MAST Academy: Expeditions" :subtitle="t('MAST foundation')" right_text="2018">
+            {{ t("MAST expeditions description") }}
+        </ActivityParagraph>
+    </div>
+</template>
+
+
+<script setup lang="ts">
+    import { useI18n } from "vue-i18n";
+    import ActivityParagraph from "../components/ActivityParagraph.vue";
+    import locale from "../locale.js";
+
+    // @ts-ignore
+    const { t } = useI18n({ messages: locale});
+</script>

src/views/resume/sections/Skills.vue

@@ -20,20 +20,6 @@
             <!-- <p>Bootstrap Tailwind</p> -->
         </ActivityParagraph>
 
-        <ActivityParagraph :title="t('devops')">
-            <ul class="flex flex-wrap items-center">
-                <li><ProgrammingLogo :logo="docker_logo" language="Docker" /></li>
-            </ul>
-            <ul class="flex flex-wrap items-center">
-                <li><ProgrammingLogo :logo="ansible_logo" language="Ansible" /></li>
-            </ul>
-            <ul class="flex flex-wrap items-center">
-                <li><ProgrammingLogo :logo="jenkins_logo" language="Jenkins" /></li>
-                <li><ProgrammingLogo :logo="gitlab_runners_logo" language="Gitlab Runner" /></li>
-                <li><ProgrammingLogo :logo="github_actions_logo" language="Github Actions" /></li>
-            </ul>
-        </ActivityParagraph>
-
         <ActivityParagraph :title="t('data analysis')">
             <ul class="flex flex-wrap items-center">
                 <li><ProgrammingLogo :logo="python_logo" language="Python" /></li>
@@ -62,6 +48,20 @@
                 <li><ProgrammingLogo :logo="mongo_logo" language="MongoDB" /></li>
             </ul>
         </ActivityParagraph>
+        
+        <ActivityParagraph :title="t('devops')">
+            <ul class="flex flex-wrap items-center">
+                <li><ProgrammingLogo :logo="docker_logo" language="Docker" /></li>
+            </ul>
+            <ul class="flex flex-wrap items-center">
+                <li><ProgrammingLogo :logo="ansible_logo" language="Ansible" /></li>
+            </ul>
+            <ul class="flex flex-wrap items-center">
+                <li><ProgrammingLogo :logo="jenkins_logo" language="Jenkins" /></li>
+                <li><ProgrammingLogo :logo="gitlab_runners_logo" language="Gitlab Runner" /></li>
+                <li><ProgrammingLogo :logo="github_actions_logo" language="Github Actions" /></li>
+            </ul>
+        </ActivityParagraph>
 
         <ActivityParagraph :title="t('other programming languages')">
             <ul class="flex flex-wrap items-center">

src/views/resume/sections/Work.vue

@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <h2 class="text-4xl font-bold tracking-wide">{{ t("working experience") }}</h2>
+
+        <ActivityParagraph :title="t('pcto toyota')" subtitle="Toyota Material Handling Manufacturing Italy" 
+                           :right_text="`${t('december')} 2019 | ${t('july')} 2019 | ${t('february')} 2019`">
+            {{ t("pcto toyota description") }}
+        </ActivityParagraph>
+    </div>
+</template>
+
+
+<script setup lang="ts">
+    import { useI18n } from "vue-i18n";
+    import ActivityParagraph from "../components/ActivityParagraph.vue";
+    import locale from "../locale.js";
+
+    // @ts-ignore
+    const { t } = useI18n({ messages: locale });
+</script>