-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
321 lines (291 loc) · 13.8 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
<!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>Elaini Carlete Thomazelli - Desenvolvedora Frontend</title>
<link rel="stylesheet" href="src/css/font-awesome.css" />
<link rel="stylesheet" href="src/css/reset.css" />
<link rel="stylesheet" href="src/css/globais.css" />
<link rel="stylesheet" href="src/css/variaveis.css">
<link rel="stylesheet" href="src/css/secoes/header.css">
<link rel="stylesheet" href="src/css/secoes/home.css">
<link rel="stylesheet" href="src/css/secoes/sobre.css">
<link rel="stylesheet" href="src/css/secoes/experiencias.css">
<link rel="stylesheet" href="src/css/secoes/habilidades.css">
<link rel="stylesheet" href="src/css/secoes/projetos.css">
<link rel="stylesheet" href="src/css/secoes/footer.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">
<link rel="stylesheet" type='text/css' href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />
</head>
<body>
<header class="header">
<div class="container">
<div class="row justify-content-between alinhar-itens-no-centro">
<a href="#">
<h1 class="logo">ECT</h1>
</a>
<nav>
<input type="checkbox" id="menu-hamburguer">
<label for="menu-hamburguer">
<div class="menu">
<span class="hamburguer"></span>
</div>
</label>
<ul>
<li><a href="#sobre">Sobre</a></li>
<li><a href="#habilidades">Habilidades</a></li>
<li><a href="#projetos">Meus projetos</a></li>
<li><a href="#contatos">Contatos</a></li>
</ul>
</nav>
</div>
</div>
</header>
<section class="home">
<div class="container">
<div class="row full-screen alinhar-itens-no-centro">
<div class="texto-home">
<p>Olá 🌸,</p>
<h1>Sou <span class="sublinhado">Elaini Carlete Thomazelli</span></h1>
<h2>Desenvolvedora FrontEnd</h2>
<div class="redes-sociais">
<a href="https://www.linkedin.com/in/elaini-carlete-thomazelli/" target="_blank" class="outer-shadow">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="https://wa.me/qr/H6QSKNMQNLDYI1" target="_blank" class="outer-shadow">
<i class="fab fa-whatsapp"></i>
</a>
<a href="https://github.com/elaini-carlete" target="_blank" class="outer-shadow">
<i class="fab fa-github"></i>
</a>
</div>
</div>
<div class="img-home">
<div class="img-box inner-shadow">
<img src="src/imagens/foto-perfil.png" alt="foto do perfil" class="outer-shadow">
</div>
</div>
</div>
</div>
</section>
<section class="sobre-mim section" id="sobre">
<div class="container">
<div class="row">
<div class="section-title">
<h2 class="sublinhado">Sobre mim</h2>
</div>
</div>
<div class="row">
<div class="imagem-sobre-mim">
<div class="img-box inner-shadow">
<img src="src/imagens/foto-perfil.png" alt="foto do perfil" class="outer-shadow">
</div>
</div>
<div class="informacoes-sobre-mim">
<p>
<strong>Olá! Me chamo Elaini Carlete Thomazelli e sou estudante de ADS (Análise e Desenvolvimento de Sistemas), mergulhando no mundo da tecnologia enquanto aprimoro meus conhecimentos através de um curso complementar de Frontend!</strong> Gosto muito dos códigos e tenho certeza que posso contribuir com qualquer time com as minhas habilidades e conhecimentos.
</p>
<p>
Estou sempre me desafiando com novos projetos, ouvindo podcasts para melhorar meu conhecimento sobre a área de tecnologia e participando de comunidades de programação para buscar feedback de outros desenvolvedores e desenvolvedoras. Além de tentar ajudar essas pessoas com o que eu já aprendi. 😄
</p>
<p>
Sou apaixonada por jogos, filmes, séries, animes e mangás. Além disso, gosto de desenhar e também me aventurar no mundo da moda através de desfiles e sessões fotográficas. 💗
</p>
<a href="src/curriculo/Elaini-Carlete-Thomazelli-DevWebFrontEnd.pdf" target="_blank" class="outer-shadow btn-cv">Currículo</a>
</div>
</div>
</div>
</section>
<section class="experiencia section" id="experiencia">
<div class="container">
<div class="row">
<div class="section-title">
<h2 class="sublinhado">Experiência</h2>
</div>
</div>
</div>
<div class="container-experiencia row">
<div class="experiencia-item">
<h3>Nord Dev</h3>
<span class="sublinhado">Setembro/2024 - Atuando</span>
</section>
<section class="habilidades section" id="habilidades">
<div class="container">
<div class="row">
<div class="section-title">
<h2 class="sublinhado">Habilidades</h2>
</div>
</div>
</div>
<div class="container-habilidades row">
<div class="habilidade html">
<div class="logo">
<i class="devicon devicon-html5-plain-wordmark"></i>
</div>
<h3>HTML5</h3>
<ul>
<li>Manipulação de links e imagens;</li>
<li>Criação de estruturas como listas e tabelas;</li>
<li>Desenvolvimento de formulários com input, select, textarea e button;</li>
<li>Tags semânticas e uso de divs;</li>
<li>Incorporação de ícones, emojis, áudios e vídeos.</li>
</ul>
</div>
<div class="habilidade css">
<div class="logo">
<i class="devicon devicon-css3-plain-wordmark"></i>
</div>
<h3>CSS3</h3>
<ul>
<li>Espaçamento e posicionamento dos elementos;</li>
<li>Seleção de fontes, animações e unidades de medida;</li>
<li>Utilização da responsividade e manipulação de variáveis;</li>
<li>Aplicação de cores, textos, listas, links e backgrounds;</li>
<li>Uso de pseudo-classes, pseudo-elementos;</li>
<li>Técnicas de centralização utilizando o flexbox e grid.</li>
</ul>
</div>
<div class="habilidade git">
<div class="logo">
<i class="devicon devicon-git-plain"></i>
</div>
<h3>Git</h3>
<ul>
<li>Hospedar meus projetos no GitHub através do terminal do Git e através do terminal integrado ao VS Code;</li>
<li>Clonar repositórios de outros desenvolvedores pelo terminal.</li>
</ul>
</div>
<div class="habilidade github">
<div class="logo">
<i class="devicon devicon-github-original"></i>
</div>
<h3>GitHub</h3>
<ul>
<li>Domino a hospedagem de repositórios no GitHub Pages;</li>
<li>Compartilhar meu trabalho e acompanhar projetos de diversos desenvolvedores;</li>
<li>E mantenho-o consistentemente atualizado quando desenvolvo novos projetos.</li>
</ul>
</div>
<div class="habilidade javascript">
<div class="logo">
<i class="devicon devicon-javascript-plain"></i>
</div>
<h3>JavaScript</h3>
<ul>
<li>Uso do console;</li>
<li>Manipulação de arrays e objetos;</li>
<li>Aplicação de estruturas de repetição e condicionais;</li>
<li>Funções como hoisting, anônimas, arrow functions e higher order functions;</li>
<li>Manipulação de DOM, promises, async e await;</li>
<li>Integrações com APIs, uso do fetch para requisições HTTP e manipulação de JSON;</li>
<li>Gerenciamento de pacotes npm e importação/exportação de módulos;</li>
<li>Conceitos como filter, map, reduce, operadores spread e rest, setInterval e setTimeout.</li>
</ul>
</div>
<div class="habilidade react">
<div class="logo">
<i class="devicon-react-original"></i>
</div>
<h3>React</h3>
<ul>
<li>Criação de projetos utilizando a biblioteca React com Vite;</li>
<li>Utilização de classes e funções;</li>
<li>Conceitos como props, default, chave key, eventos, estados, componentes stateless e statefull;</li>
<li>Ciclo de vida dos componentes;</li>
<li>Utilização de hooks de estado, efeito, customizados e hook form para criação de formulários;</li>
<li>Implementação de rotas, estilização com styled components e React Query para gerenciamento de dados;</li>
<li>Consumir APIs utilizando o Axios.</li>
</ul>
</div>
<div class="habilidade typescript">
<div class="logo">
<i class="devicon-typescript-plain"></i>
</div>
<h3>TypeScript</h3>
<ul>
<li>Tipos: string, boolean, number, estático, tuples, enums, any, union, aliases, assertions, interfaces e gener;</li>
<li>Tipagem explícita e inferência de tipos;</li>
<li>Tipagem de funções e objetos;</li>
<li>Configuração em projetos;</li>
<li>E encurtando as importações com Alises.</li>
</ul>
</div>
<div class="habilidade tailwind">
<div class="logo">
<i class="devicon-tailwindcss-original"></i>
</div>
<h3>Tailwind CSS</h3>
<ul>
<li>Fornece classes de utilidade individuais para estilos específicos, como margens, preenchimentos, cores e tamanhos de texto, em vez de componentes pré-estilizados;</li>
<li>Flexibilidade maior no design;</li>
<li>Estilos altamente personalizáveis.</li>
</ul>
</div>
</section>
<section class="projetos" id="projetos">
<div class="container">
<div class="row">
<div class="section-title">
<h2 class="sublinhado">Meus projetos</h2>
</div>
</div>
</div>
<div class="container-projetos container">
<div class="projeto">
<h3>Projeto Gerador de Conselhos</h3>
<img src="./src/imagens/advice-generator-desktop.png" alt="Gerador de Conselhos Desktop">
<p>Desenvolvi este projeto que gera conselhos em inglês com um simples clique, utilizando HTML, CSS, JavaScript e API para tornar a experiência do usuário mais interativa.</p>
<div class="links">
<a href="https://elaini-carlete.github.io/advice-generator/" target="_blank">🔗 Acessar o GitHub Pages</a>
<a href="https://github.com/elaini-carlete/advice-generator.git" target="_blank">🔗 Acessar o Repositório</a>
</div>
</div>
<div class="projeto">
<h3>Projeto API do GitHub</h3>
<img src="./src/imagens/github-api-desktop.png" alt="GitHub API Desktop">
<p>Meu projeto tem como foco pesquisar usuários do GitHub, exibindo detalhes como foto, nome, descrição e repositórios. Utilizei HTML, CSS, JavaScript e API para criar uma interface funcional.</p>
<div class="links">
<a href="https://elaini-carlete.github.io/projeto-fetch-github-api/" target="_blank">🔗 Acessar o GitHub Pages</a>
<a href="https://github.com/elaini-carlete/projeto-fetch-github-api.git" target="_blank">🔗 Acessar o Repositório</a>
</div>
</div>
<div class="projeto">
<h3>Projeto API de Previsão do Tempo</h3>
<img src="./src/imagens/app-previsao-do-tempo-desktop.png" alt="Previsão do Tempo Desktop">
<p>Criei uma aplicação que mostra a temperatura atual da cidade, juntamente com o ícone e a descrição do clima, a umidade em porcentagem e a velocidade do vento em quilômetros por hora. Utilizei HTML, CSS, JavaScript e API para fornecer informações precisas sobre o clima</p>
<div class="links">
<a href="https://elaini-carlete.github.io/app-previsao-do-tempo/" target="_blank">🔗 Acessar o GitHub Pages</a>
<a href="https://github.com/elaini-carlete/app-previsao-do-tempo.git" target="_blank">🔗 Acessar o Repositório</a>
</div>
</div>
<div class="projeto">
<h3>Projeto Pedido de Namoro</h3>
<img src="./src/imagens/dating-request-desktop.png" alt="Pedido de Namoro Desktop">
<p>Em um projeto divertido, desenvolvi uma experiência interativa de pedido de namoro onde o botão "no" se afasta ao ser clicado, tornando difícil recusar. Além disso, adicionei um botão para alternar entre os temas claro e escuro. E utilizei HTML, CSS, JavaScript, Vite e React para criar uma experiência dinâmica.</p>
<div class="links">
<a href="https://dating-request-6b26jkbwn-elaini-carletes-projects.vercel.app/" target="_blank">🔗 Acessar o GitHub Pages</a>
<a href="https://github.com/elaini-carlete/dating-request.git" target="_blank">🔗 Acessar o Repositório</a>
</div>
</div>
</div>
</section>
<footer class="footer" id="contatos">
<div class="container">
<h2>Me envie uma mensagem</h2>
<div class="redes-sociais">
<a href="https://www.linkedin.com/in/elaini-carlete-thomazelli/" target="_blank" class="outer-shadow">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="https://wa.me/qr/H6QSKNMQNLDYI1" target="_blank" class="outer-shadow">
<i class="fab fa-whatsapp"></i>
</a>
<a href="https://github.com/elaini-carlete" target="_blank" class="outer-shadow">
<i class="fab fa-github"></i>
</a>
</div>
</div>
</footer>
</body>
</html>