portfolio-jo4web/index.html at main · jo4web/portfolio-jo4web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jo4web - Desenvolvedor Frontend</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Manrope:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/styles.css">
  <script src="https://kit.fontawesome.com/5e8dcde82e.js" crossorigin="anonymous"></script>

</head>
<body>

  <div class="wrapper">

    <header class="header">
      <div class="h-logo">
        <a href="#">
          <img src="images/logo.png" alt="Logo jo4web" />
        </a>
      </div>
      <nav class="navbar">
        <ul class="n-desktop">
          <a class="n-border-left" href="#s-intro"><li>Intro</li></a>
          <a href="#s-services"><li>O Que Eu Faço</li></a>
          <a href="#s-works"><li>Trabalhos Recentes</li></a>
          <a href="#s-contact"><li>Entre em contato</li></a>
        </ul>

      <div class="n-mobile">
        <button id="showMobile"><i class="fa-solid fa-bars"></i></button>
      </div>
      </nav>
      <div class="social">
        <a href="https://github.com/jo4web" target="blank"><img src="images/github.png" alt="Github" /></a>
        <a href="https://www.linkedin.com/in/joeltonmartins/" target="blank"><img src="images/linkedin.png" alt="Linkedin" /></a>
      </div>
    </header>

    <div class="mobile-menu">
      <ul class="mm-display">
        <li class="mmd-list"><a href="#s-intro">Intro</a></li>
        <li class="mmd-list"><a href="#s-services">O Que Eu Faço</a></li>
        <li class="mmd-list"><a href="#s-works">Trabalhos Recentes</a></li>
        <li class="mmd-list"><a href="#s-contact">Entre em contato</a></li>
      </ul>
      <div class="social">
        <a href="https://github.com/jo4web" target="blank"><img src="images/github.png" alt="Github" /></a>
        <a href="https://www.linkedin.com/in/joeltonmartins/" target="blank"><img src="images/linkedin.png" alt="Linkedin" /></a>
      </div>
    </div>

    <section id="s-intro" class="intro">
      <span class="bg-intro"></span>
      <h1 class="text1-intro">Desenvolvedor Frontend que constrói idéias criativas do zero até se tornarem experiências digitais.</h1>
        <div class="text2-wrap">
          <h1 class="text2-intro">Olá, Eu sou o Joelton.</h1>
          <p class="text3-intro">Eu gosto de desenvolver coisas do zero e gosto de dar vida as ideias no navegador para que elas se tornem experiências digitais excepcionais. Interessado em todos os aspectos do desenvolvimento, gosto de trabalhar com projetos ambiciosos que vão além daquilo que eu já conheço para explorar além dos meus limites.</p>
        </div>

    </section>

    <section id="s-services" class="services">
      <div class="s-text">
        <h3 class="s-small-text">O Que Eu Faço</h3>
        <h1 class="s-big-text">Tenho tudo que você precisa para tirar seu projeto do papel e começar agora! </h1>
      </div>

      <div class="s-features">
        <div class="sf-row">
          <img src="images/creativity.png" />
          <div class="sf-column">
            <h2 class="big-text-column">Web Development</h2>
            <p class="small-text-column">Seu site é a primeira impressão que seus clientes terão, portanto, certifique-se de que tenha uma boa impressão. Trabalho com o que tem de melhor no processo de desenvolvimento, desde o velho e bom HTML/CSS até ferramentas mais poderosas que darão interatividade ao seu site, como JavaScript e ReactJS.</p>
          </div>
        </div>
        <div class="sf-row">
            <img src="images/icon.svg" />
            <div class="sf-column">
              <h2 class="big-text-column">Marketing Digital</h2>
              <p class="small-text-column">Tenho uma sólida experiência em Facebook Ads, trabalhei por mais de 3 anos com ecommerce, toda parte de pesquisa de produtos, públicos alvos, audiências semelhantes, sei como se relacionar com o cliente, o que pode ajudar sua ideia a ganhar novos patamares.</p>
            </div>
        </div>
    </div>
    </section>

    <section id="s-works" class="works">
      <div class="s-works">
        <h3 class="s-works-small-text">Trabalhos Recentes</h3>
        <h1 class="s-works-big-text">Aqui estão os meus projetos favoritos feitos recentemente. Sinta-se à vontade para verificá-los.</h1>
      </div>

      <div class="sw-fig">
        <div class="sw-projects">
          <div class="swp-img"><img src="images/realEstate.gif" alt="Real Estate Project" /></div>
          <div class="sw-info">
            <h2 class="swi-title">Real Estate - ReactJS</h2>
            <p class="swi-desc">Moderno site no nicho de imobiliárias feito do zero com ReactJS, utilizando React Router Dom para alternar entre páginas, os dados do conteúdo nas seções vem de chamadas de API através do RapidAPI. Os principais desdaques implementados são: Autocomplete na busca por localidades, carrosel com opções de próxima ou anteior, slide com fotos das propriedades e Google Maps com coordenadas para geolocalização.</p>
            <a href="https://modernrealestate.netlify.app/" target="blank">Site do Projeto</a>
          </div>
        </div>
        <div class="sw-projects">
          <div class="swp-img"><img src="images/quizApp.gif" alt="Quiz Project" /></div>
          <div class="sw-info">
            <h2 class="swi-title">Quizz App - ReactJS </h2>
            <p class="swi-desc">Quiz interativo feito com ReactJS, o app recebe dados de uma chamada de API externa, com destaques para: pagina inicial para iniciar um novo quiz, uma vez que o quiz é iniciado as opções escolhidas ficam salvas em um localStorage, o usuário pode checar quais ele acertou através de um score e o app mostra quais foram corretas e quais não foram.</p>
            <a href="https://interactivequizzapp.netlify.app/" target="blank">Site do Projeto</a>
          </div>
        </div>
      </div>
    </section>

    <section id="s-contact" class="contact">
      <div class="c-text">
        <h3 class="c-small-text">Entre em contato</h3>
        <h1 class="c-title">Você tem uma ideia ou um projeto épico em mente? Vamos trabalhar juntos. </h1>
      </div>
      <form class="c-form" name="contact" method="POST" data-netlify="true" >
        <label><p>Nome:</p> <input placeholder="Nome" type="text" name="name" required></label>
        <label><p>Email:</p> <input placeholder="seuemail@example.com" type="text" name="email" required></label>
        <label><p>Telefone:</p> <input placeholder="e.x (+5543999620986)" type="text" name="telephone" required></label>
       <label><p>Mensagem:</p> <textarea id="textArea" placeholder="Sua mensagem" type="text" name="message" required></textarea></label>
       <button type="submit">ENVIAR</button>
      </form>

    </section>

    <footer class="footer">
      <div class="f-info">
        <div class="fi-address">
          <h3 class="fi-title">Onde me encontrar</h3>
          <h2>R. Tabelião João Ramalho Matta, 866, Centro, Uraí - Paraná - Brasil</h2>
        </div>
        <div class="fi-follow">
          <h3 class="fi-title">Siga-Me!</h3>
          <a href="https://www.facebook.com/profile.php?id=100010585309018" target="blank"><h2>Facebook </h2></a>
          <a href="https://twitter.com/JoeltonMart" target="blank"><h2>Twitter </h2></a>
          <a href="https://www.linkedin.com/in/joeltonmartins/" target="blank"><h2>Linkedin </h2></a>
        </div>
        <div class="fi-contact">
          <h3 class="fi-title">Contate-me</h3>
          <a href="mailto:#0"><h2>joeltonmartins@yahoo.com </h2></a>
          <a href="tel:197-123-9876"><h2>+43 99962 0986 </h2></a>
          <a href="tel:197-543-2345"><h2>+43 3541 2771 </h2></a>
        </div>
      </div>
    </footer>

  </div>

</body>

<script src="js/app.js" type="text/javascript" ></script>
</html>