add blog

Jenkinsfile

@@ -1 +1,13 @@
-{
+pipeline {
+    agent any
+    stages {
+        stage('Build') {
+            npm run build
+        }
+        stage('Deploy') {
+            steps {
+                echo 'Deploying....'
+            }
+        }
+    }
+}

package-lock.json

@@ -34,6 +34,7 @@
         "svelte": "^3.42.6",
         "svelte-check": "^2.2.6",
         "svelte-jester": "^2.1.5",
+        "svelte-meta-tags": "^2.5.5",
         "svelte-preprocess": "^4.9.4",
         "svelte-preprocess-markdown": "^2.7.3",
         "svelte-scrollto": "^0.2.0",
@@ -8212,6 +8213,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/schema-dts": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/schema-dts/-/schema-dts-1.1.0.tgz",
+      "integrity": "sha512-vdmbs/5ycj4zyKpZIDqTcy+IZi4s7c38RVAYuDmRi7zgxUT8wRWPMLzg0jr7FjdVunYu9yZ00F3+XcZTTFcTOQ==",
+      "dev": true,
+      "peerDependencies": {
+        "typescript": ">=4.1.0"
+      }
+    },
     "node_modules/semver": {
       "version": "7.3.5",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
@@ -8541,6 +8551,18 @@
         "svelte": ">= 3"
       }
     },
+    "node_modules/svelte-meta-tags": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/svelte-meta-tags/-/svelte-meta-tags-2.5.5.tgz",
+      "integrity": "sha512-15eS7pxg6i4FKZ4j8tUToEPjmcFReRbpQdapZ18rUq+vccw53/xEK4rFqqrH+JjR+SNRlLhuVYWLCzt2b+cjkQ==",
+      "dev": true,
+      "dependencies": {
+        "schema-dts": "1.1.0"
+      },
+      "peerDependencies": {
+        "svelte": "^3.39.0"
+      }
+    },
     "node_modules/svelte-preprocess": {
       "version": "4.9.7",
       "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.9.7.tgz",
@@ -15558,6 +15580,13 @@
         "xmlchars": "^2.2.0"
       }
     },
+    "schema-dts": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/schema-dts/-/schema-dts-1.1.0.tgz",
+      "integrity": "sha512-vdmbs/5ycj4zyKpZIDqTcy+IZi4s7c38RVAYuDmRi7zgxUT8wRWPMLzg0jr7FjdVunYu9yZ00F3+XcZTTFcTOQ==",
+      "dev": true,
+      "requires": {}
+    },
     "semver": {
       "version": "7.3.5",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
@@ -15805,6 +15834,15 @@
       "dev": true,
       "requires": {}
     },
+    "svelte-meta-tags": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/svelte-meta-tags/-/svelte-meta-tags-2.5.5.tgz",
+      "integrity": "sha512-15eS7pxg6i4FKZ4j8tUToEPjmcFReRbpQdapZ18rUq+vccw53/xEK4rFqqrH+JjR+SNRlLhuVYWLCzt2b+cjkQ==",
+      "dev": true,
+      "requires": {
+        "schema-dts": "1.1.0"
+      }
+    },
     "svelte-preprocess": {
       "version": "4.9.7",
       "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.9.7.tgz",

package.json

@@ -30,6 +30,7 @@
     "svelte": "^3.42.6",
     "svelte-check": "^2.2.6",
     "svelte-jester": "^2.1.5",
+    "svelte-meta-tags": "^2.5.5",
     "svelte-preprocess": "^4.9.4",
     "svelte-preprocess-markdown": "^2.7.3",
     "svelte-scrollto": "^0.2.0",
@@ -46,4 +47,4 @@
     "milligram": "^1.4.1",
     "punycode": "^2.1.1"
   }
-}
+}

src/elements/AboutMe.svelte

@@ -61,6 +61,6 @@
 		// border: solid 1px $border-color;
 		border-radius: $default-border-radius;
 		padding: 30px;
-		margin: 30px;
+		margin: 10px;
 	}
 </style>

src/elements/Contacts.svelte

@@ -1,7 +1,7 @@
 <script lang="ts"></script>
 
 <div class="contacts">
-	<img src="/profile_pic.webp" alt="profile" class="profile" />
+	<img src="/profile_pic.webp" alt="profile" class="profile"  />
 	<div class="links">
 		<ul>
 			<li>
@@ -37,7 +37,6 @@
 		// border: solid 1px $border-color;
 		border-radius: $default-border-radius;
 		padding: 30px;
-		margin: 30px;
 		display: flex;
 		flex-direction: column;
 		justify-content: space-evenly;

src/elements/JobElement.svelte

@@ -58,10 +58,6 @@
 
 <style lang="scss">
 	@import '../app.scss';
-	.job-container{
-		margin-top: 0;
-	}
-	
 	.text-content {
 		margin: auto;
 		text-align: justify;
@@ -76,19 +72,6 @@
 		}
 		display: flex;
 		flex-direction: column;
-		justify-content: space-evenly;
+		height: 100%;
-		background-color: $basecolor2;
-		border-radius: $default-border-radius;
-		padding: 20px;
-		padding-top: 0px;
-		margin: 30px;
-		padding-bottom: 10px;
-
-		@media (min-width: $min-desktop) {
-			width: 29vw;
-		}
-		@media (min-width: 1400px) {
-			width: 400px;
-		}
 	}
 </style>

src/elements/Jobs.svelte

@@ -2,13 +2,20 @@
 	import type { Schema } from 'src/model/job';
 	import JobElement from './JobElement.svelte';
 	export let currentLanguage = '';
+	export let isBlogContainer = false;
 	export let jobs: Schema[] = [];
 </script>
 
 <div class="jobs-container">
-	{#each jobs as job}
+	{#if isBlogContainer}
-		<JobElement {job} {currentLanguage} />
+		{#each jobs as job}
-	{/each}
+			<a href="#" class="job-card"><JobElement {job} {currentLanguage} /></a>
+		{/each}
+	{:else}
+		{#each jobs as job}
+			<div class="job-card"><JobElement {job} {currentLanguage} /></div>
+		{/each}
+	{/if}
 </div>
 
 <style lang="scss">
@@ -17,5 +24,18 @@
 		display: flex;
 		justify-content: space-between;
 		flex-wrap: wrap;
+		padding: 10px;
+	}
+	.job-card {
+		background-color: $basecolor2;
+		border-radius: $default-border-radius;
+		padding: 10px 10px;
+		margin-bottom: 30px;
+		@media (min-width: $min-desktop) {
+			width: 29vw;
+		}
+		@media (min-width: 1400px) {
+			width: 400px;
+		}
 	}
 </style>

src/elements/Menu.svelte

@@ -12,27 +12,27 @@
 
 <div class="div-menu">
 	<div class="wrapper">
-		<a use:scrollto={{ element: '#home', offset: -70 }} href="#home">
+		<a class="menu-element" href="/#top">
 			<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 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 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 class="menu-element" href="#portfolio"
 			><span class="hide">{menu.portfolio[currentLanguage]}</span><i class="fas fa-user-clock" /></a
 		>
 
-		<!-- <a class="menu-element" href="/blog" alt={menu.blog[currentLanguage]}
+		<a class="menu-element" href="/blog" alt={menu.blog[currentLanguage]}
 			><span class="hide">{menu.blog[currentLanguage]}</span><i class="fas fa-address-card" /></a
-		> -->
+		>
 	</div>
 </div>
 

src/elements/Training.svelte

@@ -25,18 +25,19 @@
 </div>
 
 <style lang="scss">
-	@import '../app.scss';
 	.training {
-		background-color: white;
+		padding: 10px;
-		border-radius: $default-border-radius;
-		margin: 30px;
-		padding: 20px;
 	}
+	@import '../app.scss';
 	.element {
+		border-radius: $default-border-radius;
+		background-color: white;
+		padding: 45px;
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
 		align-content: center;
+		margin-top: 30px;
 		img {
 			max-width: 100%;
 			max-height: 150px;

src/model/job.d.ts

@@ -1,11 +1,12 @@
 /* tslint:disable */
 /**
- * This file was automatically generated by json-schema-to-TypeScript.
+ * This file was automatically generated by json-schema-to-typescript.
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
- * and run json-schema-to-TypeScript to regenerate this file.
+ * and run json-schema-to-typescript to regenerate this file.
  */
 
 export interface Schema {
+  id?: string;
   year: {
     start: string;
     end: string;

src/model/schema.json

@@ -2,6 +2,9 @@
   "$schema": "http://json-schema.org/draft-04/schema#",
   "type": "object",
   "properties": {
+    "id": {
+      "type": "string"
+    },
     "year": {
       "type": "object",
       "properties": {

src/routes/blog/[post].svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+	import { MetaTags } from 'svelte-meta-tags';
+	import Menu from '$elem/Menu.svelte';
+	let currentLanguage: string = 'it';
+    import { page } from '$app/stores';
+    console.log($page)
+</script>
+
+<MetaTags
+	title="Gianmarco Pettinato"
+	description="This is the Gianmarco's portfolio site"
+	canonical="https://pettinato.eu/"
+	openGraph={{
+		url: 'https://pettinato.eu/',
+		title: 'Gianmarco Pettinato',
+		description: "This is the Gianmarco's portfolio site",
+		images: [
+			{
+				url: 'https://www.example.ie/og-image-01.jpg',
+				width: 800,
+				height: 600,
+				alt: 'Og Image Alt'
+			},
+			{
+				url: 'https://www.example.ie/og-image-02.jpg',
+				width: 900,
+				height: 800,
+				alt: 'Og Image Alt Second'
+			},
+			{ url: 'https://www.example.ie/og-image-03.jpg' },
+			{ url: 'https://www.example.ie/og-image-04.jpg' }
+		],
+		site_name: 'Gianmarco Pettinato Portfolio'
+	}}
+	twitter={{
+		handle: '@jatus_93',
+		site: '@jatus_93',
+		cardType: 'summary',
+		title: 'Gianmarco Pettinato Portfolio',
+		description: "This is the Gianmarco's portfolio site",
+		image: 'https://pettinato.eu/profile_pic.webp',
+		imageAlt: 'Gianmarco Photo'
+	}}
+/>
+
+<main>
+	<!-- svelte-ignore a11y-invalid-attribute -->
+	<div class="language-selector" id="language-selector">
+		<button
+			class="custom-button {currentLanguage == 'it' ? 'custom-button-active' : ''}"
+			on:click={() => {
+				currentLanguage = 'it';
+			}}>it</button
+		>
+		<button
+			class="custom-button {currentLanguage == 'en' ? 'custom-button-active' : ''}"
+			on:click={() => {
+				currentLanguage = 'en';
+			}}>en</button
+		>
+	</div>
+
+	<div class="menu">
+		<Menu {currentLanguage} />
+	</div>
+</main>
+
+<style lang="scss">
+	@import '../../app.scss';
+	.language-selector {
+		right: 0;
+		height: 30px;
+		text-align: center;
+		text-transform: uppercase;
+		padding-top: 10px;
+		display: flex;
+		flex-direction: row;
+		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;
+		position: sticky;
+		position: -webkit-sticky;
+		top: 0px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 10px;
+		border-bottom: solid #999 1px;
+	}
+
+	.custom-button {
+		border: 0;
+		background: none;
+		box-shadow: none;
+		border-radius: $default-border-radius;
+		border: solid $button-border-color 1px;
+		width: 40px;
+		cursor: pointer;
+		margin-right: 5px;
+	}
+	.custom-button:hover {
+		background-color: $text-color;
+		color: white;
+	}
+	.custom-button-active {
+		cursor: unset;
+		background-color: $text-color;
+		color: white;
+	}
+	@media (max-width: $min-tablet) {
+		.custom-button {
+			font-size: large;
+		}
+	}
+</style>

src/routes/blog/index.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import { MetaTags } from 'svelte-meta-tags';
+	import Menu from '$elem/Menu.svelte';
+	import Jobs from '$elem/Jobs.svelte';
+	let currentLanguage: string = 'it';
+	let isBlogContainer = true;
+	import Data_portfolio from '../../model/portfolio.json';
+	import type { Schema } from 'src/model/job';
+	let jobs: Schema[] = Data_portfolio as Schema[];
+	let title = { it: 'I miei articoli', en: 'my blog posts' };
+</script>
+
+<MetaTags
+	title="Gianmarco Pettinato"
+	description="This is the Gianmarco's portfolio site"
+	canonical="https://pettinato.eu/"
+	openGraph={{
+		url: 'https://pettinato.eu/',
+		title: 'Gianmarco Pettinato',
+		description: "This is the Gianmarco's portfolio site",
+		images: [
+			{
+				url: 'https://www.example.ie/og-image-01.jpg',
+				width: 800,
+				height: 600,
+				alt: 'Og Image Alt'
+			},
+			{
+				url: 'https://www.example.ie/og-image-02.jpg',
+				width: 900,
+				height: 800,
+				alt: 'Og Image Alt Second'
+			},
+			{ url: 'https://www.example.ie/og-image-03.jpg' },
+			{ url: 'https://www.example.ie/og-image-04.jpg' }
+		],
+		site_name: 'Gianmarco Pettinato Portfolio'
+	}}
+	twitter={{
+		handle: '@jatus_93',
+		site: '@jatus_93',
+		cardType: 'summary',
+		title: 'Gianmarco Pettinato Portfolio',
+		description: "This is the Gianmarco's portfolio site",
+		image: 'https://pettinato.eu/profile_pic.webp',
+		imageAlt: 'Gianmarco Photo'
+	}}
+/>
+
+<main>
+	<!-- svelte-ignore a11y-invalid-attribute -->
+	<div class="language-selector" id="language-selector">
+		<button
+			class="custom-button {currentLanguage == 'it' ? 'custom-button-active' : ''}"
+			on:click={() => {
+				currentLanguage = 'it';
+			}}>it</button
+		>
+		<button
+			class="custom-button {currentLanguage == 'en' ? 'custom-button-active' : ''}"
+			on:click={() => {
+				currentLanguage = 'en';
+			}}>en</button
+		>
+	</div>
+
+	<div class="menu">
+		<Menu {currentLanguage} />
+	</div>
+	<div id="portfolio" class="default">
+		<h2>{title[currentLanguage]}</h2>
+		<Jobs {jobs} {currentLanguage} {isBlogContainer} />
+	</div>
+</main>
+
+<style lang="scss">
+	@import '../../app.scss';
+	.language-selector {
+		right: 0;
+		height: 30px;
+		text-align: center;
+		text-transform: uppercase;
+		padding-top: 10px;
+		display: flex;
+		flex-direction: row;
+		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;
+		position: sticky;
+		position: -webkit-sticky;
+		top: 0px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 10px;
+		border-bottom: solid #999 1px;
+	}
+
+	.custom-button {
+		border: 0;
+		background: none;
+		box-shadow: none;
+		border-radius: $default-border-radius;
+		border: solid $button-border-color 1px;
+		width: 40px;
+		cursor: pointer;
+		margin-right: 5px;
+	}
+	.custom-button:hover {
+		background-color: $text-color;
+		color: white;
+	}
+	.custom-button-active {
+		cursor: unset;
+		background-color: $text-color;
+		color: white;
+	}
+	@media (max-width: $min-tablet) {
+		.custom-button {
+			font-size: large;
+		}
+	}
+</style>

src/routes/index.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { MetaTags } from 'svelte-meta-tags';
 	import AboutMe from '$elem/AboutMe.svelte';
 	import Jobs from '$elem/Jobs.svelte';
 	import Menu from '$elem/Menu.svelte';
@@ -21,6 +22,43 @@
 	};
 </script>
 
+<MetaTags
+	title="Gianmarco Pettinato"
+	description="This is the Gianmarco's portfolio site"
+	canonical="https://pettinato.eu/"
+	openGraph={{
+		url: 'https://pettinato.eu/',
+		title: 'Gianmarco Pettinato',
+		description: "This is the Gianmarco's portfolio site",
+		images: [
+			{
+				url: 'https://www.example.ie/og-image-01.jpg',
+				width: 800,
+				height: 600,
+				alt: 'Og Image Alt'
+			},
+			{
+				url: 'https://www.example.ie/og-image-02.jpg',
+				width: 900,
+				height: 800,
+				alt: 'Og Image Alt Second'
+			},
+			{ url: 'https://www.example.ie/og-image-03.jpg' },
+			{ url: 'https://www.example.ie/og-image-04.jpg' }
+		],
+		site_name: 'Gianmarco Pettinato Portfolio'
+	}}
+	twitter={{
+		handle: '@jatus_93',
+		site: '@jatus_93',
+		cardType: 'summary',
+		title: 'Gianmarco Pettinato Portfolio',
+		description: "This is the Gianmarco's portfolio site",
+		image: 'https://pettinato.eu/profile_pic.webp',
+		imageAlt: 'Gianmarco Photo'
+	}}
+/>
+
 <main>
 	<!-- svelte-ignore a11y-invalid-attribute -->
 	<div class="language-selector" id="language-selector">
@@ -73,12 +111,11 @@
 		justify-content: end;
 		position: absolute;
 		z-index: 999;
-		@media (max-width: $min-desktop) {			
+		@media (max-width: $min-desktop) {
 			width: 100%;
 			position: unset;
 			padding-bottom: 10px;
 			background-color: $basecolor2;
-
 		}
 	}
 	.menu {
@@ -104,7 +141,6 @@
 		margin-right: 5px;
 	}
 	.custom-button:hover {
-		
 		background-color: $text-color;
 		color: white;
 	}

static/blogPosts/2022-05-15.json

@@ -0,0 +1,18 @@
+{
+    "year": {
+        "start": "2022-05-15",
+        "end": ""
+    },
+    "title": {
+        "en": "blog",
+        "it": "Il blog"
+    },
+    "content": {
+        "en": "Articolo di prova in inglese",
+        "it": "Articolo di prova in italiano."
+    },
+    "collaborators": [],
+    "languages": [],
+    "tecnologies": [],
+    "images": []
+}