add new images and css

src/app.scss

@@ -16,14 +16,14 @@
 $basecolor:#E5E5E5;
 $basecolor2:#FFFFFF;
 // $basecolor2:#FCA311;
-$accent2: #FCA311;
+$accent2: #256EFF;
 $contrast: #14213D;
 $contrast2: #000000;
 $img-contrast: #14213D;
 
 $text-color: #011936;
-$border-color: #D77A61;
+$border-color: #256EFF;
-$button-border-color: #D77A61;
+$button-border-color: #256EFF;
 
 $min-tablet: 768px;
 $min-desktop: 1024px;
@@ -67,6 +67,8 @@ $default-border-radius:5px;
   }
 }
 
+
+
 a {
   text-decoration:none;
   color: $text-color;
@@ -76,4 +78,6 @@ button{
   color: $text-color;
 }
 
-h1, h2, h3 {}
+h1, h2, h3 {
+  font-weight: normal;
+}

src/elements/Contacts.svelte

@@ -1,7 +1,7 @@
 <script lang="ts"></script>
 
 <div class="contacts">
-	<img src="/profile_pic.jpg" alt="profile" class="profile" />
+	<img src="/profile_pic.webp" alt="profile" class="profile" />
 	<div class="links">
 		<ul>
 			<li>

src/elements/JobElement.svelte

@@ -14,7 +14,7 @@
 
 <div class="job-container">
 	<h3>{job.title[currentLanguage]}</h3>
-	<div>
+	<div class="content">
 		<div class="image-container">
 			{#each job.images as image}
 				<img src={image} alt={image} />
@@ -65,15 +65,26 @@
 		text-align: justify;
 	}
 	.added-info {
-		margin-top: 50px;
 		text-align: left;
 		font-size: smaller;
 	}
+	.content{
+		margin-top: 0;
+	}
 	.job-container {
+		img {
+			background-color: $text-color;
+		}
+		display: flex;
+		flex-direction: column;
+		justify-content: space-evenly;
 		background-color: $basecolor2;
-		// border: solid 1px $border-color;
 		border-radius: $default-border-radius;
 		padding: 30px;
-		margin: 30px;
+		margin:30px;
+		
+		@media (min-width: 1250px) {
+			width: 38%;
+		}
 	}
 </style>

src/elements/Jobs.svelte

@@ -7,17 +7,18 @@
 
 <div class="jobs-container">
 	{#each jobs as job}
-		<div class="item"><JobElement {job} {currentLanguage} /></div>
+		<JobElement {job} {currentLanguage} />
 	{/each}
 </div>
 
 <style lang="scss">
-	.jobs-container {
+	@import '../app.scss';
-		display: inline-grid;
+	@media (min-width: 1250px) {
-		grid-template-columns: 1fr 1fr;
+		.jobs-container {
-		col:nth-child(2n + 3) {
+			display: flex;
-			grid-column-start: 0;
+			justify-content: space-between;
-			grid-column-end: 1;
+			flex-wrap: wrap;
 		}
 	}
+
 </style>

src/elements/Menu.svelte

@@ -15,7 +15,6 @@
 		<a
 			use:scrollto={{ element: '#home', offset: -70 }}
 			href="#home"
-			alt={menu.home[currentLanguage]}
 		>
 			<span class="hide">{menu.home[currentLanguage]}</span><i class="fas fa-home" /></a
 		>
@@ -24,7 +23,6 @@
 			use:scrollto={{ element: '#jobs', offset: -70 }}
 			class="menu-element"
 			href="#jobs"
-			alt={menu.job[currentLanguage]}
 			><span class="hide">{menu.job[currentLanguage]}</span><i class="fas fa-user-tie" /></a
 		>
 
@@ -32,7 +30,6 @@
 			use:scrollto={{ element: '#training', offset: -70 }}
 			class="menu-element"
 			href="#training"
-			alt={menu.school[currentLanguage]}
 			><span class="hide">{menu.school[currentLanguage]}</span><i
 				class="fas fa-graduation-cap"
 			/></a
@@ -42,7 +39,6 @@
 			use:scrollto={{ element: '#portfolio', offset: -70 }}
 			class="menu-element"
 			href="#portfolio"
-			alt={menu.portfolio[currentLanguage]}
 			><span class="hide">{menu.portfolio[currentLanguage]}</span><i class="fas fa-user-clock" /></a
 		>
 
@@ -67,7 +63,6 @@
 		display: flex;
 	}
 	a {
-		border: solid $button-border-color 1px;
 		border-radius: $default-border-radius;
 		width: 50px;
 		margin: auto;
@@ -79,7 +74,8 @@
 		}
 	}
 	a:hover {
-		background-color: $accent2;
+		background-color: $text-color;
+		color: white;
 	}
 
 	@media (min-width: $min-tablet) {

src/model/jobs.json

@@ -26,7 +26,7 @@
       "Docker",
       "AWS"
     ],
-    "images":["/ALTEN.jpg"]
+    "images":["/ALTEN.webp"]
   },
   {
     "year": {
@@ -54,7 +54,7 @@
       "GitLab",
       "Nativescript"
     ],
-    "images":["/logo-jatus-tech.png"]
+    "images":["/logo-jatus-tech.webp"]
   },
   {
     "year": {
@@ -78,7 +78,7 @@
       "Nuxt",
       "Docker"
     ],
-    "images":["/logo-athesys.png"]
+    "images":["/logo-athesys.webp"]
   },
   {
     "year": {
@@ -99,7 +99,7 @@
       "Composer",
       "Docker"
     ],
-    "images":["/alternative-studio.png"]
+    "images":["/alternative-studio.webp"]
   },
   {
     "year": {
@@ -114,6 +114,6 @@
     "collaborators": [],
     "languages": [],
     "tecnologies": [],
-    "images":["/saxonhilllogo.jpg"]
+    "images":["/saxonhilllogo.webp"]
   }
 ]

src/model/portfolio.json

@@ -18,7 +18,7 @@
       "Svelte",
       "Node.js"
     ],
-    "images":["/webpage.png"]
+    "images":["/webpage.webp"]
   },
   {
     "year":{
@@ -50,7 +50,7 @@
     "tecnologies": [
       "QMK"
     ],
-    "images":["/custom-keyboard.jpg"]
+    "images":["/custom-keyboard.webp"]
   },
   {
     "year":{
@@ -64,7 +64,7 @@
     "collaborators":[],
     "languages":["bash","python"],
     "tecnologies":["raspberry"],
-    "images":["/3dprinter.jpg"]
+    "images":["/3dprinter.webp"]
   },{
     "year":{
       "start":"2021-09-15",
@@ -91,7 +91,7 @@
     "collaborators":[],
     "languages":[],
     "tecnologies":[],
-    "images":["/workstation.jpg"]
+    "images":["/workstation.webp"]
   },
   {
     "year":{
@@ -147,7 +147,7 @@
     "collaborators":[],
     "languages":["C++"],
     "tecnologies":["Qt"],
-    "images":["/QContainer.png"]
+    "images":["/QContainer.webp"]
   },
   {
     "year":{
@@ -160,7 +160,7 @@
     "collaborators":[{"name":"Giuseppe Vito","surname":"Bitetti","ref":"https://www.linkedin.com/in/giuseppe-vito-bitetti-587751200"}, {"name":"Enrico","surname":"Buratto","ref":"https://www.linkedin.com/in/enrico-buratto-04104b151"},{"name":"Mariano","surname":"Sciacco","ref":"https://www.linkedin.com/in/marianosciacco/"}],
     "languages":["PHP","SQL"],
     "tecnologies":["Apache","MariaDB"],
-    "images":["/techweb.png"]
+    "images":["/techweb.webp"]
   },
   {
     "year":{

src/model/training.json

@@ -10,7 +10,7 @@
     "collaborators": [],
     "languages": [],
     "tecnologies": [],
-    "images":["unipd-universita-di-padova.png"]
+    "images":["unipd-universita-di-padova.webp"]
   },
   {
     "year": {
@@ -24,6 +24,6 @@
     "collaborators": [],
     "languages": [],
     "tecnologies": [],
-    "images":["logoSeveri.png"]
+    "images":["logoSeveri.webp"]
   }
 ]

src/routes/index.svelte

@@ -3,7 +3,6 @@
 	import Jobs from '$elem/Jobs.svelte';
 	import Menu from '$elem/Menu.svelte';
 	import Training from '$elem/Training.svelte';
-	import Contacts from '$elem/Contacts.svelte';
 	import Data_jobs from '../model/jobs.json';
 	import Data_portfolio from '../model/portfolio.json';
 	import type { Schema } from 'src/model/job';
@@ -12,8 +11,8 @@
 	let currentLanguage: string = 'it';
 	let titles = {
 		home: {
-			it: 'Gianmarco Pettinato \n Software Developer',
+			it: 'Gianmarco Pettinato',
-			en: 'Gianmarco Pettinato \n Software Developer'
+			en: 'Gianmarco Pettinato'
 		},
 		job: { it: 'Esperienze', en: 'Experiences' },
 		school: { it: 'Formazione', en: 'Training' },
@@ -44,6 +43,7 @@
 	</div>
 	<div id="home" class="default">
 		<h1>{titles.home[currentLanguage]}</h1>
+		<h2>Software developer</h2>
 		<AboutMe {currentLanguage} />
 	</div>
 	<div id="jobs" class="default">
@@ -63,15 +63,16 @@
 <style lang="scss">
 	@import '../app.scss';
 	.language-selector {
-		width: 100%;
+		right: 0;
 		height: 30px;
 		text-align: center;
 		text-transform: uppercase;
-		background-color: $basecolor2;
 		padding-top: 10px;
 		display: flex;
 		flex-direction: row;
 		justify-content: end;
+		position: absolute;
+		z-index: 999;
 	}
 	.menu {
 		background-color: $basecolor2;
@@ -82,7 +83,7 @@
 		justify-content: center;
 		align-items: center;
 		padding: 10px;
-		border-bottom: solid black 1px;
+		border-bottom: solid #999 1px;
 	}
 
 	.custom-button {
@@ -96,11 +97,14 @@
 		margin-right: 5px;
 	}
 	.custom-button:hover {
-		background-color: $accent2;
+		
+		background-color: $text-color;
+		color: white;
 	}
 	.custom-button-active {
 		cursor: unset;
-		background-color: $accent2;
+		background-color: $text-color;
+		color: white;
 	}
 	@media (max-width: $min-tablet) {
 		.custom-button {