New CSS #1
14
Jenkinsfile
vendored
14
Jenkinsfile
vendored
@ -1 +1,13 @@
|
||||
{
|
||||
pipeline {
|
||||
agent any
|
||||
stages {
|
||||
stage('Build') {
|
||||
npm run build
|
||||
}
|
||||
stage('Deploy') {
|
||||
steps {
|
||||
echo 'Deploying....'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
38
package-lock.json
generated
38
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -61,6 +61,6 @@
|
||||
// border: solid 1px $border-color;
|
||||
border-radius: $default-border-radius;
|
||||
padding: 30px;
|
||||
margin: 30px;
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
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;
|
||||
}
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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">
|
||||
{#if isBlogContainer}
|
||||
{#each jobs as job}
|
||||
<JobElement {job} {currentLanguage} />
|
||||
<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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -25,18 +25,19 @@
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../app.scss';
|
||||
.training {
|
||||
background-color: white;
|
||||
border-radius: $default-border-radius;
|
||||
margin: 30px;
|
||||
padding: 20px;
|
||||
padding: 10px;
|
||||
}
|
||||
@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;
|
||||
|
||||
5
src/model/job.d.ts
vendored
5
src/model/job.d.ts
vendored
@ -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;
|
||||
|
||||
@ -2,6 +2,9 @@
|
||||
"$schema": "http://json-schema.org/draft-04/schema#",
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"id": {
|
||||
"type": "string"
|
||||
},
|
||||
"year": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
|
||||
124
src/routes/blog/[post].svelte
Normal file
124
src/routes/blog/[post].svelte
Normal file
@ -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>
|
||||
132
src/routes/blog/index.svelte
Normal file
132
src/routes/blog/index.svelte
Normal file
@ -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>
|
||||
@ -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">
|
||||
@ -78,7 +116,6 @@
|
||||
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;
|
||||
}
|
||||
|
||||
18
static/blogPosts/2022-05-15.json
Normal file
18
static/blogPosts/2022-05-15.json
Normal file
@ -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": []
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user