updated style and dependecies

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "scripts": {
     "update-model": "json2ts ./src/model/schema.json ./src/model/job.d.ts",
-    "dev": "svelte-kit dev",
+    "dev": "svelte-kit dev --host 0.0.0.0",
     "build": "svelte-kit build",
     "preview": "svelte-kit preview",
     "check": "svelte-check --tsconfig ./tsconfig.json",

src/elements/aboutMe.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
   let currentLanguage = 'it';
   const whoIt='Ciao! Sono Gianmarco Pettinato mi sono laureato in scienze informatiche e sono uno sviluppatore full-stack.\
-      Ho famigliarità con diversi linguaggi e framework, front-end e back-end.\
+      Ho famigliarità con diversi linguaggi e framework, sia front-end che back-end.\
-      In particolare ho famigliarità con C++ con QT e Typescript con Angular, Vuejs e Svelte.\
+      In particolare ho famigliarità con C++ con Qt e Typescript con Angular, Vue.js e Svelte.\
       Tra le mie competenze, oltre allo sviluppo software e alla manutenzione di sistemi linux, spicca la gestione di ambienti CI/CD, con pipeline automatiche e container come Docker.\
-      Sono interessato in particolar modo l\'ambiente dei dispositivi IoT e del wearble tech.\
+      Sono interessato in particolar modo all\'ambiente dei dispositivi IoT e del wearble tech.\
-      Nel tempo libero mi dedico alla gestione del mio home sever e alla costruzione di PC fissi.\
+      Nel tempo libero mi dedico alla gestione del mio home sever e alla costruzione e manutenzione di computer.\
       Per maggiori informazioni non esitate a contattarmi.';
   const whoEn='Hi! I\'m Gianmarco Pettinato. I have a bachelor degree in computer science, and I\'m a full-stack developer.\
       I know several languages and frameworks, either front-end and back-end.\
-      In particular, I have experience in C++ with QT and Typescript with Angular, Vuejs and Svelte.\
+      In particular, I have experience in C++ with Qt and Typescript with Angular, Vue.js and Svelte.\
       Among my skill-set, there is the administration of the CI/CD environment with docker.\
       I\'m interested in the IoT world and Wearable tech. In my free time, I like to manage my GNU/Linux home server and build PCs.';
       

src/elements/jobs.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-  import MarkdownIt from 'markdown-it'
+  import MarkdownIt from 'markdown-it';
   const md = new MarkdownIt({
     html:true,
     xhtmlOut:true,
     typographer:  true,
+    breaks: true
   });
   import data from '../model/jobs.json'
   import type { Schema } from 'src/model/job';
@@ -25,7 +26,7 @@
           {/each}
         </div>
         <div class="text-content"  id="{index.toString()}">
-            <p>{@html md.render(job.content[currentLanguage])}</p>
+          {@html md.render(job.content[currentLanguage])}
         </div>
       </div>
       <div class="added-info">
@@ -64,9 +65,7 @@
     font-size: 1.1em;
     border-radius: 10px;
     width: 95%;
-    border-style: solid;
+
-    border-width: 0.1px;
-    border-color: $rich-black-fogra-29;
     border-radius: 10px;
     box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
     -webkit-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
@@ -89,7 +88,6 @@
 
   .job-content{
     padding: 2vh;
-    // background-color: yellow;
   }
   
   .added-info{
@@ -99,6 +97,15 @@
   .text-content{
     margin: auto;
     text-align: justify;
+    width: 80%;
+    // -webkit-hyphens: auto;
+    // -moz-hyphens: auto;
+    // -ms-hyphens: auto;
+    // hyphens: auto;
+  }
+
+  ul{
+    background-color: red;
   }
   
 
@@ -120,10 +127,6 @@
     .job-content{
       flex-wrap: unset;
     }
-
-    .text-content{
-      width: 35vw;
-    }
   }
   
 </style>

src/elements/menu.svelte

@@ -7,16 +7,16 @@
               job:{it:"Esperienze",en:"Experiences"},
               school:{it:"Formazione",en:"Training"},
               contacts:{it:"Contatti",en:"Contacts"},
-              hobbies:{it:"Portfolio",en:"Portfolio"}}
+              portfolio:{it:"Portfolio",en:"Portfolio"}}
 </script>
 
 <div class="div-menu">
   <div class="wrapper">
     <a class="menu-element" href="#home" alt="{menu.home[currentLanguage]}"><i class="fas fa-home"></i><span class="hide">{menu.home[currentLanguage]}</span></a>
-    <a class="menu-element" href="#job" alt="{menu.job[currentLanguage]}"><i class="fas fa-user-tie"></i><span class="hide">{menu.job[currentLanguage]}</span></a>
+    <a class="menu-element" href="#jobs" alt="{menu.job[currentLanguage]}"><i class="fas fa-user-tie"></i><span class="hide">{menu.job[currentLanguage]}</span></a>
-    <a class="menu-element" href="#school" alt="{menu.school[currentLanguage]}"><i class="fas fa-graduation-cap"></i><span class="hide">{menu.school[currentLanguage]}</span></a>
+    <a class="menu-element" href="#training" alt="{menu.school[currentLanguage]}"><i class="fas fa-graduation-cap"></i><span class="hide">{menu.school[currentLanguage]}</span></a>
-    <a class="menu-element" href="#hobbies" alt="{menu.hobbies[currentLanguage]}"><i class="fas fa-user-clock"></i><span class="hide">{menu.hobbies[currentLanguage]}</span></a>
+    <a class="menu-element" href="#portfolio" alt="{menu.portfolio[currentLanguage]}"><i class="fas fa-user-clock"></i><span class="hide">{menu.portfolio[currentLanguage]}</span></a>
-    <a class="menu-element" href="#contacts" alt="{menu.contacts[currentLanguage]}"><i class="fas fa-address-card"></i><span class="hide">{menu.contacts[currentLanguage]}</span></a>
+    <!-- <a class="menu-element" href="#contacts" alt="{menu.contacts[currentLanguage]}"><i class="fas fa-address-card"></i><span class="hide">{menu.contacts[currentLanguage]}</span></a> -->
   </div>
 </div>
 

src/elements/portfolio.svelte

@@ -9,37 +9,37 @@
   import data from '../model/portfolio.json'
   import type { Schema } from 'src/model/job';
   export let currentLanguage = 'it'
-  const hobbies:Schema[] = data as Schema[];
+  const portfolio:Schema[] = data as Schema[];
 
   export function changeLanguage(language = 'it'){
     currentLanguage = language
   }
 </script>
 <div class="extraContainer">
-  {#each hobbies as hobby }
+  {#each portfolio as element }
-    <div class="hobby">
+    <div class="element">
-      <h3>{hobby.title[currentLanguage]}</h3>
+      <h3>{element.title[currentLanguage]}</h3>
       <div class="content">
         <div class="images">
-          {#each hobby.images as image}
+          {#each element.images as image}
-            <img src={image} alt="{hobby.title[currentLanguage].toString()}" />
+            <img src={image} alt="{element.title[currentLanguage].toString()}" />
           {/each}
         </div>
-        <div class="hobby-text">
+        <div class="element-text">
-          {@html md.render(hobby.content[currentLanguage])}
+          {@html md.render(element.content[currentLanguage])}
         </div>
         <div class="added-info">
-          <p>{#each hobby.languages as language,index }
+          <p>{#each element.languages as language,index }
-            {language}{index!=hobby.languages.length-1?', ':''}
+            {language}{index!=element.languages.length-1?', ':''}
           {/each}</p>
           
-          <p>{#each hobby.tecnologies as tecnology, index }
+          <p>{#each element.tecnologies as tecnology, index }
-            {tecnology}{index!=hobby.tecnologies.length-1?', ':''}
+            {tecnology}{index!=element.tecnologies.length-1?', ':''}
           {/each}</p>
         </div>
         <div class="added-info">
-          <p>{#each hobby.collaborators as collaborator, index }
+          <p>{#each element.collaborators as collaborator, index }
-             <a href="{collaborator.ref}">{collaborator.name} {collaborator.surname}</a>{index!=hobby.collaborators.length-1?', ':''}
+             <a href="{collaborator.ref}">{collaborator.name} {collaborator.surname}</a>{index!=element.collaborators.length-1?', ':''}
           {/each}</p>
         </div>
       </div>
@@ -60,9 +60,7 @@
     font-size: 1.1em;
     border-radius: 10px;
     width: 95%;
-    border-style: solid;
+
-    border-width: 0.1px;
-    border-color: $rich-black-fogra-29;
     border-radius: 10px;
     box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
     -webkit-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
@@ -71,7 +69,7 @@
     padding-bottom: 1.5vh;
   }
 
-  .hobby{
+  .element{
     background-color: $cultured;
     text-align: center;
     width: 90%;
@@ -96,8 +94,8 @@
   .images>img{
     margin: auto;
     margin-bottom: 2vh;
-    max-width: 350px;
+    max-width: 100%;
-    max-height: 250px;
+    // max-height: 250px;
   }
 
   .content{
@@ -110,7 +108,7 @@
     font-size: 15px;
   }
 
-  .hobby-text{
+  .element-text{
     text-align: justify;
   }
 

src/elements/training.svelte

@@ -41,9 +41,6 @@
     font-size: 1.1em;
     border-radius: 10px;
     width: 95%;
-    border-style: solid;
-    border-width: 0.1px;
-    border-color: $rich-black-fogra-29;
     border-radius: 10px;
     box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
     -webkit-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
@@ -53,7 +50,7 @@
   }
 
   .element{
-    padding: 1vw;
+    padding: 2vw;
     width: auto;
     display: flex;
     align-items: center;
@@ -80,7 +77,7 @@
     text-align: center;
     width: 90%;
     border-radius: 10px;
-    margin-bottom: 10px;
+    // margin-bottom: 10px;
     padding-top: 2vh;
     padding-bottom: 2vh;
     background-color: $cultured;
@@ -95,13 +92,5 @@
       max-width: $cv-max-width;
       width: 80vw;
     }
-
-    // .job-content{
-    //   flex-wrap: unset;
-    // }
-
-    // .text-content{
-    //   width: 35vw;
-    // }
   }
 </style>

src/model/jobs.json

@@ -6,8 +6,8 @@
     },
     "title": {"en":"Jatus.tech my start-up","it":"La mia start-up Jatus.tech"},
     "content": {
-      "en":"Through this year, I'm working to begin my independent activity base on my idea of business.To do so, I learnt different practices and filled many roles:\n-   Create a work's infrastructure, mainly create a centralized resource on the server:\n      -   Manage the **GNU\/Linux** server with \"Unraid\" as distribution.\n      -   Manage all the services using **Docker**:\n          -   **GitLab**, with the runner for CI\/CD, other than the software repositories I managed to setup:\n                -   package **npm** repository\n                -   **docker** repository\n          -   **NginxProxyManager** to handle the public services in reverse proxy\n          -   **SonarQube** to automatically verify the software quality\n      -   Manage all the virtual machines to develop and deploy software in the staging environment\n  - Project and develop the software, main activity of this endeavour:\n      -   Project the software architecture\n      -   Project the database\n      -   Implement the software based on the architecture:\n          -   Back-end **Typescript** on **AWS-Lambda** platform with **Serverless framework**\n          -   Front-end in **Typescript** with **Nativescript** framework\n      -   Implement the database architecture with **MongoDB**\n      -   Create a Proof of Concept of the application\n  -   Project and develop **CI\/CD** solution for the product:\n      -   Create pipelines for the CI\/CD process in the **GitLab** environment\n      -   Create **docker files** to perform the unit test and compilation of the source code in the repositories.",
+      "en":"Through this year, I'm working to begin my independent activity base on my idea of business.To do so, I learnt different practices and filled many roles:<div style=\"margin-left: -25px;\">\n-   Create a work's infrastructure, mainly create a centralized resource on the server:\n      -   Manage the **GNU\/Linux** server with \"Unraid\" as distribution.\n      -   Manage all the services using **Docker**:\n          -   **GitLab**, with the runner for CI\/CD, other than the software repositories I managed to setup:\n                -   package **npm** repository\n                -   **docker** repository\n          -   **NginxProxyManager** to handle the public services in reverse proxy\n          -   **SonarQube** to automatically verify the software quality\n      -   Manage all the virtual machines to develop and deploy software in the staging environment\n  - Project and develop the software, main activity of this endeavour:\n      -   Project the software architecture\n      -   Project the database\n      -   Implement the software based on the architecture:\n          -   Back-end **Typescript** on **AWS-Lambda** platform with **Serverless framework**\n          -   Front-end in **Typescript** with **Nativescript** framework\n      -   Implement the database architecture with **MongoDB**\n      -   Create a Proof of Concept of the application\n  -   Project and develop **CI\/CD** solution for the product:\n      -   Create pipelines for the CI\/CD process in the **GitLab** environment\n      -   Create **docker files** to perform the unit test and compilation of the source code in the repositories.</div>",
-      "it":"Nel corso di quest'anno ho lavorato, e tutt'ora lavoro, per avviare una attività indipendente che si basa su una mia idea di app.Per far ciò, durante questo periodo ho dovuto ricoprire diversi ruoli e svolgere diverse mansioni:\n-   Creare un'infrastruttura di lavoro, un server dove centralizzare le risorse, nello specifico:\n      -   Gestire il server **GNU\/Linux** con la distribuzione *prosumer* unraid..\n      -   Gestire i vari servizi in container **Docker**:\n          -   **GitLab** con il suo runner per le pipeline **CI/CD**:\n                -   *repository* di pacchetti **npm** \n                -   *repository* di immagini **docker**\n          -   **NginxProxyManager** per la gestione dei servizi pubblici in reverse proxy\n          -   **SonarQube** per la verifica automatica della qualità del codice\n      -   Gestione di macchine virtuali per lo sviluppo di codice ma anche come *staging area* per testare le applicazioni in un ambiente *production like*\n  - Progettare e sviluppare il software, focus di questa attività:\n      -   Progettare l'architettura del software\n      -   Progettare il database\n      -   Implementare l'architettura:\n          -   Back-end in **Typescript** su piattaforma **AWS-Lambda** con **Serveless framework**\n          -   Front-end in app *cross-platform* in **Typescript** con **Nativescript**\n      -   Implementare l'architettura di database in **MongoDB**\n      -   Creare un *proof of concept* dell'applicazione.\n  -   Progettare e sviluppare soluzioni di **CI\/CD** legate al prodotto:\n      -   Creare pipeline automatiche in **GitLab** con riferimento al \"versionamento\" interno\n      -   Creare docker-file con l'ambiente di compilazione da utilizzare con le pipeline automatiche."
+      "it":"Nel corso di quest'anno ho lavorato, e tutt'ora lavoro, per avviare una attività indipendente che si basa su una mia idea di app.Per far ciò, durante questo periodo ho dovuto ricoprire diversi ruoli e svolgere diverse mansioni:<div style=\"margin-left: -25px;\">\n-   Creare un'infrastruttura di lavoro, un server dove centralizzare le risorse, nello specifico:\n      -   Gestire il server **GNU\/Linux** con la distribuzione *prosumer* unraid..\n      -   Gestire i vari servizi in container **Docker**:\n          -   **GitLab** con il suo runner per le pipeline **CI/CD**:\n                -   *repository* di pacchetti **npm** \n                -   *repository* di immagini **docker**\n          -   **NginxProxyManager** per la gestione dei servizi pubblici in reverse proxy\n          -   **SonarQube** per la verifica automatica della qualità del codice\n      -   Gestione di macchine virtuali per lo sviluppo di codice ma anche come *staging area* per testare le applicazioni in un ambiente *production like*\n  - Progettare e sviluppare il software, focus di questa attività:\n      -   Progettare l'architettura del software\n      -   Progettare il database\n      -   Implementare l'architettura:\n          -   Back-end in **Typescript** su piattaforma **AWS-Lambda** con **Serveless framework**\n          -   Front-end in app *cross-platform* in **Typescript** con **Nativescript**\n      -   Implementare l'architettura di database in **MongoDB**\n      -   Creare un *proof of concept* dell'applicazione.\n  -   Progettare e sviluppare soluzioni di **CI\/CD** legate al prodotto:\n      -   Creare pipeline automatiche in **GitLab** con riferimento al \"versionamento\" interno\n      -   Creare docker-file con l'ambiente di compilazione da utilizzare con le pipeline automatiche.</div>"
     },
     "collaborators": [],
     "languages": [
@@ -30,12 +30,12 @@
   {
     "year": {
       "start": "2020-09-21",
-      "end": "2021-10-02"
+      "end": "2020-10-09"
     },
-    "title": {"en":"intership in Athesys","it":"tirocinio in Athesys"},
+    "title": {"en":"Intership in Athesys","it":"Tirocinio in Athesys"},
     "content": {
       "en":"I've chosen to work in Athesis to end my bachelor degree course. The project was about developing a middleware to put in communication two applications between **NATed** networks based on **OAuth2.0**. This middleware assures the connection is authorized. This software mainly approved the connection of devices that detected the presence of a face mask and the body temperature in the range",
-      "it":"Ho scelto di lavorare in Athesys come tirocino per la laurea, il progetto prevedeva di sviluppare un middleware per mettere in comunicazione in maniera sicura due applicazioni tra reti **NAT** basato sui procolli di autorizzazione di **OAuth2.0**. Per permettere l'uso di apparecchi per il riconoscimento della mascherina e della temperatura corporea delle persone e automatizzarne l'accesso ai locali"
+      "it":"Per la tesi di laurea, ho scelto di fare il tirocinio in Athesys. Il progetto prevedeva lo sviluppo di un middleware per mettere in comunicazione, in maniera sicura, due applicazioni tra reti **NAT** basato sui protocolli di autorizzativi di **OAuth2.0**.\n Dato il periodo, dove la seconda ondata della pandemia era alle porte, era necessario avere un sistema sicuro per la comuncazione tra dispositivi di controllo dell'ingresso e il \"back-end\", come tablet con termoscanner e software per il riconoscimento della mascherina."
     },
     "collaborators": [],
     "languages": [
@@ -59,7 +59,7 @@
     "title": {"en":"Developer in Alternative Studio","it":"Sviluppatore in Alternative Studio"},
     "content": {
       "en":"I've projected and developed a Telegram bot with direct communication to management software for the dog squad Italian civil defence to enable communication between HQ and agent on the ground",
-      "it":"Progettazione e sviluppo di un Bot Telegram con comunicazione diretta al gestionale per la sezione cinofila della protezione civile"
+      "it":"Progettazione e sviluppo di un Bot Telegram con comunicazione diretta al gestionale per la sezione cinofila della Protezione Civile"
     },
     "collaborators": [],
     "languages": [
@@ -80,7 +80,7 @@
     "title": {"en":"ICT office's assistant","it":"Assistente dell'ufficio ICT "},
     "content": {
       "en":"I applied to this position, in Saxon Hill Academy, through the European project Leonardo which provided accommodation for the stay, an English course and a workplace mainly for practices the language skill. In Saxon Hill Academy, my responsibilities were:\n - Maintenance of administration's computers.\n - Maintenance of students' computers.\n - Make the sensorial room usable.",
-      "it":"Ho avuto l'opportunità di lavorare in questo ambiente grazie al progetto europeo Leonardo. Questo progetto si occupava di accomodare studenti e di fornirgli tutto il necessario tra vitto e alloggio, in più prevedeva un corso di inglese e un luogo di lavoro dove fare principalmente pratica con la lingua. In questo contesto sono stato assegnato a Saxon Hill Academy dove le mansioni che ho svolto erano:\n - Manutenzione dei computer della segreteria\n - Manutenzione dei computer degli studenti \n - Rendere operativa la \"sensiorial room\"  "
+      "it":"Ho avuto l'opportunità di lavorare in questo ambiente grazie al progetto europeo Leonardo. Questo progetto di 4 settimane si occupava di fornire a gli studenti tutto il necessario tra vitto e alloggio, prevedeva, inoltre, un corso di inglese e un luogo di lavoro dove fare principalmente pratica con la lingua. In questo contesto sono stato assegnato a Saxon Hill Academy dove ho svolto le seguenti mansioni:\n - Manutenzione dei computer della segreteria\n - Manutenzione dei computer degli studenti \n - Rendere operativa la \"sensiorial room\"  "
     },
     "collaborators": [],
     "languages": [

src/model/portfolio.json

@@ -50,7 +50,7 @@
     "tecnologies": [
       "QMK"
     ],
-    "images":["https://cloud.pettinato.eu/index.php/apps/files_sharing/publicpreview/HWpHJaT9HtWsfWF?x=1434&y=2094&a=true&file=IMG_20210716_202032.jpg&scalingup=0"]
+    "images":["/custom-keyboard.jpg"]
   },
   {
     "year":{
@@ -64,7 +64,7 @@
     "collaborators":[],
     "languages":["bash","python"],
     "tecnologies":["raspberry"],
-    "images":["https://cloud.pettinato.eu/index.php/apps/files_sharing/publicpreview/P4BTpYMqsHCm53T?x=1105&y=979&a=true&file=IMG_20210213_215455.jpg&scalingup=0"]
+    "images":["/3dprinter.jpg"]
   },{
     "year":{
       "start":"2021-09-15",
@@ -72,7 +72,7 @@
     "title":{"en":"Unraid Server","it":"Unraid Server"},
     "content":{
       "en":"To manage all my software and data, I built a home server with Unraid server. I based the system on the Ryzen platform with an R9 3900X CPU, two 2TB disks for work data and software and, 4 disks 4TB for family storage",
-      "it":"Per gestire il mio software e i miei dati, ho costruito un server basandomi sulla distrubuzione Unraid il server è basto su una piattaforma ryzen con R9 3900X, due dischi da 2TB per le cose da lavoro e 4 dischi da 4TB per lo spazio famigliare "
+      "it":"Per gestire il mio software e i miei dati, ho costruito un server basandomi sulla distrubuzione Unraid il server è basto su una piattaforma ryzen con R9 3900X, due dischi da 2TB per le cose da lavoro e 4 dischi da 4TB, in configurazione RAID10, per lo spazio per la mia famiglia "
     },
     "collaborators":[],
     "languages":["yml"],
@@ -91,7 +91,7 @@
     "collaborators":[],
     "languages":[],
     "tecnologies":[],
-    "images":["https://cloud.pettinato.eu/index.php/apps/files_sharing/publicpreview/zS3DBDYKbbKS3En?x=1105&y=979&a=true&file=IMG_20211006_163258.jpg&scalingup=0"]
+    "images":["/workstation.jpg"]
   },
   {
     "year":{
@@ -141,8 +141,8 @@
       "end":"2021-09-30"},
     "title":{"en":"Project for object oriented programming course","it":"Progetto per il corso di programmazione ad oggetti"},
     "content":{
-      "en":"I delevoped a IoT object container for the object oriented programming course with the possiblity to edit the devices' configuration",
+      "en":"I delevoped a IoT object container for the object oriented programming course with the possiblity to edit the devices' configuration. <a rel=\"external\" href=\"/QContainer.pdf\">I wrote a report about it (italian)</a> and [released the software](https://github.com/Jatus93/QONTAINER) in LGPL-3.0 License ",
-      "it":"Per il corso di programmazione ad oggetti ho fatto un container di dispositivi iot con la possibilità di configurare i dispositivi"
+      "it":"Per il corso di programmazione ad oggetti ho fatto un container di dispositivi iot con la possibilità di configurare i dispositivi. Per maggiori infomrmazioni <a rel=\"external\" href=\"/QContainer.pdf\">ho scritto una relazione al riguardo</a> e [rilasciato il software](https://github.com/Jatus93/QONTAINER) sotto licenza LGPL-3.0"
     },
     "collaborators":[],
     "languages":["C++"],

src/routes/index.svelte

@@ -23,9 +23,9 @@
               job:{it:"Esperienze",en:"Experiences"},
               school:{it:"Formazione",en:"Training"},
               contacts:{it:"Contatti",en:"Contacts"},
-              hobbies:{it:"Portfolio",en:"Portfolio"}}
+              portfolio:{it:"Portfolio",en:"Portfolio"}}
 </script>
-<div class="maindiv">
+<main class="maindiv">
   <!-- svelte-ignore a11y-invalid-attribute -->
   <div class="language-selector" id="language-selector"> <a href="#" on:click={()=>{changeLanguage('it')}}>IT</a>  <a href="#" on:click={()=>{changeLanguage('en')}}>EN</a> </div>
   <div class="menu">
@@ -34,23 +34,23 @@
   <div class="about" id="home">
     <AboutMe bind:this="{aboutMe}"/>
   </div> 
-  <div class="content" id="job">
+  <div class="content" id="jobs">
     <h2>{titles.job[currentLanguage]}</h2>
     <Jobs bind:this="{jobsHandler}"/>
   </div>
-  <div class="content" id="school">
+  <div class="content" id="training">
     <h2>{titles.school[currentLanguage]}</h2>
     <Training bind:this="{trainingHandler}"/>
   </div> 
-  <div class="content" id="hobbies">
+  <div class="content" id="portfolio">
-    <h2>{titles.hobbies[currentLanguage]}</h2>
+    <h2>{titles.portfolio[currentLanguage]}</h2>
     <Portfolio bind:this="{portfolioHandler}"/>
   </div> 
-  <div class="content" id="contacts">
+  <!-- <div class="content" id="contacts">
     <h2>{titles.contacts[currentLanguage]}</h2>
     <Contacts/>
-  </div>
+  </div> -->
-</div>
+</main>
 <style lang="scss">
   @import "./static/colors.scss";
   .maindiv {
@@ -79,12 +79,12 @@
   }
 
   .about{
-    margin-top: 1vh;
+    margin-top: 4vh;
-    margin-bottom: 1vh;
+    margin-bottom: 4vh;
   }
   .content{
     // padding-top: 2vh;
-    margin-bottom: 2vh;
+    margin-bottom: 4vh;
   }
 
   h2{

src/routes/jobs.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import Menu from "$elem/menu.svelte";
+  import Jobs from '$elem/jobs.svelte';
+  let menuHandler: Menu;
+  let jobsHandler: Jobs;
+  let currentLanguage: string ='it';
+  function changeLanguage(language:string){
+    console.log(language);
+    menuHandler.changeLanguage(language);
+    jobsHandler.changeLanguage(language);
+  }
+  let titles = {home:{it:"Home",en:"Home"},
+              job:{it:"Esperienze",en:"Experiences"},
+              school:{it:"Formazione",en:"Training"},
+              contacts:{it:"Contatti",en:"Contacts"},
+              portfolio:{it:"Portfolio",en:"Portfolio"}}
+</script>
+<main class="maindiv">
+  <!-- svelte-ignore a11y-invalid-attribute -->
+  <div class="language-selector" id="language-selector"> <a href="#" on:click={()=>{changeLanguage('it')}}>IT</a>  <a href="#" on:click={()=>{changeLanguage('en')}}>EN</a> </div>
+  <div class="menu">
+    <Menu bind:this="{menuHandler}"/>
+  </div>
+  <div class="content" id="portfolio">
+    <h2>{titles.portfolio[currentLanguage]}</h2>
+    <Jobs bind:this="{jobsHandler}"/>
+  </div>
+</main>
+<style lang="scss">
+  @import "./static/colors.scss";
+  .maindiv {
+    background-color: $middle-blue-green;
+    margin: 0;
+    color: $rich-black-fogra-29;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    height: 100vh;
+    overflow: auto;
+    // padding-bottom: 3vh;
+  }
+
+  .language-selector {
+    width: 100%;
+    color: $rich-black-fogra-29;
+    display: flex;
+    justify-content: flex-end;
+    background-color: $steel-blue;
+  }
+
+  .language-selector > a, .language-selector > a:visited {
+    text-decoration: none;
+    color: $rich-black-fogra-29;
+    font-size: 16px;
+    margin-right: 20px ;
+  }
+  .content{
+    // padding-top: 2vh;
+    margin-bottom: 2vh;
+  }
+
+  h2{
+    width: 100%;
+    text-align: center;
+  }
+
+  .menu {
+    width: 100%;
+    position: -webkit-sticky; /* Safari */
+    position: sticky;
+    bottom: 0;
+    top: 0;
+  }
+
+</style>

src/routes/portfolio.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import Menu from "$elem/menu.svelte";
+  import Portfolio from '$elem/portfolio.svelte';
+  let menuHandler: Menu;
+  let portfolioHandler: Portfolio;
+  let currentLanguage: string ='it';
+  function changeLanguage(language:string){
+    console.log(language);
+    menuHandler.changeLanguage(language);
+    portfolioHandler.changeLanguage(language);
+  }
+  let titles = {home:{it:"Home",en:"Home"},
+              job:{it:"Esperienze",en:"Experiences"},
+              school:{it:"Formazione",en:"Training"},
+              contacts:{it:"Contatti",en:"Contacts"},
+              portfolio:{it:"Portfolio",en:"Portfolio"}}
+</script>
+<main class="maindiv">
+  <!-- svelte-ignore a11y-invalid-attribute -->
+  <div class="language-selector" id="language-selector"> <a href="#" on:click={()=>{changeLanguage('it')}}>IT</a>  <a href="#" on:click={()=>{changeLanguage('en')}}>EN</a> </div>
+  <div class="menu">
+    <Menu bind:this="{menuHandler}"/>
+  </div>
+  <div class="content" id="portfolio">
+    <h2>{titles.portfolio[currentLanguage]}</h2>
+    <Portfolio bind:this="{portfolioHandler}"/>
+  </div>
+</main>
+<style lang="scss">
+  @import "./static/colors.scss";
+  .maindiv {
+    background-color: $middle-blue-green;
+    margin: 0;
+    color: $rich-black-fogra-29;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    height: 100vh;
+    overflow: auto;
+    // padding-bottom: 3vh;
+  }
+
+  .language-selector {
+    width: 100%;
+    color: $rich-black-fogra-29;
+    display: flex;
+    justify-content: flex-end;
+    background-color: $steel-blue;
+  }
+
+  .language-selector > a, .language-selector > a:visited {
+    text-decoration: none;
+    color: $rich-black-fogra-29;
+    font-size: 16px;
+    margin-right: 20px ;
+  }
+  
+  .content{
+    // padding-top: 2vh;
+    margin-bottom: 2vh;
+  }
+
+  h2{
+    width: 100%;
+    text-align: center;
+  }
+
+  .menu {
+    width: 100%;
+    position: -webkit-sticky; /* Safari */
+    position: sticky;
+    bottom: 0;
+    top: 0;
+  }
+
+</style>

src/routes/training.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import Menu from "$elem/menu.svelte";
+  import Training from '$elem/training.svelte'
+  let menuHandler: Menu;
+  let trainingHandler: Training;
+  let currentLanguage: string ='it';
+  function changeLanguage(language:string){
+    console.log(language);
+    menuHandler.changeLanguage(language);
+    trainingHandler.changeLanguage(language);
+  }
+  let titles = {home:{it:"Home",en:"Home"},
+              job:{it:"Esperienze",en:"Experiences"},
+              school:{it:"Formazione",en:"Training"},
+              contacts:{it:"Contatti",en:"Contacts"},
+              portfolio:{it:"Portfolio",en:"Portfolio"}}
+</script>
+<main class="maindiv">
+  <!-- svelte-ignore a11y-invalid-attribute -->
+  <div class="language-selector" id="language-selector"> <a href="#" on:click={()=>{changeLanguage('it')}}>IT</a>  <a href="#" on:click={()=>{changeLanguage('en')}}>EN</a> </div>
+  <div class="menu">
+    <Menu bind:this="{menuHandler}"/>
+  </div>
+  <div class="content" id="school">
+    <h2>{titles.school[currentLanguage]}</h2>
+    <Training bind:this="{trainingHandler}"/>
+  </div>
+</main>
+<style lang="scss">
+  @import "./static/colors.scss";
+  .maindiv {
+    background-color: $middle-blue-green;
+    margin: 0;
+    color: $rich-black-fogra-29;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    height: 100vh;
+    overflow: auto;
+    // padding-bottom: 3vh;
+  }
+
+  .language-selector {
+    width: 100%;
+    color: $rich-black-fogra-29;
+    display: flex;
+    justify-content: flex-end;
+    background-color: $steel-blue;
+  }
+
+  .language-selector > a, .language-selector > a:visited {
+    text-decoration: none;
+    color: $rich-black-fogra-29;
+    font-size: 16px;
+    margin-right: 20px ;
+  }
+
+  .content{
+    // padding-top: 2vh;
+    margin-bottom: 2vh;
+  }
+
+  h2{
+    width: 100%;
+    text-align: center;
+  }
+
+  .menu {
+    width: 100%;
+    position: -webkit-sticky; /* Safari */
+    position: sticky;
+    bottom: 0;
+    top: 0;
+  }
+
+</style>