-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
461 lines (461 loc) · 22.1 KB
/
index.html
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
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
<!DOCTYPE html>
<html lang="pt-BR">
<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" />
<meta name="title" content="Portfólio | PaulloClara" />
<meta
name="description"
content="Desenvolvedor web com 4 anos de experiência em VueJS e TypeScript, especializado em projetos de alto
tráfego e desenvolvimento de plataformas do conceito à entrega. Experiência em e-commerce nos setores de
imóveis e materiais de construção, soluções jurídicas e plataformas de saúde."
/>
<meta property="og:type" content="website" />
<meta property="og:url" content="paulloclara.github.io" />
<meta property="og:title" content="Portfolio | PaulloClara" />
<meta
property="og:description"
content="Desenvolvedor web com 4 anos de experiência em VueJS e TypeScript, especializado em projetos de alto
tráfego e desenvolvimento de plataformas do conceito à entrega. Experiência em e-commerce nos setores de
imóveis e materiais de construção, soluções jurídicas e plataformas de saúde."
/>
<meta property="og:image" content="paulloclara.github.io/images/preview.webp" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="paulloclara.github.io" />
<meta property="twitter:title" content="Portfolio | PaulloClara" />
<meta
property="twitter:description"
content="Desenvolvedor web com 4 anos de experiência em VueJS e TypeScript, especializado em projetos de alto
tráfego e desenvolvimento de plataformas do conceito à entrega. Experiência em e-commerce nos setores de
imóveis e materiais de construção, soluções jurídicas e plataformas de saúde."
/>
<meta property="twitter:image" content="paulloclara.github.io/images/preview.webp" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="styles/main.css" />
<link rel="stylesheet" href="styles/header.css" />
<link rel="stylesheet" href="styles/banner.css" />
<link rel="stylesheet" href="styles/skills.css" />
<link rel="stylesheet" href="styles/projects.css" />
<script src="https://unpkg.com/typed.js@2.0.132/dist/typed.umd.js"></script>
<script src="scripts.js" defer></script>
<title>Portfólio | PaulloClara</title>
</head>
<body data-theme="day">
<div class="pc-page-container">
<header class="pc-header">
<a class="pc-header-logo" href="#home">
~/<span>Meu</span>/<span>Portfólio</span><b>$</b>
</a>
<ul class="pc-header-links">
<li><a class="pc-header-link" href="#home">Home</a></li>
<li><a class="pc-header-link" href="#skills">Skills</a></li>
<li><a class="pc-header-link" href="#projects">Projetos</a></li>
<li><a class="pc-header-link" href="docs/cv.pdf" download>CV</a></li>
</ul>
</header>
<main class="pc-sections">
<section class="pc-banner" id="home">
<div class="pc-banner-content">
<p class="pc-banner-subtitle">Olá_</p>
<h1><b>Eu sou</b> <span id="pc-banner-typing-animation"></span></h1>
<p class="pc-banner-summary">
Desenvolvedor web com <b>4 anos de experiência</b> em <b>VueJS</b> e
<b>TypeScript</b>, especializado em projetos de alto tráfego e desenvolvimento de
plataformas do conceito à entrega. Experiência em <b>e-commerce</b> nos setores de
<b>imóveis</b> e <b>materiais de construção</b>, soluções <b>jurídicas</b> e
plataformas de <b>saúde</b>. Se você precisar de alguém com minhas habilidades, entre
em contato!
</p>
</div>
<img class="pc-banner-background day" src="images/hollow-knight-day.webp" alt="Banner" />
<img
class="pc-banner-background night"
src="images/hollow-knight-night.webp"
alt="Banner"
/>
<ul class="pc-banner-social-links">
<li>
<a
class="pc-banner-social-link"
href="https://github.com/PaulloClara"
target="_blank"
aria-label="Acessar o GitHub"
>
<i class="fa-brands fa-github"></i>
</a>
</li>
<li>
<a
class="pc-banner-social-link"
href="https://www.linkedin.com/in/paulloclara/"
target="_blank"
aria-label="Acessar o LinkedIn"
>
<i class="fa-brands fa-linkedin"></i>
</a>
</li>
<li>
<a
class="pc-banner-social-link"
href="https://t.me/paulloclara"
target="_blank"
aria-label="Entrar em contato via Telegram"
>
<i class="fa-brands fa-telegram"></i>
</a>
</li>
<li>
<a
class="pc-banner-social-link"
href="https://wa.me/5586988000821"
target="_blank"
aria-label="Entrar em contato via WhatsApp"
>
<i class="fa-brands fa-whatsapp"></i>
</a>
</li>
</ul>
</section>
<section class="pc-skills" id="skills">
<div class="pc-skills-infos">
<h2 class="pc-skills-title">Minhas <b>habilidades</b> e <b>experiências</b></h2>
<div class="pc-skills-summary">
<p>
Em 2018, iniciei minha jornada acadêmica cursando Análise e Desenvolvimento de
Sistemas no IFPI. No entanto, por diversos motivos, decidi interromper o curso em
2020 e seguir estudando por conta própria. Foi nesse período que entrei no mercado
como Desenvolvedor Front-end, em outubro do mesmo ano.
</p>
<p>
Desde então, participei ativamente do desenvolvimento de diversas aplicações, entre
elas, uma jurídica, médica, imobiliária e alguns e-commercers. Fui o responsável por
todas elas, desde a escolha das tecnologias utilizadas até a otimização para
buscadores.
</p>
<p>
Meu objetivo atual é aprimorar ainda mais meus conhecimentos e ganhar mais
experiência como desenvolvedor web, buscando sempre estar atualizado com as melhores
práticas do mercado e as mais recentes tecnologias.
</p>
</div>
</div>
<ul class="pc-skills-items">
<li class="pc-skills-item" style="--skill-percentage: 99%; --skill-color: #ff5733">
<p class="pc-skills-item-name">HTML</p>
<b class="pc-skills-item-progress">99%</b>
</li>
<li class="pc-skills-item" style="--skill-percentage: 90%; --skill-color: #1876d2">
<p class="pc-skills-item-name">CSS</p>
<b class="pc-skills-item-progress">95%</b>
</li>
<li class="pc-skills-item" style="--skill-percentage: 98%; --skill-color: #f7df1e">
<p class="pc-skills-item-name">JavaScript</p>
<b class="pc-skills-item-progress">98%</b>
</li>
<li class="pc-skills-item" style="--skill-percentage: 90%; --skill-color: #007acc">
<p class="pc-skills-item-name">TypeScript</p>
<b class="pc-skills-item-progress">96%</b>
</li>
<li class="pc-skills-item" style="--skill-percentage: 96%; --skill-color: #42b883">
<p class="pc-skills-item-name">VueJS</p>
<b class="pc-skills-item-progress">98%</b>
</li>
<li class="pc-skills-item" style="--skill-percentage: 90%; --skill-color: #00dc82">
<p class="pc-skills-item-name">NuxtJS</p>
<b class="pc-skills-item-progress">90%</b>
</li>
<li class="pc-skills-item" style="--skill-percentage: 85%; --skill-color: #004a87">
<p class="pc-skills-item-name">PrimeVue</p>
<b class="pc-skills-item-progress">95%</b>
</li>
<li class="pc-skills-item" style="--skill-percentage: 80%; --skill-color: #cc6699">
<p class="pc-skills-item-name">SASS</p>
<b class="pc-skills-item-progress">90%</b>
</li>
<li class="pc-skills-item" style="--skill-percentage: 60%; --skill-color: #90c53f">
<p class="pc-skills-item-name">Node</p>
<b class="pc-skills-item-progress">60%</b>
</li>
<li class="pc-skills-item" style="--skill-percentage: 60%; --skill-color: #00ed64">
<p class="pc-skills-item-name">MongoDB</p>
<b class="pc-skills-item-progress">60%</b>
</li>
<li class="pc-skills-item" style="--skill-percentage: 60%; --skill-color: #61dbfb">
<p class="pc-skills-item-name">ReactJS</p>
<b class="pc-skills-item-progress">60%</b>
</li>
<li class="pc-skills-item" style="--skill-percentage: 75%; --skill-color: #1c2c4c">
<p class="pc-skills-item-name">React Native</p>
<b class="pc-skills-item-progress">75%</b>
</li>
</ul>
</section>
<section class="pc-projects" id="projects">
<div class="pc-projects-infos">
<h2 class="pc-projects-title">Meus projetos <b>pessoais</b> e <b>profissionais</b></h2>
<p class="pc-projects-summary">
Conheça meus projetos pessoais e profissionais mais recentes, desenvolvidos com
dedicação, técnica e criatividade. Adoro criar interfaces intuitivas e atraentes,
embora tenha explorado APIs e o mundo mobile em alguns projetos. Busco sempre
aprimorar minhas habilidades e oferecer soluções cada vez melhores para meus clientes
e usuários.
</p>
</div>
<ul class="pc-projects-items">
<li class="pc-projects-item">
<img class="pc-projects-item-preview" src="images/home-obmed.webp" alt="Obmed" />
<div class="pc-projects-item-infos">
<h3 class="pc-projects-item-name">Obmed</h3>
<div class="pc-projects-item-description">
A Obmed é uma plataforma que fornece serviços de assistência médica, incluindo
consultas e exames de diversas clínicas. Eu fui o responsável pela criação de
todos os sistemas da Obmed, desde a escolha das tecnologias até o desenvolvimento
em si. Esses sistemas incluem o site, o sistema do parceiro, o sistema da clínica
e o sistema de administração geral. Além disso, contribuí com 80% do
desenvolvimento do aplicativo.
</div>
<div class="pc-projects-item-links">
<a
class="pc-projects-item-link"
href="https://www.instagram.com/obmed.com.br/"
target="_blank"
>
<i class="fa-brands fa-instagram"></i> Instagram
</a>
<a
class="pc-projects-item-link"
href="https://play.google.com/store/apps/details?id=com.obmed"
target="_blank"
>
<i class="fa-brands fa-google-play"></i> App
</a>
<a class="pc-projects-item-link" href="https://obmed.com.br/" target="_blank">
<i class="fa-solid fa-earth-americas"></i> Site
</a>
</div>
</div>
</li>
<li class="pc-projects-item">
<img
class="pc-projects-item-preview"
src="images/home-obsaude.webp"
alt="Obmed+Saúde"
/>
<div class="pc-projects-item-infos">
<h3 class="pc-projects-item-name">Obmed+Saúde</h3>
<div class="pc-projects-item-description">
A Obmed+Saúde é uma plataforma de telemedicina que oferece serviços de assistência
médica. Eu fui o responsável pela criação do sistema, desde a escolha das
tecnologias até o desenvolvimento em si. Isso inclui a landing page, o sistema
propriamente dito e o admin.
</div>
<div class="pc-projects-item-links">
<a
class="pc-projects-item-link"
href="https://saude.obmed.com.br/"
target="_blank"
>
<i class="fa-solid fa-earth-americas"></i> Site
</a>
</div>
</div>
</li>
<li class="pc-projects-item">
<img class="pc-projects-item-preview" src="images/home-gojus.webp" alt="Gojus" />
<div class="pc-projects-item-infos">
<h3 class="pc-projects-item-name">Sistema Gojus</h3>
<p class="pc-projects-item-description">
O Gojus é uma plataforma jurídica que atende diversas necessidades de um
escritório. Sou responsável pelo desenvolvimento de seu front-end, adotei uma
abordagem altamente modularizada que oferece soluções para gerenciamento de
processos, logística, cobrança, finanças, correspondentes, funcionários e tarefas.
Essa abordagem garante a flexibilidade necessária para que cada escritório possa
personalizar e adaptar o Gojus às suas necessidades específicas.
</p>
<div class="pc-projects-item-links">
<a
class="pc-projects-item-link"
href="https://www.instagram.com/gojus.com.br/"
target="_blank"
>
<i class="fa-brands fa-instagram"></i> Instagram
</a>
<a
class="pc-projects-item-link"
href="https://sistema.gojus.com.br/"
target="_blank"
>
<i class="fa-solid fa-earth-americas"></i> Site
</a>
</div>
</div>
</li>
<li class="pc-projects-item">
<img
class="pc-projects-item-preview"
src="images/home-lojas-engecon.webp"
alt="Lojas Engecon"
/>
<div class="pc-projects-item-infos">
<h3 class="pc-projects-item-name">Lojas Engecon</h3>
<p class="pc-projects-item-description">
Lojas Engecon é uma plataforma de materiais de construção que busca se tornar um
marketplace. Atualmente, a empresa possui uma loja física em Teresina/PI. Como
desenvolvedor, fui responsável por criar todo o front-end da plataforma, além de
ter contribuído para o desenvolvimento do sistema ERP e ter criado 40% do
aplicativo.
</p>
<div class="pc-projects-item-links">
<a
class="pc-projects-item-link"
href="https://www.instagram.com/lojasengecon/"
target="_blank"
>
<i class="fa-brands fa-instagram"></i> Instagram
</a>
<a
class="pc-projects-item-link"
href="https://lojasengecon.com.br/"
target="_blank"
>
<i class="fa-solid fa-earth-americas"></i> Site
</a>
</div>
</div>
</li>
<li class="pc-projects-item">
<img class="pc-projects-item-preview" src="images/home-pievo.webp" alt="Pievo" />
<div class="pc-projects-item-infos">
<h3 class="pc-projects-item-name">Pievo</h3>
<p class="pc-projects-item-description">
Pievo é um sistema de gestão para micro e pequenas empresas. O sistema é modulas e
cobre o gerenciamento de produtos, fornecedores, funcionários, equipes, tarefas
entre vários outros. Como desenvolvedor, fui responsável por criar todo o
front-end da landing page e ERP.
</p>
<div class="pc-projects-item-links">
<a class="pc-projects-item-link" href="https://pievo.com.br/" target="_blank">
<i class="fa-solid fa-earth-americas"></i> Site
</a>
</div>
</div>
</li>
<li class="pc-projects-item">
<img
class="pc-projects-item-preview"
src="images/marketplace-nexthome.webp"
alt="Next Home"
/>
<div class="pc-projects-item-infos">
<h3 class="pc-projects-item-name">Next Home</h3>
<p class="pc-projects-item-description">
A Next Home é uma plataforma de imóveis que conecta compradores e vendedores por
meio de um marketplace. Eu tive a responsabilidade de realizar a reescrita do
site, do próprio marketplace e do sistema de gerenciamento da plataforma. No
entanto, apesar das minhas contribuições, o projeto parece não estar recebendo
atualizações regulares e, infelizmente, apresenta diversos bugs de infraestrutura.
</p>
<div class="pc-projects-item-links">
<a
class="pc-projects-item-link"
href="https://www.instagram.com/nexthome.pt/"
target="_blank"
>
<i class="fa-brands fa-instagram"></i> Instagram
</a>
<a
class="pc-projects-item-link"
href="https://nexthome.pt/marketplace?negotiation_type=SELL"
target="_blank"
>
<i class="fa-solid fa-earth-americas"></i> Site
</a>
</div>
</div>
</li>
<li class="pc-projects-item">
<img
class="pc-projects-item-preview"
src="images/animes-animeland.webp"
alt="AnimeLand"
/>
<div class="pc-projects-item-infos">
<h3 class="pc-projects-item-name">AnimeLand</h3>
<p class="pc-projects-item-description">
Um projeto pessoal que desenvolvi para acessar animes com a melhor qualidade
possível. Faço web scraping do site nyaa.si em uma API em Node, trato os dados
gerando um nome limpo, episodio, temporada e dados do tipo, fiz uma integração com
a Custom Search do Google para busca de imagens e salvo em uma collection na
MongoDB Atlas.
</p>
<div class="pc-projects-item-links">
<a
class="pc-projects-item-link"
href="https://github.com/PaulloClara/animeland-site"
target="_blank"
>
<i class="fa-brands fa-github"></i> Github
</a>
<a
class="pc-projects-item-link"
href="https://myanimeland.netlify.app/"
target="_blank"
>
<i class="fa-solid fa-earth-americas"></i> Site
</a>
</div>
</div>
</li>
<li class="pc-projects-item">
<img
class="pc-projects-item-preview"
src="images/home-currency-converter.webp"
alt="CurrencyConverter"
/>
<div class="pc-projects-item-infos">
<h3 class="pc-projects-item-name">CurrencyConverter</h3>
<p class="pc-projects-item-description">
Um projeto pessoal simples para conversão de moedas. O objetivo é facilitar a
conversão de moedas de forma rápida e prática. Com um design minimalista e
intuitivo, você pode converter diversas moedas em tempo real, utilizando
diferentes métodos de entrada e saída.
</p>
<div class="pc-projects-item-links">
<a
class="pc-projects-item-link"
href="https://github.com/PaulloClara/currency-converter"
target="_blank"
>
<i class="fa-brands fa-github"></i> Github
</a>
<a
class="pc-projects-item-link"
href="https://paulloclara.github.io/currency-converter/"
target="_blank"
>
<i class="fa-solid fa-earth-americas"></i> Site
</a>
</div>
</div>
</li>
</ul>
</section>
<button id="pc-switch-theme" title="Mudar tema">
<i class="fa-regular fa-sun"></i>
<i class="fa-regular fa-moon"></i>
</button>
</main>
</div>
<audio id="pc-background-sound" autoplay loop>
<source type="audio/mpeg" />
</audio>
</body>
</html>