-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
395 lines (356 loc) · 29 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
<!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">
<title>BarrosDEV | Portfólio</title>
<!-- Descrição -->
<meta name="description" content="A nossa sociedade tem se tornado cada vez mais digital. Não fique para trás, posso ajudar você nessa jornada! Conheça meus projetos.">
<!-- Imagens para compartilhamento de links -->
<!-- MS Tile - for Microsoft apps-->
<meta name="msapplication-TileImage" content="https://barrosdev.vercel.app/assets/img/barrosdevshare.jpg">
<!-- Facebook e Whatsapp -->
<meta property="og:locale" content="pt_BR">
<meta property="og:site_name" content="BarrosDEV | Portfólio">
<meta property="og:title" content="BarrosDEV | Até onde o poder dos códigos pode nos levar?">
<meta property="og:description" content="A nossa sociedade tem se tornado cada vez mais digital. Não fique para trás, posso ajudar você nessa jornada! Conheça meus projetos.">
<meta property="og:image" itemprop="image" content="https://raw.githubusercontent.com/gc-barros/barrosdev/main/assets/img/share1200.png">
<meta property="og:image" itemprop="image" content="https://barrosdev.vercel.app/assets/img/barrosdevshare.jpg">
<meta property="og:image:secure_url" content="https://barrosdev.vercel.app/assets/img/barrosdevshare.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:type" content="website">
<meta property="og:url" content="https://barrosdev.com.br/">
<!-- Twitter -->
<meta name="twitter:title" content="BarrosDEV | Até onde o poder dos códigos pode nos levar?">
<meta name="twitter:description" content="A nossa sociedade tem se tornado cada vez mais digital. Não fique para trás, posso ajudar você nessa jornada! Conheça meus projetos.">
<meta name="twitter:image" content="https://barrosdev.vercel.app/assets/img/barrosdevshare.jpg">
<meta name="twitter:card" content="summary">
<!-- Cor customizada para dispositivos móveis -->
<meta name="theme-color" content="#1D4956">
<!-- Favicon -->
<link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon">
<!-- Ícons externos -->
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="assets/css/base.css">
<link rel="stylesheet" href="assets/css/cabecalho.css">
<link rel="stylesheet" href="assets/css/introducao.css">
<link rel="stylesheet" href="assets/css/sobre.css">
<link rel="stylesheet" href="assets/css/habilidades.css">
<link rel="stylesheet" href="assets/css/projetos.css">
<link rel="stylesheet" href="assets/css/citacao.css">
<link rel="stylesheet" href="assets/css/contato.css">
<link rel="stylesheet" href="assets/css/botaoTopo.css">
<link rel="stylesheet" href="assets/css/animate.css">
<link rel="stylesheet" href="assets/css/digitando.css">
<link rel="stylesheet" href="assets/css/loading.css">
</head>
<body>
<div class="loading">
<div class="loading__img">
<img src="assets/img/loading-1.svg" alt="Antibug">
</div>
</div>
<div class="container-principal">
<header class="cabecalho vidro">
<div class="cabecalho-container">
<h1 class="cabecalho__logo" data-logo>
<img src="assets/img/barrosdev.svg" alt="Logo BarrosDEV">
</h1>
<button class="cabecalho__hamburguer" aria-label="Menu lateral" title="Menu lateral"><i class="ri-menu-line" data-hamburguer></i></button>
<nav class="cabecalho__navegacao">
<ul class="cabecalho__menu" data-menu>
<li class="cabecalho__item">
<a href="#sobre" class="cabecalho__link cabecalho__link--sobre" data-botao="sobre">Sobre</a>
</li>
<li class="cabecalho__item">
<a href="#habilidades" class="cabecalho__link cabecalho__link--habilidades" data-botao="habilidades">Habilidades</a>
</li>
<li class="cabecalho__item">
<a href="#projetos" class="cabecalho__link cabecalho__link--projetos" data-botao="projetos">Projetos</a>
</li>
<li class="cabecalho__item">
<a href="#contato" class="cabecalho__link cabecalho__link--contato" data-botao="contato">Contato</a>
</li>
</ul>
</nav>
<button class="botao botao-secundario botao-contato" data-botao="contato">
<span class="texto-gradient texto-contato">Contato</span>
</button>
</div>
</header>
<main class="conteudo">
<section class="introducao" id="introducao">
<div class="introducao__decoracao"></div>
<div class="introducao__texto vidro" data-anima="left">
<h2 class="introducao__titulo">Até onde o <span class="texto-gradient">poder</span> dos códigos pode nos levar?</h2>
<p class="introducao__corpo">A nossa sociedade tem se tornado cada vez mais digital. Não fique para trás, posso ajudar você nessa jornada!</p>
<div class="caixa-botao">
<button class="botao botao-primario" data-botao="habilidades">Saiba mais</button>
<button class="botao botao-secundario" data-botao="sobre"><span class="texto-gradient">Quem sou eu?</span></button>
</div>
</div>
</section>
<button class="botao-topo" aria-label="Botão voltar ao topo" title="Voltar ao topo da página" data-scrollToTop><i class="ri-arrow-up-s-line"></i></button>
<section class="sobre" id="sobre">
<div class="sobre__container vidro">
<h2 class="titulo-secao" data-anima="typing">Sobre mim</h2>
<div class="sobre__apresentacao" data-anima="right">
<div class="sobre__hello">
<p class="sobre__hello--code">Hello, world! I'm</p>
<img src="assets/img/logobarrosdev.svg" alt="Logo BarrosDEV" class="sobre__hello--logo">
</div>
<img src="assets/img/avatares/sorridente.png" alt="BarrosDEV sorridente" class="sobre__apresentacao--avatar">
</div>
<div class="sobre__ficha" data-anima="left">
<img src="assets/img/avatares/meditando.png" alt="BarrosDEV meditando" class="sobre__ficha--avatar">
<div class="sobre__ficha--conteudo">
<h3 class="subtitulo-secao">Ficha técnica</h3>
<ul class="sobre__card">
<li class="sobre__card--item"><strong>Nome:</strong> Gabriel Costa Barros</li>
<li class="sobre__card--item"><strong>Idade:</strong> <span data-idade>22 anos</span></li>
<li class="sobre__card--item"><strong>Naturalidade:</strong> São Luís - MA</li>
<li class="sobre__card--item"><strong>Formação:</strong> Bacharel em Ciência e Tecnologia (UFMA)</li>
<li class="sobre__card--item"><strong>Estudando:</strong> ADS (UNINTER)</li>
<li class="sobre__card--item"><strong>Área de atuação:</strong> Desenvolvedor Front-end</li>
</ul>
</div>
</div>
<div class="sobre__quote" data-anima="right">
<q class="sobre__quote--texto">
Venho buscando me qualificar ao máximo, <strong class="texto-gradient">sempre à procura de cursos, desafios e experiências</strong> que acrescentem à minha formação, tanto no lado pessoal como no profissional, para assim conseguir mudar o mundo através do poder dos códigos!
</q>
<img src="assets/img/avatares/lendo.png" alt="BarrosDEV lendo um livro" class="sobre__quote--avatar">
</div>
<div class="sobre__cinto" data-anima="left">
<div class="sobre__cinto--container">
<img src="assets/img/avatares/laptop.png" alt="Laptop com o logotipo BarrosDEV" class="sobre__cinto--imagem">
<div class="sobre__cinto--conteudo">
<h3 class="subtitulo-secao">Cinto de utilidades</h3>
<p class="sobre__cinto--texto">Algumas das linguagens de programação, ferramentas e outras tecnologias que já tive contato:</p>
<ul class="sobre__cinto--techs">
<li class="sobre__cinto--tech">
<img src="assets/img/icons/techs/html.svg" alt="HTML5" title="HTML5">
<span>HTML5</span>
</li>
<li class="sobre__cinto--tech">
<img src="assets/img/icons/techs/css.svg" alt="CSS3" title="CSS3">
<span>CSS3</span>
</li>
<li class="sobre__cinto--tech">
<img src="assets/img/icons/techs/js.svg" alt="JavaScript" title="JavaScript">
<span>JS</span>
</li>
<li class="sobre__cinto--tech">
<img src="assets/img/icons/techs/ts.svg" alt="TypeScript" title="TypeScript">
<span>TS</span>
</li>
<li class="sobre__cinto--tech">
<img src="assets/img/icons/techs/vue.svg" alt="Vue.js" title="Vue.js">
<span>Vue.js</span>
</li>
<li class="sobre__cinto--tech">
<img src="assets/img/icons/techs/react.svg" alt="React" title="React">
<span>React</span>
</li>
<li class="sobre__cinto--tech">
<img src="assets/img/icons/techs/next.svg" alt="Next.js" title="Next.js">
<span>Next</span>
</li>
<li class="sobre__cinto--tech">
<img src="assets/img/icons/techs/sass.svg" alt="Sass" title="Sass">
<span>Sass</span>
</li>
<li class="sobre__cinto--tech">
<img src="assets/img/icons/techs/py.svg" alt="Python" title="Python">
<span>Python</span>
</li>
<li class="sobre__cinto--tech">
<img src="assets/img/icons/techs/c.svg" alt="Linguagem C" title="Linguagem C">
<span>C</span>
</li>
<li class="sobre__cinto--tech">
<img src="assets/img/icons/techs/java.svg" alt="Java" title="Java">
<span>Java</span>
</li>
<li class="sobre__cinto--tech">
<img src="assets/img/icons/techs/mysql.svg" alt="MySQL" title="MySQL">
<span>MySQL</span>
</li>
<li class="sobre__cinto--tech">
<img src="assets/img/icons/techs/figma.svg" alt="Figma" title="Figma">
<span>Figma</span>
</li>
<li class="sobre__cinto--tech">
<img src="assets/img/icons/techs/psd.svg" alt="Photoshop" title="Photoshop">
<span>Ps</span>
</li>
<!-- <li class="sobre__cinto--tech">
<img src="assets/img/icons/techs/trello.svg" alt="Trello" title="Trello">
<span>Trello</span>
</li> -->
<li class="sobre__cinto--tech">
<img src="assets/img/icons/techs/github.svg" alt="GitHub" title="GitHub">
<span>GitHub</span>
</li>
<li class="sobre__cinto--tech">
<img src="assets/img/icons/techs/git.svg" alt="Git" title="Git">
<span>Git</span>
</li>
</ul>
<p class="sobre__cinto--texto">Meus próximos passos incluem especializações em frameworks que estão em alta no mercado, como <strong class="texto-gradient">React, Vue, Angular e Django</strong>, por exemplo, e outras tecnologias voltadas para o desenvolvimento web e mobile.</p>
</div>
</div>
</div>
<div class="sobre__chamada" data-anima="bottom">
<img src="assets/img/avatares/logotipo.svg" alt="Logotipo BarrosDEV" class="sobre__chamada--imagem">
<p class="sobre__chamada--texto">Nos últimos meses, tenho estudado bastante e desenvolvi alguns trabalhos bem legais. Que tal conhecer alguns deles?</p>
<div class="caixa-botao">
<button class="botao botao-primario" data-botao="projetos">Ver projetos</button>
<button class="botao botao-secundario" data-botao="contato"><span class="texto-gradient">Fale comigo</span></button>
</div>
</div>
</div>
</section>
<section class="habilidades" id="habilidades">
<div class="habilidades__intro">
<div class="habilidades__texto" data-anima="left">
<h2 class="titulo-secao digitando-nocenter" data-anima="typing">Habilidades</h2>
<p class="habilidades__corpo">Posso agregar valor ao seu negócio de diversas formas, aqui estão algumas das minhas principais <strong>habilidades técnicas e atividades que gosto de desempenhar</strong>:</p>
</div>
<img src="assets/img/avatares/callme.png" alt="BarrosDEV fazendo um hang loose com a mão" class="habilidades__avatar" data-anima="right">
</div>
<div class="habilidades__cards">
<div class="habilidades__card vidro" data-anima="bottom">
<h3 class="habilidades__card--titulo">Design e prototipação de websites</h3>
<p class="habilidades__card--descricao">Construção de protótipos no Figma, com layouts que melhor se adequem às suas necessidades e à identidade visual da sua marca.</p>
<button class="botao botao-secundario habilidades__card--botao" data-botao="contato">Entrar em contato</button>
</div>
<div class="habilidades__card habilidades__card--principal vidro" data-anima="bottom">
<h3 class="habilidades__card--titulo">Desenvolvimento Web: Front-end</h3>
<p class="habilidades__card--descricao">Codificação do seu website, utilizando HTML5, CSS3 e React, além das melhores práticas de SEO e acessibilidade, colocando o projeto final no ar.</p>
<button class="botao botao-secundario habilidades__card--botao" data-botao="contato">Entrar em contato</button>
</div>
<div class="habilidades__card vidro" data-anima="bottom">
<h3 class="habilidades__card--titulo">Criação de identidades visuais e artes</h3>
<p class="habilidades__card--descricao">Design de logos, banners, panfletos, cartões de visita, artes para produtos personalizados, edições de imagem, dentre outros.</p>
<button class="botao botao-secundario habilidades__card--botao" data-botao="contato">Entrar em contato</button>
</div>
</div>
</section>
<section class="projetos" id="projetos">
<div>
<h2 class="titulo-secao" data-anima="typing">Projetos</h2>
<p class="projetos__texto" data-anima="bottom">Logo abaixo, apresento alguns dos últimos projetos, individuais e em equipes, que participei como <strong class="texto-gradient">designer e desenvolvedor front-end</strong>. Você pode encontrar estes e outros trabalhos nos <a href="https://github.com/gc-barros?tab=repositories" target="_blank" rel="noreferrer" class="github-link">meus repositórios do GitHub</a>!</p>
</div>
<div class="projetos__projeto vidro" data-anima="bottom">
<div class="projetos__descricao">
<h3 class="subtitulo-secao" data-projeto="titulo">Título do projeto</h3>
<a href="" target="_blank" class="texto-gradient projetos__link" data-projeto="link" rel="noreferrer">https://linkdoprojeto.vercel.app/</a>
<p class="projetos__projeto--detalhes" data-projeto="detalhes">
A Blue Wand é um grupo 100% maranhense de apoio a homens acometidos por câncer de pênis. Nosso objetivo é combater a desinformação, incentivar a prevenção e o tratamento para esta doença.
</p>
<h4 class="subtitulo-secao subtitulo-techs">Tecnologias:</h4>
<ul class="projetos__techs" data-projeto="techs">
<li class="projetos__techs--item" title="HTML5"></li>
<li class="projetos__techs--item" title="CSS3"></li>
<li class="projetos__techs--item" title="JavaScript"></li>
<li class="projetos__techs--item" title="Sass"></li>
<li class="projetos__techs--item" title="TypeScript"></li>
<li class="projetos__techs--item" title="Next"></li>
<li class="projetos__techs--item" title="React"></li>
<li class="projetos__techs--item" title="Figma"></li>
<li class="projetos__techs--item" title="Trello"></li>
<li class="projetos__techs--item" title="GitHub"></li>
</ul>
<div class="caixa-botao">
<button class="botao botao-primario" data-botao="visitar" onclick="">Visitar o site</button>
<button class="botao botao-secundario" data-botao="repositorio" onclick=""><span class="texto-gradient">Ir ao repositório</span></button>
</div>
</div>
<div class="projetos__carrossel">
<button class="projetos__carrossel--botao projetos__carrossel--botao-left" aria-label="Botão ir para o anterior" title="Ir para o projeto anterior" data-botao-anterior><i class="ri-arrow-left-line"></i></button>
<div class="projetos__carrossel--imagem">
<ul class="projetos__carrossel--lista" data-carrossel>
<li class="projetos__carrossel--imagem-item"><img alt="Aluracord - Bulbasaur" src="assets/img/thumbs/aluracord.jpg" class="projetos__carrossel--imagem-gif"></li>
<li class="projetos__carrossel--imagem-item"><img alt="Projeto Encurtalinks" src="assets/img/thumbs/encurtalinks.jpg" class="projetos__carrossel--imagem-gif"></li>
<li class="projetos__carrossel--imagem-item"><img alt="Projeto Cineperfil" src="assets/img/thumbs/cineperfil.jpg" class="projetos__carrossel--imagem-gif"></li>
<li class="projetos__carrossel--imagem-item"><img alt="Projeto Ballerini Devs" src="assets/img/thumbs/ballerinidevs.jpg" class="projetos__carrossel--imagem-gif"></li>
<li class="projetos__carrossel--imagem-item"><img alt="Página inicial do projeto +inova." src="assets/img/thumbs/maisinova.jpg" class="projetos__carrossel--imagem-gif"></li>
<li class="projetos__carrossel--imagem-item"><img alt="Landing page do Projeto Blue Wand" src="assets/img/thumbs/bluewand.jpg" class="projetos__carrossel--imagem-gif"></li>
<li class="projetos__carrossel--imagem-item"><img alt="Landing page do Projeto Por Elas" src="assets/img/thumbs/porelas.jpg" class="projetos__carrossel--imagem-gif"></li>
<li class="projetos__carrossel--imagem-item"><img alt="Página inicial do website 'Éguas, Siow!'" src="assets/img/thumbs/eguassiow.jpg" class="projetos__carrossel--imagem-gif"></li>
<li class="projetos__carrossel--imagem-item"><img alt="PetPlanet páginas principais" src="assets/img/thumbs/petplanet.jpg" class="projetos__carrossel--imagem-gif"></li>
<!-- <li class="projetos__carrossel--imagem-item"><img alt="PetPlanet página do usuário" src="assets/img/thumbs/petplanetuser.jpg" class="projetos__carrossel--imagem-gif"></li> -->
</ul>
</div>
<button class="projetos__carrossel--botao projetos__carrossel--botao-right" aria-label="Botão ir para o próximo" title="Ir para o próximo projeto" data-botao-proximo><i class="ri-arrow-right-line"></i></button>
<div class="projetos__carrossel--indicadores" data-navegacao>
<button class="projetos__carrossel--indicador carousel__indicador--ativo" aria-label="Botão indicador" data-indicador="0"></button>
<button class="projetos__carrossel--indicador" aria-label="Botão indicador" data-indicador="1"></button>
<button class="projetos__carrossel--indicador" aria-label="Botão indicador" data-indicador="2"></button>
<button class="projetos__carrossel--indicador" aria-label="Botão indicador" data-indicador="3"></button>
<button class="projetos__carrossel--indicador" aria-label="Botão indicador" data-indicador="4"></button>
<button class="projetos__carrossel--indicador" aria-label="Botão indicador" data-indicador="5"></button>
<button class="projetos__carrossel--indicador" aria-label="Botão indicador" data-indicador="6"></button>
<button class="projetos__carrossel--indicador" aria-label="Botão indicador" data-indicador="7"></button>
<button class="projetos__carrossel--indicador" aria-label="Botão indicador" data-indicador="8"></button>
</div>
</div>
</div>
</section>
<aside class="citacao">
<img src="assets/img/barrosdevlogo-white.svg" alt="Logo BarrosDEV" class="citacao__logo" data-anima="left">
<q class="citacao__frase" data-anima="right">Nós só podemos ver um pouco do futuro, mas o suficiente para perceber que há muito a fazer. <br><strong>- Alan Turing</strong></q>
</aside>
<section class="contato" id="contato">
<div class="contato__container vidro">
<form action="https://formsubmit.co/33c2e220200913dc0ef7ee8106b6773e" method="POST" class="contato__formulario" data-anima="left">
<h2 class="titulo-secao">Contato</h2>
<input type="hidden" name="_autoresponse" value="BarrosDEV | Olá, fiquei muito feliz ao receber a sua mensagem! Obrigado por reconhecer o meu trabalho, em breve estarei entrando em contato com você, abraços. ;)">
<div class="input-wrp">
<input type="text" name="name" id="name" class="contato__formulario--campo" data-campo="nome" required>
<label for="name" class="contato__formulario--label" data-label="nome">Nome</label>
</div>
<div class="input-wrp">
<input type="text" id="email" name="email" class="contato__formulario--campo" data-campo="email" required>
<label for="email" class="contato__formulario--label" data-label="email">E-mail</label>
</div>
<div class="input-wrp">
<input type="text" name="_subject" id="assunto" class="contato__formulario--campo" data-campo="assunto" required>
<label for="assunto" class="contato__formulario--label" data-label="assunto">Assunto</label>
</div>
<div class="input-wrp textarea">
<textarea id="message" name="message" class="contato__formulario--campo" data-campo="mensagem" required maxlength="280"></textarea>
<label for="message" class="contato__formulario--label" data-label="mensagem">Mensagem</label>
</div>
<button type="submit" class="botao botao-primario">Enviar</button>
</form>
<div class="contato__texto" data-anima="right">
<h3 class="subtitulo-secao">Vamos bater um papo?</h3>
<p class="contato__corpo">Estou sempre aberto ao diálogo, troca de ideias e novas conexões! Posso te ajudar de alguma forma? Sinta-se à vontade para entrar em contato comigo por meio do formulário ou através das minhas redes sociais:</p>
<ul class="contato__redes">
<li class="contato__rede">
<a href="https://www.linkedin.com/in/gabrielcbarros/" title="Linkedin" target="_blank" rel="noreferrer"><i class="ri-linkedin-box-fill"></i></a>
</li>
<!-- <li class="contato__rede">
<a href="https://www.instagram.com/gabri.elbarros/" title="Instagram" target="_blank" rel="noreferrer"><i class="ri-instagram-line"></i></a>
</li> -->
<li class="contato__rede">
<a href="https://github.com/gc-barros" title="GitHub" target="_blank" rel="noreferrer"><i class="ri-github-fill"></i></a>
</li>
<li class="contato__rede">
<a href="mailto:gc.barros81@gmail.com?subject=BarrosDEV, precisamos conversar!" title="E-mail" target="_blank" rel="noreferrer"><i class="ri-mail-line"></i></a>
</li>
</ul>
<img class="contato__avatar" src="assets/img/avatares/bebida.png" alt="BarrosDEV pronto para uma conversa">
</div>
</div>
</section>
</main>
<footer class="rodape">© <span data-anoAtual>2021</span> Barrosdev. All rights reserved. Powered by: Gabriel C. Barros.</footer>
</div>
<script type="module" src="assets/js/main.js"></script>
</body>
</html>