fixed performance issues

src/app.scss

@@ -1,21 +1,5 @@
-// $basecolor:#CDCBD6;
-// $basecolor2:#E3F5E7;
-// $accent2: #E3E8F5;
-// $contrast: #E3E8F5;
-// $contrast2: #F5E3F1;
-// $img-contrast: #F5E3F1;
-// @media (prefers-color-scheme: dark) {
-//   $basecolor:#140a0a;
-//   $basecolor2:#E3F5E7;
-//   $accent2: #E3E8F5;
-//   $contrast: #E3E8F5;
-//   $contrast2: #F5E3F1;
-//   $img-contrast:#00000000;
-// }
-
 $basecolor:#E5E5E5;
 $basecolor2:#FFFFFF;
-// $basecolor2:#FCA311;
 $accent2: #256EFF;
 $contrast: #14213D;
 $contrast2: #000000;
@@ -43,9 +27,6 @@ $default-border-radius:5px;
 
 .default{
   margin: auto;
-  // margin-top: 50px;
-  // margin-bottom: 50px;
-  // text-align: center;
   @media (min-width: $min-tablet) {
     width: 80%;
     max-width: 1024px;

src/elements/Contacts.svelte

@@ -26,6 +26,7 @@
 
 <style lang="scss">
 	@import '../app.scss';
+
 	img.profile {
 		border-radius: 50%;
 		max-width: 150px;
@@ -51,7 +52,14 @@
 			line-height: 20px;
 			white-space: nowrap;
 			li {
+				padding: 0;
+				margin: 10px;
 				margin-left: 0px;
+				margin-right: 0px;
+
+				a {
+					font-size: 18px !important;
+				}
 			}
 		}
 	}
@@ -60,5 +68,14 @@
 			flex-direction: row;
 			margin: auto;
 		}
+		.links {
+			ul {
+				li {
+					a {
+						font-size: auto !important;
+					}
+				}
+			}
+		}
 	}
 </style>

src/elements/JobElement.svelte

@@ -14,15 +14,13 @@
 
 <div class="job-container">
 	<h3>{job.title[currentLanguage]}</h3>
-	<div class="content">
-		<div class="image-container">
-			{#each job.images as image}
-				<img src={image} alt={image} />
-			{/each}
-		</div>
-		<div class="text-content">
-			{@html md.render(job.content[currentLanguage])}
-		</div>
+	<div class="image-container">
+		{#each job.images as image}
+			<img src={image} alt={image} loading="lazy" />
+		{/each}
+	</div>
+	<div class="text-content">
+		{@html md.render(job.content[currentLanguage])}
 	</div>
 	<div class="added-info">
 		{#if job.year.lenght != 0}
@@ -60,6 +58,10 @@
 
 <style lang="scss">
 	@import '../app.scss';
+	.job-container{
+		margin-top: 0;
+	}
+	
 	.text-content {
 		margin: auto;
 		text-align: justify;
@@ -68,9 +70,6 @@
 		text-align: left;
 		font-size: smaller;
 	}
-	.content{
-		margin-top: 0;
-	}
 	.job-container {
 		img {
 			background-color: $text-color;
@@ -80,11 +79,16 @@
 		justify-content: space-evenly;
 		background-color: $basecolor2;
 		border-radius: $default-border-radius;
-		padding: 30px;
-		margin:30px;
+		padding: 20px;
+		padding-top: 0px;
+		margin: 30px;
+		padding-bottom: 10px;
 
-		@media (min-width: 1250px) {
-			width: 38%;
+		@media (min-width: $min-desktop) {
+			width: 29vw;
+		}
+		@media (min-width: 1400px) {
+			width: 400px;
 		}
 	}
 </style>

src/elements/Jobs.svelte

@@ -13,12 +13,9 @@
 
 <style lang="scss">
 	@import '../app.scss';
-	@media (min-width: 1250px) {
-		.jobs-container {
-			display: flex;
-			justify-content: space-between;
-			flex-wrap: wrap;
-		}
+	.jobs-container {
+		display: flex;
+		justify-content: space-between;
+		flex-wrap: wrap;
 	}
-
 </style>

src/elements/Menu.svelte

@@ -12,33 +12,21 @@
 
 <div class="div-menu">
 	<div class="wrapper">
-		<a
-			use:scrollto={{ element: '#home', offset: -70 }}
-			href="#home"
-		>
+		<a use:scrollto={{ element: '#home', offset: -70 }} href="#home">
 			<span class="hide">{menu.home[currentLanguage]}</span><i class="fas fa-home" /></a
 		>
 
-		<a
-			use:scrollto={{ element: '#jobs', offset: -70 }}
-			class="menu-element"
-			href="#jobs"
+		<a use:scrollto={{ element: '#jobs', offset: -70 }} class="menu-element" href="#jobs"
 			><span class="hide">{menu.job[currentLanguage]}</span><i class="fas fa-user-tie" /></a
 		>
 
-		<a
-			use:scrollto={{ element: '#training', offset: -70 }}
-			class="menu-element"
-			href="#training"
+		<a use:scrollto={{ element: '#training', offset: -70 }} class="menu-element" href="#training"
 			><span class="hide">{menu.school[currentLanguage]}</span><i
 				class="fas fa-graduation-cap"
 			/></a
 		>
 
-		<a
-			use:scrollto={{ element: '#portfolio', offset: -70 }}
-			class="menu-element"
-			href="#portfolio"
+		<a use:scrollto={{ element: '#portfolio', offset: -70 }} class="menu-element" href="#portfolio"
 			><span class="hide">{menu.portfolio[currentLanguage]}</span><i class="fas fa-user-clock" /></a
 		>
 
@@ -52,7 +40,14 @@
 	@import '../app.scss';
 	@import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
 	.hide {
-		display: none;
+		@media (max-width: $min-tablet) {
+			position: absolute;
+			left: -10000px;
+			top: auto;
+			width: 1px;
+			height: 1px;
+			overflow: hidden;
+		}
 	}
 	.div-menu {
 		width: 100%;
@@ -79,9 +74,6 @@
 	}
 
 	@media (min-width: $min-tablet) {
-		.hide {
-			display: unset;
-		}
 		a {
 			width: 130px;
 			i {

src/elements/Training.svelte

@@ -16,7 +16,7 @@
 		<div class="element">
 			<img src={school.images[0]} alt="school logo" />
 			<div>
-				<h4>{school.title[currentLanguage]}</h4>
+				<h3>{school.title[currentLanguage]}</h3>
 				<p>{school.content[currentLanguage]}</p>
 				<p>{school.year.start} - {school.year.end}</p>
 			</div>
@@ -27,7 +27,10 @@
 <style lang="scss">
 	@import '../app.scss';
 	.training {
-		width: 100%;
+		background-color: white;
+		border-radius: $default-border-radius;
+		margin: 30px;
+		padding: 20px;
 	}
 	.element {
 		display: flex;

src/model/jobs.json

@@ -35,8 +35,8 @@
     },
     "title": {"en":"Jatus.tech my start-up","it":"La mia start-up Jatus.tech"},
     "content": {
-      "en":"Through the 2021, I've worked 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 del 2021 ho lavorato, 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."
+      "en":"In 2021, I worked to open a start-up with an app idea.\n To do so, I learned a lot of different skills, including how to set up a server with all my services running in **Docker**, set up a **GitLab** server, **design and build** an application infrastructure, and set up a private registry for **npm** and **docker images**.\n  Furthermore, I configured all the **automation pipelines** to streamline the software distribution in virtualized environments and build the application **proof of concept** to demo to potential customers.",
+      "it":"Nel corso del 2021 ho lavorato, per avviare una attività indipendente che si basa su una mia idea di servizio. Per far ciò, durante questo periodo ho imparato a creare un'infrastruttura di lavoro, su un server **GNU\/Linux** dove centralizzare le risorse con **GitLab** in container  **Docker**.\n Per semplificare la distribuzione di elementi di sviluppo ho integrato un *repository* privato di pacchetti **npm** e immagini **Docker**. Oltre alle mansioni da sistemista e devops ho progettato e scritto il **Proof of concept** del mio servizio per dimostrarlo a potenziali clienti"
     },
     "collaborators": [],
     "languages": [

src/model/portfolio.json

@@ -31,7 +31,7 @@
     "collaborators":[],
     "languages":["TypeScript"],
     "tecnologies":["Node.js"],
-    "images":[]
+    "images":["./DGCServerVerifier.webp"]
   },
   {
     "year": {
@@ -77,7 +77,7 @@
     "collaborators":[],
     "languages":["YAML"],
     "tecnologies":["Docker","Unraid","GNU/Linux"],
-    "images":[]
+    "images":["./unraid.webp"]
   },
   {
     "year":{
@@ -105,7 +105,7 @@
     "collaborators":[{"name":"Gezim","surname":"Cikaqi","ref":"https://www.linkedin.com/in/gezimcikaqi/"},{"name":"Gabriel","surname":"Ciulei","ref":"https://www.linkedin.com/in/gabriel-ciulei/"},{"name":"Simone","surname":"Franconetti","ref":"https://www.linkedin.com/in/simone-franconetti-2b48b4147/"},{"name":"Giovanni","surname":"Incalza","ref":"https://www.linkedin.com/in/giovanni-incalza/"},{"name":"Nicola","surname":"Salvadore","ref":"https://www.linkedin.com/in/nicola-salvadore-02b015210/"},{"name":"Paola","surname":"Trevisan","ref":"https://www.linkedin.com/in/paola-trevisan-166891113/"}],
     "languages":["TypeScript","Solidity","YAML"],
     "tecnologies":["Node.js","AWS Lambda","Docker","GitHub Action","Ethereum"],
-    "images":[]
+    "images":["./tenners.webp"]
   },
   {
     "year":{
@@ -119,7 +119,7 @@
     "collaborators":[],
     "languages":["bash"],
     "tecnologies":["Docker","GitHub Action"],
-    "images":[]
+    "images":["./LatexMulticompiler.webp"]
   },
   {
     "year":{
@@ -133,7 +133,7 @@
     "collaborators":[],
     "languages":["bash"],
     "tecnologies":["Docker","GitHub Action"],
-    "images":[]
+    "images":["/spellCheck.webp"]
   },
   {
     "year":{
@@ -174,6 +174,6 @@
     "collaborators":[{"name":"Mariano","surname":"Sciacco","ref":"https://www.linkedin.com/in/marianosciacco/"}],
     "languages":["C++","SWL","ANTLR grammar"],
     "tecnologies":["ANTLR"],
-    "images":[]
+    "images":["./SWL.webp"]
   }
 ]

src/routes/index.svelte

@@ -21,7 +21,7 @@
 	};
 </script>
 
-<main class="material-theme dark-theme light-theme body">
+<main>
 	<!-- svelte-ignore a11y-invalid-attribute -->
 	<div class="language-selector" id="language-selector">
 		<button
@@ -73,6 +73,13 @@
 		justify-content: end;
 		position: absolute;
 		z-index: 999;
+		@media (max-width: $min-desktop) {			
+			width: 100%;
+			position: unset;
+			padding-bottom: 10px;
+			background-color: $basecolor2;
+
+		}
 	}
 	.menu {
 		background-color: $basecolor2;