New CSS #1

Merged
Jatus merged 13 commits from feature/material_desing into develop 2023-05-27 15:38:49 +02:00
16 changed files with 410 additions and 42 deletions
Showing only changes of commit c86542dabf - Show all commits

14
Jenkinsfile vendored
View File

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

38
package-lock.json generated
View File

@ -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",

View File

@ -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",

View File

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

View File

@ -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;

View File

@ -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>

View File

@ -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}
<JobElement {job} {currentLanguage} />
{/each}
{#if isBlogContainer}
{#each jobs as job}
<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>

View File

@ -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>

View File

@ -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
View File

@ -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;

View File

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

View File

View 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>

View 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>

View File

@ -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;
}

View 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": []
}