<!DOCTYPE html>
<html lang="pt-BR">

<head>
  <title>Portfólio Lucas Alamino</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <meta name=“theme-color” content=“#1B1A55”>
  <link rel="icon" href="portf.ico">
  <style>
    body {
      background-color: #070F2B;
    }

    #nav-desktop {
      width: 120px;
      height: 100vh;
      border-right: 1px solid white;
    }

    #nav-mobile {
      border-bottom: 1px solid white;
    }

    .background-nav-top {

      background-color: #1B1A55 !important;
    }

    .navbar-brand {
      color: white !important;
      margin-left: -25px !important;
    }

    .nav-link {
      color: white;
    }

    .navbar-toggler {
      border-color: white;
    }

    .navbar-toggler-icon {
      color: white !important;
    }

    .card-body {
      min-height: 100vh;
      background-color: #070F2B !important;
      color: white;
    }

    .symp-print {
      width: 300px;
      margin: 10px 0px 10px 0px;
      border: 5px solid #1B1A55;
      border-radius: 10px;
    }

    .symp-print:hover {
      border-color: white;
      cursor: pointer;
    }

    .react-print {
      width: 200px;
      margin: 10px 0px 10px 0px;
      border: 5px solid #1B1A55;
      border-radius: 10px;
    }

    .react-print:hover {
      border-color: white;
      cursor: pointer;
    }

    .image-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .container-fluid {
      padding: 20px 20px 20px 70px;
      color: white;
    }

    .page-base {
      padding: 20px 20px 20px 140px;
      background-color: #070F2B;
      color: white;
    }

    #angular-logo {
      width: 300px;
      display: block;
      margin: auto;
    }

    #react-logo {
      width: 300px;
      display: block;
      margin: auto;
    }

    #react-native-logo {
      width: 200px;
      display: block;
      margin: auto;
      padding-bottom: 20px;
    }

    .splash-screen {
      height: 100vh;
      padding-top: 40vh !important;
      text-align: center;
    }

    .hidden {
      opacity: 0;
    }

    .console-container {
      font-size: 4em;
      text-align: center;
      height: 200px;
      width: 600px;
      display: block;
      position: absolute;
      color: white;
      top: 0;
      bottom: 0;
      left: 150px;
      right: 0;
      margin: auto;
    }

    .console-underscore {
      display: inline-block;
      position: relative;
      top: -0.14em;
      left: -10px;
    }

    #overlay {
      position: fixed;
      display: none;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      padding: 20px 20px 20px 160px !important;
    }

    .overlay-background {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgb(7, 15, 43, 0.5);

      z-index: 2;
      cursor: pointer;
    }

    #overlay .overlay-image {
      height: 80vh;
      display: block;
      margin: 8vh auto 0 auto;
      position: relative;
      z-index: 3;
    }

    #overlay .overlay-button-left {
      margin-left: 140px;
      background-color: white;
      position: fixed;
      left: 5%;
      top: 50%;
      padding: 0px 10px 10px 10px;
      background-color: #1B1A55;
      color: white;
      border: 1px solid white;
      border-radius: 5px;
      font-size: 50px;
      z-index: 3;
    }

    #overlay .overlay-button-right {
      background-color: white;
      position: fixed;
      right: 5%;
      top: 50%;
      padding: 0px 10px 10px 10px;
      background-color: #1B1A55;
      color: white;
      border: 1px solid white;
      border-radius: 5px;
      font-size: 50px;
      z-index: 3;
    }


    .bg-body-tertiary {
      background-color: #1B1A55 !important;
    }

    .card-header {
      background-color: #1B1A55 !important;
      border: 1px solid white;
      border-bottom: none;
    }


    .footer {
      background-color: #1B1A55 !important;
      margin: 10px 0px 0px 0px;
      padding: 10px 20px 10px 20px;
      display: flex;
      justify-content: end;
      align-items: center;
      color: white;
    }

    .footer svg {
      margin: 0px 0px 0px 15px;
    }

    .footer a {
      color: white;
    }

    .before-scroll {
      opacity: 0;
      transform: perspective(500px) translate3d(0px, 50px, 0px);
    }

    .after-scroll {
      opacity: 1;
      transform: perspective(500px) translate3d(0, 0, 0);
      transition: 1s;
    }

    @media screen and (max-width: 991px) {
      .page-base {
        padding: 20px 20px 20px 20px;
      }

      .console-container {
        left: 50px;
      }
    }
  </style>
</head>

<body>
  <nav class="navbar navbar-expand-lg bg-body-tertiary d-lg-none fixed-top  navbar-dark" aria-label="nav-mobile"
    id="nav-mobile">
    <div class="container-fluid background-nav-top">
      <a class="navbar-brand" href="#">Home</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" aria-current="page" href="#angular-logo">Angular</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-current="page" href="#react-logo">React.js</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-current="page" href="#react-native-logo">React Native</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-current="page" href="#contact">Contato</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <nav class="navbar fixed-top bg-body-tertiary d-none d-lg-flex flex-column justify-content-center navbar-dark"
    aria-label="nav-desktop" id="nav-desktop">

    <a class="navbar-brand" href="#">Home</a>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" aria-current="page" href="#angular-logo">Angular</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" aria-current="page" href="#react-logo">React.js</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" aria-current="page" href="#react-native-logo">React Native</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" aria-current="page" href="#contact">Contato</a>
      </li>
    </ul>
  </nav>
  <div class="container-fluid page-base">
    <div class="container-fluid splash-screen d-block m-auto">
      <div class='console-container'><span id='text'></span>
        <div class='console-underscore' id='console'>&#95;</div>
      </div>
      <p class="mt-5 pt-5">Meu nome é Lucas Pontes Carvalho Alamino, sou um desenvolvedor front-end com experiência em
        angular, reactjs e
        react native, atualmente resido em São paulo, SP, Brasil.</p>
      <p >Aqui você pode ver alguns projetos com os quais já trabalhei, só rolar para baixo!</p>
    </div>
    <div class="card-header">
      <img id="angular-logo" class="before-scroll" src="angular_logo_text.png" alt="">
    </div>
    <div class="card">
      <div class="card-body">
        <div>
          <div class="m-5">
            <h5 class="card-title before-scroll">Sympapps</h5>
            <p class="card-text before-scroll">Um sistema online feito para efetuar cobranças e
              liberações de notas fiscais para
              pequenas empresas, onde é possível manter dados sobre pagamento de funcionários e dados sobre a
              própria sistematização de trabalho da empresa, também foi criado uma landing page para que o produto tenha
              uma vitrine virtual.</p>
          </div>

          <div id="angular_table_symp" class="m-5 image-list">
            <img class="symp-print before-scroll" src="angular_table/symp_home_page_logo.png" alt=""
              onclick="changeOverlay(this, 'angular_table')" />
            <img class="symp-print before-scroll" src="angular_table/symp_home_page_cards.png" alt=""
              onclick="changeOverlay(this, 'angular_table')" />
            <img class="symp-print before-scroll" src="angular_table/symp_home_page_about.png" alt=""
              onclick="changeOverlay(this, 'angular_table')" />
            <img class="symp-print before-scroll" src="angular_table/symp_home_page_form.png" alt=""
              onclick="changeOverlay(this, 'angular_table')" />
            <img class="symp-print before-scroll" src="angular_table/symp_login.png" alt=""
              onclick="changeOverlay(this, 'angular_table')" />
            <img class="symp-print before-scroll" src="angular_table/symp_register.png" alt=""
              onclick="changeOverlay(this, 'angular_table')" />
            <img class="symp-print before-scroll" src="angular_table/symp_search.png" alt=""
              onclick="changeOverlay(this, 'angular_table')" />
            <img class="symp-print before-scroll" src="angular_table/symp_sent_email.png" alt=""
              onclick="changeOverlay(this, 'angular_table')" />
            <img class="symp-print before-scroll" src="angular_table/symp_table_menu.png" alt=""
              onclick="changeOverlay(this, 'angular_table')" />
            <img class="symp-print before-scroll" src="angular_table/symp_table.png" alt=""
              onclick="changeOverlay(this, 'angular_table')" />
          </div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <div>
          <div class="m-5">
            <h5 class="card-title before-scroll">Lemme</h5>
            <p class="card-text before-scroll">Um site para reserva de viagens customizado, no qual é possível fazer
              reservas tanto viagens de
              avião, carro ou ônibus.</p>
          </div>

          <div id="angular_trip" class="m-5 image-list">
            <img class="symp-print before-scroll" src="angular_trip/trip_carousel.png" alt=""
              onclick="changeOverlay(this, 'angular_trip')" />
            <img class="symp-print before-scroll" src="angular_trip/trip_double_carousel.png" alt=""
              onclick="changeOverlay(this, 'angular_trip')" />
            <img class="symp-print before-scroll" src="angular_trip/trip_flights.png" alt=""
              onclick="changeOverlay(this, 'angular_trip')" />
            <img class="symp-print before-scroll" src="angular_trip/trip_link.png" alt=""
              onclick="changeOverlay(this, 'angular_trip')" />
            <img class="symp-print before-scroll" src="angular_trip/trip_links.png" alt=""
              onclick="changeOverlay(this, 'angular_trip')" />
            <img class="symp-print before-scroll" src="angular_trip/trip_opinions.png" alt=""
              onclick="changeOverlay(this, 'angular_trip')" />
            <img class="symp-print before-scroll" src="angular_trip/trip_page.png" alt=""
              onclick="changeOverlay(this, 'angular_trip')" />
            <img class="symp-print before-scroll" src="angular_trip/trip_plan.png" alt=""
              onclick="changeOverlay(this, 'angular_trip')" />
            <img class="symp-print before-scroll" src="angular_trip/trip_search.png" alt=""
              onclick="changeOverlay(this, 'angular_trip')" />
            <img class="symp-print before-scroll" src="angular_trip/trip_select_tickets.png" alt=""
              onclick="changeOverlay(this, 'angular_trip')" />
            <img class="symp-print before-scroll" src="angular_trip/trip_select_tickets_list.png" alt=""
              onclick="changeOverlay(this, 'angular_trip')" />
            <img class="symp-print before-scroll" src="angular_trip/trip_video.png" alt=""
              onclick="changeOverlay(this, 'angular_trip')" />
          </div>
        </div>
      </div>
    </div>

    <div class="card-header">
      <img class="before-scroll" id="react-logo" src="react_logo.png" alt="">
    </div>
    <div class="card">
      <div class="card-body">
        <div>
          <div class="m-5">
            <h5 class="card-title before-scroll">Base system locomotiva</h5>
            <p class="card-text before-scroll">Um sistema base para outros sistemas, desenvolvido para a empresa
              locomotiva, contém
              vários módulos feitos para reaproveitamento em caso de sistemas de gerenciamentos simples e pode ser usado
              como base para
              criar sistemas mais complexos. Alguns projetos incluem: <a
                href="https://tel-link-contracts.web.app/login">Tellink</a> e <a
                href="https://agiprev.digital/login">Agiprev</a>.</p>
          </div>
          <div id="reactjs_base" class="m-5 image-list">
            <img class="symp-print before-scroll" src="reactjs_base/chat.png" alt=""
              onclick="changeOverlay(this, 'reactjs_base')" />
            <img class="symp-print before-scroll" src="reactjs_base/dashboard.png" alt=""
              onclick="changeOverlay(this, 'reactjs_base')" />
            <img class="symp-print before-scroll" src="reactjs_base/export.png" alt=""
              onclick="changeOverlay(this, 'reactjs_base')" />
            <img class="symp-print before-scroll" src="reactjs_base/my_attendances.png" alt=""
              onclick="changeOverlay(this, 'reactjs_base')" />
            <img class="symp-print before-scroll" src="reactjs_base/new_attendance.png" alt=""
              onclick="changeOverlay(this, 'reactjs_base')" />
            <img class="symp-print before-scroll" src="reactjs_base/onboarding.png" alt=""
              onclick="changeOverlay(this, 'reactjs_base')" />
            <img class="symp-print before-scroll" src="reactjs_base/side_menu.png" alt=""
              onclick="changeOverlay(this, 'reactjs_base')" />
            <img class="symp-print before-scroll" src="reactjs_base/table.png" alt=""
              onclick="changeOverlay(this, 'reactjs_base')" />
          </div>
        </div>
      </div>
    </div>

    <div class="card-header">
      <img class="before-scroll" id="react-native-logo" src="react_native_logo.svg" alt="">
    </div>
    <div class="card">
      <div class="card-body">
        <div>
          <div class="m-5">
            <h5 class="card-title before-scroll">Liga Futebol</h5>
            <p class="card-text before-scroll">Um aplicativo android criado para a pessoa acompanhar a classificação do
              brasileirão e outros
              campeonatos, nele é possível ver tabelas sobre classificação, maiores marcadores, etc. Também é possível
              selecionar seus times favoritos para receber notificações sobre partidas e mudanças na classificação.</p>
          </div>
          <div id="react_native_soccer" class="m-5 image-list">
            <img class="react-print before-scroll" src="react_native_soccer/soccer_classification.png" alt=""
              onclick="changeOverlay(this, 'react_native_soccer')" />
            <img class="react-print before-scroll" src="react_native_soccer/soccer_complaint.png" alt=""
              onclick="changeOverlay(this, 'react_native_soccer')" />
            <img class="react-print before-scroll" src="react_native_soccer/soccer_favourites.png" alt=""
              onclick="changeOverlay(this, 'react_native_soccer')" />
            <img class="react-print before-scroll" src="react_native_soccer/soccer_menu.png" alt=""
              onclick="changeOverlay(this, 'react_native_soccer')" />
            <img class="react-print before-scroll" src="react_native_soccer/soccer_premium.png" alt=""
              onclick="changeOverlay(this, 'react_native_soccer')" />
            <img class="react-print before-scroll" src="react_native_soccer/soccer_probability.png" alt=""
              onclick="changeOverlay(this, 'react_native_soccer')" />
          </div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <div>
          <div class="m-5">
            <h5 class="card-title before-scroll">PingPlay</h5>
            <p class="card-text before-scroll">Um aplicativo feito para ser usado em salas de cinema para baixar
              legendas, audio
              descrição, e tradução em libras para facilitar a compreenção para pessoas com deficiência, ele funciona
              com um sistema de sincronização baseado no audio do filme que está passando, no aplicativo também é
              possível baixar os arquivos e deixar preparado para a sessão de cinema. </p>
          </div>
          <div id="react_native_movie" class="m-5 image-list">
            <img class="react-print before-scroll" src="react_native_movie/details.png" alt=""
              onclick="changeOverlay(this, 'react_native_movie')" />
            <img class="react-print before-scroll" src="react_native_movie/downloads.png" alt=""
              onclick="changeOverlay(this, 'react_native_movie')" />
            <img class="react-print before-scroll" src="react_native_movie/list.png" alt=""
              onclick="changeOverlay(this, 'react_native_movie')" />
            <img class="react-print before-scroll" src="react_native_movie/no_connection.png" alt=""
              onclick="changeOverlay(this, 'react_native_movie')" />
            <img class="react-print before-scroll" src="react_native_movie/options.png" alt=""
              onclick="changeOverlay(this, 'react_native_movie')" />
            <img class="react-print before-scroll" src="react_native_movie/search.png" alt=""
              onclick="changeOverlay(this, 'react_native_movie')" />
            <img class="react-print before-scroll" src="react_native_movie/sinopsis.png" alt=""
              onclick="changeOverlay(this, 'react_native_movie')" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer" id="contact">
    <strong>Contatos: </strong>
    <a href="https://github.com/Calmann" target="_blank">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-github"
        viewBox="0 0 16 16">
        <path
          d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8" />
      </svg>
    </a>
    <a href="https://www.linkedin.com/in/lucasalamino/" target="_blank">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-linkedin"
        viewBox="0 0 16 16">
        <path
          d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
      </svg>
    </a>
    <a href="https://t.me/LucasAlamino" target="_blank">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-telegram"
        viewBox="0 0 16 16">
        <path
          d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.287 5.906q-1.168.486-4.666 2.01-.567.225-.595.442c-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294q.39.01.868-.32 3.269-2.206 3.374-2.23c.05-.012.12-.026.166.016s.042.12.037.141c-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8 8 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629q.14.092.27.187c.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.4 1.4 0 0 0-.013-.315.34.34 0 0 0-.114-.217.53.53 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09" />
      </svg>
    </a>
    <a href="mailto:lucasalam@hotmail.com" target="_blank">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-envelope"
        viewBox="0 0 16 16">
        <path
          d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z" />
      </svg>
    </a>
  </div>
  <div id="overlay">
    <div class="overlay-background" onclick="changeOverlay()"></div>
    <img id="overlay-image" class="overlay-image" alt="">
    <button class="overlay-button-left" onclick="prevImage()">&#8249</button>
    <button class="overlay-button-right" onclick="nextImage()">&#8250</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>
  <script type="text/javascript">
    var angular_table_image_array = Array.prototype.slice.call(document.getElementById("angular_table_symp").children).map((item) => item.src);
    var angular_trip_image_array = Array.prototype.slice.call(document.getElementById("angular_trip").children).map((item) => item.src);
    var reactjs_base_image_array = Array.prototype.slice.call(document.getElementById("reactjs_base").children).map((item) => item.src);
    var react_native_soccer_image_array = Array.prototype.slice.call(document.getElementById("react_native_soccer").children).map((item) => item.src);
    var react_native_movie_image_array = Array.prototype.slice.call(document.getElementById("react_native_movie").children).map((item) => item.src);
    var image_array = [];
    var overlay = document.getElementById("overlay");
    var overlay_image = document.getElementById("overlay-image");
    function prevImage() {
      var image_index = image_array.findIndex((item) => item == overlay_image.src);
      var new_index = image_index - 1;
      if (new_index < 0) {
        overlay_image.src = image_array.find((item, id) => id == (image_array.length - 1));
      } else {
        overlay_image.src = image_array.find((item, id) => id == new_index);
      }
    }

    function nextImage() {
      var image_index = image_array.findIndex((item) => item == overlay_image.src);
      var new_index = image_index + 1;
      if (new_index > (image_array.length - 1)) {
        overlay_image.src = image_array.find((item, id) => id == 0);
      } else {
        overlay_image.src = image_array.find((item, id) => id == new_index);
      }
    }
    function changeOverlay(image, project) {
      if (project == "angular_table") {
        image_array = angular_table_image_array;
      } else
        if (project == "angular_trip") {
          image_array = angular_trip_image_array;
        } else
          if (project == "reactjs_base") {
            image_array = reactjs_base_image_array;
          } else
            if (project == "react_native_soccer") {
              image_array = react_native_soccer_image_array;
            } else
              if (project == "react_native_movie") {
                image_array = react_native_movie_image_array;
              }
      if (image) {
        overlay_image.src = image.src;
      }
      if (overlay.style.display == "block") {
        overlay.style.display = "none";
      } else {
        overlay.style.display = "block";
      }
    }

  </script>

  <script type="text/javascript">
    let par = [...document.getElementsByClassName('before-scroll')];
    let options = {
      rootMargin: '0%',
      threshold: 0
    }
    function showItem(entries) {
      entries.forEach(entry => {
        console.log(entry)
        if (entry.isIntersecting) {
          entry.target.classList = entry.target.classList.value.replace('before-scroll', 'after-scroll')
        } else {
          entry.target.classList = entry.target.classList.value.replace('after-scroll', 'before-scroll')
        }
      })
    }
    let observer = new IntersectionObserver(showItem, options)
    par.forEach(p => {
      observer.observe(p)
    })

  </script>

  <script type="text/javascript">

    consoleText(['Bem vindo!', 'Welcome!'], 'text');
    function consoleText(words, id, colors) {
      if (colors === undefined) colors = ['#fff'];
      var visible = true;
      var con = document.getElementById('console');
      var letterCount = 1;
      var x = 1;
      var waiting = false;
      var target = document.getElementById(id)
      target.setAttribute('style', 'color:' + colors[0])
      window.setInterval(function () {

        if (letterCount === 0 && waiting === false) {
          waiting = true;
          target.innerHTML = words[0].substring(0, letterCount)
          window.setTimeout(function () {
            var usedColor = colors.shift();
            colors.push(usedColor);
            var usedWord = words.shift();
            words.push(usedWord);
            x = 1;
            target.setAttribute('style', 'color:' + colors[0])
            letterCount += x;
            waiting = false;
          }, 1000)
        } else if (letterCount === words[0].length + 1 && waiting === false) {
          waiting = true;
          window.setTimeout(function () {
            x = -1;
            letterCount += x;
            waiting = false;
          }, 1000)
        } else if (waiting === false) {
          target.innerHTML = words[0].substring(0, letterCount)
          letterCount += x;
        }
      }, 120)
      window.setInterval(function () {
        if (visible === true) {
          con.className = 'console-underscore hidden'
          visible = false;

        } else {
          con.className = 'console-underscore'

          visible = true;
        }
      }, 400)
    }
  </script>
</body>


</html>