wip: new theme
Some checks failed
pettinato.eu/cv-site/pipeline/head There was a failure building this commit
Some checks failed
pettinato.eu/cv-site/pipeline/head There was a failure building this commit
This commit is contained in:
Gianmarco Pettinato
parent
1ff883e624
commit
7cbbdf2f1a
1
Jenkinsfile
vendored
Normal file
1
Jenkinsfile
vendored
Normal file
@ -0,0 +1 @@
|
||||
{
|
||||
@ -1,3 +0,0 @@
|
||||
:root {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
@ -1,130 +1,60 @@
|
||||
<script lang="ts">
|
||||
import Contacts from './Contacts.svelte';
|
||||
export let currentLanguage = 'it';
|
||||
const whoIt='Ciao! Sono Gianmarco Pettinato, mi sono laureato in scienze informatiche e sono uno sviluppatore full-stack.\
|
||||
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, sia front-end che back-end.\
|
||||
In particolare con C++ con Qt e TypeScript con Express, serverless, Angular, Vue.js 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 all\'ambiente dei dispositivi IoT e del wearble tech.\
|
||||
Sono interessato in particolar modo all'ambiente dei dispositivi IoT e del wearble tech.\
|
||||
Nel tempo libero mi dedico alla gestione del mio home sever e alla costruzione e manutenzione di computer.\
|
||||
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.\
|
||||
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 or back-end.\
|
||||
In particular, I have experience in C++ with Qt and TypeScript with Express, serverless, Angular, Vue.js 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.';
|
||||
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
|
||||
// }
|
||||
it: whoIt,
|
||||
en: whoEn
|
||||
};
|
||||
</script>
|
||||
<div class="aboutMe">
|
||||
<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">
|
||||
|
||||
<div>
|
||||
<Contacts />
|
||||
<div class="whoIAm">
|
||||
<p>
|
||||
{who[currentLanguage]}
|
||||
</p>
|
||||
</div>
|
||||
<div class="cv">
|
||||
<a rel="external" href="/curriculum_it.pdf"><i class="fas fa-download"></i> curriculum_it.pdf</a>
|
||||
<a rel="external" href="/curriculum_en.pdf"><i class="fas fa-download"></i> curriculum_en.pdf</a>
|
||||
<div>
|
||||
<a rel="external" href="/curriculum_it.pdf"
|
||||
>curriculum_it.pdf <i class="fas fa-download" />
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a rel="external" href="/curriculum_en.pdf"
|
||||
>curriculum_en.pdf <i class="fas fa-download" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import './static/colors.scss';
|
||||
@import './static/elements.scss';
|
||||
@import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
|
||||
.aboutMe{
|
||||
background-color: $cultured;
|
||||
border-radius: 10px;
|
||||
.cv {
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
max-width: $cv-max-width;
|
||||
width: 90%;
|
||||
height: auto;
|
||||
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: 1vh;
|
||||
padding-bottom: 2vh;
|
||||
padding-top: 2vh;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.cv>a{
|
||||
font-size: unset;
|
||||
text-decoration: none;
|
||||
width: 50%;
|
||||
margin: 20px;
|
||||
}
|
||||
.cv{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
}
|
||||
|
||||
.info{
|
||||
margin: 1px;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
color: $rich-black-fogra-29;
|
||||
}
|
||||
|
||||
.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;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.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;
|
||||
.whoIAm {
|
||||
width: 80% !important;
|
||||
margin: auto;
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,81 +1,48 @@
|
||||
<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><i class="fas fa-at"></i> e-mail: <a href="mailto://gianmarco@pettinato.eu">gianmarco@pettinato.eu</a></li>
|
||||
<li><i class="fab fa-telegram-plane"></i> telegram: <a href="https://t.me/jatus_93">@jatus_93</a></li>
|
||||
<li><i class="fab fa-twitter"></i> twitter: <a href="https://twitter.com/jatus_93">@jatus_93</a></li>
|
||||
<li><i class="fab fa-linkedin-in"></i> linkedin: <a href="https://www.linkedin.com/in/gianmarco-pettinato/">Gianmarco Pettinato</a></li>
|
||||
|
||||
<div class="contacts">
|
||||
<div><img src="/profile_pic.jpg" alt="profile" class="profile" /></div>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="mailto://gianmarco@pettinato.eu"
|
||||
><i class="fas fa-at" /> e-mail: gianmarco@pettinato.eu</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://t.me/jatus_93"><i class="fab fa-telegram-plane" /> telegram: @jatus_93</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/jatus_93"><i class="fab fa-twitter" /> twitter: @jatus_93</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.linkedin.com/in/gianmarco-pettinato/"
|
||||
><i class="fab fa-linkedin-in" /> linkedin: Gianmarco Pettinato</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import './static/colors.scss';
|
||||
.contactContainer{
|
||||
margin: auto;
|
||||
background-color:$navajo-white;
|
||||
border-radius: 10px;
|
||||
width: 90%;
|
||||
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: 1vh;
|
||||
}
|
||||
|
||||
.contacts{
|
||||
background-color: $cultured;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
flex-wrap: wrap;
|
||||
align-items: center ;
|
||||
border-radius: 10px;
|
||||
padding: 1vh;
|
||||
background-color: $cultured;
|
||||
border-style: solid;
|
||||
border-width: 0.1px;
|
||||
}
|
||||
|
||||
.contacts>ul{
|
||||
list-style: none;
|
||||
}
|
||||
.contacts>ul>li{
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.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{
|
||||
@import './static/elements.scss';
|
||||
@import './static/breakpoints.scss';
|
||||
.contacts {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
height: auto;
|
||||
max-width: $cv-max-width;
|
||||
width: 80vw;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.contacts{
|
||||
width: 98%;
|
||||
ul {
|
||||
text-align: justify;
|
||||
list-style-type: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.contacts>ul{
|
||||
margin: unset;
|
||||
@media screen and (min-width: $min-tablet) {
|
||||
.contacts {
|
||||
width: 80%;
|
||||
flex-direction: row;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
72
src/elements/JobElement.svelte
Normal file
72
src/elements/JobElement.svelte
Normal file
@ -0,0 +1,72 @@
|
||||
<script lang="ts">
|
||||
import MarkdownIt from 'markdown-it';
|
||||
const md = new MarkdownIt({
|
||||
html: true,
|
||||
xhtmlOut: true,
|
||||
typographer: true,
|
||||
breaks: true,
|
||||
linkify: true
|
||||
});
|
||||
import type { Schema } from 'src/model/job';
|
||||
export let job: Schema;
|
||||
export let currentLanguage = '';
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<h3>{job.title[currentLanguage]}</h3>
|
||||
<div>
|
||||
<div class="image-container">
|
||||
{#each job.images as image}
|
||||
<img src={image} alt={image} />
|
||||
{/each}
|
||||
</div>
|
||||
<div class="text-content">
|
||||
{@html md.render(job.content[currentLanguage])}
|
||||
</div>
|
||||
</div>
|
||||
<div class="added-info">
|
||||
{#if job.year.lenght != 0}
|
||||
Date: {job.year.start}{#if job.year.end.length != 0}; {job.year.end} {/if}
|
||||
{/if}
|
||||
<div>
|
||||
{#if job.collaborators.length != 0}
|
||||
Collab:
|
||||
{/if}
|
||||
{#each job.collaborators as collaborator, index}
|
||||
<a href={collaborator.ref}>{collaborator.name} {collaborator.surname}</a>{index !=
|
||||
job.collaborators.length - 1
|
||||
? ', '
|
||||
: ''}
|
||||
{/each}
|
||||
</div>
|
||||
<div>
|
||||
{#if job.languages.length != 0}
|
||||
Lang:
|
||||
{/if}
|
||||
{#each job.languages as language, index}
|
||||
{language}{index != job.languages.length - 1 ? ', ' : ''}
|
||||
{/each}
|
||||
</div>
|
||||
<div>
|
||||
{#if job.tecnologies.length != 0}
|
||||
Tech:
|
||||
{/if}
|
||||
{#each job.tecnologies as tecnology, index}
|
||||
{tecnology}{index != job.tecnologies.length - 1 ? ', ' : ''}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import './static/elements.scss';
|
||||
.text-content {
|
||||
margin: auto;
|
||||
width: 70%;
|
||||
text-align: justify;
|
||||
}
|
||||
.added-info {
|
||||
margin-top: 50px;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
@ -1,128 +1,14 @@
|
||||
<script lang="ts">
|
||||
import MarkdownIt from 'markdown-it';
|
||||
const md = new MarkdownIt({
|
||||
html:true,
|
||||
xhtmlOut:true,
|
||||
typographer: true,
|
||||
breaks: true,
|
||||
linkify: true
|
||||
});
|
||||
import type { Schema } from 'src/model/job';
|
||||
import JobElement from './JobElement.svelte';
|
||||
export let currentLanguage = '';
|
||||
export let jobs:Schema[] = [];
|
||||
</script>
|
||||
<div class="jobsContainer">
|
||||
<div>
|
||||
{#each jobs as job }
|
||||
<div class="job container">
|
||||
<h3>{job.title[currentLanguage]}</h3>
|
||||
<div class="job-content">
|
||||
<div class="images-container">
|
||||
{#each job.images as image }
|
||||
<img src="{image}" alt="{image}"/>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="text-content">
|
||||
{@html md.render(job.content[currentLanguage])}
|
||||
</div>
|
||||
</div>
|
||||
<div class="added-info">
|
||||
{#if job.year.lenght!=0}
|
||||
Date: {job.year.start}{#if job.year.end.length!=0}; {job.year.end} {/if}
|
||||
{/if}
|
||||
<div>
|
||||
{#if job.collaborators.length!=0}
|
||||
Collab:
|
||||
{/if}
|
||||
{#each job.collaborators as collaborator, index }
|
||||
<a href="{collaborator.ref}">{collaborator.name} {collaborator.surname}</a>{index!=job.collaborators.length-1?', ':''}
|
||||
{/each}
|
||||
</div>
|
||||
<div>
|
||||
{#if job.languages.length!=0}
|
||||
Lang:
|
||||
{/if}
|
||||
{#each job.languages as language,index }
|
||||
{language}{index!=job.languages.length-1?', ':''}
|
||||
{/each}
|
||||
</div>
|
||||
<div>
|
||||
{#if job.tecnologies.length!=0}
|
||||
Tech:
|
||||
{/if}
|
||||
{#each job.tecnologies as tecnology, index }
|
||||
{tecnology}{index!=job.tecnologies.length-1?', ':''}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<JobElement {job} {currentLanguage} />
|
||||
{/each}
|
||||
</div>
|
||||
<style lang="scss">
|
||||
@import './static/colors.scss';
|
||||
.jobsContainer{
|
||||
margin: auto;
|
||||
background-color:$steel-blue;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
border-radius: 10px;
|
||||
width: 90%;
|
||||
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: 1vh;
|
||||
}
|
||||
.job{
|
||||
background-color: $cultured;
|
||||
text-align: center;
|
||||
width: 98%;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 1vh;
|
||||
padding: 1vh;
|
||||
background-color: $cultured;
|
||||
border-style: solid;
|
||||
border-width: 0.1px;
|
||||
}
|
||||
.job:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.job-content{
|
||||
padding: 2vh;
|
||||
}
|
||||
|
||||
.added-info{
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-content{
|
||||
margin: auto;
|
||||
text-align: justify;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
img{
|
||||
width: auto;
|
||||
max-width: 80%;
|
||||
max-height: 20%;
|
||||
background-color: $rich-black-fogra-29;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
.jobsContainer{
|
||||
display: flex;
|
||||
height: auto;
|
||||
max-width: $cv-max-width;
|
||||
width: 80vw;
|
||||
}
|
||||
|
||||
.job-content{
|
||||
flex-wrap: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@import './static/elements.scss';
|
||||
</style>
|
||||
|
||||
@ -1,86 +1,85 @@
|
||||
<script lang="ts">
|
||||
import { scrollto } from "svelte-scrollto";
|
||||
export let currentLanguage = 'it'
|
||||
export const menu = {home:{it:"Home",en:"Home"},
|
||||
job:{it:"Esperienze",en:"Experiences"},
|
||||
school:{it:"Formazione",en:"Training"},
|
||||
contacts:{it:"Contatti",en:"Contacts"},
|
||||
portfolio:{it:"Portfolio",en:"Portfolio"}}
|
||||
import { scrollto } from 'svelte-scrollto';
|
||||
export let currentLanguage = 'it';
|
||||
export const menu = {
|
||||
home: { it: 'Home', en: 'Home' },
|
||||
job: { it: 'Esperienze', en: 'Experiences' },
|
||||
school: { it: 'Formazione', en: 'Training' },
|
||||
contacts: { it: 'Contatti', en: 'Contacts' },
|
||||
portfolio: { it: 'Portfolio', en: 'Portfolio' }
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="div-menu">
|
||||
<div class="wrapper">
|
||||
<a use:scrollto={{element:'#home', offset:-70}} class="menu-element" href="#home" alt="{menu.home[currentLanguage]}"><i class="fas fa-home"></i><span class="hide">{menu.home[currentLanguage]}</span></a>
|
||||
<a use:scrollto={{element:'#jobs', offset:-50}} class="menu-element" href="#jobs" alt="{menu.job[currentLanguage]}"><i class="fas fa-user-tie"></i><span class="hide">{menu.job[currentLanguage]}</span></a>
|
||||
<a use:scrollto={{element:'#training', offset:-50}} class="menu-element" href="#training" alt="{menu.school[currentLanguage]}"><i class="fas fa-graduation-cap"></i><span class="hide">{menu.school[currentLanguage]}</span></a>
|
||||
<a use:scrollto={{element:'#portfolio', offset:-50}} class="menu-element" href="#portfolio" alt="{menu.portfolio[currentLanguage]}"><i class="fas fa-user-clock"></i><span class="hide">{menu.portfolio[currentLanguage]}</span></a>
|
||||
<a use:scrollto={{element:'#contacts', offset:-50}} class="menu-element" href="#contacts" alt="{menu.contacts[currentLanguage]}"><i class="fas fa-address-card"></i><span class="hide">{menu.contacts[currentLanguage]}</span></a>
|
||||
<a
|
||||
use:scrollto={{ element: '#home', offset: -70 }}
|
||||
href="#home"
|
||||
alt={menu.home[currentLanguage]}
|
||||
>
|
||||
<span class="hide">{menu.home[currentLanguage]}</span><i class="fas fa-home" /></a
|
||||
>
|
||||
|
||||
<a
|
||||
use:scrollto={{ element: '#jobs', offset: -50 }}
|
||||
class="menu-element"
|
||||
href="#jobs"
|
||||
alt={menu.job[currentLanguage]}
|
||||
><span class="hide">{menu.job[currentLanguage]}</span><i class="fas fa-user-tie" /></a
|
||||
>
|
||||
|
||||
<a
|
||||
use:scrollto={{ element: '#training', offset: -50 }}
|
||||
class="menu-element"
|
||||
href="#training"
|
||||
alt={menu.school[currentLanguage]}
|
||||
><span class="hide">{menu.school[currentLanguage]}</span><i
|
||||
class="fas fa-graduation-cap"
|
||||
/></a
|
||||
>
|
||||
|
||||
<a
|
||||
use:scrollto={{ element: '#portfolio', offset: -50 }}
|
||||
class="menu-element"
|
||||
href="#portfolio"
|
||||
alt={menu.portfolio[currentLanguage]}
|
||||
><span class="hide">{menu.portfolio[currentLanguage]}</span><i class="fas fa-user-clock" /></a
|
||||
>
|
||||
|
||||
<a
|
||||
use:scrollto={{ element: '#contacts', offset: -50 }}
|
||||
class="menu-element"
|
||||
href="#contacts"
|
||||
alt={menu.contacts[currentLanguage]}
|
||||
><span class="hide">{menu.contacts[currentLanguage]}</span><i
|
||||
class="fas fa-address-card"
|
||||
/></a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import './static/elements.scss';
|
||||
@import './static/breakpoints.scss';
|
||||
@import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
|
||||
@import './static/colors.scss';
|
||||
.div-menu{
|
||||
width: 100%;
|
||||
background-color: $steel-blue;
|
||||
.div-menu {
|
||||
width: 90%;
|
||||
max-width: 1024px;
|
||||
}
|
||||
|
||||
.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;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.hide{
|
||||
a {
|
||||
border: solid black;
|
||||
width: 15%;
|
||||
font-size: 20px;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
@media screen and (max-width: $min-tablet) {
|
||||
.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>
|
||||
@ -1,19 +1,20 @@
|
||||
<script lang="ts">
|
||||
import MarkdownIt from 'markdown-it'
|
||||
import MarkdownIt from 'markdown-it';
|
||||
const md = new MarkdownIt({
|
||||
html:true,
|
||||
xhtmlOut:true,
|
||||
typographer: true,
|
||||
html: true,
|
||||
xhtmlOut: true,
|
||||
typographer: true
|
||||
});
|
||||
import data from '../model/training.json'
|
||||
import data from '../model/training.json';
|
||||
import type { Schema } from 'src/model/job';
|
||||
export let currentLanguage = 'it'
|
||||
const training:Schema[] = data as Schema[];
|
||||
export let currentLanguage = 'it';
|
||||
const training: Schema[] = data as Schema[];
|
||||
</script>
|
||||
<div class="trainingContainer">
|
||||
{#each training as school }
|
||||
|
||||
<div class="training">
|
||||
{#each training as school}
|
||||
<div class="element">
|
||||
<img src="{school.images[0]}" alt="school logo" />
|
||||
<img src={school.images[0]} alt="school logo" />
|
||||
<div>
|
||||
<h4>{school.title[currentLanguage]}</h4>
|
||||
<p>{school.content[currentLanguage]}</p>
|
||||
@ -22,63 +23,39 @@
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import './static/colors.scss';
|
||||
.trainingContainer{
|
||||
margin: auto;
|
||||
background-color:$navajo-white;
|
||||
@import './static/elements.scss';
|
||||
@import './static/breakpoints.scss';
|
||||
.training {
|
||||
width: 100%;
|
||||
}
|
||||
.element {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
border-radius: 10px;
|
||||
width: 90%;
|
||||
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: 1vh;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 150px;
|
||||
object-fit: scale-down;
|
||||
}
|
||||
|
||||
.element{
|
||||
background-color: $cultured;
|
||||
text-align: justify;
|
||||
display: flex;
|
||||
align-items: center ;
|
||||
width: 98%;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 1vh;
|
||||
padding: 1vh;
|
||||
background-color: $cultured;
|
||||
border-style: solid;
|
||||
border-width: 0.1px;
|
||||
}
|
||||
|
||||
.element:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.element>img{
|
||||
max-width: 35%;
|
||||
div {
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.element>div{
|
||||
max-width: 50%;
|
||||
margin-left: auto;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.element>div>p{
|
||||
text-align: center;
|
||||
overflow-wrap: break-word;
|
||||
text-align: justify;
|
||||
@media screen and (min-width: $min-tablet) {
|
||||
.element {
|
||||
flex-direction: row;
|
||||
div {
|
||||
width: 50%;
|
||||
margin-right: 0;
|
||||
}
|
||||
img {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
.trainingContainer{
|
||||
display: flex;
|
||||
height: auto;
|
||||
max-width: $cv-max-width;
|
||||
width: 80vw;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -35,8 +35,8 @@
|
||||
},
|
||||
"title": {"en":"Jatus.tech my start-up","it":"La mia start-up Jatus.tech"},
|
||||
"content": {
|
||||
"en":"Through the 2021, I've worked to begin my independent activity base on my idea of business. To do so, I learnt different practices and filled many roles:<div style=\"margin-left: -25px;\">\n- Create a work's infrastructure, mainly create a centralized resource on the server:\n - Manage the **GNU\/Linux** server with \"Unraid\" as distribution.\n - Manage all the services using **Docker**:\n - **GitLab**, with the runner for CI\/CD, other than the software repositories I managed to setup:\n - package **npm** repository\n - **Docker** repository\n - **NginxProxyManager** to handle the public services in reverse proxy\n - **SonarQube** to automatically verify the software quality\n - Manage all the virtual machines to develop and deploy software in the staging environment\n - Project and develop the software, main activity of this endeavour:\n - Project the software architecture\n - Project the database\n - Implement the software based on the architecture:\n - Back-end **TypeScript** on **AWS-Lambda** platform with **Serverless framework**\n - Front-end in **TypeScript** with **Nativescript** framework\n - Implement the database architecture with **MongoDB**\n - Create a Proof of Concept of the application\n - Project and develop **CI\/CD** solution for the product:\n - Create pipelines for the CI\/CD process in the **GitLab** environment\n - Create **Docker files** to perform the unit test and compilation of the source code in the repositories.</div>",
|
||||
"it":"Nel corso del 2021 ho lavorato, per avviare una attività indipendente che si basa su una mia idea di app. Per far ciò, durante questo periodo ho dovuto ricoprire diversi ruoli e svolgere diverse mansioni:<div style=\"margin-left: -25px;\">\n- Creare un'infrastruttura di lavoro, un server dove centralizzare le risorse, nello specifico:\n - Gestire il server **GNU\/Linux** con la distribuzione *prosumer* Unraid..\n - Gestire i vari servizi in container **Docker**:\n - **GitLab** con il suo runner per le pipeline **CI/CD**:\n - *repository* di pacchetti **npm** \n - *repository* di immagini **Docker**\n - **NginxProxyManager** per la gestione dei servizi pubblici in reverse proxy\n - **SonarQube** per la verifica automatica della qualità del codice\n - Gestione di macchine virtuali per lo sviluppo di codice ma anche come *staging area* per testare le applicazioni in un ambiente *production like*\n - Progettare e sviluppare il software, focus di questa attività:\n - Progettare l'architettura del software\n - Progettare il database\n - Implementare l'architettura:\n - Back-end in **TypeScript** su piattaforma **AWS-Lambda** con **Serveless framework**\n - Front-end in app *cross-platform* in **TypeScript** con **Nativescript**\n - Implementare l'architettura di database in **MongoDB**\n - Creare un *proof of concept* dell'applicazione.\n - Progettare e sviluppare soluzioni di **CI\/CD** legate al prodotto:\n - Creare pipeline automatiche in **GitLab** con riferimento al \"versionamento\" interno\n - Creare Docker-file con l'ambiente di compilazione da utilizzare con le pipeline automatiche.</div>"
|
||||
"en":"Through the 2021, I've worked to begin my independent activity base on my idea of business. To do so, I learnt different practices and filled many roles:\n- Create a work's infrastructure, mainly create a centralized resource on the server:\n - Manage the **GNU\/Linux** server with \"Unraid\" as distribution.\n - Manage all the services using **Docker**:\n - **GitLab**, with the runner for CI\/CD, other than the software repositories I managed to setup:\n - package **npm** repository\n - **Docker** repository\n - **NginxProxyManager** to handle the public services in reverse proxy\n - **SonarQube** to automatically verify the software quality\n - Manage all the virtual machines to develop and deploy software in the staging environment\n - Project and develop the software, main activity of this endeavour:\n - Project the software architecture\n - Project the database\n - Implement the software based on the architecture:\n - Back-end **TypeScript** on **AWS-Lambda** platform with **Serverless framework**\n - Front-end in **TypeScript** with **Nativescript** framework\n - Implement the database architecture with **MongoDB**\n - Create a Proof of Concept of the application\n - Project and develop **CI\/CD** solution for the product:\n - Create pipelines for the CI\/CD process in the **GitLab** environment\n - Create **Docker files** to perform the unit test and compilation of the source code in the repositories.",
|
||||
"it":"Nel corso del 2021 ho lavorato, per avviare una attività indipendente che si basa su una mia idea di app. Per far ciò, durante questo periodo ho dovuto ricoprire diversi ruoli e svolgere diverse mansioni:\n- Creare un'infrastruttura di lavoro, un server dove centralizzare le risorse, nello specifico:\n - Gestire il server **GNU\/Linux** con la distribuzione *prosumer* Unraid..\n - Gestire i vari servizi in container **Docker**:\n - **GitLab** con il suo runner per le pipeline **CI/CD**:\n - *repository* di pacchetti **npm** \n - *repository* di immagini **Docker**\n - **NginxProxyManager** per la gestione dei servizi pubblici in reverse proxy\n - **SonarQube** per la verifica automatica della qualità del codice\n - Gestione di macchine virtuali per lo sviluppo di codice ma anche come *staging area* per testare le applicazioni in un ambiente *production like*\n - Progettare e sviluppare il software, focus di questa attività:\n - Progettare l'architettura del software\n - Progettare il database\n - Implementare l'architettura:\n - Back-end in **TypeScript** su piattaforma **AWS-Lambda** con **Serveless framework**\n - Front-end in app *cross-platform* in **TypeScript** con **Nativescript**\n - Implementare l'architettura di database in **MongoDB**\n - Creare un *proof of concept* dell'applicazione.\n - Progettare e sviluppare soluzioni di **CI\/CD** legate al prodotto:\n - Creare pipeline automatiche in **GitLab** con riferimento al \"versionamento\" interno\n - Creare Docker-file con l'ambiente di compilazione da utilizzare con le pipeline automatiche."
|
||||
},
|
||||
"collaborators": [],
|
||||
"languages": [
|
||||
@ -108,8 +108,8 @@
|
||||
},
|
||||
"title": {"en":"ICT office's assistant","it":"Assistente dell'ufficio ICT "},
|
||||
"content": {
|
||||
"en":"I applied to this position, in Saxon Hill Academy, through the European project Leonardo which provided accommodation for the stay, an English course and a workplace mainly for practices the language skill. In Saxon Hill Academy, my responsibilities were:<div style=\"margin-left: -25px;\">\n - Maintenance of administration's computers.\n - Maintenance of students' computers.\n - Make the sensorial room usable.</div>",
|
||||
"it":"Ho avuto l'opportunità di lavorare in questo ambiente grazie al progetto europeo Leonardo. Questo progetto di 4 settimane si occupava di fornire agli studenti tutto il necessario tra vitto e alloggio, prevedeva, inoltre, un corso di inglese e un luogo di lavoro dove fare principalmente pratica con la lingua. In questo contesto sono stato assegnato a Saxon Hill Academy dove ho svolto le seguenti mansioni:<div style=\"margin-left: -25px;\">\n - Manutenzione dei computer della segreteria\n - Manutenzione dei computer degli studenti \n - Rendere operativa la \"sensiorial room\"</div>"
|
||||
"en":"I applied to this position, in Saxon Hill Academy, through the European project Leonardo which provided accommodation for the stay, an English course and a workplace mainly for practices the language skill. In Saxon Hill Academy, my responsibilities were:\n - Maintenance of administration's computers.\n - Maintenance of students' computers.\n - Make the sensorial room usable.",
|
||||
"it":"Ho avuto l'opportunità di lavorare in questo ambiente grazie al progetto europeo Leonardo. Questo progetto di 4 settimane si occupava di fornire agli studenti tutto il necessario tra vitto e alloggio, prevedeva, inoltre, un corso di inglese e un luogo di lavoro dove fare principalmente pratica con la lingua. In questo contesto sono stato assegnato a Saxon Hill Academy dove ho svolto le seguenti mansioni:\n - Manutenzione dei computer della segreteria\n - Manutenzione dei computer degli studenti \n - Rendere operativa la \"sensiorial room\""
|
||||
},
|
||||
"collaborators": [],
|
||||
"languages": [],
|
||||
|
||||
@ -1,90 +1,91 @@
|
||||
<script lang="ts">
|
||||
import AboutMe from "$elem/AboutMe.svelte";
|
||||
import Jobs from "$elem/Jobs.svelte";
|
||||
import Menu from "$elem/Menu.svelte";
|
||||
import Training from '$elem/Training.svelte'
|
||||
import Contacts from '$elem/Contacts.svelte'
|
||||
import AboutMe from '$elem/AboutMe.svelte';
|
||||
import Jobs from '$elem/Jobs.svelte';
|
||||
import Menu from '$elem/Menu.svelte';
|
||||
import Training from '$elem/Training.svelte';
|
||||
import Contacts from '$elem/Contacts.svelte';
|
||||
import Data_jobs from '../model/jobs.json';
|
||||
import Data_portfolio from '../model/portfolio.json';
|
||||
import type { Schema } from "src/model/job";
|
||||
let jobs:Schema[] = Data_jobs as Schema[];
|
||||
let portfolio:Schema[] = Data_portfolio as Schema[];
|
||||
let currentLanguage: string ='it';
|
||||
let titles = {home:{it:"Home",en:"Home"},
|
||||
job:{it:"Esperienze",en:"Experiences"},
|
||||
school:{it:"Formazione",en:"Training"},
|
||||
contacts:{it:"Contatti",en:"Contacts"},
|
||||
portfolio:{it:"Portfolio",en:"Portfolio"}}
|
||||
import type { Schema } from 'src/model/job';
|
||||
let jobs: Schema[] = Data_jobs as Schema[];
|
||||
let portfolio: Schema[] = Data_portfolio as Schema[];
|
||||
let currentLanguage: string = 'it';
|
||||
let titles = {
|
||||
home: {
|
||||
it: 'Gianmarco Pettinato Sviluppatore Fullstack',
|
||||
en: 'Gianmarco Pettinato Fullstack Developer'
|
||||
},
|
||||
job: { it: 'Esperienze', en: 'Experiences' },
|
||||
school: { it: 'Formazione', en: 'Training' },
|
||||
contacts: { it: 'Contatti', en: 'Contacts' },
|
||||
portfolio: { it: 'Portfolio', en: 'Portfolio' }
|
||||
};
|
||||
</script>
|
||||
<main class="maindiv">
|
||||
|
||||
<main class="material-theme dark-theme light-theme body">
|
||||
<!-- svelte-ignore a11y-invalid-attribute -->
|
||||
<div class="language-selector" id="language-selector"> <a href="#" on:click={()=>{ currentLanguage = 'it'}}>IT</a> <a href="#" on:click={()=>{currentLanguage = 'en'}}>EN</a> </div>
|
||||
<div class="language-selector" id="language-selector">
|
||||
Lang:
|
||||
<button
|
||||
class="buttton"
|
||||
on:click={() => {
|
||||
currentLanguage = 'it';
|
||||
}}>it</button
|
||||
>
|
||||
<button
|
||||
class="buttton"
|
||||
on:click={() => {
|
||||
currentLanguage = 'en';
|
||||
}}>en</button
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="menu">
|
||||
<Menu {currentLanguage}/>
|
||||
<Menu {currentLanguage} />
|
||||
</div>
|
||||
<div class="about" id="home">
|
||||
<AboutMe {currentLanguage}/>
|
||||
|
||||
<h1>{titles.home[currentLanguage]}</h1>
|
||||
<div class="default" id="home">
|
||||
<AboutMe {currentLanguage} />
|
||||
</div>
|
||||
<div class="content" id="jobs">
|
||||
<div class="default" id="jobs">
|
||||
<h2>{titles.job[currentLanguage]}</h2>
|
||||
<Jobs jobs={jobs} {currentLanguage}/>
|
||||
<Jobs {jobs} {currentLanguage} />
|
||||
</div>
|
||||
<div class="content" id="training">
|
||||
<div class="default" id="training">
|
||||
<h2>{titles.school[currentLanguage]}</h2>
|
||||
<Training {currentLanguage} />
|
||||
</div>
|
||||
<div class="content" id="portfolio">
|
||||
<div class="default" id="portfolio">
|
||||
<h2>{titles.portfolio[currentLanguage]}</h2>
|
||||
<Jobs jobs={portfolio} {currentLanguage}/>
|
||||
<Jobs jobs={portfolio} {currentLanguage} />
|
||||
</div>
|
||||
<div class="content" id="contacts">
|
||||
<div class="default" id="contacts">
|
||||
<h2>{titles.contacts[currentLanguage]}</h2>
|
||||
<Contacts/>
|
||||
<Contacts />
|
||||
</div>
|
||||
</main>
|
||||
<style lang="scss">
|
||||
@import "./static/colors.scss";
|
||||
.maindiv {
|
||||
color: $rich-black-fogra-29;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
<style lang="scss">
|
||||
@import './static/shared.scss';
|
||||
@import './static/elements.scss';
|
||||
.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{
|
||||
margin-top: 4vh;
|
||||
margin-bottom: 4vh;
|
||||
}
|
||||
.content{
|
||||
|
||||
margin-bottom: 4vh;
|
||||
}
|
||||
|
||||
h2{
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
text-align: end;
|
||||
a {
|
||||
margin: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 100%;
|
||||
position: -webkit-sticky; /* Safari */
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
position: -webkit-sticky;
|
||||
top: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
2
static/breakpoints.scss
Normal file
2
static/breakpoints.scss
Normal file
@ -0,0 +1,2 @@
|
||||
$min-tablet: 768px;
|
||||
$min-desktop: 1024px;
|
||||
@ -1,6 +1,6 @@
|
||||
/* SCSS HEX */
|
||||
$cultured: #f2f2f2ff;
|
||||
$rich-black-fogra-29: #011627ff;
|
||||
: #011627ff;
|
||||
$navajo-white: #ffddadff;
|
||||
$middle-blue-green: #9ad5d3ff;
|
||||
$steel-blue: #3a7ca5ff;
|
||||
|
||||
@ -1,11 +1,419 @@
|
||||
|
||||
.box-with-shadow {
|
||||
background-color: $cultured;
|
||||
border-style: solid;
|
||||
border-width: 0.1px;
|
||||
border-color: $sonic-silver ;
|
||||
border-radius: 10px;
|
||||
box-shadow: -12px 26px 25px -14px $sonic-silver;
|
||||
-webkit-box-shadow: -12px 26px 25px -14px $sonic-silver;
|
||||
-moz-box-shadow: -12px 26px 25px -14px $sonic-silver;
|
||||
}
|
||||
|
||||
img.profile{
|
||||
border-radius: 50%;
|
||||
width: 35vw;
|
||||
max-width: 150px;
|
||||
border: solid 1px;
|
||||
}
|
||||
|
||||
div.default{
|
||||
width: 90%;
|
||||
max-width: 1024px;
|
||||
border: solid 1px;
|
||||
padding: 10px 10px;
|
||||
margin: auto;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 50px;
|
||||
text-align: center;
|
||||
@media screen and (min-width: 768px) {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.image-container{
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
img{
|
||||
max-width: 100%;
|
||||
max-height: 300px;
|
||||
object-fit: scale-down;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration:none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* Generated Styles - Do Not Edit */
|
||||
|
||||
.display1 {
|
||||
font-family: var(--md-sys-typescale-display1-font);
|
||||
font-weight: var(--md-sys-typescale-display1-weight);
|
||||
font-size: var(--md-sys-typescale-display1-size);
|
||||
line-height: var(--md-sys-typescale-display1-line-height);
|
||||
letter-spacing: var(--md-sys-typescale-display1-tracking);
|
||||
}
|
||||
|
||||
.display2, .display-large {
|
||||
font-family: var(--md-sys-typescale-display2-font);
|
||||
font-weight: var(--md-sys-typescale-display2-weight);
|
||||
font-size: var(--md-sys-typescale-display2-size);
|
||||
line-height: var(--md-sys-typescale-display2-line-height);
|
||||
letter-spacing: var(--md-sys-typescale-display2-tracking);
|
||||
}
|
||||
|
||||
.display3, .display-medium {
|
||||
font-family: var(--md-sys-typescale-display3-font);
|
||||
font-weight: var(--md-sys-typescale-display3-weight);
|
||||
font-size: var(--md-sys-typescale-display3-size);
|
||||
line-height: var(--md-sys-typescale-display3-line-height);
|
||||
letter-spacing: var(--md-sys-typescale-display3-tracking);
|
||||
}
|
||||
|
||||
.headline1, .display-small {
|
||||
font-family: var(--md-sys-typescale-headline1-font);
|
||||
font-weight: var(--md-sys-typescale-headline1-weight);
|
||||
font-size: var(--md-sys-typescale-headline1-size);
|
||||
line-height: var(--md-sys-typescale-headline1-line-height);
|
||||
letter-spacing: var(--md-sys-typescale-headline1-tracking);
|
||||
}
|
||||
|
||||
.headline2, .headline-large {
|
||||
font-family: var(--md-sys-typescale-headline2-font);
|
||||
font-weight: var(--md-sys-typescale-headline2-weight);
|
||||
font-size: var(--md-sys-typescale-headline2-size);
|
||||
line-height: var(--md-sys-typescale-headline2-line-height);
|
||||
letter-spacing: var(--md-sys-typescale-headline2-tracking);
|
||||
}
|
||||
|
||||
.headline3, .headline-medium {
|
||||
font-family: var(--md-sys-typescale-headline3-font);
|
||||
font-weight: var(--md-sys-typescale-headline3-weight);
|
||||
font-size: var(--md-sys-typescale-headline3-size);
|
||||
line-height: var(--md-sys-typescale-headline3-line-height);
|
||||
letter-spacing: var(--md-sys-typescale-headline3-tracking);
|
||||
}
|
||||
|
||||
.headline4, .headline-small {
|
||||
font-family: var(--md-sys-typescale-headline4-font);
|
||||
font-weight: var(--md-sys-typescale-headline4-weight);
|
||||
font-size: var(--md-sys-typescale-headline4-size);
|
||||
line-height: var(--md-sys-typescale-headline4-line-height);
|
||||
letter-spacing: var(--md-sys-typescale-headline4-tracking);
|
||||
}
|
||||
|
||||
.headline5, .title-large {
|
||||
font-family: var(--md-sys-typescale-headline5-font);
|
||||
font-weight: var(--md-sys-typescale-headline5-weight);
|
||||
font-size: var(--md-sys-typescale-headline5-size);
|
||||
line-height: var(--md-sys-typescale-headline5-line-height);
|
||||
letter-spacing: var(--md-sys-typescale-headline5-tracking);
|
||||
}
|
||||
|
||||
.headline6 {
|
||||
font-family: var(--md-sys-typescale-headline6-font);
|
||||
font-weight: var(--md-sys-typescale-headline6-weight);
|
||||
font-size: var(--md-sys-typescale-headline6-size);
|
||||
line-height: var(--md-sys-typescale-headline6-line-height);
|
||||
letter-spacing: var(--md-sys-typescale-headline6-tracking);
|
||||
}
|
||||
|
||||
.subhead1, .title-medium {
|
||||
font-family: var(--md-sys-typescale-subhead1-font);
|
||||
font-weight: var(--md-sys-typescale-subhead1-weight);
|
||||
font-size: var(--md-sys-typescale-subhead1-size);
|
||||
line-height: var(--md-sys-typescale-subhead1-line-height);
|
||||
letter-spacing: var(--md-sys-typescale-subhead1-tracking);
|
||||
}
|
||||
|
||||
.subhead2, .title-small {
|
||||
font-family: var(--md-sys-typescale-subhead2-font);
|
||||
font-weight: var(--md-sys-typescale-subhead2-weight);
|
||||
font-size: var(--md-sys-typescale-subhead2-size);
|
||||
line-height: var(--md-sys-typescale-subhead2-line-height);
|
||||
letter-spacing: var(--md-sys-typescale-subhead2-tracking);
|
||||
}
|
||||
|
||||
.body1, .body-large {
|
||||
font-family: var(--md-sys-typescale-body1-font);
|
||||
font-weight: var(--md-sys-typescale-body1-weight);
|
||||
font-size: var(--md-sys-typescale-body1-size);
|
||||
line-height: var(--md-sys-typescale-body1-line-height);
|
||||
letter-spacing: var(--md-sys-typescale-body1-tracking);
|
||||
}
|
||||
|
||||
.body2, .body-medium {
|
||||
font-family: var(--md-sys-typescale-body2-font);
|
||||
font-weight: var(--md-sys-typescale-body2-weight);
|
||||
font-size: var(--md-sys-typescale-body2-size);
|
||||
line-height: var(--md-sys-typescale-body2-line-height);
|
||||
letter-spacing: var(--md-sys-typescale-body2-tracking);
|
||||
}
|
||||
|
||||
.caption, .body-small {
|
||||
font-family: var(--md-sys-typescale-caption-font);
|
||||
font-weight: var(--md-sys-typescale-caption-weight);
|
||||
font-size: var(--md-sys-typescale-caption-size);
|
||||
line-height: var(--md-sys-typescale-caption-line-height);
|
||||
letter-spacing: var(--md-sys-typescale-caption-tracking);
|
||||
}
|
||||
|
||||
.button, .label-large {
|
||||
font-family: var(--md-sys-typescale-button-font);
|
||||
font-weight: var(--md-sys-typescale-button-weight);
|
||||
font-size: var(--md-sys-typescale-button-size);
|
||||
line-height: var(--md-sys-typescale-button-line-height);
|
||||
letter-spacing: var(--md-sys-typescale-button-tracking);
|
||||
}
|
||||
|
||||
.overline, .label-medium {
|
||||
font-family: var(--md-sys-typescale-overline-font);
|
||||
font-weight: var(--md-sys-typescale-overline-weight);
|
||||
font-size: var(--md-sys-typescale-overline-size);
|
||||
line-height: var(--md-sys-typescale-overline-line-height);
|
||||
letter-spacing: var(--md-sys-typescale-overline-tracking);
|
||||
}
|
||||
|
||||
.material-theme {
|
||||
--md-sys-typescale-display1-font: Roboto;
|
||||
--md-sys-typescale-display1-weight: Regular;
|
||||
--md-sys-typescale-display1-size: 64px;
|
||||
--md-sys-typescale-display1-line-height: 76px;
|
||||
--md-sys-typescale-display1-tracking: -0.5px;
|
||||
--md-sys-typescale-display2-font: Roboto;
|
||||
--md-sys-typescale-display2-weight: Regular;
|
||||
--md-sys-typescale-display2-size: 57px;
|
||||
--md-sys-typescale-display2-line-height: 64px;
|
||||
--md-sys-typescale-display2-tracking: -0.25px;
|
||||
--md-sys-typescale-display3-font: Roboto;
|
||||
--md-sys-typescale-display3-weight: Regular;
|
||||
--md-sys-typescale-display3-size: 45px;
|
||||
--md-sys-typescale-display3-line-height: 52px;
|
||||
--md-sys-typescale-display3-tracking: 0px;
|
||||
--md-sys-typescale-headline1-font: Roboto;
|
||||
--md-sys-typescale-headline1-weight: Regular;
|
||||
--md-sys-typescale-headline1-size: 36px;
|
||||
--md-sys-typescale-headline1-line-height: 44px;
|
||||
--md-sys-typescale-headline1-tracking: 0px;
|
||||
--md-sys-typescale-headline2-font: Roboto;
|
||||
--md-sys-typescale-headline2-weight: Regular;
|
||||
--md-sys-typescale-headline2-size: 32px;
|
||||
--md-sys-typescale-headline2-line-height: 40px;
|
||||
--md-sys-typescale-headline2-tracking: 0px;
|
||||
--md-sys-typescale-headline3-font: Roboto;
|
||||
--md-sys-typescale-headline3-weight: Regular;
|
||||
--md-sys-typescale-headline3-size: 28px;
|
||||
--md-sys-typescale-headline3-line-height: 36px;
|
||||
--md-sys-typescale-headline3-tracking: 0px;
|
||||
--md-sys-typescale-headline4-font: Roboto;
|
||||
--md-sys-typescale-headline4-weight: Regular;
|
||||
--md-sys-typescale-headline4-size: 24px;
|
||||
--md-sys-typescale-headline4-line-height: 32px;
|
||||
--md-sys-typescale-headline4-tracking: 0px;
|
||||
--md-sys-typescale-headline5-font: Roboto;
|
||||
--md-sys-typescale-headline5-weight: Regular;
|
||||
--md-sys-typescale-headline5-size: 22px;
|
||||
--md-sys-typescale-headline5-line-height: 28px;
|
||||
--md-sys-typescale-headline5-tracking: 0px;
|
||||
--md-sys-typescale-headline6-font: Roboto;
|
||||
--md-sys-typescale-headline6-weight: Regular;
|
||||
--md-sys-typescale-headline6-size: 18px;
|
||||
--md-sys-typescale-headline6-line-height: 24px;
|
||||
--md-sys-typescale-headline6-tracking: 0px;
|
||||
--md-sys-typescale-subhead1-font: Roboto;
|
||||
--md-sys-typescale-subhead1-weight: Medium;
|
||||
--md-sys-typescale-subhead1-size: 16px;
|
||||
--md-sys-typescale-subhead1-line-height: 24px;
|
||||
--md-sys-typescale-subhead1-tracking: 0.1px;
|
||||
--md-sys-typescale-subhead2-font: Roboto;
|
||||
--md-sys-typescale-subhead2-weight: Medium;
|
||||
--md-sys-typescale-subhead2-size: 14px;
|
||||
--md-sys-typescale-subhead2-line-height: 20px;
|
||||
--md-sys-typescale-subhead2-tracking: 0.1px;
|
||||
--md-sys-typescale-body1-font: Roboto;
|
||||
--md-sys-typescale-body1-weight: Regular;
|
||||
--md-sys-typescale-body1-size: 16px;
|
||||
--md-sys-typescale-body1-line-height: 24px;
|
||||
--md-sys-typescale-body1-tracking: 0.5px;
|
||||
--md-sys-typescale-body2-font: Roboto;
|
||||
--md-sys-typescale-body2-weight: Regular;
|
||||
--md-sys-typescale-body2-size: 14px;
|
||||
--md-sys-typescale-body2-line-height: 20px;
|
||||
--md-sys-typescale-body2-tracking: 0.25px;
|
||||
--md-sys-typescale-caption-font: Roboto;
|
||||
--md-sys-typescale-caption-weight: Regular;
|
||||
--md-sys-typescale-caption-size: 12px;
|
||||
--md-sys-typescale-caption-line-height: 16px;
|
||||
--md-sys-typescale-caption-tracking: 0.4px;
|
||||
--md-sys-typescale-button-font: Roboto;
|
||||
--md-sys-typescale-button-weight: Medium;
|
||||
--md-sys-typescale-button-size: 14px;
|
||||
--md-sys-typescale-button-line-height: 20px;
|
||||
--md-sys-typescale-button-tracking: 0.1px;
|
||||
--md-sys-typescale-overline-font: Roboto;
|
||||
--md-sys-typescale-overline-weight: Medium;
|
||||
--md-sys-typescale-overline-size: 12px;
|
||||
--md-sys-typescale-overline-line-height: 16px;
|
||||
--md-sys-typescale-overline-tracking: 0.5px;
|
||||
--md-sys-color-primary-light: #5056a9;
|
||||
--md-sys-color-on-primary-light: #ffffff;
|
||||
--md-sys-color-primary-container-light: #dfe0ff;
|
||||
--md-sys-color-on-primary-container-light: #050764;
|
||||
--md-sys-color-secondary-light: #5c5d72;
|
||||
--md-sys-color-on-secondary-light: #ffffff;
|
||||
--md-sys-color-secondary-container-light: #e1e0fa;
|
||||
--md-sys-color-on-secondary-container-light: #191a2b;
|
||||
--md-sys-color-tertiary-light: #79536b;
|
||||
--md-sys-color-on-tertiary-light: #ffffff;
|
||||
--md-sys-color-tertiary-container-light: #ffd7ef;
|
||||
--md-sys-color-on-tertiary-container-light: #2e1126;
|
||||
--md-sys-color-error-light: #ba1b1b;
|
||||
--md-sys-color-on-error-light: #ffffff;
|
||||
--md-sys-color-error-container-light: #ffdad4;
|
||||
--md-sys-color-on-error-container-light: #410001;
|
||||
--md-sys-color-outline-light: #777680;
|
||||
--md-sys-color-background-light: #fffbff;
|
||||
--md-sys-color-on-background-light: #1b1b1f;
|
||||
--md-sys-color-surface-light: #fffbff;
|
||||
--md-sys-color-on-surface-light: #1b1b1f;
|
||||
--md-sys-color-surface-variant-light: #e4e1ec;
|
||||
--md-sys-color-on-surface-variant-light: #46464f;
|
||||
--md-sys-color-inverse-surface-light: #313034;
|
||||
--md-sys-color-inverse-on-surface-light: #f3eff4;
|
||||
--md-sys-color-primary-dark: #bdc2ff;
|
||||
--md-sys-color-on-primary-dark: #202578;
|
||||
--md-sys-color-primary-container-dark: #383e90;
|
||||
--md-sys-color-on-primary-container-dark: #dfe0ff;
|
||||
--md-sys-color-secondary-dark: #c5c4dd;
|
||||
--md-sys-color-on-secondary-dark: #2e2f42;
|
||||
--md-sys-color-secondary-container-dark: #444559;
|
||||
--md-sys-color-on-secondary-container-dark: #e1e0fa;
|
||||
--md-sys-color-tertiary-dark: #e8b9d5;
|
||||
--md-sys-color-on-tertiary-dark: #45263b;
|
||||
--md-sys-color-tertiary-container-dark: #5e3c52;
|
||||
--md-sys-color-on-tertiary-container-dark: #ffd7ef;
|
||||
--md-sys-color-error-dark: #ffb4a9;
|
||||
--md-sys-color-on-error-dark: #680003;
|
||||
--md-sys-color-error-container-dark: #930006;
|
||||
--md-sys-color-on-error-container-dark: #ffdad4;
|
||||
--md-sys-color-outline-dark: #91909a;
|
||||
--md-sys-color-background-dark: #1b1b1f;
|
||||
--md-sys-color-on-background-dark: #e4e1e6;
|
||||
--md-sys-color-surface-dark: #1b1b1f;
|
||||
--md-sys-color-on-surface-dark: #e4e1e6;
|
||||
--md-sys-color-surface-variant-dark: #46464f;
|
||||
--md-sys-color-on-surface-variant-dark: #c7c5d0;
|
||||
--md-sys-color-inverse-surface-dark: #e4e1e6;
|
||||
--md-sys-color-inverse-on-surface-dark: #1b1b1f;
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
.material-theme {
|
||||
--md-sys-color-primary: var(--md-sys-color-primary-light);
|
||||
--md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
|
||||
--md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
|
||||
--md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
|
||||
--md-sys-color-secondary: var(--md-sys-color-secondary-light);
|
||||
--md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
|
||||
--md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
|
||||
--md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
|
||||
--md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
|
||||
--md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
|
||||
--md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
|
||||
--md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
|
||||
--md-sys-color-error: var(--md-sys-color-error-light);
|
||||
--md-sys-color-on-error: var(--md-sys-color-on-error-light);
|
||||
--md-sys-color-error-container: var(--md-sys-color-error-container-light);
|
||||
--md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
|
||||
--md-sys-color-outline: var(--md-sys-color-outline-light);
|
||||
--md-sys-color-background: var(--md-sys-color-background-light);
|
||||
--md-sys-color-on-background: var(--md-sys-color-on-background-light);
|
||||
--md-sys-color-surface: var(--md-sys-color-surface-light);
|
||||
--md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
|
||||
--md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
|
||||
--md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
|
||||
--md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
|
||||
--md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
|
||||
}
|
||||
.dark-theme {
|
||||
--md-sys-color-primary: var(--md-sys-color-primary-dark);
|
||||
--md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
|
||||
--md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
|
||||
--md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
|
||||
--md-sys-color-secondary: var(--md-sys-color-secondary-dark);
|
||||
--md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
|
||||
--md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
|
||||
--md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
|
||||
--md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
|
||||
--md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
|
||||
--md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);
|
||||
--md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
|
||||
--md-sys-color-error: var(--md-sys-color-error-dark);
|
||||
--md-sys-color-on-error: var(--md-sys-color-on-error-dark);
|
||||
--md-sys-color-error-container: var(--md-sys-color-error-container-dark);
|
||||
--md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
|
||||
--md-sys-color-outline: var(--md-sys-color-outline-dark);
|
||||
--md-sys-color-background: var(--md-sys-color-background-dark);
|
||||
--md-sys-color-on-background: var(--md-sys-color-on-background-dark);
|
||||
--md-sys-color-surface: var(--md-sys-color-surface-dark);
|
||||
--md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
|
||||
--md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
|
||||
--md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
|
||||
--md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
|
||||
--md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.material-theme {
|
||||
--md-sys-color-primary: var(--md-sys-color-primary-dark);
|
||||
--md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
|
||||
--md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
|
||||
--md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
|
||||
--md-sys-color-secondary: var(--md-sys-color-secondary-dark);
|
||||
--md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
|
||||
--md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
|
||||
--md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
|
||||
--md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
|
||||
--md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
|
||||
--md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);
|
||||
--md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
|
||||
--md-sys-color-error: var(--md-sys-color-error-dark);
|
||||
--md-sys-color-on-error: var(--md-sys-color-on-error-dark);
|
||||
--md-sys-color-error-container: var(--md-sys-color-error-container-dark);
|
||||
--md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
|
||||
--md-sys-color-outline: var(--md-sys-color-outline-dark);
|
||||
--md-sys-color-background: var(--md-sys-color-background-dark);
|
||||
--md-sys-color-on-background: var(--md-sys-color-on-background-dark);
|
||||
--md-sys-color-surface: var(--md-sys-color-surface-dark);
|
||||
--md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
|
||||
--md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
|
||||
--md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
|
||||
--md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
|
||||
--md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);
|
||||
}
|
||||
.light-theme {
|
||||
--md-sys-color-primary: var(--md-sys-color-primary-light);
|
||||
--md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
|
||||
--md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
|
||||
--md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
|
||||
--md-sys-color-secondary: var(--md-sys-color-secondary-light);
|
||||
--md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
|
||||
--md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
|
||||
--md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
|
||||
--md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
|
||||
--md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
|
||||
--md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
|
||||
--md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
|
||||
--md-sys-color-error: var(--md-sys-color-error-light);
|
||||
--md-sys-color-on-error: var(--md-sys-color-on-error-light);
|
||||
--md-sys-color-error-container: var(--md-sys-color-error-container-light);
|
||||
--md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
|
||||
--md-sys-color-outline: var(--md-sys-color-outline-light);
|
||||
--md-sys-color-background: var(--md-sys-color-background-light);
|
||||
--md-sys-color-on-background: var(--md-sys-color-on-background-light);
|
||||
--md-sys-color-surface: var(--md-sys-color-surface-light);
|
||||
--md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
|
||||
--md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
|
||||
--md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
|
||||
--md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
|
||||
--md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
body{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #9ad5d3ff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user