-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
255 lines (230 loc) · 11.4 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
<!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>Rafael Peres</title>
<link href="./styles/reset.css" rel="stylesheet">
<link href="./styles/normalize.css" rel="stylesheet">
<link href="./styles/variaveis.css" rel="stylesheet">
<link href="./styles/styles.css" rel="stylesheet">
<link href="./styles/cabecalho.css" rel="stylesheet">
<link href="./styles/hero.css" rel="stylesheet">
<link href="./styles/sobre.css" rel="stylesheet">
<link href="./styles/skills.css" rel="stylesheet">
<link href="./styles/formacao.css" rel="stylesheet">
<link href="./styles/projetos.css" rel="stylesheet">
<link href="./styles/contato.css" rel="stylesheet">
<link href="./styles/rodape.css" rel="stylesheet">
<!--CSS RESPONSIVO-->
<link href="./styles/responsivo/texto-responsivo.css" rel="stylesheet">
<!--ICONE DA PÁGINA-->
<link rel="icon" href="img/rafaelperes_icon.svg?" type="image/icon type">
<!--ICONS BOOTSTRAP PARA Github, Instagram e LinkedIn-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css" rel="stylesheet">
<!--FONT RAFAEL PERES ASSINATURA-->
<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=Babylonica&display=swap" rel="stylesheet">
<!--FONT Raleway Principal-->
<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:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body class="app">
<!--CABEÇALHO HEADER-->
<header class="cabecalho">
<div class="container">
<h2 class="cabecalho__logo">Rafael Peres</h2>
<h3><a class="cabecalho__linguas" href="./index-english.html">En</a> | <a class="cabecalho__linguas pt" href="./index.html">Pt</a></h3>
<nav class="cabecalho__nav">
<ul class="cabecalo__nav___ul">
<li class="cabecalho__nav___lista_items">
<a href="#sobre" class="cabecalho__nav___lista_intems_links">
Sobre mim
</a>
</li>
<li class="cabecalho__nav___lista_items">
<a href="#skills" class="cabecalho__nav___lista_intems_links">
Skills/Hobbies
</a>
</li>
<li class="cabecalho__nav___lista_items">
<a href="#formacao" class="cabecalho__nav___lista_intems_links">
Formação
</a>
</li>
<li class="cabecalho__nav___lista_items">
<a href="#projetos" class="cabecalho__nav___lista_intems_links">
Projetos
</a>
</li>
<li class="cabecalho__nav___lista_items">
<a href="mailto:rafaeldasilvaperes@hotmail.com" class="cabecalho__nav___lista_intems_links">
<strong>Mail me!</strong>
</a>
</li>
</ul>
</nav>
</div>
</header>
<!--FIM CABEÇALHO HEADER-->
<main class="conteudo">
<!--HERO APRESENTAÇÃO-->
<section class="hero">
<div class="hero__box container">
<h1 class="hero__box___titulo">Olá, sou o <strong class="hero__box___titulo--nome">Rafael Peres </strong>e construo páginas web</h1>
<h2 class="hero__box___subtitulo">Eu estudo Desenvolvimento Web e atualmente estou participando no projeto <strong class="oracle-text"><a href="https://www.oracle.com/br/education/oracle-next-education/" target="_blank">Oracle ONE</a></strong> na <strong class="alura-text"><a href="https://www.alura.com.br/" target="_blank">Alura</a></strong>!</h2>
<ul class="hero__box___mediaLinks">
<li class="hero__box___mediaLinks-items">
<a href="https://github.com/Rafaeldasilvaperes" target="_blank">
<i title="Github" class=" bi-github incone"></i>
</a>
</li>
<li class="hero__box___mediaLinks-items">
<a href="https://www.linkedin.com/in/rafael-da-silva-peres-ba4228bb/" target="_blank">
<i title="LinkedIn" class=" bi-linkedin incone"></i>
</a>
</li>
<li class="hero__box___mediaLinks-items">
<a href="https://www.instagram.com/rafoulsp/" target="_blank">
<i title="Instagram" class=" bi-instagram incone"></i>
</a>
</li>
<li class="hero__box___mediaLinks-items">
<a href="./curriculo.html" target="_blank" title="Rafael da Silva Peres">
<i title="Currículo" class=" bi-file-earmark-person incone"></i>
</a>
</li>
</ul>
</div>
<img class="hero__foto" src="./img/ezgif.com-gif-maker.gif" alt="Foto de rosto Rafael Peres. Cabeça careca, usando óculos e com barba." title="Rafael Peres ;)">
</section>
<!--FIM HERO APRESENTAÇÃO-->
<!--ABOUT ME SECTION-->
<section id="sobre" class="aboutMe">
<div class="aboutMe__box container">
<h2 class="aboutMe__titulo">Sobre mim</h2>
<h3 class="aboutMe__paragrafo">Meu nome é <strong>Rafael Peres</strong>, resido no <strong>Brasil</strong> e tenho 30 anos!
Estudando informalmente obtive conhecimento básico em frontend com as ferramentas <b>CSS3/HTML5/JS</b>, assim como também na plataforma <b>Angular</b> para desenvolvimento frontend. Conhecimento básico de <b>Node.js</b>, e também do uso de <b>Express</b> para desenvolvimento de CRUDS básicos. Conhecimento de <b>Programação Orientada a Objeto (POO)</b>, praticada em <b>Python</b>. Conhecimento básico em <b>Git e Github</b>, design de projeto frontend com o <b>Figma</b> e Hosts de Aplicações Web como <b>Firebase e Heroku</b> para deploy de aplicações simples sem uso de Banco de Dados.<br><br>
Atualmente estou estudando Desenvolvimento Web pelo programa <b>Oracle Next Education</b> em parceria com a <b>Alura</b> onde venho aumentando o meu conhecimento constantemente através do programa e exercitando esse conhecimento através da entrega dos projetos propostos no programa.</h3>
<h4 class="aboutMe__assinatura">Rafael Peres</h4>
</div>
</section>
<!--FIM ABOUT ME SECTION-->
<!--SKILLS & HOBBIES SECTION-->
<section id="skills" class="skills">
<div class="skills__box">
<h2 class="skills__titulo">Skills</h2>
<nav>
<ul class="skills__cards">
<li class="skills__cards___link"><h3>HTML5</h3></li>
<li class="skills__cards___link"><h3>CSS3</h3></li>
<li class="skills__cards___link"><h3>JavaScript</h3></li>
<li class="skills__cards___link"><h3>Git</h3></li>
</ul>
</nav>
</div>
<br><br>
<div class="skills__box">
<h2 class="skills__titulo">Hobbies</h2>
<nav>
<ul class="skills__cards">
<li class="skills__cards___link cards--hobbies"><h3>Tocar violão</h3></li>
<li class="skills__cards___link cards--hobbies"><h3>Música</h3></li>
<li class="skills__cards___link cards--hobbies"><h3>Games</h3></li>
<li class="skills__cards___link cards--hobbies"><h3>Memorizar letras</h3></li>
</ul>
</nav>
</div>
</section>
<!--FIM SKILLS & HOBBIES SECTION-->
<!--FORMAÇÃO ACADEMICA-->
<section id="formacao" class="formacao">
<div class="formacao__box">
<h2 class="formacao__titulo">Formação Acadêmica</h2>
<div class="formacao__figure__box">
<figure class="formacao__figure">
<img src="./img/ALURA-svg.svg" alt="" class="formacao__figure__imagem">
<figcaption class="formacao__figure__caption">Trilha de Formação Front-end</figcaption>
<p>2022 - Alura + Oracle ONE</p>
</figure>
<figure class="formacao__figure">
<img src="./img/ALURA-svg.svg" alt="" class="formacao__figure__imagem">
<figcaption class="formacao__figure__caption">Trilha Lógica de Programação</figcaption>
<p>2022 - Alura + Oracle ONE</p>
</figure>
</div>
</div>
</section>
<!--FIM FORMAÇÃO ACADEMICA-->
<!--PROJETOS-->
<section id="projetos" class="projetos">
<h2 class="projetos__titulo">Experiência Profissional</h2>
<div class="projetos__box">
<img src="./img/Decordificador.png" alt="Imagem página principal projeto Decodificador de texto" class="projetos__img">
<div class="projetos__descricao">
<h3 class="projetos__descricao__titulo">Decodificador de Texto</h3>
<h4 class="projetos__descricao__subtitulo">Primeiro Challenge Alura </h4>
<div class="projetos__descricao__btn_box">
<a href="https://github.com/Rafaeldasilvaperes/Primeiro-Challenge-Oracle-ONE" class="projetos__descricao__btn repo" target="_blank">Repositório</a>
<a href="https://rafaeldasilvaperes.github.io/Primeiro-Challenge-Oracle-ONE/" class="projetos__descricao__btn demo" target="_blank">Ver demo</a>
</div>
</div>
</div>
<div class="projetos__box">
<img src="./img/Forca-Desktop.png" alt="Imagem página principal projeto Decodificador de texto" class="projetos__img">
<div class="projetos__descricao">
<h3 class="projetos__descricao__titulo">Jogo da Forca</h3>
<h4 class="projetos__descricao__subtitulo">Segundo Challenge Alura </h4>
<div class="projetos__descricao__btn_box">
<a href="https://github.com/Rafaeldasilvaperes/Segundo-Challenge-Oracle-ONE" class="projetos__descricao__btn repo" target="_blank">Repositório</a>
<a href="https://rafaeldasilvaperes.github.io/Segundo-Challenge-Oracle-ONE/" class="projetos__descricao__btn demo" target="_blank">Ver demo</a>
</div>
</div>
</div>
</section>
<!--FIM PROJETOS-->
<!--CONTATO-->
<section class="contato">
<div class="contato__box">
<img src="./img/contato-png.png" alt="Imagem de um telefone de fio fora do gancho sobre uma superfície cinza" class="contato__img">
<div class="contato__form">
<h2 class="contato__form__titulo">Contato</h2>
<h4 class="contato__form__subtitulo">Quer entrar em contato comigo?<br>
Preencha o formulário abaixo e entrarei em contato o mais rápido possível.</h4>
<form action="https://formsubmit.co/rafaeldasilvaperes@hotmail.com" method="POST">
<fieldset>
<input type="hidden" name="_subject" value="Novo email do seu Portfólio!">
<div class="input-container">
<input class="input" name="nome" id="nome" placeholder="nome" type="text" required>
<label class="input-label" for="nome">Nome:</label>
</div>
<div class="input-container">
<input class="input" name="email" id="email" placeholder="email" type="email" required>
<label class="input-label" for="email">Email:</label>
</div>
<div class="input-container">
<input class="input" name="assunto" id="assunto" placeholder="assunto" type="text" required>
<label class="input-label" for="assunto">Assunto</label>
</div>
<textarea name="Menssagem" id="Menssagem" rows="10" class="textarea" placeholder="Digite alguma mensagem"></textarea>
<label class="textarea-label" for="Menssagem"></label>
<div class="btn__box">
<input class="submit__btn" value="Enviar mensagem" type="submit">
</div>
</fieldset>
</form>
</div>
</div>
</section>
<!--FIM CONTATO-->
</main>
<!--FIM MAIN CONTEUDO-->
<!--RODAPÉ-->
<footer class="rodape">Desenvolvido por Rafael Peres 2022 </footer>
<!--FIM RODAPÉ-->
<script src="./scripts/main.js" type="text/javascript"></script>
</body>
</html>