almost done

default.conf

@@ -0,0 +1,18 @@
+server {
+    # The port to listen on
+    listen 80;
+    # The root directory, which must exactly match the internal volume share
+    root /usr/share/nginx/html;
+
+    # For all files with the PHP extension run the following
+    location ~ ^/.+\.php(/|$) {
+        # Pass the request to the host "php" and port 9000 (default PHP-FPM port)
+        fastcgi_pass  php:9000;
+	# Include the default NGINX FastCGI Parameters
+        include       fastcgi_params;
+	# Define one additional parameter telling PHP-FPM where to find the file
+        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
+    }
+    add_header Cache-Control no-cache;
+    expires 1s;
+}

docker-compose.yml

@@ -0,0 +1,23 @@
+# The specification version of docker-compose
+version: "3.9"
+# The collection of applications composing this service
+services:
+  # The NGINX custom container
+  web:
+    # Instead of referencing image: nginx:mainline-alpine here, use build to
+    # reference the current directory (.), which will look for a dockerfile
+    # by default
+    build: .
+    # The external directory location to map to an internal location
+    volumes:
+      - /home/gianm/Project/myCv/build:/usr/share/nginx/html
+    # The external port mapping to internal port mapping
+    ports:
+      - "80:80"
+  php:
+    image: php:fpm-alpine
+    ports:
+      - "9000:9000"
+    # It is important that both containers can reference the same files
+    volumes:
+      - /home/gianm/Project/myCv/build:/usr/share/nginx/html

dockerfile

@@ -0,0 +1,6 @@
+# The image to pull the base configuration from
+FROM nginx:mainline-alpine
+# The directory where any additional files will be referenced
+WORKDIR /home/gianm/Project/myCv/build
+# Copy the custom default.conf from the WORKDIR (.) and overwrite the existing internal configuration in the NGINX container
+COPY ./default.conf /etc/nginx/conf.d/default.conf

package-lock.json

@@ -10,7 +10,9 @@
       "dependencies": {
         "@fortawesome/fontawesome-free": "^5.15.4",
         "json-schema-to-typescript": "^10.1.5",
-        "milligram": "^1.4.1"
+        "markdown-it": "^12.2.0",
+        "milligram": "^1.4.1",
+        "punycode": "^2.1.1"
       },
       "devDependencies": {
         "@sveltejs/adapter-static": "^1.0.0-next.20",
@@ -891,6 +893,14 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/entities": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
+      "integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==",
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/es5-ext": {
       "version": "0.10.53",
       "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.53.tgz",
@@ -1986,6 +1996,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/linkify-it": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz",
+      "integrity": "sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==",
+      "dependencies": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -2038,6 +2056,26 @@
         "sourcemap-codec": "^1.4.4"
       }
     },
+    "node_modules/markdown-it": {
+      "version": "12.2.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.2.0.tgz",
+      "integrity": "sha512-Wjws+uCrVQRqOoJvze4HCqkKl1AsSh95iFAeQDwnyfxM09divCBSXlDR1uTvyUP3Grzpn4Ru8GeCxYPM8vkCQg==",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "~2.1.0",
+        "linkify-it": "^3.0.1",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.js"
+      }
+    },
+    "node_modules/markdown-it/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+    },
     "node_modules/marked": {
       "version": "1.2.9",
       "resolved": "https://registry.npmjs.org/marked/-/marked-1.2.9.tgz",
@@ -2050,6 +2088,11 @@
         "node": ">= 8.16.2"
       }
     },
+    "node_modules/mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
+    },
     "node_modules/memoizee": {
       "version": "0.4.15",
       "resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.4.15.tgz",
@@ -2383,7 +2426,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -3025,6 +3067,11 @@
         "node": ">=4.2.0"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -3761,6 +3808,11 @@
         "ansi-colors": "^4.1.1"
       }
     },
+    "entities": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
+      "integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w=="
+    },
     "es5-ext": {
       "version": "0.10.53",
       "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.53.tgz",
@@ -4564,6 +4616,14 @@
       "optional": true,
       "peer": true
     },
+    "linkify-it": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz",
+      "integrity": "sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==",
+      "requires": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -4613,12 +4673,36 @@
         "sourcemap-codec": "^1.4.4"
       }
     },
+    "markdown-it": {
+      "version": "12.2.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.2.0.tgz",
+      "integrity": "sha512-Wjws+uCrVQRqOoJvze4HCqkKl1AsSh95iFAeQDwnyfxM09divCBSXlDR1uTvyUP3Grzpn4Ru8GeCxYPM8vkCQg==",
+      "requires": {
+        "argparse": "^2.0.1",
+        "entities": "~2.1.0",
+        "linkify-it": "^3.0.1",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "dependencies": {
+        "argparse": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+        }
+      }
+    },
     "marked": {
       "version": "1.2.9",
       "resolved": "https://registry.npmjs.org/marked/-/marked-1.2.9.tgz",
       "integrity": "sha512-H8lIX2SvyitGX+TRdtS06m1jHMijKN/XjfH6Ooii9fvxMlh8QdqBfBDkGUpMWH2kQNrtixjzYUa3SH8ROTgRRw==",
       "dev": true
     },
+    "mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
+    },
     "memoizee": {
       "version": "0.4.15",
       "resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.4.15.tgz",
@@ -4865,8 +4949,7 @@
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
-      "dev": true
     },
     "queue-microtask": {
       "version": "1.2.3",
@@ -5291,6 +5374,11 @@
       "integrity": "sha512-4xfscpisVgqqDfPaJo5vkd+Qd/ItkoagnHpufr+i2QCHBsNYp+G7UAoyFl8aPtx879u38wPV65rZ8qbGZijalA==",
       "dev": true
     },
+    "uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+    },
     "uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",

package.json

@@ -32,6 +32,8 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.4",
     "json-schema-to-typescript": "^10.1.5",
-    "milligram": "^1.4.1"
+    "markdown-it": "^12.2.0",
+    "milligram": "^1.4.1",
+    "punycode": "^2.1.1"
   }
 }

src/app.html

@@ -8,7 +8,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%svelte.head%
 	</head>
-	<body>
+	<body id="svelte">
-		<div id="svelte">%svelte.body%</div>
+		%svelte.body%
 	</body>
 </html>

src/elements/aboutMe.svelte

@@ -103,6 +103,7 @@
     width: 90%;
     margin: auto;
     text-justify: distribute;
+    text-align: justify;
   }
 
   .header{

src/elements/jobs.svelte

@@ -1,4 +1,10 @@
 <script lang="ts">
+  import MarkdownIt from 'markdown-it'
+  const md = new MarkdownIt({
+    html:true,
+    xhtmlOut:true,
+    typographer:  true,
+  });
   import data from '../model/jobs.json'
   import type { Schema } from 'src/model/job';
   export let currentLanguage = 'it'
@@ -18,8 +24,8 @@
             <img src="{image}" alt="realtive to the article"/>
           {/each}
         </div>
-        <div class="text-content {job.images.length!=0 ?'left':''}" id="{index.toString()}">
+        <div class="text-content"  id="{index.toString()}">
-            <p>{job.content[currentLanguage]}</p>
+            <p>{@html md.render(job.content[currentLanguage])}</p>
         </div>
       </div>
       <div class="added-info">
@@ -83,10 +89,7 @@
 
   .job-content{
     padding: 2vh;
-    display: flex;
+    // background-color: yellow;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-    align-items: center;
   }
   
   .added-info{
@@ -94,9 +97,8 @@
   }
 
   .text-content{
-    height: auto;
+    margin: auto;
-    margin-left: 2.5vw;
+    text-align: justify;
-    margin-right: 2.5vw;
   }
   
 
@@ -105,7 +107,6 @@
     max-height: 500px;
     background-color: $rich-black-fogra-29;
     text-align: center;
-    // min-height: 200px;
   }
 
   @media screen and (min-width: 600px) {

src/elements/menu.svelte

@@ -7,7 +7,7 @@
               job:{it:"Esperienze",en:"Experiences"},
               school:{it:"Formazione",en:"Training"},
               contacts:{it:"Contatti",en:"Contacts"},
-              hobbies:{it:"Tempo libero",en:"Hobbies"}}
+              hobbies:{it:"Portfolio",en:"Portfolio"}}
 </script>
 
 <div class="div-menu">

src/elements/portfolio.svelte

@@ -1,5 +1,12 @@
 <script lang="ts">
-  import data from '../model/hobby.json'
+  import MarkdownIt from 'markdown-it'
+  const md = new MarkdownIt({
+    html:true,
+    xhtmlOut:true,
+    typographer:  true,
+    linkify:      true
+  });
+  import data from '../model/portfolio.json'
   import type { Schema } from 'src/model/job';
   export let currentLanguage = 'it'
   const hobbies:Schema[] = data as Schema[];
@@ -12,18 +19,24 @@
   {#each hobbies as hobby }
     <div class="hobby">
       <h3>{hobby.title[currentLanguage]}</h3>
+      <div class="content">
         <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]}
+          {@html md.render(hobby.content[currentLanguage])}
         </div>
         <div class="added-info">
-        {#each hobby.tecnologies as tecnology }
+          <p>{#each hobby.languages as language }
+            {language+" "}
+          {/each}</p>
+          
+          <p>{#each hobby.tecnologies as tecnology }
             {tecnology+" "}
-        {/each}
+          {/each}</p>
+        </div>
       </div>
     </div>
   {/each}
@@ -82,10 +95,20 @@
     max-height: 250px;
   }
 
+  .content{
+    width: 90%;
+    margin: auto;
+    text-align: center;
+  }
+
   .added-info{
     font-size: 15px;
   }
 
+  .hobby-text{
+    text-align: justify;
+  }
+
   @media screen and (min-width: 600px) {
     .extraContainer{
       display: flex;

src/elements/projects.svelte

@@ -1,126 +0,0 @@
-<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/elements/training.svelte

@@ -1,9 +1,31 @@
-<script lang="ts"></script>
+<script lang="ts">
+  import MarkdownIt from 'markdown-it'
+  const md = new MarkdownIt({
+    html:true,
+    xhtmlOut:true,
+    typographer:  true,
+  });
+  import data from '../model/training.json'
+  import type { Schema } from 'src/model/job';
+  export let currentLanguage = 'it'
+  const training:Schema[] = data as Schema[];
+
+  export function changeLanguage(language = 'it'){
+    currentLanguage = language
+  }
+</script>
 <div class="trainingContainer">
   <div class="training">
-    <p>
+    {#each training as school }
-      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.
+      <div class="element">
-    </p>
+        <img src="{school.images[0]}" alt="school logo" />
+        <div>
+          <h4>{school.title[currentLanguage]}</h4>
+          <p>{school.content[currentLanguage]}</p>
+          <p>{school.year.start} - {school.year.end}</p>
+        </div>
+      </div>
+    {/each}
   </div>
 </div>
 <style lang="scss">
@@ -30,6 +52,29 @@
     padding-bottom: 1vh;
   }
 
+  .element{
+    padding: 1vw;
+    width: auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .element>img{
+    width: 35%;
+  }
+
+  .element>div{
+    max-width: 50%;
+    margin: auto;
+    justify-self: end;
+  }
+  
+  .element>div>p{
+    text-align: center;
+    overflow-wrap: break-word;
+    text-align: justify;
+  }
+
   .training{
     background-color: $cultured;
     text-align: center;
@@ -43,10 +88,6 @@
     border-width: 0.1px;
   }
 
-  .training>p{
-    width: 95%;
-    margin: auto;
-  }
   @media screen and (min-width: 600px) {
     .trainingContainer{
       display: flex;

src/model/data.ts

@@ -1,4 +0,0 @@
-import * as jobCollection from './jobs.json';
-import * as hobbyCollection from './hobby.json';
-jobCollection;
-hobbyCollection;

src/model/hobby.json

@@ -1,44 +0,0 @@
-[
-  {
-    "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",
-      "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"]
-  }
-]

src/model/jobs.json

@@ -1,4 +1,32 @@
 [
+  {
+    "year": {
+      "start": "2020-09-21",
+      "end": "2021-10-02"
+    },
+    "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.",
+      "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."
+    },
+    "collaborators": [],
+    "languages": [
+      "typescript",
+      "bash",
+      "docker-file",
+      "yaml",
+      "json"
+    ],
+    "tecnologies": [
+      "Vuejs",
+      "Nodejs",
+      "Nuxt",
+      "Docker",
+      "GitLab",
+      "Nativescript"
+    ],
+    "images":["/logo-jatus-tech.png"]
+  },
   {
     "year": {
       "start": "2020-09-21",
@@ -6,8 +34,8 @@
     },
     "title": {"en":"intership in Athesys","it":"tirocinio in Athesys"},
     "content": {
-      "en":"intership in Athesys",
+      "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":"tirocinio in Athesys"
+      "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"
     },
     "collaborators": [],
     "languages": [
@@ -30,8 +58,8 @@
     },
     "title": {"en":"Developer in Alternative Studio","it":"Sviluppatore in Alternative Studio"},
     "content": {
-      "en":"Alternative studio collaboration",
+      "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 Padova"
+      "it":"Progettazione e sviluppo di un Bot Telegram con comunicazione diretta al gestionale per la sezione cinofila della protezione civile"
     },
     "collaborators": [],
     "languages": [
@@ -51,8 +79,8 @@
     },
     "title": {"en":"ICT office's assistant","it":"Assistente dell'ufficio ICT "},
     "content": {
-      "en":"Alternative studio collaboration",
+      "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":"Collaborazione con alternativestudio"
+      "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\"  "
     },
     "collaborators": [],
     "languages": [

src/model/portfolio.json

@@ -0,0 +1,151 @@
+[
+  {
+    "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-09-15",
+      "end":"2021-09-28"},
+    "title":{"en":"Greenpass server validator","it":"Greenpass server validatore"},
+    "content":{"en":"I've created a server in Typescript with Express.js endpoints that can read the raw data from a Green pass Qrcode and establish if it is valid with the Italian regulations.","it":"Ho creato un server in typescript e express che leggendo i dati *raw* del Qr code del green pass può determinarne la sua validità, ho [rilasciato il software](https://git.jatus.tech/Jatus/dgcserververifier)  in licenza AGPLv3 come previsto dalla librearia DCC utils rilasciata dal ministero della salute italiano"},
+    "collaborators":[],
+    "languages":["typescript"],
+    "tecnologies":["Nodejs"],
+    "images":[]
+  },
+  {
+    "year": {
+      "start": "2021-04-01",
+      "end": "2021-05-02"
+    },
+    "title": {"en":"Keyboard","it":"Tastiera"},
+    "content": {
+      "en":"",
+      "it":""
+    },
+    "collaborators": [],
+    "languages": [
+      "C"
+    ],
+    "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"]
+  },
+  {
+    "year":{
+      "start":"2021-09-15",
+      "end":"2021-09-30"},
+    "title":{"en":"Progetto stampante 3D che utilizzo per stampare le mie idee.","it":"Progetto stampante 3D che utilizzo per stampare le mie idee."},
+    "content":{"en":"","it":"Ho creato un server in typescript e express che leggendo i dati *raw* del Qr code del green pass può determinarne la sua validità, ho [rilasciato il software](https://git.jatus.tech/Jatus/dgcserververifier)  in licenza AGPLv3 come previsto dalla librearia DCC utils rilasciata dal ministero della salute italiano"},
+    "collaborators":[],
+    "languages":[],
+    "tecnologies":[],
+    "images":[]
+  },{
+    "year":{
+      "start":"2021-09-15",
+      "end":"2021-09-30"},
+    "title":{"en":"Server","it":"Server"},
+    "content":{"en":"","it":"Ho creato un server in typescript e express che leggendo i dati *raw* del Qr code del green pass può determinarne la sua validità, ho [rilasciato il software](https://git.jatus.tech/Jatus/dgcserververifier)  in licenza AGPLv3 come previsto dalla librearia DCC utils rilasciata dal ministero della salute italiano"},
+    "collaborators":[],
+    "languages":[],
+    "tecnologies":[],
+    "images":[]
+  },
+  {
+    "year":{
+      "start":"2021-09-15",
+      "end":"2021-09-30"},
+    "title":{"en":"Progetto PC workstation","it":"Progetto PC workstation"},
+    "content":{"en":"","it":"Ho creato un server in typescript e express che leggendo i dati *raw* del Qr code del green pass può determinarne la sua validità, ho [rilasciato il software](https://git.jatus.tech/Jatus/dgcserververifier)  in licenza AGPLv3 come previsto dalla librearia DCC utils rilasciata dal ministero della salute italiano"},
+    "collaborators":[],
+    "languages":[],
+    "tecnologies":[],
+    "images":[]
+  },
+  {
+    "year":{
+      "start":"2021-09-15",
+      "end":"2021-09-30"},
+    "title":{"en":"Progetto di Ingegneria del Software Etherless con il Gruppo Tenners","it":"Progetto di Ingegneria del Software Etherless con il Gruppo Tenners"},
+    "content":{"en":"","it":"Ho creato un server in typescript e express che leggendo i dati *raw* del Qr code del green pass può determinarne la sua validità, ho [rilasciato il software](https://git.jatus.tech/Jatus/dgcserververifier)  in licenza AGPLv3 come previsto dalla librearia DCC utils rilasciata dal ministero della salute italiano"},
+    "collaborators":[],
+    "languages":[],
+    "tecnologies":[],
+    "images":[]
+  },
+  {
+    "year":{
+      "start":"2021-09-15",
+      "end":"2021-09-30"},
+    "title":{"en":"compilatore Latex per diversi documenti","it":"compilatore Latex per diversi documenti"},
+    "content":{"en":"","it":"Ho creato un server in typescript e express che leggendo i dati *raw* del Qr code del green pass può determinarne la sua validità, ho [rilasciato il software](https://git.jatus.tech/Jatus/dgcserververifier)  in licenza AGPLv3 come previsto dalla librearia DCC utils rilasciata dal ministero della salute italiano"},
+    "collaborators":[],
+    "languages":[],
+    "tecnologies":[],
+    "images":[]
+  },
+  {
+    "year":{
+      "start":"2021-09-15",
+      "end":"2021-09-30"},
+    "title":{"en":"compilatore aspell per diversi documenti","it":"compilatore aspell per diversi documenti"},
+    "content":{"en":"","it":"Ho creato un server in typescript e express che leggendo i dati *raw* del Qr code del green pass può determinarne la sua validità, ho [rilasciato il software](https://git.jatus.tech/Jatus/dgcserververifier)  in licenza AGPLv3 come previsto dalla librearia DCC utils rilasciata dal ministero della salute italiano"},
+    "collaborators":[],
+    "languages":[],
+    "tecnologies":[],
+    "images":[]
+  },
+  {
+    "year":{
+      "start":"2021-09-15",
+      "end":"2021-09-30"},
+    "title":{"en":"PAO","it":"PAO"},
+    "content":{"en":"","it":"Ho creato un server in typescript e express che leggendo i dati *raw* del Qr code del green pass può determinarne la sua validità, ho [rilasciato il software](https://git.jatus.tech/Jatus/dgcserververifier)  in licenza AGPLv3 come previsto dalla librearia DCC utils rilasciata dal ministero della salute italiano"},
+    "collaborators":[],
+    "languages":[],
+    "tecnologies":[],
+    "images":[]
+  },
+  {
+    "year":{
+      "start":"2021-09-15",
+      "end":"2021-09-30"},
+    "title":{"en":"Tech web","it":"Tech web"},
+    "content":{"en":"","it":"Ho creato un server in typescript e express che leggendo i dati *raw* del Qr code del green pass può determinarne la sua validità, ho [rilasciato il software](https://git.jatus.tech/Jatus/dgcserververifier)  in licenza AGPLv3 come previsto dalla librearia DCC utils rilasciata dal ministero della salute italiano"},
+    "collaborators":[],
+    "languages":[],
+    "tecnologies":[],
+    "images":[]
+  },
+  {
+    "year":{
+      "start":"2021-09-15",
+      "end":"2021-09-30"},
+    "title":{"en":"antrl parser Swl","it":"antrl parser Swl"},
+    "content":{"en":"","it":"Ho creato un server in typescript e express che leggendo i dati *raw* del Qr code del green pass può determinarne la sua validità, ho [rilasciato il software](https://git.jatus.tech/Jatus/dgcserververifier)  in licenza AGPLv3 come previsto dalla librearia DCC utils rilasciata dal ministero della salute italiano"},
+    "collaborators":[],
+    "languages":[],
+    "tecnologies":[],
+    "images":[]
+  }
+]

src/model/projects.json

@@ -1,23 +0,0 @@
-[
-  {
-    "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"]
-  }
-]

src/model/training.json

@@ -0,0 +1,28 @@
+[
+  {
+    "year": {
+      "start": "2016",
+      "end": "2020"
+    },
+    "title": {"en":"Bachelor's degree in Computer Science (EQF 6): ","it":"Laurea triennale in Scienze Informatiche (EQF 6)"},
+    "content": {
+      "en":"Computer Science, Università degli studi di Padova","it":"Corso triennale in Informatica all'Università degli studi di Padova"},
+    "collaborators": [],
+    "languages": [],
+    "tecnologies": [],
+    "images":["http://www.jobsanita.it/wp-content/uploads/2020/06/unipd-universita-di-padova.png"]
+  },
+  {
+    "year": {
+      "start": "2007",
+      "end": "2013"
+    },
+    "title": {"en":"High School diploma, Liceo Scientifico Tecnologico (EQF 4): ","it":"Diploma di maturità di Liceo Scientifico Tecnologico (EQF 4)"},
+    "content": {
+      "en":"The scientific and technological high school I.T.I.S. Severi di Padova where instead of Latin, there were more physics, chemistry and basic programming lessons.","it":"Corso di liceo scientifico tecnologico all'istituto I.T.I.S. Severi di Padova, dove al posto del Latino i corsi puntavano di più su fisica, chimica e dei corsi introduttivi alla programmazione"},
+    "collaborators": [],
+    "languages": [],
+    "tecnologies": [],
+    "images":["https://www.itiseveripadova.edu.it/images/logoSeveri100x100.png"]
+  }
+]

src/routes/index.svelte

@@ -2,24 +2,28 @@
   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 Portfolio from '$elem/portfolio.svelte';
   import Training from '$elem/training.svelte'
   import Contacts from '$elem/contacts.svelte'
   let jobsHandler: Jobs;
   let menuHandler: Menu;
   let aboutMe:AboutMe;
+  let trainingHandler: Training;
+  let portfolioHandler: Portfolio;
   let currentLanguage: string ='it';
   function changeLanguage(language:string){
     console.log(language);
     jobsHandler.changeLanguage(language);
     menuHandler.changeLanguage(language);
     aboutMe.changeLanguage(language);
+    trainingHandler.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"},
-              hobbies:{it:"Tempo libero",en:"Hobbies"}}
+              hobbies:{it:"Portfolio",en:"Portfolio"}}
 </script>
 <div class="maindiv">
   <!-- svelte-ignore a11y-invalid-attribute -->
@@ -36,11 +40,11 @@
   </div>
   <div class="content" id="school">
     <h2>{titles.school[currentLanguage]}</h2>
-    <Training/>
+    <Training bind:this="{trainingHandler}"/>
   </div> 
   <div class="content" id="hobbies">
     <h2>{titles.hobbies[currentLanguage]}</h2>
-    <Extra />
+    <Portfolio bind:this="{portfolioHandler}"/>
   </div> 
   <div class="content" id="contacts">
     <h2>{titles.contacts[currentLanguage]}</h2>