totalo-dev.github.io/index.html at main · totalo-dev/totalo-dev.github.io · 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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
<!DOCTYPE html>
<html lang="pt-BR" data-lang="pt" data-theme="light">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- SEO primário -->
  <title data-key="meta-title">João Paulo — Desenvolvedor Backend</title>
  <meta name="description" data-key-attr="meta-description"
        content="Desenvolvedor backend em aprendizado. JavaScript, Java, SQL, APIs REST, Cloud e IA. Aberto a CLT e freelas." />
  <meta name="author"  content="João Paulo Leal" />
  <meta name="robots"  content="index, follow" />

  <!-- Open Graph -->
  <meta property="og:type"        content="website" />
  <meta property="og:url"         content="https://totalo-dev.github.io/" />
  <meta property="og:title"       content="João Paulo — Desenvolvedor Backend" />
  <meta property="og:description" content="Menos de 6 meses construindo coisas reais. Backend, APIs, Cloud e IA." />
  <meta property="og:image"       content="https://totalo-dev.github.io/assets/og-image.png" />

  <!-- Twitter Card -->
  <meta name="twitter:card"        content="summary_large_image" />
  <meta name="twitter:title"       content="João Paulo — Desenvolvedor Backend" />
  <meta name="twitter:description" content="Desenvolvedor backend em aprendizado. Aberto a CLT e freelas." />

  <!-- Fontes -->
  <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=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&family=DM+Serif+Display:ital@0;1&display=swap"
        rel="stylesheet" />

  <!-- Devicons -->
  <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />

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

  <!--
    Anti-flicker de tema: roda inline e síncrono antes do primeiro paint.
    Lê localStorage → prefers-color-scheme → padrão "light".
  -->
  <script>
    (function () {
      var t = localStorage.getItem('tema')
        || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
      document.documentElement.setAttribute('data-theme', t);
    }());
  </script>
</head>

<body>

<!-- ═══════════════════════════════════════════════════════════
     NAVBAR
════════════════════════════════════════════════════════════ -->
<nav class="navbar" id="navbar" aria-label="Navegação principal">
  <div class="nav-inner">

    <a href="#hero" class="nav-logo">João Paulo</a>

    <ul class="nav-links" id="nav-links" role="list">
      <li><a href="#sobre"    data-key="nav-sobre">Sobre</a></li>
      <li><a href="#skills"   data-key="nav-skills">Skills</a></li>
      <li><a href="#projetos" data-key="nav-projetos">Projetos</a></li>
      <li><a href="#contato"  data-key="nav-contato">Contato</a></li>
    </ul>

    <div class="nav-controls">
      <!-- Troca de idioma -->
      <button class="btn-icon" id="lang-toggle"
              aria-label="Switch to English" title="Switch language">
        <span id="lang-label" aria-hidden="true">EN</span>
      </button>

      <!-- Troca de tema -->
      <button class="btn-icon" id="tema-toggle"
              aria-label="Alternar tema claro/escuro">
        <!-- Sol — visível no light mode -->
        <svg class="icon-sol" viewBox="0 0 24 24" width="18" height="18"
             fill="none" stroke="currentColor" stroke-width="2"
             stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <circle cx="12" cy="12" r="5"/>
          <line x1="12" y1="1"  x2="12" y2="3"/>
          <line x1="12" y1="21" x2="12" y2="23"/>
          <line x1="4.22"  y1="4.22"  x2="5.64"  y2="5.64"/>
          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
          <line x1="1"  y1="12" x2="3"  y2="12"/>
          <line x1="21" y1="12" x2="23" y2="12"/>
          <line x1="4.22"  y1="19.78" x2="5.64"  y2="18.36"/>
          <line x1="18.36" y1="5.64"  x2="19.78" y2="4.22"/>
        </svg>
        <!-- Lua — visível no dark mode -->
        <svg class="icon-lua" viewBox="0 0 24 24" width="18" height="18"
             fill="none" stroke="currentColor" stroke-width="2"
             stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
        </svg>
      </button>

      <!-- Hamburguer (mobile) -->
      <button class="btn-hamburger" id="nav-toggle"
              aria-label="Abrir menu" aria-expanded="false">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>

  </div>
</nav>


<!-- ═══════════════════════════════════════════════════════════
     CONTEÚDO PRINCIPAL
════════════════════════════════════════════════════════════ -->
<main>

  <!-- ── HERO ─────────────────────────────────────────────── -->
  <section class="hero" id="hero">
    <div class="container">

      <p class="hero-eyebrow" data-key="hero-eyebrow">
        Desenvolvedor backend · menos de 6 meses construindo coisas reais
      </p>

      <h1 class="hero-headline">
        <span class="line-muted"  data-key="hero-linha1">Construindo software.</span>
        <span class="line-strong" data-key="hero-linha2">Do backend ao mundo real.</span>
      </h1>

      <p class="hero-badge" data-key="hero-credibility">
        6+ projetos no GitHub · estudando todo dia
      </p>

      <div class="hero-actions">
        <a href="#projetos" class="btn btn-solid"   data-key="hero-btn-projetos">Ver Projetos</a>
        <a href="/assets/cv.pdf" class="btn btn-outline" download data-key="hero-btn-cv">Baixar CV</a>
      </div>

      <nav class="hero-social" aria-label="Redes sociais">
        <a href="https://github.com/totalo-dev"        target="_blank" rel="noopener noreferrer">GitHub</a>
        <a href="https://linkedin.com/in/totalo" target="_blank" rel="noopener noreferrer">LinkedIn</a>
      </nav>

    </div>
  </section>


  <!-- ── SOBRE ─────────────────────────────────────────────── -->
  <section class="sobre fade-in" id="sobre" aria-labelledby="sobre-titulo">
    <div class="container sobre-grid">

      <div class="sobre-texto">
        <h2 id="sobre-titulo" class="section-title" data-key="sobre-titulo">Sobre mim</h2>

        <p class="sobre-abertura" data-key="sobre-abertura">
          Comecei com curiosidade. Continuo por conta do que consigo construir.
        </p>
        <p data-key="sobre-p1">
          Sou desenvolvedor backend em formação, com foco em JavaScript, Java e SQL.
          Nos últimos meses mergulhei em APIs REST, banco de dados relacional,
          versionamento com Git e os primeiros passos em Cloud — AWS e GCP.
        </p>
        <p data-key="sobre-p2">
          Não tenho anos de experiência. Tenho consistência: estudo todo dia,
          construo projetos reais e documento o que aprendo. Estou buscando
          minha primeira oportunidade CLT e também aberto a freelas.
        </p>
        <p data-key="sobre-p3">
          Atualmente explorando Data Engineering e aplicações com IA —
          porque o backend de amanhã já está sendo escrito hoje.
        </p>
      </div>

      <!-- Decorativo — oculto de leitores de tela -->
      <div class="sobre-deco" aria-hidden="true">&lt;/&gt;</div>

    </div>
  </section>


  <!-- ── SKILLS ────────────────────────────────────────────── -->
  <section class="skills fade-in" id="skills" aria-labelledby="skills-titulo">
    <div class="container">

      <h2 id="skills-titulo" class="section-title" data-key="skills-titulo">Skills</h2>

      <div class="skills-grupos">

        <div class="skills-grupo">
          <h3 class="skills-cat" data-key="skills-cat-backend">Backend</h3>
          <ul class="skills-lista" role="list">
            <li class="skill-item"><i class="devicon-javascript-plain colored" aria-hidden="true"></i><span>JavaScript</span></li>
            <li class="skill-item"><i class="devicon-java-plain colored"       aria-hidden="true"></i><span>Java</span></li>
            <li class="skill-item"><i class="devicon-nodejs-plain colored"     aria-hidden="true"></i><span>Node.js</span></li>
            <li class="skill-item"><i class="devicon-express-original"         aria-hidden="true"></i><span>REST APIs</span></li>
          </ul>
        </div>

        <div class="skills-grupo">
          <h3 class="skills-cat" data-key="skills-cat-db">Banco de Dados</h3>
          <ul class="skills-lista" role="list">
            <li class="skill-item"><i class="devicon-mysql-plain colored"      aria-hidden="true"></i><span>MySQL</span></li>
            <li class="skill-item"><i class="devicon-postgresql-plain colored" aria-hidden="true"></i><span>PostgreSQL</span></li>
            <li class="skill-item"><i class="devicon-sqlite-plain colored"     aria-hidden="true"></i><span>SQLite</span></li>
          </ul>
        </div>

        <div class="skills-grupo">
          <h3 class="skills-cat" data-key="skills-cat-cloud">Cloud &amp; DevOps</h3>
          <ul class="skills-lista" role="list">
            <li class="skill-item"><i class="devicon-amazonwebservices-plain-wordmark colored" aria-hidden="true"></i><span>AWS</span></li>
            <li class="skill-item"><i class="devicon-googlecloud-plain colored" aria-hidden="true"></i><span>GCP</span></li>
            <li class="skill-item"><i class="devicon-docker-plain colored"      aria-hidden="true"></i><span>Docker</span></li>
          </ul>
        </div>

        <div class="skills-grupo">
          <h3 class="skills-cat" data-key="skills-cat-tools">Ferramentas</h3>
          <ul class="skills-lista" role="list">
            <li class="skill-item"><i class="devicon-git-plain colored"    aria-hidden="true"></i><span>Git</span></li>
            <li class="skill-item"><i class="devicon-github-original"      aria-hidden="true"></i><span>GitHub</span></li>
            <li class="skill-item"><i class="devicon-vscode-plain colored" aria-hidden="true"></i><span>VS Code</span></li>
            <li class="skill-item"><i class="devicon-linux-plain"          aria-hidden="true"></i><span>Linux</span></li>
          </ul>
        </div>

      </div>
    </div>
  </section>


  <!-- ── PROJETOS ──────────────────────────────────────────── -->
  <section class="projetos fade-in" id="projetos" aria-labelledby="projetos-titulo">
    <div class="container">

      <h2 id="projetos-titulo" class="section-title" data-key="projetos-titulo">Projetos</h2>
      <p class="section-sub" data-key="projetos-sub">Direto do GitHub — atualizado automaticamente.</p>

      <!-- Preenchido via JS; skeletons são substituídos pelos cards -->
      <div class="projetos-grid" id="projetos-grid"
           aria-live="polite" aria-busy="true">
        <div class="skeleton skeleton-wide"></div>
        <div class="skeleton"></div>
        <div class="skeleton"></div>
        <div class="skeleton"></div>
        <div class="skeleton"></div>
        <div class="skeleton"></div>
      </div>

      <!-- Fallback de erro -->
      <div class="projetos-erro" id="projetos-erro" hidden>
        <p data-key="projetos-erro-msg">Não consegui carregar os projetos agora.</p>
        <a href="https://github.com/totalo-dev" target="_blank" rel="noopener noreferrer"
           data-key="projetos-erro-link">Ver repositórios no GitHub →</a>
      </div>

    </div>
  </section>


  <!-- ── EM ANDAMENTO ──────────────────────────────────────── -->
  <section class="andamento fade-in" id="andamento" aria-labelledby="andamento-titulo">
    <div class="container andamento-inner">

      <div class="andamento-linha" aria-hidden="true"></div>

      <div>
        <h2 id="andamento-titulo" class="andamento-titulo" data-key="andamento-titulo">
          Atualmente estudando
        </h2>
        <p class="andamento-intro" data-key="andamento-intro">
          O que está aberto no meu editor agora:
        </p>
        <ul class="andamento-tags" role="list">
          <li data-key="tag-sql">SQL e banco de dados</li>
          <li data-key="tag-cloud">Cloud AWS/GCP</li>
          <li data-key="tag-ia">Projetos com IA</li>
          <li data-key="tag-git">Git/GitHub avançado</li>

    </div>
  </section>


  <!-- ── CONTATO ───────────────────────────────────────────── -->
  <section class="contato fade-in" id="contato" aria-labelledby="contato-titulo">
    <div class="container">

      <h2 id="contato-titulo" class="section-title" data-key="contato-titulo">Contato</h2>

      <p class="contato-convite" data-key="contato-convite">
        Aberto a oportunidades CLT e freelas.<br />Respondo em até 24h.
      </p>

      <a href="mailto:joaopauloleal55@gmail.com" class="contato-email">
        joaopauloleal55@gmail.com
      </a>

      <nav class="contato-social" aria-label="Links externos">
        <a href="https://github.com/totalo-dev"        target="_blank" rel="noopener noreferrer">GitHub</a>
        <span aria-hidden="true">·</span>
        <a href="https://linkedin.com/in/totalo" target="_blank" rel="noopener noreferrer">LinkedIn</a>
      </nav>

    </div>
  </section>

</main>


<!-- ═══════════════════════════════════════════════════════════
     RODAPÉ
════════════════════════════════════════════════════════════ -->
<footer class="rodape">
  <p id="rodape-texto">Site produzido com IA, pode haver erros.</p>
  <a href="#hero" class="rodape-topo" aria-label="Voltar ao topo" data-key="rodape-topo">↑ topo</a>
</footer>


<script src="js/main.js"></script>
</body>
</html>