-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
266 lines (234 loc) · 13.6 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
<!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">
<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=Quicksand:wght@400;700&family=Solitreo&family=Inconsolata:wght@400;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="shortcut icon" href="assets/img/logo-bs.svg" type="image/x-icon">
<title>Bryan Soares</title>
</head>
<body>
<input id="close-menu" class="close-menu" type="checkbox" role="button" aria-label="Close menu" aria-pressed="true">
<label for="close-menu" class="close-menu-label" title="close-menu"></label>
<aside class="menu">
<div class="menu-content main-content">
<nav>
<ul id="nav-menu">
<li><a href="#">início</a></li>
<li><a href="#sobremim">sobre mim</a></li>
<li><a href="#habilidades">habilidades</a></li>
<li><a href="#projetos">projetos</a></li>
<li><a href="#contato">contato</a></li>
</ul>
</nav>
</div>
</aside>
<section class="section-main bg-main">
<div class="main-content intro">
<h1>Olá,<br>Bem-vindo(a) ao meu portifólio!</h1>
<p>Me chamo Bryan Soares!</p>
<nav class="intro-links">
<ul>
<li><a href="https://linkedin.com/in/bryaanls" target="_blank">
<img src="assets/img/linkedin-icon.svg" alt="logo linkedin">Linkedin</a></li>
<li><a href="https://github.com/bryaanls" target="_blank">
<img src="assets/img/git-icon.svg" alt="logo github"> GitHub</a>
</li>
</ul>
</nav>
</div>
</section>
<section class="section secondary-bg" id="sobremim">
<div class="main-content about text-decoration-h1">
<img class="memoji" src="assets/img/me-memoji.svg"
alt="memoji do usuario do iphone personalizado com caracteristicas do bryan">
<div class="about-content">
<h1>Sobre mim</h1>
<h2>Bryan Soares</h2>
<p><b>São Paulo - Vila Sônia</b></p>
<p>Sou apaixonado por tecnologia e sempre busco adquirir novos conhecimentos e me desenvolver ainda mais
nessa área. Meu
foco está em desenvolvimento web e estou empenhado em me tornar um desenvolvedor Fullstack. Para
solidificar meus
conhecimentos, gosto de aplicá-los em projetos práticos. Atualmente, estou em busca de uma
oportunidade de trabalho na
minha área de interesse. Possuo muita determinação e gosto de enfrentar desafios.</p>
<a href="assets/pdf/BryanSoares-CV.pdf" target="_blank">Curriculo</a>
</div>
</div>
</section>
<section class="section secondary-bg text-decoration-h1" id="habilidades">
<div class="hability main-content">
<h1>Habilidades</h1>
<ul class="hability-content grid">
<li class="grid-content card">
<h2>JavaScript</h2>
<img src="assets/img/js-logo.svg" alt="">
<p>Animações, passagem de valores com JSON pelo LocalStorage, POO &+</p>
<p>
<img src="assets/img/star-yellow.svg" width="30" height="30" alt="estrela amarela">
<img src="assets/img/star-yellow.svg" width="30" height="30" alt="estrela amarela">
<img src="assets/img/star-yellow.svg" width="30" height="30" alt="estrela amarela">
<img src="assets/img/star-yellow.svg" width="30" height="30" alt="estrela amarela">
<img src="assets/img/star-gray.svg" width="30" height="30" alt="estrela cinza">
</p>
</li>
<li class="grid-content card">
<h2>html</h2>
<img src="assets/img/html-logo.svg" alt="">
<p>Construção de sites semanticos e com otimização em SEO, todos com validações de html feitas no
W3Schools &+</p>
<p>
<img src="assets/img/star-yellow.svg" width="30" height="30" alt="estrela amarela">
<img src="assets/img/star-yellow.svg" width="30" height="30" alt="estrela amarela">
<img src="assets/img/star-yellow.svg" width="30" height="30" alt="estrela amarela">
<img src="assets/img/star-yellow.svg" width="30" height="30" alt="estrela amarela">
<img src="assets/img/star-gray.svg" width="30" height="30" alt="estrela cinza">
</p>
</li>
<li class="grid-content card">
<h2>Css</h2>
<img src="assets/img/css-logo.svg" alt="">
<p>Flexbox, grid, keyframes, media query, animações, centralizações, responsividades &+</p>
<p>
<img src="assets/img/star-yellow.svg" width="30" height="30" alt="estrela amarela">
<img src="assets/img/star-yellow.svg" width="30" height="30" alt="estrela amarela">
<img src="assets/img/star-yellow.svg" width="30" height="30" alt="estrela amarela">
<img src="assets/img/star-yellow.svg" width="30" height="30" alt="estrela amarela">
<img src="assets/img/star-gray.svg" width="30" height="30" alt="estrela cinza">
</p>
</li>
</ul>
</div>
</section>
<section class="section projects-bg text-decoration-h1" id="projetos">
<div class="main-content">
<h1>Projetos</h1>
<div class="projects main-content">
<div class="card-project">
<h2>Biblioteca CRUD</h2>
<img src="assets/img/project-banca.jpeg" width="300" height="150"
alt="captura de tela de um projeto de cadastro de usuarios e livros">
<p>Como parte de um projeto proposto pela PUCPR, criei um sistema de gerenciamento de empréstimos,
que permite aos usuários
cadastrar e controlar itens emprestados. Para isso, utilizei as tecnologias PHP e MySQL. Com
este sistema, os usuários
podem registrar seus dados, solicitar empréstimos de livros e atualizar suas informações
pessoais. Este projeto foi
minha primeira experiência como desenvolvedor FullStack e foi fundamental para ampliar meus
conhecimentos em programação
web.</p>
<div class="link-project"><a href="https://github.com/BryaanLs/Biblioteca" target="_blank">Ver
Código</a> <a href="#" id="no-link">Ver Projeto</a> </div>
</div>
<div class="card-project">
<h2>Cadastro e alteração de dados de usuario</h2>
<img src="assets/img/project-cad.jpeg" width="300" height="150"
alt="captura de tela de um projeto de cadastro, alteração e exclusão de dados">
<p>Este é um projeto pessoal que desenvolvi para gerenciar e armazenar informações. Nele, permito o
cadastro de dados
únicos em uma tabela, impedindo que os dados sejam repetidos. Além disso, os dados cadastrados
podem ser facilmente
modificados ou excluídos pelo usuário, oferecendo flexibilidade e controle sobre as informações
armazenadas. Este
projeto foi uma ótima oportunidade para aprimorar minhas habilidades em programação e trabalhar
com banco de dados.</p>
<div class="link-project">
<a href="https://github.com/BryaanLs/Cadastro-CRUD-PDO" target="_blank">Ver Código</a>
<a href="#" id="no-link">Ver Projeto</a>
</div>
</div>
<div class="card-project">
<h2>Site institucional</h2>
<img src="assets/img/project-odonto.webp" width="300" height="150"
alt="captura de tela de um site institucional de uma clinica odontológica">
<p>Meu primeiro projeto profissional foi desenvolver um site completo para uma clínica odontológica.
O site conta com 4
páginas que apresentam informações sobre a clínica, sua estrutura, serviços oferecidos e
feedbacks de pacientes. Este
projeto foi uma ótima oportunidade para aplicar meus conhecimentos em desenvolvimento web e
criar um site funcional e
atraente para a clínica. Além disso, tive a chance de trabalhar em um projeto real e entregar
algo valioso para o
cliente. Foi uma experiência muito gratificante e um passo importante em minha carreira como
desenvolvedor.</p>
<div class="link-project">
<a href="https://github.com/BryaanLs/Odontologia--Faria-Lima" target="_blank">Ver Código</a>
<a href="https://odontofarialima.netlify.app" target="_blank">Ver Projeto</a>
</div>
</div>
</div>
<div class="projects project-container main-content">
<div class="card-project">
<h2>Landing Page</h2>
<img src="assets/img/project-landing-page.webp" width="300" height="150"
alt="captura de tela de uma landing page sem fins de comercio">
<p>Fiz esse projeto com o intuito de reforçar conceitos e conteudos absorvidos com meus estudos em
FrontEnd!<br>
É uma landing page 100% responsiva, com algumas animações em css e javascript apenas para a
responsividade do menu mobile </p>
<div class="link-project"><a href="https://github.com/BryaanLs/First-landing-page"
target="_blank">Ver Código</a>
<a href="https://landingpagebs.netlify.app" target="_blank">Ver Projeto</a>
</div>
</div>
<div class="card-project">
<h2>Placar de truco</h2>
<img src="assets/img/project-placar-truco.webp" width="300" height="150"
alt="captura de tela de um projeto de um placar de truco">
<p>Aqui em casa gostamos muito de jogar, porém na maioria das vezes esquecemos de pegar algo para
marcar nossos pontos.<br>
Dentro disso vi uma oportunidade de construir um projeto onde nós pudessemos eliminar esse
problema!</p>
<div class="link-project"><a href="https://github.com/BryaanLs/Placar-TRUCO" target="_blank">Ver
Código</a><a href="https://placartruco.netlify.app/" target="_blank">Ver Projeto</a></div>
</div>
<div class="card-project">
<img id="emBreve" src="assets/img/emBreve.webp" width="300" height="150"
alt="captura de tela de um projeto de cadastro de usuarios e livros">
<a href="https://github.com/bryaanls" target="_blank">Outros projetos</a>
</div>
</div>
<button id="seeMore" class="marioMartelo">Ver Mais</button>
</div>
</section>
<footer class="contact secondary-bg" id="contato">
<div class="main-content">
<ul class="social">
<li>
<a href="https://www.instagram.com/bryaan_ls/" target="_blank"><img src="assets/img/insta.svg"
alt="logo do instagram">
</a>
</li>
<li>
<a href="https://github.com/BryaanLs" target="_blank"><img src="assets/img/git.svg"
alt="logo do github">
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/bryaanls" target="_blank"><img src="assets/img/linkedin.svg"
alt="logo do linkedin">
</a>
</li>
<li>
<a href="https://wa.link/i9w3v3" target="_blank"><img src="assets/img/whats.svg"
alt="logo do whatsapp">
</a>
</li>
</ul>
</div>
<div class="copy">
<p>Bryan Soares, Desenvolvedor Front-End</p>
<p>Tecnologias utilizadas: Javascript, HTML e CSS</p>
<p>Todos os direitos reservados ©</p>
</div>
</footer>
<script src="assets/js/script.js"></script>
</body>
</html>