diff --git a/src/elements/aboutMe.svelte b/src/elements/aboutMe.svelte
index c7ddbb7..a9bdb79 100644
--- a/src/elements/aboutMe.svelte
+++ b/src/elements/aboutMe.svelte
@@ -1,43 +1,80 @@
 <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.\
+      In particolare ho famigliarità con C++ con QT e Typescript con Angular, Vuejs 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.\
+      Nel tempo libero mi dedico alla gestione del mio home sever e alla costruzione di PC fissi.\
+      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.\
+      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.';
+      
+  const who = {
+    it:whoIt,
+    en:whoEn
+  }
+  export function changeLanguage(language = 'it'){
+    currentLanguage = language
+  }
 </script>
 <div class="aboutMe">
-  <img src="/profile_pic.jpg" alt="profile" class="profile" />
-  <div class="info">
-    <h1>Gianmarco Pettinato</h1>
-    <p>Back-end developer GNU/Linux user </p>
-    <div>
-      <a href="https://twitter.com/jatus_93"><i class="fab fa-twitter"></i></a>
-      <a href="https://www.linkedin.com/in/gianmarco-pettinato/"><i class="fab fa-linkedin-in"></i></a>
-      <a href="https://t.me/jatus_93"><i class="fab fa-telegram-plane"></i></a>
-      <a href="mailto:gianmarco@pettinato.eu"><i class="fas fa-at"></i></a>
+  <div class="header"><img src="/profile_pic.jpg" alt="profile" class="profile" />
+    <div class="info">
+      <h1>Gianmarco Pettinato</h1>
+      <div>
+        <a href="https://twitter.com/jatus_93"><i class="fab fa-twitter"></i></a>
+        <a href="https://www.linkedin.com/in/gianmarco-pettinato/"><i class="fab fa-linkedin-in"></i></a>
+        <a href="https://t.me/jatus_93"><i class="fab fa-telegram-plane"></i></a>
+        <a href="mailto:gianmarco@pettinato.eu"><i class="fas fa-at"></i></a>
+        <a href="https://github.com/Jatus93/"><i class="fab fa-github"></i></a>
+        <a href="https://git.jatus.tech/Jatus"><i class="fab fa-git-alt"></i></a>
+      </div>
     </div>
+  </div>  
+  <div class="presentazione">
+    <p>
+      {who[currentLanguage]}
+    </p>
+  </div>
+  <div>
+    <a class="cv" href="/curriculum_it.pdf"><i class="fas fa-download"></i> curriculum_it.pdf</a>
   </div>
 </div>
 <style lang="scss">
   @import './static/colors.scss';
   @import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
   .aboutMe{
-    padding: 1vh;
-    display: flex;
-    flex-direction: row;
-    min-width: 370px;
-    max-width: 550px;
-    width: 40vw;
-    height: auto;
-    align-items: center;
     background-color: $cultured;
+    border-radius: 10px;
+    margin: auto;
+    max-width: $cv-max-width;
+    width: 95%;
+    height: auto;
     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;
-    -moz-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;    
+    -moz-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
+    padding-top: 2vh;
+    padding-bottom: 2vh;
+    text-align: center;
+  }
+
+  .cv{
+    font-size: unset;
+    text-decoration: none;
   }
 
   .profile{
     border-radius: 50%;
-    height: 150px;
+    width: 35vw;
+    max-width: 150px;
     border: solid $rich-black-fogra-29 1px;
     box-shadow: -1px 2px 2px -1px $rich-black-fogra-29;
     -webkit-box-shadow: -1px 2px 2px -1px $rich-black-fogra-29;
@@ -46,15 +83,41 @@
   }
 
   .info{
+    margin: 1px;
     text-align: center;
+    justify-content: center;
     color: $rich-black-fogra-29;
-    width: auto;
-    margin-left: 20px;    
+  }
+
+  .info>h1{
+    font-size: 28px;
   }
 
   a,a:visited{
     font-size: 1.5em;
     color: $rich-black-fogra-29;
+    margin: 2px;
+  }
+
+  .presentazione{
+    width: 90%;
+    margin: auto;
+    text-justify: distribute;
+  }
+
+  .header{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-items: center;
+    padding: 10px;
+  }
+
+  @media screen and (min-width: 600px) {
+    .aboutMe{
+      max-width: $cv-max-width;
+      width: 80vw;
+    }
   }
 
 </style>
\ No newline at end of file
diff --git a/src/elements/contacts.svelte b/src/elements/contacts.svelte
new file mode 100644
index 0000000..92d996b
--- /dev/null
+++ b/src/elements/contacts.svelte
@@ -0,0 +1,107 @@
+<script lang="ts"></script>
+<div class="contactContainer">
+  <div class="contacts">
+    <div class="header"><img src="/profile_pic.jpg" alt="profile" class="profile" /></div>
+      <ul class="contact-list">
+        <li><div class="label"><i class="fas fa-at"></i> e-mail:</div> <a href="mailto://gianmarco@pettinato.eu">gianmarco@pettinato.eu</a></li>
+        <li><div class="label"><i class="fab fa-telegram-plane"></i> telegram:</div> <a href="https://t.me/jatus_93">@jatus_93</a></li>
+        <li><div class="label"><i class="fab fa-twitter"></i> twitter:</div> <a href="https://twitter.com/jatus_93">@jatus_93</a></li>
+        <li><div class="label"><i class="fab fa-linkedin-in"></i> linkedin:</div> <a href="https://www.linkedin.com/in/gianmarco-pettinato/">Gianmarco Pettinato</a></li>
+      </ul>
+  </div>
+</div>
+<style lang="scss">
+  @import './static/colors.scss';
+  .contactContainer{
+    margin: auto;
+    background-color:$navajo-white;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    height: auto;
+    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;
+    -moz-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
+    padding-top: 1vh;
+    padding-bottom: 1vh;
+  }
+
+  .contacts{
+    background-color: $cultured;
+    width: 90%;
+    border-radius: 10px;
+    margin-bottom: 10px;
+    padding-top: 2vh;
+    padding-bottom: 2vh;
+    background-color: $cultured;
+    border-style: solid;
+    border-width: 0.1px;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  .contacts>ul{
+    list-style: none;
+    width: auto;
+    margin: auto;
+  }
+  .contacts>ul>li{
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    flex-wrap: wrap;
+  }
+  .contacts>ul>li>div{
+    margin-right: auto;
+  }
+
+  .profile{
+    border-radius: 50%;
+    width: 35vw;
+    max-width: 150px;
+    border: solid $rich-black-fogra-29 1px;
+    box-shadow: -1px 2px 2px -1px $rich-black-fogra-29;
+    -webkit-box-shadow: -1px 2px 2px -1px $rich-black-fogra-29;
+    -moz-box-shadow: -1px 2px 2px -1px $rich-black-fogra-29;
+
+  }
+
+  a,a:visited{
+    text-decoration: none;
+    color: $rich-black-fogra-29;
+    margin: 2px;
+  }
+
+  @media screen and (min-width: 600px) {
+    .contactContainer{
+      display: flex;
+      height: auto;
+      max-width: $cv-max-width;
+      width: 80vw;
+    }
+
+    .contacts>ul{
+      // list-style: none;
+      // width: 35vw;
+      margin: unset;
+    }
+
+    // .job-content{
+    //   flex-wrap: unset;
+    // }
+
+    // .text-content{
+    //   width: 35vw;
+    // }
+  }
+</style>
\ No newline at end of file
diff --git a/src/elements/extra.svelte b/src/elements/extra.svelte
new file mode 100644
index 0000000..71dc9b0
--- /dev/null
+++ b/src/elements/extra.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+  import data from '../model/hobby.json'
+  import type { Schema } from 'src/model/job';
+  export let currentLanguage = 'it'
+  const hobbies:Schema[] = data as Schema[];
+
+  export function changeLanguage(language = 'it'){
+    currentLanguage = language
+  }
+</script>
+<div class="extraContainer">
+  {#each hobbies as hobby }
+    <div class="hobby">
+      <h3>{hobby.title[currentLanguage]}</h3>
+      <div class="images">
+        {#each hobby.images as image}
+          <img src={image} alt="{hobby.title[currentLanguage].toString()}" />
+        {/each}
+      </div>
+      <div class="hobby-text">
+        {hobby.content[currentLanguage]}
+      </div>
+      <div class="added-info">
+        {#each hobby.tecnologies as tecnology }
+          {tecnology+" "}
+        {/each}
+      </div>
+    </div>
+  {/each}
+</div>
+<style lang="scss">
+  @import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
+  @import './static/colors.scss';
+  .extraContainer{
+    margin: auto;
+    background-color:$steel-blue;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    height: auto;
+    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;
+    -moz-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
+    padding-top: 1.5vh;
+    padding-bottom: 1.5vh;
+  }
+
+  .hobby{
+    background-color: $cultured;
+    text-align: center;
+    width: 90%;
+    border-radius: 10px;
+    margin-bottom: 10px;
+    padding-top: 2vh;
+    padding-bottom: 2vh;
+    background-color: $cultured;
+    border-style: solid;
+    border-width: 0.1px;
+  }
+
+  .images{
+    width: 90%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-items: center;
+    margin: auto;
+  }
+
+  .images>img{
+    margin: auto;
+    margin-bottom: 2vh;
+    max-width: 350px;
+    max-height: 250px;
+  }
+
+  .added-info{
+    font-size: 15px;
+  }
+
+  @media screen and (min-width: 600px) {
+    .extraContainer{
+      display: flex;
+      height: auto;
+      max-width: $cv-max-width;
+      width: 80vw;
+    }
+
+    // .job-content{
+    //   flex-wrap: unset;
+    // }
+
+    // .text-content{
+    //   width: 35vw;
+    // }
+  }
+</style>
\ No newline at end of file
diff --git a/src/elements/header.svelte b/src/elements/header.svelte
deleted file mode 100644
index 1be6924..0000000
--- a/src/elements/header.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script lang="ts">
-  export const status = 'test string';
-</script>
-<div class="header">
-  <!-- <p>page header</p> -->
-</div>
-<style lang="scss">
-  @import './static/colors.scss';
-  .header{
-    background-color: red;
-  }
-</style>
\ No newline at end of file
diff --git a/src/elements/jobs.svelte b/src/elements/jobs.svelte
index a142aa7..d67dac3 100644
--- a/src/elements/jobs.svelte
+++ b/src/elements/jobs.svelte
@@ -1,45 +1,45 @@
 <script lang="ts">
-  import data from '../model/data'
+  import data from '../model/jobs.json'
   import type { Schema } from 'src/model/job';
   export let currentLanguage = 'it'
-  import { onMount, tick } from 'svelte';
-  const jobs:Schema[] = data.default as Schema[];
-  onMount(()=>{
-    console.log(jobs[0]);
-  })
+  const jobs:Schema[] = data as Schema[];
+
+  export function changeLanguage(language = 'it'){
+    currentLanguage = language
+  }
 </script>
 <div class="jobsContainer">
-  {#each jobs as job }
+  {#each jobs as job, index }
     <div class="job container">
-      <h2>{job.title[currentLanguage]}</h2>
-      <div class="added-info">
-        {job.year.start} - {job.year.end}
-      </div>
+      <h3>{job.title[currentLanguage]}</h3>
       <div class="job-content">
         <div class="images-container">
           {#each job.images as image }
             <img src="{image}" alt="realtive to the article"/>
           {/each}
         </div>
-        <div class="text-content {job.images.length!=0 ?'left':''}">
+        <div class="text-content {job.images.length!=0 ?'left':''}" id="{index.toString()}">
             <p>{job.content[currentLanguage]}</p>
-          <div class="added-info">
-            <div>
-              {#each job.collaborators as collaborator}
-                <a href={collaborator.ref}>{collaborator.name}{collaborator.surname}</a>
-              {/each}
-            </div>
-            <div>
-              {#each job.languages as language}
-                {language+" "}
-              {/each}
-            </div>
-            <div>
-              {#each job.tecnologies as tecnology}
-                {tecnology+" "}
-              {/each}
-            </div>
-          </div>
+        </div>
+      </div>
+      <div class="added-info">
+        <div class="added-info">
+          {job.year.start} - {job.year.end}
+        </div>
+        <div>
+          {#each job.collaborators as collaborator}
+            <a href={collaborator.ref}>{collaborator.name}{collaborator.surname}</a>
+          {/each}
+        </div>
+        <div>
+          {#each job.languages as language}
+            {language+" "}
+          {/each}
+        </div>
+        <div>
+          {#each job.tecnologies as tecnology}
+            {tecnology+" "}
+          {/each}
         </div>
       </div>
     </div>
@@ -47,8 +47,17 @@
 </div>
 <style  lang="scss">
   @import './static/colors.scss';
-  .container{
-    background-color: $cultured;
+  .jobsContainer{
+    margin: auto;
+    background-color:$steel-blue;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    height: auto;
+    font-size: 1.1em;
+    border-radius: 10px;
+    width: 95%;
     border-style: solid;
     border-width: 0.1px;
     border-color: $rich-black-fogra-29;
@@ -56,54 +65,62 @@
     box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
     -webkit-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
     -moz-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
-  }
-  .jobsContainer{
-    width: 80%;
-    height: auto;
-    background-color: $steel-blue;
-    border-radius: 10px;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-    padding: 30px;
-    max-width: 1280px;
+    padding-top: 1.5vh;
+    padding-bottom: 1.5vh;
   }
   .job{
     background-color: $cultured;
-    min-height: 300px;
-    height: auto;
-    width: 90%;
-    margin-bottom: 20px;
     text-align: center;
-    padding-top: 1vh;
+    width: 90%;
+    border-radius: 10px;
+    margin-bottom: 10px;
+    padding-top: 2vh;
     padding-bottom: 2vh;
+    background-color: $cultured;
+    border-style: solid;
+    border-width: 0.1px;
   }
 
   .job-content{
-    text-align: center;
+    padding: 2vh;
     display: flex;
-    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
     align-items: center;
-    justify-content: center;
-    padding: 2vw;
-  }
-  .text-content{
-    height: auto;
   }
+  
   .added-info{
     font-size: 13px;
   }
 
-  .images-container{
-    display: flex;
-    flex-direction: column;
-    margin-right: 30px;
+  .text-content{
+    height: auto;
+    margin-left: 2.5vw;
+    margin-right: 2.5vw;
   }
+  
 
   img{
     width: 30vw;
-    max-width: 500px;
+    max-width: 200px;
     max-height: 500px;
   }
-</style>
\ No newline at end of file
+
+  @media screen and (min-width: 600px) {
+    .jobsContainer{
+      display: flex;
+      height: auto;
+      max-width: $cv-max-width;
+      width: 80vw;
+    }
+
+    .job-content{
+      flex-wrap: unset;
+    }
+
+    .text-content{
+      width: 35vw;
+    }
+  }
+  
+</style>
diff --git a/src/elements/menu.svelte b/src/elements/menu.svelte
new file mode 100644
index 0000000..9ccb9cd
--- /dev/null
+++ b/src/elements/menu.svelte
@@ -0,0 +1,88 @@
+<script lang="ts">
+  let currentLanguage = 'it'
+  export function changeLanguage(language = 'it'){
+    currentLanguage = language
+  }
+  export const menu = {home:{it:"Home",en:"Home"},
+              job:{it:"Esperienze",en:"Experiences"},
+              school:{it:"Formazione",en:"Training"},
+              contacts:{it:"Contatti",en:"Contacts"},
+              hobbies:{it:"Tempo libero",en:"Hobbies"}}
+</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="#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="#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="#contacts" alt="{menu.contacts[currentLanguage]}"><i class="fas fa-address-card"></i><span class="hide">{menu.contacts[currentLanguage]}</span></a>
+  </div>
+</div>
+
+<style lang="scss">
+  @import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
+  @import './static/colors.scss';
+  .div-menu{
+    width: 100%;
+    background-color: $steel-blue;
+  }
+
+  .menu-element {
+    background-color: $cultured;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    justify-content: space-evenly;
+    text-decoration: none;
+    color: $rich-black-fogra-29;
+    width: 13%;
+    height: 30px;
+    margin: 10px;
+    border-radius: 10px;    
+    text-align: center;
+    border-color: $rich-black-fogra-29;
+  }
+
+  .menu-element:hover{
+    background-color: $navajo-white;
+  }
+
+  .wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    width: 100%;
+    margin: auto;
+    height: auto;
+    max-width: $cv-max-width;
+  }
+
+  .hide{
+    display: none;
+  }
+
+  @media screen and (min-width: 666px) {
+    .div-menu{
+      display: flex;
+      height: auto;
+    }
+
+    .menu-element {
+      background-color: $cultured;
+      text-decoration: none;
+      color: $rich-black-fogra-29;
+      width: 17%;
+      height: 30px;
+      margin-left: 5px;
+      margin-right: 5px;
+      border-radius: 10px;
+      text-align: center;
+    }
+
+    .hide{
+      display: block;
+    }
+  }
+
+</style>
\ No newline at end of file
diff --git a/src/elements/training.svelte b/src/elements/training.svelte
new file mode 100644
index 0000000..b6f5c11
--- /dev/null
+++ b/src/elements/training.svelte
@@ -0,0 +1,66 @@
+<script lang="ts"></script>
+<div class="trainingContainer">
+  <div class="training">
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui faucibus in ornare quam viverra orci sagittis. Purus gravida quis blandit turpis cursus in. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet consectetur. Eget aliquet nibh praesent tristique magna. Facilisis gravida neque convallis a cras semper auctor neque vitae. Lectus sit amet est placerat in egestas erat. Lorem ipsum dolor sit amet consectetur. Commodo nulla facilisi nullam vehicula ipsum a arcu. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit. Diam maecenas ultricies mi eget. Sapien eget mi proin sed libero enim sed faucibus. Vitae purus faucibus ornare suspendisse. Sit amet luctus venenatis lectus. Praesent tristique magna sit amet purus gravida quis blandit. Nunc mattis enim ut tellus. Egestas diam in arcu cursus. At lectus urna duis convallis convallis tellus id. Nunc pulvinar sapien et ligula ullamcorper. Tristique senectus et netus et malesuada fames ac turpis. Malesuada fames ac turpis egestas. Lectus nulla at volutpat diam ut venenatis. Diam donec adipiscing tristique risus nec feugiat. Non quam lacus suspendisse faucibus. Volutpat sed cras ornare arcu dui vivamus. Quam elementum pulvinar etiam non quam lacus.
+    </p>
+  </div>
+</div>
+<style lang="scss">
+  @import './static/colors.scss';
+  .trainingContainer{
+    margin: auto;
+    background-color:$navajo-white;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    height: auto;
+    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;
+    -moz-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
+    padding-top: 1vh;
+    padding-bottom: 1vh;
+  }
+
+  .training{
+    background-color: $cultured;
+    text-align: center;
+    width: 90%;
+    border-radius: 10px;
+    margin-bottom: 10px;
+    padding-top: 2vh;
+    padding-bottom: 2vh;
+    background-color: $cultured;
+    border-style: solid;
+    border-width: 0.1px;
+  }
+
+  .training>p{
+    width: 95%;
+    margin: auto;
+  }
+  @media screen and (min-width: 600px) {
+    .trainingContainer{
+      display: flex;
+      height: auto;
+      max-width: $cv-max-width;
+      width: 80vw;
+    }
+
+    // .job-content{
+    //   flex-wrap: unset;
+    // }
+
+    // .text-content{
+    //   width: 35vw;
+    // }
+  }
+</style>
\ No newline at end of file
diff --git a/src/model/data.json b/src/model/data.json
deleted file mode 100644
index 044bd01..0000000
--- a/src/model/data.json
+++ /dev/null
@@ -1,93 +0,0 @@
-[
-  {
-    "year": {
-      "start": "2021-10-01",
-      "end": "2021-10-02"
-    },
-    "title": {"en":"This web site","it":"Questo sito web"},
-    "content": {"en":"I'have created this web site as CV","it":"Ho creato questo sito web per raccogliere, in maniera semplice ed efficiente, tutti i miei lavori ed esperienze. Ho realizzato questa pagina utilizzando Typescript con il framework Svelte e le classi css invece le ho gestite a mano"},
-    "collaborators": [],
-    "languages": [
-      "typescript",
-      "JSON-schema"
-    ],
-    "tecnologies": [
-      "Svelte",
-      "Nodejs"
-    ],
-    "images":["https://via.placeholder.com/500"]
-  },
-  {
-    "year": {
-      "start": "2021-10-01",
-      "end": "2021-10-02"
-    },
-    "title": {"en":"This web site","it":"Questo sito web"},
-    "content": {"en":"I'have created this web site as CV","it":"Ho creato questo sito web per raccogliere, in maniera semplice ed efficiente, tutti i miei lavori ed esperienze. Ho realizzato questa pagina utilizzando Typescript con il framework Svelte e le classi css invece le ho gestite a mano"},
-    "collaborators": [],
-    "languages": [
-      "typescript",
-      "JSON-schema"
-    ],
-    "tecnologies": [
-      "Svelte",
-      "Nodejs"
-    ],
-    "images":["https://via.placeholder.com/500"]
-  },
-  {
-    "year": {
-      "start": "2021-10-01",
-      "end": "2021-10-02"
-    },
-    "title": {"en":"This web site","it":"Questo sito web"},
-    "content": {"en":"I'have created this web site as CV","it":"Ho creato questo sito web per raccogliere, in maniera semplice ed efficiente, tutti i miei lavori ed esperienze. Ho realizzato questa pagina utilizzando Typescript con il framework Svelte e le classi css invece le ho gestite a mano"},
-    "collaborators": [],
-    "languages": [
-      "typescript",
-      "JSON-schema"
-    ],
-    "tecnologies": [
-      "Svelte",
-      "Nodejs"
-    ],
-    "images":["https://via.placeholder.com/500"]
-  },
-  {
-    "year": {
-      "start": "2021-10-01",
-      "end": "2021-10-02"
-    },
-    "title": {"en":"This web site","it":"Questo sito web"},
-    "content": {"en":"I'have created this web site as CV","it":"Ho creato questo sito web per raccogliere, in maniera semplice ed efficiente, tutti i miei lavori ed esperienze. Ho realizzato questa pagina utilizzando Typescript con il framework Svelte e le classi css invece le ho gestite a mano"},
-    "collaborators": [],
-    "languages": [
-      "typescript",
-      "JSON-schema"
-    ],
-    "tecnologies": [
-      "Svelte",
-      "Nodejs"
-    ],
-    "images":["https://via.placeholder.com/500"]
-  },
-  {
-    "year": {
-      "start": "2021-10-01",
-      "end": "2021-10-02"
-    },
-    "title": {"en":"This web site","it":"Questo sito web"},
-    "content": {"en":"I'have created this web site as CV","it":"Ho creato questo sito web per raccogliere, in maniera semplice ed efficiente, tutti i miei lavori ed esperienze. Ho realizzato questa pagina utilizzando Typescript con il framework Svelte e le classi css invece le ho gestite a mano"},
-    "collaborators": [],
-    "languages": [
-      "typescript",
-      "JSON-schema"
-    ],
-    "tecnologies": [
-      "Svelte",
-      "Nodejs"
-    ],
-    "images":["https://via.placeholder.com/500"]
-  }
-
-]
\ No newline at end of file
diff --git a/src/model/data.ts b/src/model/data.ts
index 84c2fc5..51140d1 100644
--- a/src/model/data.ts
+++ b/src/model/data.ts
@@ -1,3 +1,4 @@
-import * as data from './data.json';
-
-export default data as unknown[];
\ No newline at end of file
+import * as jobCollection from './jobs.json';
+import * as hobbyCollection from './hobby.json';
+jobCollection;
+hobbyCollection;
\ No newline at end of file
diff --git a/src/model/hobby.json b/src/model/hobby.json
new file mode 100644
index 0000000..206a053
--- /dev/null
+++ b/src/model/hobby.json
@@ -0,0 +1,23 @@
+[
+  {
+    "year": {
+      "start": "2021-10-01",
+      "end": "2021-10-02"
+    },
+    "title": {"en":"Keyboard","it":"Tastiera"},
+    "content": {
+      "en":"I'have created this web site as CV",
+      "it":"Ho creato questo sito web per raccogliere, in maniera semplice ed efficiente, tutti i miei lavori ed esperienze. Ho realizzato questa pagina utilizzando Typescript con il framework Svelte e le classi css invece le ho gestite a mano"
+    },
+    "collaborators": [],
+    "languages": [
+      "typescript",
+      "JSON-schema"
+    ],
+    "tecnologies": [
+      "Svelte",
+      "Nodejs"
+    ],
+    "images":["https://via.placeholder.com/500","https://via.placeholder.com/500"]
+  }
+]
\ No newline at end of file
diff --git a/src/model/jobs.json b/src/model/jobs.json
new file mode 100644
index 0000000..55f29fa
--- /dev/null
+++ b/src/model/jobs.json
@@ -0,0 +1,23 @@
+[
+  {
+    "year": {
+      "start": "2021-10-01",
+      "end": "2021-10-02"
+    },
+    "title": {"en":"This web site","it":"Questo sito web"},
+    "content": {
+      "en":"I created this web page to collect and present all my experiences. I'm not a web designer. However, I can build web pages because I have good knowledge of HTML and CSS. I made this page using Typescript and Svelte. To manage the content, I've created a simple system to load content from a couple of JSON files that define where to put the information.",
+      "it":"Ho creato questo sito web per raccogliere e raccontare le mie esperienze. Come si può facilmente intuire non sono un web designer, ma ho comunque buone conoscenze nell'uso di HTML e CSS. Ho realizzato questa pagina web in Typescript e Svelte, per la gestione dei contenuti ho ideato un semplice sistema che controlla i dati presenti in un paio di file JSON che definiscono i contenuti della pagina e delle sezioni"
+    },
+    "collaborators": [],
+    "languages": [
+      "typescript",
+      "JSON-schema"
+    ],
+    "tecnologies": [
+      "Svelte",
+      "Nodejs"
+    ],
+    "images":["/webpage.png"]
+  }
+]
\ No newline at end of file
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index f459ebe..75bac0b 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,51 +1,99 @@
 <script lang="ts">
-  // import Header from "$elem/header.svelte";
   import AboutMe from "$elem/aboutMe.svelte";
   import Jobs from "$elem/jobs.svelte";
+  import Menu from "$elem/menu.svelte";
+  import Extra from '$elem/extra.svelte';
+  import Training from '$elem/training.svelte'
+  import Contacts from '$elem/contacts.svelte'
+  let jobsHandler: Jobs;
+  let menuHandler: Menu;
+  let aboutMe:AboutMe;
+  let currentLanguage: string ='it';
+  function changeLanguage(language:string){
+    console.log(language);
+    jobsHandler.changeLanguage(language);
+    menuHandler.changeLanguage(language);
+    aboutMe.changeLanguage(language);
+  }
+  let titles = {home:{it:"Home",en:"Home"},
+              job:{it:"Esperienze",en:"Experiences"},
+              school:{it:"Formazione",en:"Training"},
+              contacts:{it:"Contatti",en:"Contacts"},
+              hobbies:{it:"Tempo libero",en:"Hobbies"}}
 </script>
 <div class="maindiv">
-  <div class="about">
-    <AboutMe/>
+  <!-- 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="jobs">
-    <Jobs/>
+  <div class="about" id="home">
+    <AboutMe bind:this="{aboutMe}"/>
+  </div> 
+  <div class="content" id="job">
+    <h2>{titles.job[currentLanguage]}</h2>
+    <Jobs bind:this="{jobsHandler}"/>
+  </div>
+  <div class="content" id="school">
+    <h2>{titles.school[currentLanguage]}</h2>
+    <Training/>
+  </div> 
+  <div class="content" id="hobbies">
+    <h2>{titles.hobbies[currentLanguage]}</h2>
+    <Extra />
+  </div> 
+  <div class="content" id="contacts">
+    <h2>{titles.contacts[currentLanguage]}</h2>
+    <Contacts/>
   </div>
- 
 </div>
 <style lang="scss">
   @import "./static/colors.scss";
   .maindiv {
-    width: 100vw;
-    height: 100vh;
-    background-color: $cultured;
+    background-color: $middle-blue-green;
     margin: 0;
     color: $rich-black-fogra-29;
-    display: flex;
-    align-items: center;
-    justify-content:flex-start;
-    flex-flow: column;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    // font-family: Exo2-RegularCondensed;
+    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 ;
   }
 
   .about{
-    width: 100vw;
-    min-height: 200px;
-    height: 15%;
-    max-height: 300px;
-    background-color: $middle-blue-green;
-    display: flex;
-    align-items: center;
-    justify-content:center;
+    margin-top: 1vh;
+    margin-bottom: 1vh;
   }
-  .jobs{
-    background-color: $navajo-white;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content:flex-start;
-    width: 100vw;
-    height: 100vh;
-    overflow: auto;
+  .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>
\ No newline at end of file
diff --git a/static/colors.scss b/static/colors.scss
index 2704552..f1f6418 100644
--- a/static/colors.scss
+++ b/static/colors.scss
@@ -6,3 +6,5 @@ $middle-blue-green: #9ad5d3ff;
 $steel-blue: #3a7ca5ff;
 
 /* SCSS Gradient */
+
+$cv-max-width: 800px
\ No newline at end of file
diff --git a/static/curriculum_it.pdf b/static/curriculum_it.pdf
new file mode 100644
index 0000000..b9820d3
Binary files /dev/null and b/static/curriculum_it.pdf differ
diff --git a/static/main.css b/static/main.css
index 415e88d..adff2dd 100644
--- a/static/main.css
+++ b/static/main.css
@@ -1,7 +1,4 @@
 body{
-  height: 100%;
-  width: 100%;
   padding: 0;
   margin: 0;
-  font-family: CortisasPro-Regular;
 }
\ No newline at end of file
diff --git a/static/webpage.png b/static/webpage.png
new file mode 100644
index 0000000..bb9a7e8
Binary files /dev/null and b/static/webpage.png differ