basic version
This commit is contained in:
parent
a99ee9fa45
commit
d12945711f
@ -1,31 +1,59 @@
|
||||
<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>
|
||||
<div class="aboutMe">
|
||||
<img src="/profile_pic.jpg" alt="profile" class="profile" />
|
||||
<div class="info">
|
||||
<h1>Gianmarco Pettinato</h1>
|
||||
<p>Back-end developer GNU/Linux user </p>
|
||||
<div>
|
||||
<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://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>
|
||||
<div class="header"><img src="/profile_pic.jpg" alt="profile" class="profile" />
|
||||
<div class="info">
|
||||
<h1>Gianmarco Pettinato</h1>
|
||||
<div>
|
||||
<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://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="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 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>
|
||||
<style lang="scss">
|
||||
@import './static/colors.scss';
|
||||
@import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
|
||||
.aboutMe{
|
||||
padding: 1vh;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
min-width: 370px;
|
||||
max-width: 550px;
|
||||
width: 40vw;
|
||||
height: auto;
|
||||
align-items: center;
|
||||
background-color: $cultured;
|
||||
border-radius: 10px;
|
||||
margin: auto;
|
||||
max-width: $cv-max-width;
|
||||
width: 95%;
|
||||
height: auto;
|
||||
border-style: solid;
|
||||
border-width: 0.1px;
|
||||
border-color: $rich-black-fogra-29;
|
||||
@ -33,11 +61,20 @@
|
||||
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: 2vh;
|
||||
padding-bottom: 2vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cv{
|
||||
font-size: unset;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.profile{
|
||||
border-radius: 50%;
|
||||
height: 150px;
|
||||
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;
|
||||
@ -46,15 +83,41 @@
|
||||
}
|
||||
|
||||
.info{
|
||||
margin: 1px;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
color: $rich-black-fogra-29;
|
||||
width: auto;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.info>h1{
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
a,a:visited{
|
||||
font-size: 1.5em;
|
||||
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>
|
||||
107
src/elements/contacts.svelte
Normal file
107
src/elements/contacts.svelte
Normal 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
105
src/elements/extra.svelte
Normal 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>
|
||||
@ -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>
|
||||
@ -1,45 +1,45 @@
|
||||
<script lang="ts">
|
||||
import data from '../model/data'
|
||||
import data from '../model/jobs.json'
|
||||
import type { Schema } from 'src/model/job';
|
||||
export let currentLanguage = 'it'
|
||||
import { onMount, tick } from 'svelte';
|
||||
const jobs:Schema[] = data.default as Schema[];
|
||||
onMount(()=>{
|
||||
console.log(jobs[0]);
|
||||
})
|
||||
const jobs:Schema[] = data as Schema[];
|
||||
|
||||
export function changeLanguage(language = 'it'){
|
||||
currentLanguage = language
|
||||
}
|
||||
</script>
|
||||
<div class="jobsContainer">
|
||||
{#each jobs as job }
|
||||
{#each jobs as job, index }
|
||||
<div class="job container">
|
||||
<h2>{job.title[currentLanguage]}</h2>
|
||||
<div class="added-info">
|
||||
{job.year.start} - {job.year.end}
|
||||
</div>
|
||||
<h3>{job.title[currentLanguage]}</h3>
|
||||
<div class="job-content">
|
||||
<div class="images-container">
|
||||
{#each job.images as image }
|
||||
<img src="{image}" alt="realtive to the article"/>
|
||||
{/each}
|
||||
</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>
|
||||
<div class="added-info">
|
||||
<div>
|
||||
{#each job.collaborators as collaborator}
|
||||
<a href={collaborator.ref}>{collaborator.name}{collaborator.surname}</a>
|
||||
{/each}
|
||||
</div>
|
||||
<div>
|
||||
{#each job.languages as language}
|
||||
{language+" "}
|
||||
{/each}
|
||||
</div>
|
||||
<div>
|
||||
{#each job.tecnologies as tecnology}
|
||||
{tecnology+" "}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="added-info">
|
||||
<div class="added-info">
|
||||
{job.year.start} - {job.year.end}
|
||||
</div>
|
||||
<div>
|
||||
{#each job.collaborators as collaborator}
|
||||
<a href={collaborator.ref}>{collaborator.name}{collaborator.surname}</a>
|
||||
{/each}
|
||||
</div>
|
||||
<div>
|
||||
{#each job.languages as language}
|
||||
{language+" "}
|
||||
{/each}
|
||||
</div>
|
||||
<div>
|
||||
{#each job.tecnologies as tecnology}
|
||||
{tecnology+" "}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -47,8 +47,17 @@
|
||||
</div>
|
||||
<style lang="scss">
|
||||
@import './static/colors.scss';
|
||||
.container{
|
||||
background-color: $cultured;
|
||||
.jobsContainer{
|
||||
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;
|
||||
@ -56,54 +65,62 @@
|
||||
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;
|
||||
}
|
||||
.jobsContainer{
|
||||
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;
|
||||
padding-top: 1.5vh;
|
||||
padding-bottom: 1.5vh;
|
||||
}
|
||||
.job{
|
||||
background-color: $cultured;
|
||||
min-height: 300px;
|
||||
height: auto;
|
||||
width: 90%;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
padding-top: 1vh;
|
||||
width: 90%;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
padding-top: 2vh;
|
||||
padding-bottom: 2vh;
|
||||
background-color: $cultured;
|
||||
border-style: solid;
|
||||
border-width: 0.1px;
|
||||
}
|
||||
|
||||
.job-content{
|
||||
text-align: center;
|
||||
padding: 2vh;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2vw;
|
||||
}
|
||||
.text-content{
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.added-info{
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.images-container{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 30px;
|
||||
.text-content{
|
||||
height: auto;
|
||||
margin-left: 2.5vw;
|
||||
margin-right: 2.5vw;
|
||||
}
|
||||
|
||||
|
||||
img{
|
||||
width: 30vw;
|
||||
max-width: 500px;
|
||||
max-width: 200px;
|
||||
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>
|
||||
88
src/elements/menu.svelte
Normal file
88
src/elements/menu.svelte
Normal 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
66
src/elements/training.svelte
Normal 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>
|
||||
@ -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"]
|
||||
}
|
||||
|
||||
]
|
||||
@ -1,3 +1,4 @@
|
||||
import * as data from './data.json';
|
||||
|
||||
export default data as unknown[];
|
||||
import * as jobCollection from './jobs.json';
|
||||
import * as hobbyCollection from './hobby.json';
|
||||
jobCollection;
|
||||
hobbyCollection;
|
||||
23
src/model/hobby.json
Normal file
23
src/model/hobby.json
Normal 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
23
src/model/jobs.json
Normal 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"]
|
||||
}
|
||||
]
|
||||
@ -1,51 +1,99 @@
|
||||
<script lang="ts">
|
||||
// import Header from "$elem/header.svelte";
|
||||
import AboutMe from "$elem/aboutMe.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>
|
||||
<div class="maindiv">
|
||||
<div class="about">
|
||||
<AboutMe/>
|
||||
<!-- svelte-ignore a11y-invalid-attribute -->
|
||||
<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 class="jobs">
|
||||
<Jobs/>
|
||||
<div class="about" id="home">
|
||||
<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>
|
||||
<style lang="scss">
|
||||
@import "./static/colors.scss";
|
||||
.maindiv {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: $cultured;
|
||||
background-color: $middle-blue-green;
|
||||
margin: 0;
|
||||
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: 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{
|
||||
width: 100vw;
|
||||
min-height: 200px;
|
||||
height: 15%;
|
||||
max-height: 300px;
|
||||
background-color: $middle-blue-green;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content:center;
|
||||
margin-top: 1vh;
|
||||
margin-bottom: 1vh;
|
||||
}
|
||||
.jobs{
|
||||
background-color: $navajo-white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content:flex-start;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
.content{
|
||||
// padding-top: 2vh;
|
||||
margin-bottom: 2vh;
|
||||
}
|
||||
|
||||
h2{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 100%;
|
||||
// position: -webkit-sticky; /* Safari */
|
||||
// position: sticky;
|
||||
// bottom: 0;
|
||||
// top: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -6,3 +6,5 @@ $middle-blue-green: #9ad5d3ff;
|
||||
$steel-blue: #3a7ca5ff;
|
||||
|
||||
/* SCSS Gradient */
|
||||
|
||||
$cv-max-width: 800px
|
||||
BIN
static/curriculum_it.pdf
Normal file
BIN
static/curriculum_it.pdf
Normal file
Binary file not shown.
@ -1,7 +1,4 @@
|
||||
body{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: CortisasPro-Regular;
|
||||
}
|
||||
BIN
static/webpage.png
Normal file
BIN
static/webpage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 192 KiB |
Loading…
Reference in New Issue
Block a user