index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <title>Diogo Machado</title>
  <link rel="icon" href="./Image/img.png" type="image/x-icon">

  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

  <link href='https://fonts.googleapis.com/css?family=Raleway:100,200,400,600' rel='stylesheet' type='text/css'>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.min.css" rel="stylesheet"
    type="text/css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

  <link rel="stylesheet" href="./style/style.css">

</head>

<body>
  <!-- navbar header -->
  <div class="nav-header">
    <div class="nav-brand">
      <a href="">
        <img src="./Image/logo.png">
      </a>

    </div>
    <i class="fa fa-bars fa-3x"></i>
    <div class="header-links">
      <ul>
        <li data-menuanchor="fourthPage"><a href="#connect">REDES</a></li>
        <li data-menuanchor="fourthPage"><a href="#contact">CONTATO</a></li>
        <li data-menuanchor="thirdPage"><a href="#portfolio">PORTFOLIO</a></li>
        <li data-menuanchor="secondPage"><a href="#about">SOBRE MIM</a></li>
      </ul>
    </div>
  </div>
  <!-- end navbar header -->

  <!-- sidebar slider -->
  <div class="nav-screen">
    <i class="fa fa-times fa-3x"></i>
    <div class="nav-container">
      <div class="nav-links">
        <ul id='myMenu'>
          <li data-menuanchor="secondPage"><a href="#about">SOBRE MIM</a></li>
          <li data-menuanchor="thirdPage"><a href="#portfolio">PORTFOLIO</a></li>
          <li data-menuanchor="fourthPage"><a href="#contact">CONTATO</a></li>
        </ul>
      </div>
    </div>
  </div>
  <!-- end navbar slider -->

  <!-- begin fullpage -->

  <div id="fullpage">

    <!-- begin section -->

    <div class="section aboutme" data-anchor="aboutme">
      <div class="opaque-bg animated fadeInDown">
        <h1 style="color:white;font-size: 4em;"><span style="color:#FF6363">Bem</span>Vindo</h1>
        <p><span id="holder"></span><span class="blinking-cursor">|</span></p>
      </div>
      <i id="moveDown" class="fa fa-chevron-down fa-3x bounce"></i>
    </div>
    <!-- end section -->

    <!-- begin section -->

    <div class="section" data-anchor="skills">
      <div class="content">
        <h1 class="wow fadeInDown" data-wow-delay="0.2s">Sobre Mim</h1>
        <p class="wow fadeInDown" data-wow-delay="0.2s">Olá, sou Diogo Machado Desenvolvedor Full Stack, profissional
          dedicado ao desenvolvimento de software e apaixonado por encontrar soluções criativas para desafios
          tecnológicos. Meu caminho começou na área de TI, e em 2021 fiz a transição para a programação, onde descobri
          minha verdadeira paixão.

          Atualmente, estou cursando Análise e Desenvolvimento de Sistemas, o que tem ampliado meu conhecimento nas
          bases fundamentais da computação e do desenvolvimento de software.</p>

          <div class=" wow fadeInUp container-skillbar" data-wow-delay="0.2s">
            <div class="skillbar clearfix " data-percent="95%">
              <div class="skillbar-title" style="background: #0211e7;"><span>TypeScript</span></div>
              <div class="skillbar-bar" style="background: #0211e7;"></div>
              <div class="skill-bar-percent">95%</div>
            </div> <!-- End Skill Bar -->

            <div class="skillbar clearfix " data-percent="90%">
              <div class="skillbar-title" style="background: #ffc23d;"><span>JavaScript</span></div>
              <div class="skillbar-bar" style="background: #ffc23d;"></div>
              <div class="skill-bar-percent">90%</div>
            </div> <!-- End Skill Bar -->

          <div class="skillbar clearfix " data-percent="85%">
            <div class="skillbar-title" style="background: #df0606;"><span>NestJS</span></div>
            <div class="skillbar-bar" style="background: #df0606;"></div>
            <div class="skill-bar-percent">85%</div>
          </div> <!-- End Skill Bar -->

          <div class="skillbar clearfix " data-percent="70%">
            <div class="skillbar-title" style="background: #1884af;"><span>React</span></div>
            <div class="skillbar-bar" style="background: #1884af;"></div>
            <div class="skill-bar-percent">70%</div>
          </div> <!-- End Skill Bar -->

          <div class="skillbar clearfix " data-percent="75%">
            <div class="skillbar-title" style="background: #332fff;"><span>Python</span></div>
            <div class="skillbar-bar" style="background: #332fff;"></div>
            <div class="skill-bar-percent">75%</div>
          </div> <!-- End Skill Bar -->

          <div class="skillbar clearfix " data-percent="90%">
            <div class="skillbar-title" style="background: #3a3a3a;"><span>SQL</span></div>
            <div class="skillbar-bar" style="background: #3a3a3a;"></div>
            <div class="skill-bar-percent">90%</div>
          </div> <!-- End Skill Bar -->

          <div class="skillbar clearfix " data-percent="85%">
            <div class="skillbar-title" style="background: #0f3d05;"><span>MongoDB</span></div>
            <div class="skillbar-bar" style="background: #0f3d05;"></div>
            <div class="skill-bar-percent">85%</div>
          </div> <!-- End Skill Bar -->

          <div class="skillbar clearfix " data-percent="85%">
            <div class="skillbar-title" style="background: #2f32fd;;"><span>Docker</span></div>
            <div class="skillbar-bar" style="background: #2f32fd;"></div>
            <div class="skill-bar-percent">85%</div>
          </div> <!-- End Skill Bar -->

          

        </div>
      </div>
    </div>
    <!-- end section -->

    <!-- begin section -->

    <div class="section" data-anchor="projects">
      <div class="content-slide">
        <div class="slide">
          <h1 class="wow fadeInDown" data-wow-delay="0.2s">GameZone</h1>
          <p class="wow fadeInDown" data-wow-delay="0.2s">Serviço de Streaming Digital</p>
          <img class="wow fadeInUp" data-wow-delay="0.2s"
            data-src="../Image/gamezone.png">
        </div>
        <div class="slide">
          <h1>Import RJ</h1>
          <p>Venda de Produtos Eletronicos</p>
          <img
            data-src="../Image/Importrj.png">
        </div>
        <div class="slide">
          <h1>PORTFOLIO</h1>
          <p>Meu Portfólio Profissional </p>
          <img
            data-src="../Image/portfolio.png">
        </div>
        <div class="slide">
          <h1>Automatização</h1>
          <p>Automatização Cadastro de Produtos.</p>
          <img
            data-src="../Image/cadastro.png">
        </div>
        <div class="slide">
          <h1>Automatização</h1>
          <p>Web Scraping de Site de Vendas.</p>
          <img
            data-src="../Image/boot.png">
        </div>
      </div>
    </div>
    <!-- end section -->

    <!-- begin section -->

    <div class="section" data-anchor="contact">
      <div class="content wow fadeInDown" data-wow-delay="0.2s">
        <h1>CONTATE-ME</h1>
        <p>Se você está interessado em trabalhar comigo, estou pronto para ouvir suas necessidades e encontrar a melhor
          maneira de colaborar com você. Além disso, convido você a seguir e explorar meu portfólio nas redes sociais,
          disponíveis na parte inferior da página. Ansioso para conectarmos e construirmos algo excepcional!</p>
        <br>
        <!-- Aqui tamem na class info um outro  icone para eu colocar um link para quem quiser com contatar por email 
        -->
        </form>
        <div class="row">
          <div class="col-md-6 col-sm-6">
            <div class="icon-box">
              <span><i class="fa fa-map-marker fa-2x"></i></span>
              <div class="info">
                <h3>Localização</h3>
                <p>Nova Iguaçu, Rio de Janeiro</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- end section -->

  <!-- begin section -->

  <div class="section fp-auto-height">
    <div class="footer">
      <p>MINHAS REDES</p>
      <div class="social-links">
        <span><a href="https://www.linkedin.com/in/diogomachado-dm/" target="_blank"><i
              class="fa fa-linkedin fa-2x"></i></a></span>
        <span><a href="https://github.com/Murdock021" target="_blank"><i class="fa fa-github fa-2x"></i></a></span>
        <span><a target="_blank" href="https://api.whatsapp.com/send?phone=5521965629504" target="_blank"><i
              class="fa fa-whatsapp fa-2x"></i></a></span>
        <span><a target="_blank" href="https://www.instagram.com/diogomachado_021/" target="_blank"><i
              class="fa fa-instagram fa-2x"></i></a></span>
      </div>
    </div>
  </div>
  <!-- end section -->

  </div>
  <script src="./scripts.js"></script>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>

</html>