Jatus/cv-site
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

basic version

Browse Source
This commit is contained in:
Gianmarco Pettinato 2021-10-06 19:37:26 +02:00
parent a99ee9fa45
commit d12945711f
16 changed files with 659 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/elements/aboutMe.svelte
View File

@ -1,31 +1,59 @@
<script lang="ts"> <script lang="ts">
let currentLanguage = 'it';
const whoIt='Ciao! Sono Gianmarco Pettinato mi sono laureato in scienze informatiche e sono uno sviluppatore full-stack.\
Ho famigliarità con diversi linguaggi e framework, front-end e back-end.\
In particolare ho famigliarità con C++ con QT e Typescript con Angular, Vuejs e Svelte.\
Tra le mie competenze, oltre allo sviluppo software e alla manutenzione di sistemi linux, spicca la gestione di ambienti CI/CD, con pipeline automatiche e container come Docker.\
Sono interessato in particolar modo l\'ambiente dei dispositivi IoT e del wearble tech.\
Nel tempo libero mi dedico alla gestione del mio home sever e alla costruzione di PC fissi.\
Per maggiori informazioni non esitate a contattarmi.';
const whoEn='Hi! I\'m Gianmarco Pettinato. I have a bachelor degree in computer science, and I\'m a full-stack developer.\
I know several languages and frameworks, either front-end and back-end.\
In particular, I have experience in C++ with QT and Typescript with Angular, Vuejs and Svelte.\
Among my skill-set, there is the administration of the CI/CD environment with docker.\
I\'m interested in the IoT world and Wearable tech. In my free time, I like to manage my GNU/Linux home server and build PCs.';
const who = {
it:whoIt,
en:whoEn
}
export function changeLanguage(language = 'it'){
currentLanguage = language
}
</script> </script>
<div class="aboutMe"> <div class="aboutMe">
<img src="/profile_pic.jpg" alt="profile" class="profile" /> <div class="header"><img src="/profile_pic.jpg" alt="profile" class="profile" />
<div class="info"> <div class="info">
<h1>Gianmarco Pettinato</h1> <h1>Gianmarco Pettinato</h1>
<p>Back-end developer GNU/Linux user </p> <div>
<div> <a href="https://twitter.com/jatus_93"><i class="fab fa-twitter"></i></a>
<a href="https://twitter.com/jatus_93"><i class="fab fa-twitter"></i></a> <a href="https://www.linkedin.com/in/gianmarco-pettinato/"><i class="fab fa-linkedin-in"></i></a>
<a href="https://www.linkedin.com/in/gianmarco-pettinato/"><i class="fab fa-linkedin-in"></i></a> <a href="https://t.me/jatus_93"><i class="fab fa-telegram-plane"></i></a>
<a href="https://t.me/jatus_93"><i class="fab fa-telegram-plane"></i></a> <a href="mailto:gianmarco@pettinato.eu"><i class="fas fa-at"></i></a>
<a href="mailto:gianmarco@pettinato.eu"><i class="fas fa-at"></i></a> <a href="https://github.com/Jatus93/"><i class="fab fa-github"></i></a>
<a href="https://git.jatus.tech/Jatus"><i class="fab fa-git-alt"></i></a>
</div>
</div> </div>
</div> </div>
<div class="presentazione">
<p>
{who[currentLanguage]}
</p>
</div>
<div>
<a class="cv" href="/curriculum_it.pdf"><i class="fas fa-download"></i> curriculum_it.pdf</a>
</div>
</div> </div>
<style lang="scss"> <style lang="scss">
@import './static/colors.scss'; @import './static/colors.scss';
@import '/node_modules/@fortawesome/fontawesome-free/css/all.css'; @import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
.aboutMe{ .aboutMe{
padding: 1vh;
display: flex;
flex-direction: row;
min-width: 370px;
max-width: 550px;
width: 40vw;
height: auto;
align-items: center;
background-color: $cultured; background-color: $cultured;
border-radius: 10px;
margin: auto;
max-width: $cv-max-width;
width: 95%;
height: auto;
border-style: solid; border-style: solid;
border-width: 0.1px; border-width: 0.1px;
border-color: $rich-black-fogra-29; border-color: $rich-black-fogra-29;
@ -33,11 +61,20 @@
box-shadow: -12px 26px 25px -14px $rich-black-fogra-29; box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
-webkit-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29; -webkit-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
-moz-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29; -moz-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
padding-top: 2vh;
padding-bottom: 2vh;
text-align: center;
}
.cv{
font-size: unset;
text-decoration: none;
} }
.profile{ .profile{
border-radius: 50%; border-radius: 50%;
height: 150px; width: 35vw;
max-width: 150px;
border: solid $rich-black-fogra-29 1px; border: solid $rich-black-fogra-29 1px;
box-shadow: -1px 2px 2px -1px $rich-black-fogra-29; box-shadow: -1px 2px 2px -1px $rich-black-fogra-29;
-webkit-box-shadow: -1px 2px 2px -1px $rich-black-fogra-29; -webkit-box-shadow: -1px 2px 2px -1px $rich-black-fogra-29;
@ -46,15 +83,41 @@
} }
.info{ .info{
margin: 1px;
text-align: center; text-align: center;
justify-content: center;
color: $rich-black-fogra-29; color: $rich-black-fogra-29;
width: auto; }
margin-left: 20px;
.info>h1{
font-size: 28px;
} }
a,a:visited{ a,a:visited{
font-size: 1.5em; font-size: 1.5em;
color: $rich-black-fogra-29; color: $rich-black-fogra-29;
margin: 2px;
}
.presentazione{
width: 90%;
margin: auto;
text-justify: distribute;
}
.header{
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
padding: 10px;
}
@media screen and (min-width: 600px) {
.aboutMe{
max-width: $cv-max-width;
width: 80vw;
}
} }
</style> </style>

107
src/elements/contacts.svelte Normal file
View File

@ -0,0 +1,107 @@
<script lang="ts"></script>
<div class="contactContainer">
<div class="contacts">
<div class="header"><img src="/profile_pic.jpg" alt="profile" class="profile" /></div>
<ul class="contact-list">
<li><div class="label"><i class="fas fa-at"></i> e-mail:</div> <a href="mailto://gianmarco@pettinato.eu">gianmarco@pettinato.eu</a></li>
<li><div class="label"><i class="fab fa-telegram-plane"></i> telegram:</div> <a href="https://t.me/jatus_93">@jatus_93</a></li>
<li><div class="label"><i class="fab fa-twitter"></i> twitter:</div> <a href="https://twitter.com/jatus_93">@jatus_93</a></li>
<li><div class="label"><i class="fab fa-linkedin-in"></i> linkedin:</div> <a href="https://www.linkedin.com/in/gianmarco-pettinato/">Gianmarco Pettinato</a></li>
</ul>
</div>
</div>
<style lang="scss">
@import './static/colors.scss';
.contactContainer{
margin: auto;
background-color:$navajo-white;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: auto;
font-size: 1.1em;
border-radius: 10px;
width: 95%;
border-style: solid;
border-width: 0.1px;
border-color: $rich-black-fogra-29;
border-radius: 10px;
box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
-webkit-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
-moz-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
padding-top: 1vh;
padding-bottom: 1vh;
}
.contacts{
background-color: $cultured;
width: 90%;
border-radius: 10px;
margin-bottom: 10px;
padding-top: 2vh;
padding-bottom: 2vh;
background-color: $cultured;
border-style: solid;
border-width: 0.1px;
display: flex;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
}
.contacts>ul{
list-style: none;
width: auto;
margin: auto;
}
.contacts>ul>li{
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
}
.contacts>ul>li>div{
margin-right: auto;
}
.profile{
border-radius: 50%;
width: 35vw;
max-width: 150px;
border: solid $rich-black-fogra-29 1px;
box-shadow: -1px 2px 2px -1px $rich-black-fogra-29;
-webkit-box-shadow: -1px 2px 2px -1px $rich-black-fogra-29;
-moz-box-shadow: -1px 2px 2px -1px $rich-black-fogra-29;
}
a,a:visited{
text-decoration: none;
color: $rich-black-fogra-29;
margin: 2px;
}
@media screen and (min-width: 600px) {
.contactContainer{
display: flex;
height: auto;
max-width: $cv-max-width;
width: 80vw;
}
.contacts>ul{
// list-style: none;
// width: 35vw;
margin: unset;
}
// .job-content{
// flex-wrap: unset;
// }
// .text-content{
// width: 35vw;
// }
}
</style>

105
src/elements/extra.svelte Normal file
View File

@ -0,0 +1,105 @@
<script lang="ts">
import data from '../model/hobby.json'
import type { Schema } from 'src/model/job';
export let currentLanguage = 'it'
const hobbies:Schema[] = data as Schema[];
export function changeLanguage(language = 'it'){
currentLanguage = language
}
</script>
<div class="extraContainer">
{#each hobbies as hobby }
<div class="hobby">
<h3>{hobby.title[currentLanguage]}</h3>
<div class="images">
{#each hobby.images as image}
<img src={image} alt="{hobby.title[currentLanguage].toString()}" />
{/each}
</div>
<div class="hobby-text">
{hobby.content[currentLanguage]}
</div>
<div class="added-info">
{#each hobby.tecnologies as tecnology }
{tecnology+" "}
{/each}
</div>
</div>
{/each}
</div>
<style lang="scss">
@import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
@import './static/colors.scss';
.extraContainer{
margin: auto;
background-color:$steel-blue;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: auto;
font-size: 1.1em;
border-radius: 10px;
width: 95%;
border-style: solid;
border-width: 0.1px;
border-color: $rich-black-fogra-29;
border-radius: 10px;
box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
-webkit-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
-moz-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
padding-top: 1.5vh;
padding-bottom: 1.5vh;
}
.hobby{
background-color: $cultured;
text-align: center;
width: 90%;
border-radius: 10px;
margin-bottom: 10px;
padding-top: 2vh;
padding-bottom: 2vh;
background-color: $cultured;
border-style: solid;
border-width: 0.1px;
}
.images{
width: 90%;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
margin: auto;
}
.images>img{
margin: auto;
margin-bottom: 2vh;
max-width: 350px;
max-height: 250px;
}
.added-info{
font-size: 15px;
}
@media screen and (min-width: 600px) {
.extraContainer{
display: flex;
height: auto;
max-width: $cv-max-width;
width: 80vw;
}
// .job-content{
// flex-wrap: unset;
// }
// .text-content{
// width: 35vw;
// }
}
</style>

12
src/elements/header.svelte
View File

@ -1,12 +0,0 @@
<script lang="ts">
export const status = 'test string';
</script>
<div class="header">
<!-- <p>page header</p> -->
</div>
<style lang="scss">
@import './static/colors.scss';
.header{
background-color: red;
}
</style>

137
src/elements/jobs.svelte
View File

@ -1,45 +1,45 @@
<script lang="ts"> <script lang="ts">
import data from '../model/data' import data from '../model/jobs.json'
import type { Schema } from 'src/model/job'; import type { Schema } from 'src/model/job';
export let currentLanguage = 'it' export let currentLanguage = 'it'
import { onMount, tick } from 'svelte'; const jobs:Schema[] = data as Schema[];
const jobs:Schema[] = data.default as Schema[];
onMount(()=>{ export function changeLanguage(language = 'it'){
console.log(jobs[0]); currentLanguage = language
}) }
</script> </script>
<div class="jobsContainer"> <div class="jobsContainer">
{#each jobs as job } {#each jobs as job, index }
<div class="job container"> <div class="job container">
<h2>{job.title[currentLanguage]}</h2> <h3>{job.title[currentLanguage]}</h3>
<div class="added-info">
{job.year.start} - {job.year.end}
</div>
<div class="job-content"> <div class="job-content">
<div class="images-container"> <div class="images-container">
{#each job.images as image } {#each job.images as image }
<img src="{image}" alt="realtive to the article"/> <img src="{image}" alt="realtive to the article"/>
{/each} {/each}
</div> </div>
<div class="text-content {job.images.length!=0 ?'left':''}"> <div class="text-content {job.images.length!=0 ?'left':''}" id="{index.toString()}">
<p>{job.content[currentLanguage]}</p> <p>{job.content[currentLanguage]}</p>
<div class="added-info"> </div>
<div> </div>
{#each job.collaborators as collaborator} <div class="added-info">
<a href={collaborator.ref}>{collaborator.name}{collaborator.surname}</a> <div class="added-info">
{/each} {job.year.start} - {job.year.end}
</div> </div>
<div> <div>
{#each job.languages as language} {#each job.collaborators as collaborator}
{language+" "} <a href={collaborator.ref}>{collaborator.name}{collaborator.surname}</a>
{/each} {/each}
</div> </div>
<div> <div>
{#each job.tecnologies as tecnology} {#each job.languages as language}
{tecnology+" "} {language+" "}
{/each} {/each}
</div> </div>
</div> <div>
{#each job.tecnologies as tecnology}
{tecnology+" "}
{/each}
</div> </div>
</div> </div>
</div> </div>
@ -47,8 +47,17 @@
</div> </div>
<style lang="scss"> <style lang="scss">
@import './static/colors.scss'; @import './static/colors.scss';
.container{ .jobsContainer{
background-color: $cultured; margin: auto;
background-color:$steel-blue;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: auto;
font-size: 1.1em;
border-radius: 10px;
width: 95%;
border-style: solid; border-style: solid;
border-width: 0.1px; border-width: 0.1px;
border-color: $rich-black-fogra-29; border-color: $rich-black-fogra-29;
@ -56,54 +65,62 @@
box-shadow: -12px 26px 25px -14px $rich-black-fogra-29; box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
-webkit-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29; -webkit-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
-moz-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29; -moz-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
} padding-top: 1.5vh;
.jobsContainer{ padding-bottom: 1.5vh;
width: 80%;
height: auto;
background-color: $steel-blue;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 30px;
max-width: 1280px;
} }
.job{ .job{
background-color: $cultured; background-color: $cultured;
min-height: 300px;
height: auto;
width: 90%;
margin-bottom: 20px;
text-align: center; text-align: center;
padding-top: 1vh; width: 90%;
border-radius: 10px;
margin-bottom: 10px;
padding-top: 2vh;
padding-bottom: 2vh; padding-bottom: 2vh;
background-color: $cultured;
border-style: solid;
border-width: 0.1px;
} }
.job-content{ .job-content{
text-align: center; padding: 2vh;
display: flex; display: flex;
flex-direction: row; flex-wrap: wrap;
justify-content: space-evenly;
align-items: center; align-items: center;
justify-content: center;
padding: 2vw;
}
.text-content{
height: auto;
} }
.added-info{ .added-info{
font-size: 13px; font-size: 13px;
} }
.images-container{ .text-content{
display: flex; height: auto;
flex-direction: column; margin-left: 2.5vw;
margin-right: 30px; margin-right: 2.5vw;
} }
img{ img{
width: 30vw; width: 30vw;
max-width: 500px; max-width: 200px;
max-height: 500px; max-height: 500px;
} }
@media screen and (min-width: 600px) {
.jobsContainer{
display: flex;
height: auto;
max-width: $cv-max-width;
width: 80vw;
}
.job-content{
flex-wrap: unset;
}
.text-content{
width: 35vw;
}
}
</style> </style>

88
src/elements/menu.svelte Normal file
View File

@ -0,0 +1,88 @@
<script lang="ts">
let currentLanguage = 'it'
export function changeLanguage(language = 'it'){
currentLanguage = language
}
export const menu = {home:{it:"Home",en:"Home"},
job:{it:"Esperienze",en:"Experiences"},
school:{it:"Formazione",en:"Training"},
contacts:{it:"Contatti",en:"Contacts"},
hobbies:{it:"Tempo libero",en:"Hobbies"}}
</script>
<div class="div-menu">
<div class="wrapper">
<a class="menu-element" href="#home" alt="{menu.home[currentLanguage]}"><i class="fas fa-home"></i><span class="hide">{menu.home[currentLanguage]}</span></a>
<a class="menu-element" href="#job" alt="{menu.job[currentLanguage]}"><i class="fas fa-user-tie"></i><span class="hide">{menu.job[currentLanguage]}</span></a>
<a class="menu-element" href="#school" alt="{menu.school[currentLanguage]}"><i class="fas fa-graduation-cap"></i><span class="hide">{menu.school[currentLanguage]}</span></a>
<a class="menu-element" href="#hobbies" alt="{menu.hobbies[currentLanguage]}"><i class="fas fa-user-clock"></i><span class="hide">{menu.hobbies[currentLanguage]}</span></a>
<a class="menu-element" href="#contacts" alt="{menu.contacts[currentLanguage]}"><i class="fas fa-address-card"></i><span class="hide">{menu.contacts[currentLanguage]}</span></a>
</div>
</div>
<style lang="scss">
@import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
@import './static/colors.scss';
.div-menu{
width: 100%;
background-color: $steel-blue;
}
.menu-element {
background-color: $cultured;
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: space-evenly;
text-decoration: none;
color: $rich-black-fogra-29;
width: 13%;
height: 30px;
margin: 10px;
border-radius: 10px;
text-align: center;
border-color: $rich-black-fogra-29;
}
.menu-element:hover{
background-color: $navajo-white;
}
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
width: 100%;
margin: auto;
height: auto;
max-width: $cv-max-width;
}
.hide{
display: none;
}
@media screen and (min-width: 666px) {
.div-menu{
display: flex;
height: auto;
}
.menu-element {
background-color: $cultured;
text-decoration: none;
color: $rich-black-fogra-29;
width: 17%;
height: 30px;
margin-left: 5px;
margin-right: 5px;
border-radius: 10px;
text-align: center;
}
.hide{
display: block;
}
}
</style>

66
src/elements/training.svelte Normal file
View File

@ -0,0 +1,66 @@
<script lang="ts"></script>
<div class="trainingContainer">
<div class="training">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui faucibus in ornare quam viverra orci sagittis. Purus gravida quis blandit turpis cursus in. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet consectetur. Eget aliquet nibh praesent tristique magna. Facilisis gravida neque convallis a cras semper auctor neque vitae. Lectus sit amet est placerat in egestas erat. Lorem ipsum dolor sit amet consectetur. Commodo nulla facilisi nullam vehicula ipsum a arcu. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit. Diam maecenas ultricies mi eget. Sapien eget mi proin sed libero enim sed faucibus. Vitae purus faucibus ornare suspendisse. Sit amet luctus venenatis lectus. Praesent tristique magna sit amet purus gravida quis blandit. Nunc mattis enim ut tellus. Egestas diam in arcu cursus. At lectus urna duis convallis convallis tellus id. Nunc pulvinar sapien et ligula ullamcorper. Tristique senectus et netus et malesuada fames ac turpis. Malesuada fames ac turpis egestas. Lectus nulla at volutpat diam ut venenatis. Diam donec adipiscing tristique risus nec feugiat. Non quam lacus suspendisse faucibus. Volutpat sed cras ornare arcu dui vivamus. Quam elementum pulvinar etiam non quam lacus.
</p>
</div>
</div>
<style lang="scss">
@import './static/colors.scss';
.trainingContainer{
margin: auto;
background-color:$navajo-white;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: auto;
font-size: 1.1em;
border-radius: 10px;
width: 95%;
border-style: solid;
border-width: 0.1px;
border-color: $rich-black-fogra-29;
border-radius: 10px;
box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
-webkit-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
-moz-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
padding-top: 1vh;
padding-bottom: 1vh;
}
.training{
background-color: $cultured;
text-align: center;
width: 90%;
border-radius: 10px;
margin-bottom: 10px;
padding-top: 2vh;
padding-bottom: 2vh;
background-color: $cultured;
border-style: solid;
border-width: 0.1px;
}
.training>p{
width: 95%;
margin: auto;
}
@media screen and (min-width: 600px) {
.trainingContainer{
display: flex;
height: auto;
max-width: $cv-max-width;
width: 80vw;
}
// .job-content{
// flex-wrap: unset;
// }
// .text-content{
// width: 35vw;
// }
}
</style>

93
src/model/data.json
View File

@ -1,93 +0,0 @@
[
{
"year": {
"start": "2021-10-01",
"end": "2021-10-02"
},
"title": {"en":"This web site","it":"Questo sito web"},
"content": {"en":"I'have created this web site as CV","it":"Ho creato questo sito web per raccogliere, in maniera semplice ed efficiente, tutti i miei lavori ed esperienze. Ho realizzato questa pagina utilizzando Typescript con il framework Svelte e le classi css invece le ho gestite a mano"},
"collaborators": [],
"languages": [
"typescript",
"JSON-schema"
],
"tecnologies": [
"Svelte",
"Nodejs"
],
"images":["https://via.placeholder.com/500"]
},
{
"year": {
"start": "2021-10-01",
"end": "2021-10-02"
},
"title": {"en":"This web site","it":"Questo sito web"},
"content": {"en":"I'have created this web site as CV","it":"Ho creato questo sito web per raccogliere, in maniera semplice ed efficiente, tutti i miei lavori ed esperienze. Ho realizzato questa pagina utilizzando Typescript con il framework Svelte e le classi css invece le ho gestite a mano"},
"collaborators": [],
"languages": [
"typescript",
"JSON-schema"
],
"tecnologies": [
"Svelte",
"Nodejs"
],
"images":["https://via.placeholder.com/500"]
},
{
"year": {
"start": "2021-10-01",
"end": "2021-10-02"
},
"title": {"en":"This web site","it":"Questo sito web"},
"content": {"en":"I'have created this web site as CV","it":"Ho creato questo sito web per raccogliere, in maniera semplice ed efficiente, tutti i miei lavori ed esperienze. Ho realizzato questa pagina utilizzando Typescript con il framework Svelte e le classi css invece le ho gestite a mano"},
"collaborators": [],
"languages": [
"typescript",
"JSON-schema"
],
"tecnologies": [
"Svelte",
"Nodejs"
],
"images":["https://via.placeholder.com/500"]
},
{
"year": {
"start": "2021-10-01",
"end": "2021-10-02"
},
"title": {"en":"This web site","it":"Questo sito web"},
"content": {"en":"I'have created this web site as CV","it":"Ho creato questo sito web per raccogliere, in maniera semplice ed efficiente, tutti i miei lavori ed esperienze. Ho realizzato questa pagina utilizzando Typescript con il framework Svelte e le classi css invece le ho gestite a mano"},
"collaborators": [],
"languages": [
"typescript",
"JSON-schema"
],
"tecnologies": [
"Svelte",
"Nodejs"
],
"images":["https://via.placeholder.com/500"]
},
{
"year": {
"start": "2021-10-01",
"end": "2021-10-02"
},
"title": {"en":"This web site","it":"Questo sito web"},
"content": {"en":"I'have created this web site as CV","it":"Ho creato questo sito web per raccogliere, in maniera semplice ed efficiente, tutti i miei lavori ed esperienze. Ho realizzato questa pagina utilizzando Typescript con il framework Svelte e le classi css invece le ho gestite a mano"},
"collaborators": [],
"languages": [
"typescript",
"JSON-schema"
],
"tecnologies": [
"Svelte",
"Nodejs"
],
"images":["https://via.placeholder.com/500"]
}
]

7
src/model/data.ts
View File

@ -1,3 +1,4 @@
import * as data from './data.json'; import * as jobCollection from './jobs.json';
import * as hobbyCollection from './hobby.json';
export default data as unknown[]; jobCollection;
hobbyCollection;

23
src/model/hobby.json Normal file
View File

@ -0,0 +1,23 @@
[
{
"year": {
"start": "2021-10-01",
"end": "2021-10-02"
},
"title": {"en":"Keyboard","it":"Tastiera"},
"content": {
"en":"I'have created this web site as CV",
"it":"Ho creato questo sito web per raccogliere, in maniera semplice ed efficiente, tutti i miei lavori ed esperienze. Ho realizzato questa pagina utilizzando Typescript con il framework Svelte e le classi css invece le ho gestite a mano"
},
"collaborators": [],
"languages": [
"typescript",
"JSON-schema"
],
"tecnologies": [
"Svelte",
"Nodejs"
],
"images":["https://via.placeholder.com/500","https://via.placeholder.com/500"]
}
]

23
src/model/jobs.json Normal file
View File

@ -0,0 +1,23 @@
[
{
"year": {
"start": "2021-10-01",
"end": "2021-10-02"
},
"title": {"en":"This web site","it":"Questo sito web"},
"content": {
"en":"I created this web page to collect and present all my experiences. I'm not a web designer. However, I can build web pages because I have good knowledge of HTML and CSS. I made this page using Typescript and Svelte. To manage the content, I've created a simple system to load content from a couple of JSON files that define where to put the information.",
"it":"Ho creato questo sito web per raccogliere e raccontare le mie esperienze. Come si può facilmente intuire non sono un web designer, ma ho comunque buone conoscenze nell'uso di HTML e CSS. Ho realizzato questa pagina web in Typescript e Svelte, per la gestione dei contenuti ho ideato un semplice sistema che controlla i dati presenti in un paio di file JSON che definiscono i contenuti della pagina e delle sezioni"
},
"collaborators": [],
"languages": [
"typescript",
"JSON-schema"
],
"tecnologies": [
"Svelte",
"Nodejs"
],
"images":["/webpage.png"]
}
]

110
src/routes/index.svelte
View File

@ -1,51 +1,99 @@
<script lang="ts"> <script lang="ts">
// import Header from "$elem/header.svelte";
import AboutMe from "$elem/aboutMe.svelte"; import AboutMe from "$elem/aboutMe.svelte";
import Jobs from "$elem/jobs.svelte"; import Jobs from "$elem/jobs.svelte";
import Menu from "$elem/menu.svelte";
import Extra from '$elem/extra.svelte';
import Training from '$elem/training.svelte'
import Contacts from '$elem/contacts.svelte'
let jobsHandler: Jobs;
let menuHandler: Menu;
let aboutMe:AboutMe;
let currentLanguage: string ='it';
function changeLanguage(language:string){
console.log(language);
jobsHandler.changeLanguage(language);
menuHandler.changeLanguage(language);
aboutMe.changeLanguage(language);
}
let titles = {home:{it:"Home",en:"Home"},
job:{it:"Esperienze",en:"Experiences"},
school:{it:"Formazione",en:"Training"},
contacts:{it:"Contatti",en:"Contacts"},
hobbies:{it:"Tempo libero",en:"Hobbies"}}
</script> </script>
<div class="maindiv"> <div class="maindiv">
<div class="about"> <!-- svelte-ignore a11y-invalid-attribute -->
<AboutMe/> <div class="language-selector" id="language-selector"> <a href="#" on:click={()=>{changeLanguage('it')}}>IT</a> <a href="#" on:click={()=>{changeLanguage('en')}}>EN</a> </div>
<div class="menu">
<Menu bind:this="{menuHandler}"/>
</div> </div>
<div class="jobs"> <div class="about" id="home">
<Jobs/> <AboutMe bind:this="{aboutMe}"/>
</div>
<div class="content" id="job">
<h2>{titles.job[currentLanguage]}</h2>
<Jobs bind:this="{jobsHandler}"/>
</div>
<div class="content" id="school">
<h2>{titles.school[currentLanguage]}</h2>
<Training/>
</div>
<div class="content" id="hobbies">
<h2>{titles.hobbies[currentLanguage]}</h2>
<Extra />
</div>
<div class="content" id="contacts">
<h2>{titles.contacts[currentLanguage]}</h2>
<Contacts/>
</div> </div>
</div> </div>
<style lang="scss"> <style lang="scss">
@import "./static/colors.scss"; @import "./static/colors.scss";
.maindiv { .maindiv {
width: 100vw; background-color: $middle-blue-green;
height: 100vh;
background-color: $cultured;
margin: 0; margin: 0;
color: $rich-black-fogra-29; color: $rich-black-fogra-29;
display: flex;
align-items: center;
justify-content:flex-start;
flex-flow: column;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
// font-family: Exo2-RegularCondensed; height: 100vh;
overflow: auto;
// padding-bottom: 3vh;
}
.language-selector {
width: 100%;
color: $rich-black-fogra-29;
display: flex;
justify-content: flex-end;
background-color: $steel-blue;
}
.language-selector > a, .language-selector > a:visited {
text-decoration: none;
color: $rich-black-fogra-29;
font-size: 16px;
margin-right: 20px ;
} }
.about{ .about{
width: 100vw; margin-top: 1vh;
min-height: 200px; margin-bottom: 1vh;
height: 15%;
max-height: 300px;
background-color: $middle-blue-green;
display: flex;
align-items: center;
justify-content:center;
} }
.jobs{ .content{
background-color: $navajo-white; // padding-top: 2vh;
display: flex; margin-bottom: 2vh;
flex-direction: column;
align-items: center;
justify-content:flex-start;
width: 100vw;
height: 100vh;
overflow: auto;
} }
h2{
width: 100%;
text-align: center;
}
.menu {
width: 100%;
// position: -webkit-sticky; /* Safari */
// position: sticky;
// bottom: 0;
// top: 0;
}
</style> </style>

2
static/colors.scss
View File

@ -6,3 +6,5 @@ $middle-blue-green: #9ad5d3ff;
$steel-blue: #3a7ca5ff; $steel-blue: #3a7ca5ff;
/* SCSS Gradient */ /* SCSS Gradient */
$cv-max-width: 800px

BIN
static/curriculum_it.pdf Normal file
View File

Binary file not shown.

3
static/main.css
View File

@ -1,7 +1,4 @@
body{ body{
height: 100%;
width: 100%;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-family: CortisasPro-Regular;
} }

BIN
static/webpage.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 192 KiB