update content

src/elements/jobs.svelte

@@ -101,9 +101,11 @@
   
 
   img{
-    width: 30vw;
     max-width: 200px;
     max-height: 500px;
+    background-color: $rich-black-fogra-29;
+    text-align: center;
+    // min-height: 200px;
   }
 
   @media screen and (min-width: 600px) {

src/elements/projects.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+  import data from '../model/projects.json'
+  import type { Schema } from 'src/model/job';
+  export let currentLanguage = 'it'
+  const projects:Schema[] = data as Schema[];
+
+  export function changeLanguage(language = 'it'){
+    currentLanguage = language
+  }
+</script>
+<div class="projectsContainer">
+  {#each projects as project, index }
+    <div class="project container">
+      <h3>{project.title[currentLanguage]}</h3>
+      <div class="project-content">
+        <div class="images-container">
+          {#each project.images as image }
+            <img src="{image}" alt="realtive to the article"/>
+          {/each}
+        </div>
+        <div class="text-content {project.images.length!=0 ?'left':''}" id="{index.toString()}">
+            <p>{project.content[currentLanguage]}</p>
+        </div>
+      </div>
+      <div class="added-info">
+        <div class="added-info">
+          {project.year.start} - {project.year.end}
+        </div>
+        <div>
+          {#each project.collaborators as collaborator}
+            <a href={collaborator.ref}>{collaborator.name}{collaborator.surname}</a>
+          {/each}
+        </div>
+        <div>
+          {#each project.languages as language}
+            {language+" "}
+          {/each}
+        </div>
+        <div>
+          {#each project.tecnologies as tecnology}
+            {tecnology+" "}
+          {/each}
+        </div>
+      </div>
+    </div>
+  {/each}
+</div>
+<style  lang="scss">
+  @import './static/colors.scss';
+  .projectsContainer{
+    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;
+  }
+  .project{
+    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;
+  }
+
+  .project-content{
+    padding: 2vh;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-items: center;
+  }
+  
+  .added-info{
+    font-size: 13px;
+  }
+
+  .text-content{
+    height: auto;
+    margin-left: 2.5vw;
+    margin-right: 2.5vw;
+  }
+  
+
+  img{
+    width: 30vw;
+    max-width: 200px;
+    max-height: 500px;
+  }
+
+  @media screen and (min-width: 600px) {
+    .projectsContainer{
+      display: flex;
+      height: auto;
+      max-width: $cv-max-width;
+      width: 80vw;
+    }
+
+    .project-content{
+      flex-wrap: unset;
+    }
+
+    .text-content{
+      width: 35vw;
+    }
+  }
+  
+</style>

src/model/hobby.json

@@ -1,4 +1,25 @@
 [
+  {
+    "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"]
+  },
   {
     "year": {
       "start": "2021-10-01",

src/model/jobs.json

@@ -1,23 +1,68 @@
 [
   {
     "year": {
-      "start": "2021-10-01",
+      "start": "2020-09-21",
       "end": "2021-10-02"
     },
-    "title": {"en":"This web site","it":"Questo sito web"},
+    "title": {"en":"intership in Athesys","it":"tirocinio in Athesys"},
     "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.",
+      "en":"intership in Athesys",
-      "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"
+      "it":"tirocinio in Athesys"
     },
     "collaborators": [],
     "languages": [
       "typescript",
-      "JSON-schema"
+      "HTML",
+      "CSS"
     ],
     "tecnologies": [
-      "Svelte",
+      "Vuejs",
-      "Nodejs"
+      "Nodejs",
+      "Nuxt",
+      "Docker"
     ],
-    "images":["/webpage.png"]
+    "images":["/logo-athesys.png"]
+  },
+  {
+    "year": {
+      "start": "2016-08-13",
+      "end": "2017-02-13"
+    },
+    "title": {"en":"Developer in Alternative Studio","it":"Sviluppatore in Alternative Studio"},
+    "content": {
+      "en":"Alternative studio collaboration",
+      "it":"Progettazione e sviluppo di un Bot Telegram con comunicazione diretta al gestionale per la sezione cinofila della protezione civile Padova"
+    },
+    "collaborators": [],
+    "languages": [
+      "Php"
+    ],
+    "tecnologies": [
+      "Telegram",
+      "Composer",
+      "Docker"
+    ],
+    "images":["https://www.alternativestudio.it/images/logo/logo-light.png"]
+  },
+  {
+    "year": {
+      "start": "2015-08-10",
+      "end": "2016-10-02"
+    },
+    "title": {"en":"ICT office's assistant","it":"Assistente dell'ufficio ICT "},
+    "content": {
+      "en":"Alternative studio collaboration",
+      "it":"Collaborazione con alternativestudio"
+    },
+    "collaborators": [],
+    "languages": [
+      "Php"
+    ],
+    "tecnologies": [
+      "Telegram",
+      "Composer",
+      "Docker"
+    ],
+    "images":["https://www.saxonhillacademy.org.uk/images/saxonhilllogo.jpg"]
   }
 ]

src/model/projects.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"]
+  }
+]