-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
212 lines (195 loc) · 12.9 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--GOOGLE FONTS-->
<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=Poppins: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">
<!--FIM GOOGLE FONTS-->
<!--BOOTSTRAP ICONS-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!--FIM BOOTSTRAP ICONS-->
<link rel="stylesheet" href="style.css">
<title>Meu Portfólio</title>
</head>
<body>
<header>
<div class="interface">
<div class = "logo">
<a href="#">
<video class="logo-video" alt="Logo do Portfólio" width="180px" height="100px" autoplay loop muted>
<source src="imagens/Logo animado azul neon futurista para tecnologia.mp4" type="video/mp4">
</a>
</div><!--logo-->
<nav class="menu-desktop">
<ul>
<li><a href="#inicio">Ínicio</a></li>
<li><a href="#sobre">Sobre</a></li>
<li><a href="#portfolio">Projetos</a></li>
<li><a href="conhecimentos">Conhecimentos</a></li>
</ul>
</nav>
<div class="btn-contato">
<a href="#">
<button>Contato</button>
</a>
</div>
</div>
</div><!--interface-->
</header>
<main>
<section class="topo-do-site">
<div class="interface">
<div class="flex">
<div class="txt-topo-site">
<h1>Bem Vindo ao meu <span>Portfólio!</span></h1>
<p>Olá e bem-vindo ao meu portfólio! Meu nome é Leandro, sou estudante de Engenharia de Computação
e tenho como paixão a tecnologia. Aqui, você encontrará uma coleção dos meus projetos, experiências
e realizações na área de TI. Espero que você aproveite a visita e, se tiver qualquer dúvida ou quiser
saber mais sobre meu trabalho, não hesite em entrar em contato.
Obrigado pela visita e aproveite!</p>
<div class="btn-curriculo">
<a href="">
<button>MEU CURRICULO</button>
</a>
</div>
</div><!--txt-topo-site-->
<div class="img-topo-site">
<img src="imagens/1683139432453.jpg" alt="Foto Portfólio" width="300px" height="300px">
</div>
</div>
</div><!--interface-->
</section><!--topo-do-site-->
<section class="sobre">
<div class="interface">
<div class="flex">
<div class="img-sobre">
<img src="imagens/1683139432453.jpg" alt="Minha Foto" width="300px" height="300px" class="img-perfil">
<div class="btn-social">
<a href=""><button><i class="bi bi-instagram"></i></button></a>
<a href=""><button><i class="bi bi-linkedin"></i></button></a>
<a href=""><button><i class="bi bi-github"></i></button></a>
</div>
<div class="img-linguagens">
<img src="imagens/iconeHTML.png" alt="Icone HTML" class="img-linguagens-transform">
<img src="imagens/iconeCSS.png" alt="Icone CSS" class="img-linguagens-transform">
<img src="imagens/iconeJavaScripti.png" alt="Icone JavaScript" width="96px" class="img-linguagens-transform">
<img src="imagens/java.png" alt="Icone Java" width="96px" class="img-linguagens-transform">
<img src="imagens/iconeSQL.png" alt="Icone SQL" width="96px" class="img-linguagens-transform">
<img src="imagens/python.png" alt="Icone Python" width="96px" height="100px" class="img-linguagens-transform">
<img src="imagens/mysql.png" alt="Icone MySQL" width="96px" class="img-linguagens-transform">
<img src="imagens/git.png" alt="Icone GIT" width="96px" class="img-linguagens-transform">
<img src="imagens/github.png" alt="Icone GITHUB" width="96px" class="img-linguagens-transform">
</div>
</div><!--img-sobre-->
<div class="txt-sobre">
<h2>MUITO PRAZER, <span>SOU LEANDRO GASPAR.</span></h2>
<P>Sou um estudante de Engenharia de Computação com uma grande paixão pela area de tecnologia.
Atualmente, estou em busca de um estágio que me permita aplicar e expandir os conhecimentos adquiridos ao longo da minha formação
acadêmica e experiências anteriores. Estou em constante aprendizado, sempre buscando novos conhecimentos e aprendendo sobre novas ferramentas de tecnologia.</P>
<h3>Minha Jornada</h3>
<p>Minha experiência profissional começou na área de atendimento ao cliente, onde liderar equipes de recepção me proporcionou habilidades valiosas, como:</p>
<ul>
<li>Gestão de Pessoas: Liderança e coordenação de equipes.</li>
<li>Planejamento Estratégico: Organização e implementação de processos eficientes.</li>
<li>Comunicação Eficaz: Habilidade em transmitir informações de maneira clara e assertiva.</li>
<li>Resolução de Problemas: Colaboração com equipes de TI para solucionar problemas relacionados a softwares e ferramentas.</li>
</ul>
<p>Essas experiências fortaleceram meu interesse por tecnologia e me motivaram a aprofundar meus conhecimentos em Programação. Também realizei projetos acadêmicos,
trabalhando em grupo utilizando metodologias ágeis e Design Thinking para resolução de problemas da comunidade em geral, como a criação de uma aplicação web para
salão de beleza.</p>
<h3>Habilidades Técnicas</h3>
<p>Possuo conhecimentos intermediários e básicos em várias áreas de TI, incluindo:</p>
<ul>
<li>Lógica de Programação</li>
<li>Desenvolvimento Front-End: HTML, CSS e JavaScript</li>
<li>Linguagens de Programação: Java, SQL e Python</li>
<li>Banco de Dados Relacional: MySQL e SQL Server Management Studio</li>
<li>Modelagem de Dados: Criação de diagramas e estruturação de dados</li>
<li>Estruturas de Dados: Conhecimentos básicos em C++</li>
<li>Versionamento de Código: GIT e GITHUB</li>
</ul>
<p></p>
<h3>Objetivos</h3>
<p>Meu objetivo é encontrar uma oportunidade de estágio onde eu possa aplicar minhas habilidades,
aprender novas tecnologias e contribuir para projetos inovadores. Estou entusiasmado com a possibilidade
de colaborar com profissionais experientes e crescer na área de TI.</p>
</div><!--txt-sobre-->
</div><!--flex-->
</div><!--interface-->
</section><!--sobre-->
<section id="" class="projeto">
<div class="interface">
<h2 class="titulo">MEUS <span>CONHECIMENTOS</span></h2>
<div class="flex">
<div class="projeto-box">
<i class="bi bi-filetype-java"></i>
<h3>Programação Java</h3>
<p>Lógica de Programação, Demonstração e uso dos mecanismos de compilação e execução de programas, conhecimento em serialização para uso na persistência de Objetos, capacidade
de criar operações em Banco de Dados Relacional através da utilização de Drivers JDBC, Vínculo de conexões à Banco de Dados em componentes de interface SWING,Orientação a Objetos,
Interface de Programação - API.</p>
</div>
<div class="projeto-box">
<i class="bi bi-filetype-html"></i>
<i class="bi bi-filetype-css"></i>
<i class="bi bi-filetype-js"></i>
<h3>HTML, CSS e JavaScript</h3>
<p>Capacidade de criar páginas simples utilizando elementos como headings, parágrafos, listas, imagens, etc. Capacidade de estilização aplicando estilos como cores,
fontes, margens, paddings, transições e animações. Tenho experiência inicial com técnicas de layout, como Flexbox, para alinhar e distribuir elementos na página. Também estou
familiarizado com a criação de layouts responsivos que se adaptam a diferentes dispositivos. Conhecimento básico em JavaScript, sendo capaz de manipular elementos HTML
e responder a eventos do usuário, como cliques e entradas de formulários, com uma compreensão de variáveis, funcões, loops e condicionais.</p>
</div>
<div class="projeto-box">
<i class="bi bi-filetype-sql"></i>
<h3>Banco de Dados</h3>
<p>Conhecimento da linguagem SQL, com capacidade de realizar operações de consuta, como SELECT, INSERT, UPDATE e DELETE. Tenho familiaridade com a criação e
modificação de tabelas, a utilização de cláusulas como WHERE, JOIN e GROUP BY para filtrar e combinar dados. Tenho experiência na instalação e configuração do MySQL,
além de manipular interface gráfica MySQL Workbench para gerenciar bancos de dados. Sei como criar e estruturar bancos de dados, definir relacionamento entre tabelas
e garantir a integridade referencial. </p>
</div>
</div>
</div>
</section><!--projeto-->
<section class="portfolio">
<div class="interface">
<h2 class="titulo">MEUS <span>PROJETOS</span></h2>
<div class="flex">
<div class="img-port" style="background-image: url(imagens/imgCRUDJava.jpg);">
<div class="overlay">Projeto 1</div>
</div>
<div class="img-port" style="background-image: url(imagens/meu-portfolio-img.png);">
<div class="overlay">Projeto 2</div>
</div>
<div class="img-port" style="background-image: url(imagens/imgCRUDJava.jpg);">
<div class="overlay">Projeto 3</div>
</div>
</div><!--flex-->
</div><!--interface-->
</section><!--portfólio-->
</main>
<footer>
<div class="interface">
<div class="line-footer">
<div class="flex">
<div class="logo">
<a href="">
<video class="logo-video" alt="Logo do Portfólio" width="150px" height="100px" autoplay loop muted>
<source src="imagens/Logo animado azul neon futurista para tecnologia.mp4" type="video/mp4">
</a>
</div><!--logo-footer-->
<div class="btn-social">
<a href=""><button><i class="bi bi-instagram"></i></button></a>
<a href=""><button><i class="bi bi-linkedin"></i></button></a>
<a href=""><button><i class="bi bi-github"></i></button></a>
</div><!--btn-social-->
</div><!--flex-->
</div><!--line-footer-->
<div class="line-footer borda">
<p><i class="bi bi-envelope-at-fill"></i> <a href="mailto:leandro.sjc@hotmail.com.br">leandro.sjc@hotmail.com.br</a></p>
</div><!--line-footer-->
</div><!--interface-->
</footer>
</body>
</html>