{"version":3,"file":"HomePage-04ad8d6a.js","sources":["../../src/views/pages/HomePage.vue"],"sourcesContent":["<template>\n  <div class=\"card-container\">\n    <div class=\"card-content\">\n      <header class=\"main-header\">\n        <h1 class=\"name\">Andrea Cristaudo</h1>\n        <h2 class=\"role\">Consultant developer</h2>\n      </header>\n\n      <div class=\"content-container\">\n        <div class=\"content\">\n          <div class=\"intro\">\n            <p>\n              Aiuto le aziende e i privati a <strong>realizzare idee di business</strong> in ambito web\n              proponendo le soluzioni più adatte alle loro esigenze.\n            </p>\n            <p>\n              Seguo <strong>l'intero processo di sviluppo</strong>: analisi, pianificazione, realizzazione,\n              configurazione, messa in opera, monitoraggio e manutenzione.\n            </p>\n            <p>\n              Sono sempre alla ricerca del progetto giusto che possa essere valorizzato dal mio contributo.\n            </p>\n          </div>\n\n          <div class=\"contacts\">\n            <a href=\"mailto:andrea@cristaudo.eu\" target=\"_blank\" class=\"btn btn-primary\" title=\"Inviami un'email\">\n            <span class=\"btn-content\">\n              Contattami\n            </span>\n            </a>\n\n            <ul class=\"contacts-links p-0 list-unstyled\">\n              <li class=\"contacts-link\">\n                <a href=\"https://goo.gl/maps/c1q6mmxGv1pQnKoC6\" rel=\"noreferrer\" target=\"_blank\" title=\"Vienimi a trovare al Talent Garden Pisa\">\n                  <i class=\"icon icon-pin\">\n                    <span class=\"visually-hidden\">Vienimi a trovare al Talent Garden Pisa</span>\n                  </i>\n                </a>\n              </li>\n              <li class=\"contacts-link\">\n                <a href=\"tel:00393498759707\" title=\"Chiamami\">\n                  <i class=\"icon icon-phone\">\n                    <span class=\"visually-hidden\">Chiamami</span>\n                  </i>\n                </a>\n              </li>\n              <li class=\"contacts-link\">\n                <a href=\"https://twitter.com/a_cristaudo\" rel=\"noreferrer\" target=\"_blank\" title=\"Seguimi su Twitter\">\n                  <i class=\"icon icon-twitter\">\n                    <span class=\"visually-hidden\">Seguimi su Twitter</span>\n                  </i>\n                </a>\n              </li>\n              <li class=\"contacts-link\">\n                <a href=\"https://www.linkedin.com/in/andrea-cristaudo/\" rel=\"noreferrer\" target=\"_blank\" title=\"Seguimi su LinkedIn\">\n                  <i class=\"icon icon-linkedin\">\n                    <span class=\"visually-hidden\">Seguimi su LinkedIn</span>\n                  </i>\n                </a>\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"content-filler\"></div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\">\n\n.card-container {\n  margin: 20px 20px;\n  padding: 0;\n  padding-bottom: math.div(9, 14) * 100%;\n  position: relative;\n  min-height: 100%;\n  flex-basis: 100%;\n  flex-grow: 1;\n  background: $color-yellow-bg no-repeat bottom right url($path-images + \"/andrea-cristaudo-illustration.svg\");\n  background-size: 100% auto;\n  box-shadow: 0 0 21px rgba(0, 0, 0, 0.25);\n  min-width: 280px;\n\n  @include media-breakpoint-up(\"md\") {\n    padding-bottom: math.div(9, 20) * 100%;\n    margin: 50px 60px;\n  }\n\n  @include media-breakpoint-up(\"lg\") {\n    margin: 90px 100px;\n  }\n}\n\n.main-header {\n  text-transform: uppercase;\n  text-align: center;\n  font-weight: bold;\n  padding: 0 10px;\n\n  @include media-breakpoint-up(\"md\") {\n    padding: 0 20px;\n  }\n\n  .name {\n    color: $color-green;\n    font-family: Montserrat, sans-serif;\n    position: relative;\n    margin: 0 0 5px;\n    padding-top: 130px;\n    background: no-repeat transparent center top 30px url($path-images + \"/logo.svg\");\n    background-size: 80px;\n    font-size: 23px;\n    line-height: 30px;\n\n    @include media-breakpoint-up(\"md\") {\n      font-size: 45px;\n      line-height: 50px;\n    }\n\n    @include media-breakpoint-up(\"lg\") {\n      font-size: 70px;\n      line-height: 90px;\n    }\n  }\n\n  .role {\n    position: relative;\n    font-size: 14px;\n    line-height: 21px;\n    font-family: Oswald, sans-serif;\n    margin-bottom: 25px;\n\n    @include media-breakpoint-up(\"md\") {\n      font-size: 26px;\n      line-height: 35px;\n    }\n\n    @include media-breakpoint-up(\"lg\") {\n      font-size: 34px;\n      line-height: 50px;\n    }\n\n    &::before {\n      display: inline-block;\n      content: '<';\n    }\n\n    &::after {\n      display: inline-block;\n      content: '>';\n    }\n  }\n}\n\n.intro {\n  text-align: center;\n  font-size: 18px;\n  padding: 0 20px;\n  margin: 0;\n\n  @include media-breakpoint-up(\"md\") {\n    font-size: 24px;\n    line-height: 32px;\n    max-width: 700px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n}\n\n.contacts {\n  margin: 35px;\n  text-align: center;\n\n  .btn {\n    display: inline-block;\n    width: 100%;\n    max-width: 280px;\n    padding: 10px;\n    font-size: 20px;\n    line-height: 28px;\n    text-transform: uppercase;\n    background: rgba(94, 192, 191, .4);\n    box-shadow: 0 0 6px rgba(64, 164, 163, .4);\n    border-radius: 38px;\n\n    .btn-content {\n      display: block;\n      background: #5EC0BF;\n      box-shadow: 0 0 6px #40A4A3;\n      border-radius: 38px;\n\n      padding: 13px 15px;\n    }\n\n    &, &:hover, &:focus, &:link, &:active, &:visited {\n      text-decoration: none;\n      color: #FFFFFF;\n      outline: none;\n    }\n\n    &:hover {\n      .btn-content {\n        box-shadow: none;\n      }\n    }\n\n    &:active {\n      box-shadow: none;\n\n      .btn-content {\n        background: #40A4A3;\n        box-shadow: none;\n      }\n    }\n  }\n}\n\n.contacts-links {\n  margin: 35px auto 25px;\n  display: flex;\n  justify-content: space-between;\n  max-width: 280px;\n\n  .contacts-link {\n    width: 50px;\n    height: 50px;\n    background: rgba(255, 212, 0, .4);\n    box-shadow: 0 3px 6px rgba(214, 194, 62, .4);\n    border-radius: 50%;\n    position: relative;\n\n    a {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: 50%;\n      width: 40px;\n      height: 40px;\n      margin-top: 5px;\n      margin-left: 5px;\n      text-decoration: none;\n      background: rgba(255, 212, 0, 1) no-repeat center center;\n      color: #fff;\n      font-size: 1.2rem;\n\n      &:hover {\n        background-color: #F8C82B;\n      }\n    }\n  }\n}\n\n// Landscape\n@media (min-aspect-ratio: 10/9) and (min-width: 1000px) {\n  .card-container {\n    padding-bottom: 0;\n    background: $color-yellow-bg;\n    background-size: auto 100%;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .card-content {\n    background: transparent no-repeat top 75px left 85px url($path-images + \"/logo.svg\");\n    background-size: 50px;\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n\n    @include media-breakpoint-up(\"md\") {\n      background-size: 140px;\n    }\n  }\n\n  .main-header {\n    text-align: left;\n    padding: 80px 75px 0;\n    z-index: 1;\n\n    .name {\n      padding-top: 0;\n      background: none;\n      padding-left: 175px;\n    }\n\n    .role {\n      padding-left: 175px;\n      margin-bottom: 0;\n    }\n  }\n\n  .intro {\n    text-align: left;\n    padding: 30px 75px 0;\n    margin-left: 0;\n  }\n\n  .contacts {\n    max-width: 280px;\n    margin-left: 75px;\n  }\n\n  .contacts-links {\n    margin: 50px 0;\n  }\n\n  .content-container {\n    display: flex;\n    flex-grow: 1;\n    align-items: stretch;\n\n    .content {\n      flex-basis: 50%;\n      flex-grow: 2;\n      flex-shrink: 0;\n      padding: 0;\n      margin-right: 100px;\n      z-index: 1;\n\n      @include media-breakpoint-up(\"lg\") {\n        flex-basis: 45%;\n      }\n\n      .intro {\n        max-width: 100%;\n        padding-right: 0;\n      }\n    }\n\n    .content-filler {\n      flex-basis: 70%;\n      flex-shrink: 1;\n      flex-grow: 1;\n      position: relative;\n      z-index: 0;\n\n      &::before {\n        display: block;\n        position: absolute;\n        bottom: 0;\n        right: 0;\n        content: '';\n        width: calc(100% + 300px);\n        height: 200%;\n        background: transparent no-repeat bottom right url($path-images + \"/andrea-cristaudo-illustration.svg\");\n        background-size: 100% auto;\n      }\n    }\n  }\n}\n\n</style>\n"],"names":["_hoisted_3","_sfc_render","_ctx","_cache"],"mappings":"u4DAiEUA,EAAA,IAhER,SAAAC,EAAAC,EAAAC,EAAA"}