-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
264 lines (244 loc) · 13.7 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
<!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>Portifólio | Jeferson Alves</title>
<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=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./assets/css/normalize.css">
<link rel="stylesheet" href="./assets/css/reset.css">
<link rel="stylesheet" href="./assets/css/base.css">
<link rel="stylesheet" href="./assets/css/cabecalho.css">
<link rel="stylesheet" href="./assets/css/logo.css">
<link rel="stylesheet" href="./assets/css/navegacao/cabecalho__navegacao.css">
<link rel="stylesheet" href="./assets/css/navegacao/navegacao__link.css">
<link rel="stylesheet" href="./assets/css/navegacao/email.css">
<link rel="stylesheet" href="./assets/css/apresentacao.css">
<link rel="stylesheet" href="./assets/css/apresentacao/apresentacao__conteudo.css">
<link rel="stylesheet" href="./assets/css/apresentacao/foto-perfil.css">
<link rel="stylesheet" href="./assets/css/apresentacao/apresentacao__titulo.css">
<link rel="stylesheet" href="./assets/css/apresentacao/apresentacao__subTitulo.css">
<link rel="stylesheet" href="./assets/css/apresentacao/apresentacao__link.css">
<link rel="stylesheet" href="./assets/css/apresentacao/apresentacao__lista.css">
<link rel="stylesheet" href="./assets/css/sobre.css">
<link rel="stylesheet" href="./assets/css/sobre/sobre__conteudo.css">
<link rel="stylesheet" href="./assets/css/sobre/sobre__titulo.css">
<link rel="stylesheet" href="./assets/css/sobre/sobre__texto.css">
<link rel="stylesheet" href="./assets/css/skills-hobbies-graduacao.css">
<link rel="stylesheet" href="./assets/css/skills/skills.css">
<link rel="stylesheet" href="./assets/css/skills/skills__titulo.css">
<link rel="stylesheet" href="./assets/css/skills/skills__lista.css">
<link rel="stylesheet" href="./assets/css/skills/skills__item.css">
<link rel="stylesheet" href="./assets/css/skills/skills__link.css">
<link rel="stylesheet" href="./assets/css/hobbies/hobbies.css">
<link rel="stylesheet" href="./assets/css/hobbies/hobbies__lista.css">
<link rel="stylesheet" href="./assets/css/hobbies/hobbies__item.css">
<link rel="stylesheet" href="./assets/css/hobbies/hobbies__titulo.css">
<link rel="stylesheet" href="./assets/css/hobbies/hobbies__link.css">
<link rel="stylesheet" href="./assets/css/formacao.css">
<link rel="stylesheet" href="./assets/css/formacao/formacao__titulo.css">
<link rel="stylesheet" href="./assets/css/formacao/formacao__lista.css">
<link rel="stylesheet" href="./assets/css/formacao/formacao__item.css">
<link rel="stylesheet" href="./assets/css/formacao/formacao__img.css">
<link rel="stylesheet" href="./assets/css/formacao/item__titulo.css">
<link rel="stylesheet" href="./assets/css/formacao/item__subTitulo.css">
<link rel="stylesheet" href="./assets/css/experiencia.css">
<link rel="stylesheet" href="./assets/css/experiencia/experiencia__titulo.css">
<link rel="stylesheet" href="./assets/css/experiencia/projeto/projeto__lista.css">
<link rel="stylesheet" href="./assets/css/experiencia/projeto/projeto__item.css">
<link rel="stylesheet" href="./assets/css/experiencia/projeto/preview.css">
<link rel="stylesheet" href="./assets/css/experiencia/descricao/descricao.css">
<link rel="stylesheet" href="./assets/css/experiencia/descricao/descricao__titulo.css">
<link rel="stylesheet" href="./assets/css/experiencia/descricao/descricao__subTitulo.css">
<link rel="stylesheet" href="./assets/css/experiencia/descricao/descricao__botoes/descricao__botoes.css">
<link rel="stylesheet" href="./assets/css/experiencia/descricao/descricao__botoes/link__projetos.css">
<link rel="stylesheet" href="./assets/css/rodape.css">
<link rel="stylesheet" href="./assets/css/rodape/rodape__contato.css">
<link rel="stylesheet" href="./assets/css/rodape/rodape__contato--grupo.css">
<link rel="stylesheet" href="./assets/css/rodape/campo__formulario.css">
<link rel="stylesheet" href="./assets/css/rodape/campo__formulario--texto.css">
<link rel="stylesheet" href="./assets/css/rodape/formulario.css">
<link rel="stylesheet" href="./assets/css/rodape/rodape__pagina.css">
<link rel="stylesheet" href="./assets/css/@media/@media-1024.css">
<link rel="stylesheet" href="./assets/css/@media/@media-768.css">
<link rel="stylesheet" href="./assets/css/@media/@media-425-320.css">
</head>
<body>
<header class="cabecalho container">
<div>
<span class="logo">Jeferson Alves</span>
</div>
<nav class="cabecalho__navegacao">
<a href="#sobre" class="navegacao__link">Sobre mim</a>
<a href="#skills" class="navegacao__link">Skills</a>
<a href="#hobbies" class="navegacao__link">Hobbies</a>
<a href="#formacao" class="navegacao__link">Formação</a>
<a href="#experiencia" class="navegacao__link">Projetos</a>
<a href="#contato" class="navegacao__link email">contato</a>
</nav>
</header>
<main>
<section class="apresentacao container">
<div class="apresentacao__conteudo">
<h1 class="apresentacao__titulo">
Olá, meu nome é <em>Jeferson Alves</em> e construo páginas web.
</h1>
<p class="apresentacao__subTitulo">
Sou estudante de programação web desde 2022 e atualmente estou
participando da formação Desenvolvedor Frontend Oracle ONE na Alura.
</p>
<div class="apresentacao__lista">
<a href="https://github.com/jefrex" target="_blank" class="apresentacao__link apresentacao__link-seta--github">Github</a>
<a href="https://www.linkedin.com/in/jeferson-alves-desenvolvedor/" target="_blank" class="apresentacao__link apresentacao__link-seta--linkedin">Linkedin</a>
<a href="#" target="_blank" class="apresentacao__link apresentacao__link-seta--curriculo">Currículo</a>
</div>
</div>
<img src="./assets/img/foto-perfil.jpg" alt="Foto de Perfil" class="foto-perfil">
</section>
<section class="sobre" id="sobre">
<div class="sobre__conteudo container">
<h2 class="sobre__titulo">Sobre mim</h2>
<p class="sobre__texto">
Estou na área de T.I faz 8 anos como técnico de informática e amo tecnologia, mas, a área de programação
me chamou a atenção. <br><br>
Aos poucos fui aprendendo sobre html5, css3, atualmente estou
participando do projeto <em>Oracle ONE na Alura</em>, melhorando meus conhecimentos em html5 e css3, e aprendendo o temido (para mim)
Javascrip, para depois agregar conhecimento de suas bibliotecas. <br><br>
Escolhi Frontend por gostar da parte visual, a interação com o usuário e me sentir mais a vontade
nessa parte de programação.
</p>
</div>
</section>
<section class="skills-hobbies-graduacao" id="skills">
<section class="skills container">
<h2 class="skills__titulo">Skills</h2>
<ul class="skills__lista">
<li class="skills__item skills__item--logica">
<a href="https://www.alura.com.br/cursos-online-programacao/logica" class="skill__link" target="_blank">Lógica de Programação</a>
</li>
<li class="skills__item skills__item--html">
<a href="https://www.alura.com.br/formacao-html-css" class="skill__link" target="_blank">HTML5</a>
</li>
<li class="skills__item skills__item--css">
<a href="https://www.alura.com.br/formacao-css-estilos" class="skill__link" target="_blank">CSS3</a>
</li>
<li class="skills__item skills__item--javascript">
<a href="https://www.alura.com.br/formacao-javascript-front-end" class="skill__link" target="_blank">JavaScript</a>
</li>
<li class="skills__item skills__item--github">
<a href="https://www.alura.com.br/curso-online-git-github-controle-de-versao" class="skill__link" target="_blank">Github</a>
</li>
</ul>
</section>
<section class="hobbies container" id="hobbies">
<h2 class="hobbies__titulo">Hobbies</h2>
<ul class="hobbies__lista">
<li class="hobbies__item hobbies__item--assistir">
<a href="#" class="hobbies__link" target="_blank">Assistir filmes</a>
</li>
<li class="hobbies__item hobbies__item--musica">
<a href="#" class="hobbies__link" target="_blank">Ouvir músicas</a>
</li>
<li class="hobbies__item hobbies__item--games">
<a href="#" class="hobbies__link" target="_blank">Vídeo game</a>
</li>
<li class="hobbies__item hobbies__item--ler">
<a href="#" class="hobbies__link" target="_blank">Leitura</a>
</li>
</ul>
</section>
<section class="formacao" id="formacao">
<h2 class="formacao__titulo">Formação acadêmica</h2>
<ul class="formacao__lista">
<li class="formacao__item">
<div class="formacao__img">
<img src="./assets/img/senac-logo-.png" alt="logo senac" class="item__logo">
</div>
<h3 class="item__titulo">Desenvolvedor Frontend</h3>
<p class="item__subTitulo">2022 - Senac - Conluído</p>
</li>
<!-- <li class="formacao__item">
<div class="formacao__img">
<img src="./assets/img/alura-logo.png" alt="logo alura" class="item__logo">
</div>
<h3 class="item__titulo">Desenvolvedor Web Frontend</h3>
<p class="item__subTitulo">Em ndamento - Alura</p>
</li> -->
</ul>
</section>
</section>
<section class="experiencia container" id="experiencia">
<h2 class="experiencia__titulo">Experiência profissional</h2>
<ul class="projeto__lista">
<li class="projeto__item">
<img src="./assets/img/projeto-barbearia-alura.jpg" alt="Imagem projeto barbearia Alura" class="preview">
<div class="descricao">
<h3 class="descricao__titulo">Barbearia Alura</h3>
<p class="descricao__subTitulo">Projeto Alura Barbearia</p>
<div class="descricao__botoes">
<a href="" class="link__projetos">Repositório</a>
<a href="" class="link__projetos demo">Ver demo</a>
</div>
</div>
</li>
</ul>
<ul class="projeto__lista">
<li class="projeto__item flex-direction">
<img src="./assets/img/projeto-descodificar.jpg" alt="Imagem challenge Decodificador Alura" class="preview">
<div class="descricao">
<h3 class="descricao__titulo">Decodificador de texto</h3>
<p class="descricao__subTitulo">Challenge Alura Codificador</p>
<div class="descricao__botoes">
<a href="" class="link__projetos">Repositório</a>
<a href="" class="link__projetos demo">Ver demo</a>
</div>
</div>
</li>
</ul>
<ul class="projeto__lista">
<li class="projeto__item">
<img src="./assets/img/projeto-order-summary.jpg" alt="imagem card de compra de música " class="preview">
<div class="descricao">
<h3 class="descricao__titulo">Order Summary</h3>
<p class="descricao__subTitulo">Projeto Site Frontend Mentor</p>
<div class="descricao__botoes">
<a href="" class="link__projetos">Repositório</a>
<a href="" class="link__projetos demo">Ver demo</a>
</div>
</div>
</li>
</ul>
</section>
</main>
<footer class="rodape" id="contato">
<section class="rodape__contato container">
<div class="rodape__contato--grupo">
<img src="./assets/img/contato.png" alt="imagem de um telefone residencial" class="contato-imagem">
<div class="campo__formulario">
<div class="campo__formulario--texto">
<h2 class="campo__texto--titulo">Contato</h2>
<p class="campo__texto--aviso">
Quer entrar em contato comigo? <br>
Preencha o formulário e entrarei em contato o mais rápido possível.
</p>
</div>
<form target="_blank" action="https://formsubmit.co/jefersonalves88@gmail.com" method="POST"class="formulario">
<input type="text" name="name" id="name" placeholder="Nome" required autocomplete="off">
<input type="email" name="email" id="email" placeholder="E-mail" required autocomplete="off">
<input type="text" name="assunto" id="assunto" placeholder="Assunto" autocomplete="off">
<textarea name="mensagem" id="mensagem" rows="5" placeholder="Mensagem"></textarea>
<button type="submit" id="botao--enviar">Enviar mensagem</button>
</form>
</div>
</div>
</section>
<section class="rodape__pagina">
<p>Desenvolvido por Jeferson Alves <br>
2023</p>
</section>
</footer>
</body>
</html>