-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
160 lines (151 loc) · 8.47 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<!-- comentário em html5 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PORTFOLIO</title>
<link rel="stylesheet" href="./reset.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./css/header.css">
<link rel="stylesheet" href="./css/apresentacao.css">
<link rel="stylesheet" href="./css/sobreMim.css">
<link rel="stylesheet" href="./css/skills.css">
<link rel="stylesheet" href="./css/formacao.css">
<link rel="stylesheet" href="./css/experiencia.css">
<link rel="stylesheet" href="./css/contato.css">
<link rel="stylesheet" href="./css/rodape.css">
</head>
<body>
<header class="header">
<img class="logo" src="./img/Logo_2.svg" alt="Logo perfil Kalebe">
<ul class="navegacao_lista">
<li><a href="https://github.com/Kale-teck" class="navegacao_lista-links" target="_blank">GitHub</a></li>
<li><a href="https://www.linkedin.com/in/kalebe-martins-fullstack/" class="navegacao_lista-links" target="_blank">LinkedIn</a></li>
<li><a href="https://www.instagram.com/kkallebbe/" class="navegacao_lista-links" target="_blank">Instagram</a></li>
</ul>
</header>
<main>
<section class="apresentacao">
<div class="apresentacao_texto">
<h1 class="apresentacao_texto-titulo">
Olá! Sou Kalebe Martins e construo páginas web
</h1>
<p class="apresentacao_texto-paragrafo">
Sou estudante de Análise e Desenvolvimento de Sistemas no IFRN e bolsista no programa ONE da Oracle + Alura
</p>
</div>
<img src="./img/eu_circular.png" alt="Minha foto sorrindo com fundo amarelo" class="apresentacao_imagem">
</section>
<section class="sobreMim">
<h3 class="sobreMim_titulo">Sobre Mim</h3>
<p class="sobreMim_paragrafo">
Tenho 25 anos, conheci linguagem de programação em 2020 durante a pandemia, nunca trabalhei na area, estudo diariamente (tornou-se um hábito), espero por oportunidade de trabalho. Atualmente pretendo focar em Web, porém estou disponível para back-end (pretendo ser fullstack, por isso o foco em Python (Jupyter Notebook/Google Colab) e MySQL). Quero adquirir experiência como Full Stack, evoluir no mundo da programação e ser fonte de mudança para minha família.
</p>
</section>
<section class="skills">
<h2 class="skills_titulo">Skills</h2>
<ul class="skills_lista">
<li class="skills_itens">
<img src="./img/logos/html_logo.png" alt="Logo da linguagem de marcação HTML5 na cor laranja" class="skills_logo">
</li>
<li class="skills_itens">
<img src="./img/logos/css_logo.png" alt="Logo da linguagem de folhas de estilos CSS3 na cor azul" class="skills_logo">
</li>
<li class="skills_itens">
<img src="./img/logos/js_logo.png" alt="Logo da linguagem de programação JavaScript na cor amarela" class="skills_logo">
</li>
<li class="skills_itens">
<img src="./img/logos/py_logo.png" alt="Logo da linguagem de programação Python nas cores azul e amarelo" class="skills_logo python">
</a>
</li>
</ul>
</section>
<section class="formacao">
<h3 class="formacao_titulo">Formação Acadêmica</h3>
<ul class="formacao_lista">
<li class="formacao_itens">
<img src="./img/ifrn_logomarca.jpg" alt="Logomarca IFRN" class="formacao_itens-imagem">
<h4 class="formacao_itens-titulo">Técnico em ADS</h4>
<p class="formacao_itens-tipo">Graduação</p>
<p class="formacao_itens-descricao">2021 - Cursando</p>
</li>
<li class="formacao_itens">
<img src="./img/ufersa_logomarca.png" alt="Logomarca UFERSA" class="formacao_itens-imagem">
<h4 class="formacao_itens-titulo">Machine Learning</h4>
<p class="formacao_itens-tipo">Capacitação</p>
<p class="formacao_itens-descricao">2023 - Cursando</p>
</li>
<li class="formacao_itens">
<img src="./img/one_logo_edit-bb.png" alt="Logomarca Oracle ONE" class="formacao_itens-imagem one">
<h4 class="formacao_itens-titulo">Front End</h4>
<p class="formacao_itens-tipo">Especialização</p>
<p class="formacao_itens-descricao">2022 - Cursando</p>
</li>
</ul>
</section>
<section class="experiencia">
<h3 class="experiencia_titulo">Experiência Profissional</h3>
<ul class="experiencia_lista">
<li class="experiencia_item">
<img src="./img/Decodificador_Trim.gif" alt="Imagem animada que mostra um site sendo usado" class="experiencia_item-imagem">
<div class="experiencia_item-texto">
<h4 class="experiencia_item-texto-titulo">Decodificador de Texto</h4>
<p class="experiencia_item-texto-descricao">Challenge Alura One</p>
<a href="https://github.com/Kale-teck/DECODIFICADOR" target="_blank" class="experiencia_item-texto-link">Repositório</a>
</div>
</li>
<li class="experiencia_item">
<img src="./img/AluraGeek_TRIM.gif" alt="Imagem animada que mostra um site sendo usado" class="experiencia_item-imagem">
<div class="experiencia_item-texto">
<h4 class="experiencia_item-texto-titulo">E-commerce AluraGeek</h4>
<p class="experiencia_item-texto-descricao">Terceiro Challenge Alura ONE</p>
<a href="https://github.com/Kale-teck/E-COMMERCE" target="_blank" class="experiencia_item-texto-link">Repositório</a>
</div>
</li>
</ul>
</section>
<section class="contato">
<h4 class="contato_titulo">Contato</h4>
<div class="contato_conteudo">
<img src="./img/call.png" alt="desenho de um smartphone com bordas pretas" class="contato_imagem">
<form class="contato_formulario" data-formulario>
<div id="formulario" class="contato_formulario-div">
<label for="nome" class="contato_formulario-label">Nome</label>
<input type="text" id="nome" name="nome" class="contato_formulario-input" placeholder="Ex.: José Maria" maxlength="50" title="O campo deve conter no máximo 50 caracteres e não pode ficar vazio" required>
<span class="mensagem-erro"></span>
</div>
<div class="contato_formulario-div">
<label for="email" class="contato_formulario-label">Email</label>
<input type="email" name="email" id="email" class="contato_formulario-input" placeholder="Ex.: josemaria@mail.com" required inputmode="email">
<span class="mensagem-erro"></span>
</div>
<div class="contato_formulario-div">
<label for="text" class="contato_formulario-label">Assunto</label>
<input type="text" id="text" name="assunto" class="contato_formulario-input" placeholder="Máximo 50 caracteres" required maxlength="50">
<span class="mensagem-erro"></span>
</div>
<div class="contato_formulario-div area-mensagem">
<label for="msg" class="contato_formulario-label" >Mensagem</label>
<textarea name="mensagem" id="msg" cols="20" rows="7" class="contato_formulario-textarea" placeholder="Mensagem de no máximo 300 caracteres" required maxlength="300" title="Limite de 300 caracteres atingido"></textarea>
<span class="mensagem-erro"></span>
</div>
<div class="contato_formulario-div-botao">
<button class="botao">
Enviar Mensagem
</button>
</div>
</form>
</div>
</section>
</main>
<footer class="rodape">
<p class="rodape_paragrafo">
Desenvolvido por Kalebe Martins <br> 2023
</p>
</footer>
<script src="./js/contato.js" type="module"></script>
</body>
</html>