<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">
  <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="https://pettinato.eu/curriculum_it.pdf"><i class="fas fa-download"></i> curriculum_it.pdf</a>
    <a class="cv" href="https://pettinato.eu/curriculum_en.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{
    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;
    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: 2vh;
    padding-bottom: 2vh;
    text-align: center;
  }

  .cv{
    font-size: unset;
    text-decoration: none;
  }

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