-
Notifications
You must be signed in to change notification settings - Fork 1
/
Index.html
378 lines (350 loc) · 23.6 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Luiz Eduardo - Front-End Developer</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Desenvolvedor Front-End e acadêmico em Ciência da Computação." />
<meta name="author" content="Luiz Eduardo" />
<meta name="robots" content="index" />
<meta name="googlebot" content="index" />
<meta name="url" content="https://luizeduardodev.netlify.app/" />
<script src="https://kit.fontawesome.com/b47724bbe9.js" crossorigin="anonymous"></script>
<!-- Styles Css -->
<link rel="stylesheet" href="./assets/css/style.min.css" />
<link rel="icon" href="./assets/img/favIcon.png" />
<!-- Glide.js -->
<link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.core.min.css" />
<link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.theme.min.css"/>
<script src="node_modules/@glidejs/glide/dist/glide.min.js"></script>
<!-- Biblioteca Animação Seções -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
</head>
<body>
<header id="navbar">
<div class="wrapper">
<a href="#main" id="logo">Portfólio</a>
<nav id="navbar-list">
<button class="hamburger">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</button>
<ul id="menu">
<li><a href="#about-section" class="nav__link animation-um">Quem sou eu</a></li>
<li><a href="#jobs-section" class="nav__link animation-dois">Projetos</a></li>
<li><a href="#skills-section" class="nav__link animation-tres">Conhecimentos</a></li>
<li><a href="#contact-section" class="nav__link animation-quatro">Contato</a></li>
</ul>
</nav>
</div>
</header>
<main id="main">
<section id="home-section">
<div class="wrapper">
<div class="information">
<header>
<div class="typewriter">
<h1 id="text">Olá, eu sou Luiz Eduardo.</h1>
</div>
<span>Front-end developer and academic in Computer Science</span>
<a href="./curriculo.pdf" rel="noopener" download="Currículo - Luiz Eduardo" class="download"><i class="fa-solid fa-download"></i><p>Download CV</p></a>
</header>
</div>
<div class="social-media">
<a href="https://www.instagram.com/luizz_edduardoo_/" class="animation-one"><i class="fa-brands fa-instagram"></i></a>
<a href="https://www.linkedin.com/in/luiz-eeduardoo/" class="animation-tho"><i class="fa-brands fa-linkedin-in"></i></a>
<a href="https://github.com/luizeduardodev" class="animation-tree"><i class="fab fa-github"></i></a>
</div>
</div>
</section>
<!--Fim da home section-->
<section id="about-section">
<div class="wrapper">
<header>
<h2 data-aos="fade-down-right" data-aos-duration="1000">Quem sou eu</h2>
</header>
<div class="about-content">
<div class="about-img" data-aos="fade-up" data-aos-duration="1000">
<img src="./assets/img/perfil.jpg" alt="Imagem do desenvolvedor" title="Imagem do desenvolvedor" />
</div>
<div class="about-texts">
<div class="about-p" data-aos="fade-right" data-aos-duration="1000">
<p>Olá, me chamo Luiz Eduardo, tenho 22 anos e moro em Petrolina-PE.</p>
<p>Sou desenvolvedor Front-end e utilizo ReactJS e Scss para desenvolver as minhas aplicações. Por fim, sou acadêmico em Ciência da Computação pela FACAPE.</p>
</div>
</div>
</div>
</div>
</section>
<!--Fim da about section-->
<section id="jobs-section">
<div class="wrapper">
<header>
<h2 data-aos="fade-up-right" data-aos-duration="1000">Projetos</h2>
</header>
<div class="jobs-content-slides">
<div class="glide" data-aos="fade-down" data-aos-duration="1000">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide">
<h3>Adicione os seus filmes favoritos</h3>
<img src="./assets/img/images-projects/image-eduflix.png" alt="Imagem do projeto - Página com links" title="Imagem do projeto - Página com links" />
<span class="description">Site que armazena poster de filmes no LocalStorage</span>
<div class="container-tecnologies">
<span>Tecnologias:</span>
<span><i class="fa-brands fa-html5"></i></span>
<span><i class="fa-brands fa-css3-alt"></i></span>
<span><i class="fa-brands fa-sass"></i></span>
<span><i class="fa-brands fa-js"></i></span>
</div>
<a href="https://eduflix.netlify.app/" target="_blank"><i class="fas fa-link"></i>Visite o site</a>
</li>
<li class="glide__slide">
<h3>API de CEP com Javascript puro</h3>
<img src="./assets/img/images-projects/image-cep.png" alt="Imagem do projeto - API de CEP" title="API de CEP" />
<span class="description">Consumindo API de CEP com Javascript.</span>
<div class="container-tecnologies">
<span>Tecnologias:</span>
<span><i class="fa-brands fa-html5"></i></span>
<span><i class="fa-brands fa-css3-alt"></i></span>
<span><i class="fa-brands fa-sass"></i></span>
<span><i class="fa-brands fa-js"></i></span>
</div>
<a href="https://api-cep-javascript-puro.netlify.app/" target="_blank"><i class="fas fa-link"></i>Visite o site</a>
</li>
<li class="glide__slide">
<h3>Advinhe qual é o animal</h3>
<img src="./assets/img/images-projects/image-animal.png" alt="Imagem do projeto - animal" title="Imagem do projeto - animal"/>
<span class="description">Escreva o nome do animal e veja se acertou ou não</span>
<div class="container-tecnologies">
<span>Tecnologias:</span>
<span><i class="fa-brands fa-html5"></i></span>
<span><i class="fa-brands fa-css3-alt"></i></span>
<span><i class="fa-brands fa-js"></i></span>
</div>
<a href="https://descubraoanimal.netlify.app/" target="_blank"><i class="fas fa-link"></i>Visite o site</a>
</li>
<li class="glide__slide">
<h3>Página com links para bio</h3>
<img src="./assets/img/images-projects/image-links.png" alt="Imagem do projeto - Página com links" title="Imagem do projeto - Página com links" />
<span class="description">Página com links para biografia do instagram</span>
<div class="container-tecnologies">
<span>Tecnologias:</span>
<span><i class="fa-brands fa-html5"></i></span>
<span><i class="fa-brands fa-css3-alt"></i></span>
<span><i class="fa-brands fa-js"></i></span>
</div>
<a href="https://linkss.netlify.app/" target="_blank"><i class="fas fa-link"></i>Visite o site</a>
</li>
<li class="glide__slide">
<h3>Meu Portfólio</h3>
<img src="./assets/img/images-projects/image-portfolio.png" alt="Imagem do projeto - Portfolio" title="Imagem do projeto - Portfolio"/>
<span class="description">Meu portfólio Pessoal</span>
<div class="container-tecnologies">
<span>Tecnologias:</span>
<span><i class="fa-brands fa-html5"></i></span>
<span><i class="fa-brands fa-css3-alt"></i></span>
<span><i class="fa-brands fa-sass"></i></span>
<span><i class="fa-brands fa-js"></i></span>
</div>
<a href="https://luizeduardodev.netlify.app/" target="_blank"><i class="fas fa-link"></i>Visite o site</a>
</li>
<li class="glide__slide">
<h3>Calcule o seu IMC</h3>
<img src="./assets/img/images-projects/image-imc.png" alt="Imagem do projeto - Imc" title="Imagem do projeto - Imc" />
<span class="description">Descubra qual é o seu IMC</span>
<div class="container-tecnologies">
<span>Tecnologias:</span>
<span><i class="fa-brands fa-html5"></i></span>
<span><i class="fa-brands fa-css3-alt"></i></span>
<span><i class="fa-brands fa-js"></i></span>
</div>
<a href="https://calculadoradeimc.netlify.app/" target="_blank"><i class="fas fa-link"></i>Visite o site</a>
</li>
<li class="glide__slide">
<h3>Tela de Login e Register</h3>
<img src="./assets/img/images-projects/image-tela-login.png" alt="Imagem do projeto - Tela login" title="Imagem do projeto - Tela login"/>
<span class="description">Painel de Login e Register para aplicações web</span>
<div class="container-tecnologies">
<span>Tecnologias:</span>
<span><i class="fa-brands fa-html5"></i></span>
<span><i class="fa-brands fa-css3-alt"></i></span>
<span><i class="fa-brands fa-js"></i></span>
</div>
<a href="https://painel-login.netlify.app/" target="_blank"><i class="fas fa-link"></i>Visite o site</a>
</li>
<li class="glide__slide">
<h3>Doctor Care</h3>
<img src="./assets/img/images-projects/image-doctor-care.png" alt="Imagem do projeto - Doctor Care" title="Imagem do projeto - Doctor Care"/>
<span class="description">Website desenvolvido no NLW Return da Rocketseat</span>
<div class="container-tecnologies">
<span>Tecnologias:</span>
<span><i class="fa-brands fa-html5"></i></span>
<span><i class="fa-brands fa-css3-alt"></i></span>
<span><i class="fa-brands fa-js"></i></span>
</div>
<a href="https://doctor-caree.netlify.app/" target="_blank"><i class="fas fa-link"></i>Visite o site</a>
</li>
<li class="glide__slide">
<h3>Contador de Palavras</h3>
<img src="./assets/img/images-projects/image-contador-palavras.png" alt="Imagem do projeto - Contador de Palavras" title="Imagem do projeto - Contador de Palavras"/>
<span class="description">Contador de palavras</span>
<div class="container-tecnologies">
<span>Tecnologias:</span>
<span><i class="fa-brands fa-html5"></i></span>
<span><i class="fa-brands fa-css3-alt"></i></span>
<span><i class="fa-brands fa-sass"></i></span>
<span><i class="fa-brands fa-js"></i></span>
</div>
<a href="https://contador-palavras.netlify.app/" target="_blank"><i class="fas fa-link"></i>Visite o site</a>
</li>
</ul>
</div>
<div class="glide__arrows" data-glide-el="controls">
<button class="glide__arrow glide__arrow--left" data-glide-dir="<"><</button>
<button class="glide__arrow glide__arrow--right" data-glide-dir=">">></button>
</div>
</div>
</div>
<a href="https://github.com/luizeduardodev?tab=repositories" class="link-github" data-aos="fade-up" data-aos-duration="1000">Veja todos os meus projetos</a>
</div>
</section>
<!-- Fim da Jobs section -->
<section id="skills-section">
<div class="wrapper">
<header>
<h2 data-aos="fade-up" data-aos-duration="1000">Conhecimentos</h2>
</header>
<div class="skills-content" data-aos="fade-down-right" data-aos-duration="1000">
<span class="information-one" data-aos="fade-up" data-aos-duration="1000">*Clique sobre o card para ler*</span>
<div class="card">
<div class="flipper">
<div class="front">
<i class="fab fa-html5"></i>
<span>HTML</span>
</div>
<div class="back">
<span class="span2">HTML é uma linguagem de marcação utilizada na construção de páginas na Web.</span>
</div>
</div>
</div>
<div class="card">
<div class="flipper">
<div class="front">
<i class="fab fa-css3-alt"></i>
<span>CSS</span>
</div>
<div class="back">
<span class="span2">CSS é uma linguagem de folha de estilo composta por camadas, criado com o propósito de estilizar as páginas HTML.</span>
</div>
</div>
</div>
<div class="card">
<div class="flipper">
<div class="front">
<i class="fa-brands fa-sass"></i>
<span>Sass</span>
</div>
<div class="back">
<span class="span2">Sass (pré-processador css) é uma linguagem de folhas de estilo. É uma simples linguagem de script usada em arquivos Sass.</span>
</div>
</div>
</div>
<div class="card">
<div class="flipper">
<div class="front">
<i class="fab fa-js-square"></i>
<span>JavaScript</span>
</div>
<div class="back">
<span class="span2">JavaScript é uma linguagem de programação interpretada estruturada, de script em alto nível com tipagem dinâmica fraca.</span>
</div>
</div>
</div>
<div class="card">
<div class="flipper">
<div class="front">
<i class="fa-brands fa-react"></i>
<span>React</span>
</div>
<div class="back">
<span class="span2">O React é uma biblioteca front-end JavaScript de código aberto com foco em criar interfaces de usuário em páginas web</span>
</div>
</div>
</div>
<div class="card">
<div class="flipper">
<div class="front">
<i class="fab fa-git-alt"></i>
<span>Git</span>
</div>
<div class="back">
<span class="span2">Git é um sistema de controle de versões distribuído, usado principalmente no desenvolvimento de software.</span>
</div>
</div>
</div>
</div>
<span class="information" data-aos="fade-up" data-aos-duration="1000">*Passe o cursor do mouse sobre o card para ler*</span>
</div>
</section>
<!--Fim da skills section -->
<section id="contact-section">
<div class="wrapper">
<header>
<h2 data-aos="fade-up" data-aos-duration="1000">Contato</h2>
</header>
<div class="form-content" data-aos="fade-down" data-aos-duration="1000">
<ul class="form-content-info">
<li class="form-content-info-2" data-aos="fade-right" data-aos-duration="1000">
<i class="fa-solid fa-envelope"></i>
<span>luizeduardorodrigues807@gmail.com</span>
</li>
<li class="form-content-info-2" data-aos="fade-right" data-aos-duration="1000">
<i class="fa-solid fa-location-dot"></i>
<span>Petrolina, Brasil</span>
</li>
</ul>
<form method="POST" action="https://formsubmit.co/luizeduardorodrigues807@gmail.com">
<div class="grid1 input">
<label for="nome">Seu nome</label>
<input type="text" name="name" id="nome" placeholder="Insira o seu nome completo" required />
</div>
<div class="grid2 input">
<label for="email">Seu Email</label>
<input type="email" name="email" title="Formato: xxxxxx@gmail.com" id="email" placeholder="Insira o seu email" required />
</div>
<div class="grid3 input input-assunto">
<label for="assunto">Seu assunto</label>
<input type="text" name="assunto" id="assunto" placeholder="Descreva o assunto" required />
</div>
<div class="grid4 input">
<label for="mensagem">Mensagem</label>
<textarea name="textarea" id="mensagem" placeholder="Escreva a sua mensagem" required></textarea>
</div>
<input class="btn-enviar" type="submit" name="btn-cadastrar" value="Enviar" />
<input type="hidden" name="_autoresponse" value="Obrigado por entrar em contato! Responderei o mais rápido possível :)" />
<input type="hidden" name="_template" value="table" />
<input type="hidden" name="_subject" value="Email do meu Portfólio" />
</form>
</div>
</div>
</section>
<!--Fim da contact section -->
</main>
<footer id="footer-section">
<p>Feito com ♥ por <a href="https://www.instagram.com/luizz_edduardoo_/" target="_blank">Luiz Eduardo</a><br> © 2022 All rights reserved</p>
</footer>
<!--Fim da footer section -->
<script src="./assets/js/scrollSuave.js"></script>
<script src="./assets/js/carouselGlide.js"></script>
<script src="./assets/js/typeWriter.js"></script>
<script src="./assets/js/menuMobile.js"></script>
<script src="./assets/js/effectNavbar.js"></script>
<!-- Biblioteca AOS -->
<script>
AOS.init();
</script>
</body>
</html>