130 lines
4.2 KiB
Svelte
130 lines
4.2 KiB
Svelte
<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, sia front-end che back-end.\
|
|
In particolare ho famigliarità con C++ con Qt e Typescript con 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.\
|
|
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.\
|
|
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, 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.';
|
|
|
|
const who = {
|
|
it:whoIt,
|
|
en:whoEn
|
|
}
|
|
export function changeLanguage(language = 'it'){
|
|
currentLanguage = language
|
|
}
|
|
</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">
|
|
<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>
|
|
</div>
|
|
<style lang="scss">
|
|
@import './static/colors.scss';
|
|
@import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
|
|
.aboutMe{
|
|
background-color: $cultured;
|
|
border-radius: 10px;
|
|
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;
|
|
}
|
|
}
|
|
|
|
</style> |