-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
303 lines (281 loc) · 14.5 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
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Um bot que irá moderar e deixar a sua comunidade segura de um jeito fácil!">
<title>Portfólio </title>
<link rel="website icon" type="png" href="./Clean Modern Programmer Developer Web Designer Logo.png">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body id="Inicio">
<div class="cabeçalho">
<nav class="navbar" style="background: linear-gradient(120deg, #ffffff, 42.9% , #4c79d3 70%);">
<div class="container-fluid">
<a class="navbar-brand" href="https://www.linkedin.com/in/maur%C3%ADcio-souza-da-silva-aa8218176/">
<img class="principal-imagem-2"
src="./Fotos/Clean_Modern_Programmer_Developer_Web_Designer_Logo-removebg-preview.png" alt="LOGO-principal"
srcset="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel"><strong>Sobre</strong></h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link active" href="#projetos-1"><strong>Projetos</strong></a>
</li>
<!-- <br>
<!-- <li class="nav-item">
<a class="nav-link active" href="#projetos-header"><strong>Certificados</strong></a>
</li> -->
<br>
<li class="nav-item">
<a class="nav-link active" href="./Formulario/Formulario de Contato.html"><strong>Contato</strong></a>
</li>
<br>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
<strong>Redes Socias</strong>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="https://github.com/Mauricio2025">Github</a></li>
<li><a class="dropdown-item" href="https://discord.com/channels/@me">Discord</a></li>
<li><a class="dropdown-item" href="https://www.instagram.com/mauriciiio_souza/">Instagram</a></li>
<li><a class="dropdown-item"
href="https://www.linkedin.com/in/maur%C3%ADcio-souza-da-silva-aa8218176/">Linkedin</a></li>
<li><a class="dropdown-item" href="https://wa.me/5521974471841"> WhatsApp</a></li>
</ul>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</header>
<main class="conteudo">
<section class="conteudo-principal">
<div class="conteudo-principal-escrito">
<h1 class="conteudo-principal-escrito-titulo">Olá! Sou o </h1>
<p class="conteudo-principal-escrito-titulo-2">Mauricio Souza </p>
<h2 class="conteudo-principal-escrito-subtitulo">Full-Stack Developer</h2>
</div>
</section><br><br>
<div class="conteudo-meio-da-pagina">
<p class="text">
<span class="icones">{</span>
"Tranformando códigos em realidade"
<span class="icones">}</span>
</p>
</div> <br><br>
<section id="skills" class="js-scroll ativo">
<div class="skills-container layout">
<div class="skills-desc">
<h1>Habilidades:</h1>
<p class="skills-info" data-mobile="Toque em um dos cards para ler"></p>
</div>
<div class="skill-cards">
<div class="skill" data-description="HTML (HyperText Markup Language) é uma linguagem de marcação
utilizada na construção de páginas na Web.">
<img src="./JavaScript-logo.png" alt="ícone Html" width="100" height="100">
<p style="margin-top: 1rem;">JavaScript</p>
</div>
<div class="skill" data-description="Cascading Style Sheets (CSS) é um mecanismo para
adicionar estilo (cores, fontes, espaçamento, etc.) a uma página na Web.">
<img src="./Fotos/React-icon.svg.png" alt="ícone Css" width="100" height="100">
<p style="margin-top: 1rem;">React.js</p>
</div>
<div class="skill" data-description="JavaScript é uma linguagem de programação dinâmica e interpretada,
utilizada principalmente em páginas web para criar interatividade.">
<img src="./Fotos/git.png" alt="ícone Js" width="100" height="100">
<p style="margin-top: 1rem;">Git</p>
</div>
<div class="skill" data-description="React é uma biblioteca front-end JavaScript de
código aberto com foco em criar interfaces de usuário em páginas web.">
<img src="./Fotos//postman.png" alt="ícone React" width="100" height="100">
<p style="margin-top: 1rem;">Postman</p>
</div>
<div class="skill" data-description="Node é um runtime, que nada mais é do que um conjunto de códigos,
API's, ou seja, são bibliotecas responsáveis pelo tempo de execução (é o que faz o seu programa rodar)
que funciona como um interpretador de JavaScript fora do ambiente do navegador web.">
<img src="./image-4.png" alt="ícone node js" width="100" height="100">
<p style="margin-top: 1rem;">Node.js</p>
</div>
</div>
<div class="skill-cards">
<div class="skill" data-description="HTML (HyperText Markup Language) é uma linguagem de marcação
utilizada na construção de páginas na Web.">
<img src="./Fotos/tailiwndcsspng.png" alt="ícone Html" width="100" height="100">
<p style="margin-top: 1rem;">Tailwind Css</p>
</div>
<div class="skill" data-description="Cascading Style Sheets (CSS) é um mecanismo para
adicionar estilo (cores, fontes, espaçamento, etc.) a uma página na Web.">
<img src="./Fotos/mui.png" alt="ícone Css" width="100" height="100">
<p style="margin-top: 1rem;">Material Ui</p>
</div>
<div class="skill" data-description="JavaScript é uma linguagem de programação dinâmica e interpretada,
utilizada principalmente em páginas web para criar interatividade.">
<img src="./Fotos/vue.png" alt="ícone Js" width="100" height="100">
<p style="margin-top: 1rem;">Vue.js</p>
</div>
<div class="skill" data-description="React é uma biblioteca front-end JavaScript de
código aberto com foco em criar interfaces de usuário em páginas web.">
<img src="./Fotos/React-icon.svg.png" alt="ícone React" width="100" height="100">
<p style="margin-top: 1rem;">React Native</p>
</div>
<div class="skill" data-description="Node é um runtime, que nada mais é do que um conjunto de códigos,
API's, ou seja, são bibliotecas responsáveis pelo tempo de execução (é o que faz o seu programa rodar)
que funciona como um interpretador de JavaScript fora do ambiente do navegador web.">
<img src="./Fotos//Mysql.png" alt="ícone node js" width="100" height="100">
<p style="margin-top: 1rem;">MySql</p>
</div>
</div>
</div>
</section>
<section class="conteudo-secundario">
<h3 class="conteudo-secundario-titulo">Quem Sou Eu</h3>
<!-- Introdução -->
<p class="conteudo-secundario-paragrafo">
Olá, meu nome é Mauricio, e sou um desenvolvedor Full Stack com quase dois anos de experiência. Minhas
habilidades abrangem tecnologias como React, React Native, MySQL, Postman, Node.js, Vue.js, Tailwind e CSS. A
paixão pela programação e o constante aprimoramento são pontos centrais na minha trajetória profissional.
</p>
<!-- Minha Jornada na Programação -->
<p class="conteudo-secundario-paragrafo">
Iniciei minha jornada na programação há aproximadamente dois anos, focando inicialmente em JavaScript e, mais
recentemente, em React. Durante esse período, busquei incessantemente aprimorar minhas habilidades por meio de
cursos online, participação em comunidades e fóruns, além de prática intensiva, envolvendo a criação de projetos
pessoais e colaborações em iniciativas de terceiros.
A capacidade de criar soluções para problemas reais e contribuir para melhorar a vida das pessoas é o que mais
me motiva na programação. Além disso, aprecio trabalhar em equipe, pois proporciona aprendizado contínuo e
crescimento profissional.
</p>
<!-- Meus Projetos -->
<p class="conteudo-secundario-paragrafo">
Ao longo do último ano, tive a oportunidade de participar de projetos significativos, tanto individuais quanto
em equipe:
- Desenvolvimento de um aplicativo de lista de tarefas em React, possibilitando ao usuário criar, editar e
excluir tarefas de maneira intuitiva.
- Colaboração em um projeto open source de um editor de código em JavaScript, oferecendo personalização da
interface e configurações conforme as necessidades do usuário.
- Criação de um site pessoal para compartilhar meus projetos e experiências em programação, utilizando
tecnologias como HTML, CSS e JavaScript.
Essas experiências foram cruciais para meu aprendizado em programação, trabalho em equipe, comunicação e gestão
de projetos. Estou ansioso para continuar crescendo nessa área, enfrentando desafios cada vez mais estimulantes
e contribuindo para projetos fascinantes.
</p>
</section>
<br>
<br>
<br>
<!-- <section id="projetos-header">
<div class="projetos-header">
<h1><strong>Certificados</strong></h1>
<p>Cursos e imersões que participei durante meus anos na programação.</p>
</div>
<div class="projetos-container">
<a href="./Certificados/Captura da Web_31-3-2023_153913_.jpeg" class="projeto" target="_blank">
<div class="projeto-titulo">
<h2 class="nome-certificado">HTML é CSS</h2>
<img src="./iconmonstr-link-thin-240.png" alt="icone link" width="32" height="32" >
</div>
<p class="projeto-desc">
<br>
<strong>Fundação Bradesco</strong>
</p>
<p class="projeto-desc">
<strong>24hrs</strong>
</p>
<div class="tech-container">
<span class="tech">HTML</span>
<span class="tech">CSS</span>
</div>
</a>
<a href="" class="projeto" target="_blank">
<div class="projeto-titulo">
<h2 class="nome-certificado">JavaScript é Ecmascript</h2>
<img src="./iconmonstr-link-thin-240.png" alt="icone link" width="32" height="32" >
</div>
<p class="projeto-desc">
<strong>Curso em video</strong>
</p>
<p class="projeto-desc">
<strong>40/hrs</strong>
</p>
<div class="tech-container">
<span class="tech">Ecmascript</span>
<span class="tech">JavaScript</span>
</div>
</a>
<a href="./Certificados/Captura da Web_31-3-2023_163823_.jpeg" class="projeto" target="_blank">
<div class="projeto-titulo">
<h2 class="nome-certificado">Hacker Profissional</h2>
<img src="./iconmonstr-link-thin-240.png" alt="icone link" width="32" height="32" >
</div>
<p class="projeto-desc">
<strong>Tecnica de Invasão</strong>
</p>
<p class="projeto-desc">
<strong>12/hrs</strong>
</p>
<div class="tech-container">
<span class="tech">Sistema da Informação </span>
<span class="tech">Hacking Ético</span>
</div>
</a>
</div>
</section> -->
<br>
<br>
<br>
<section class="Conteudo-das-Paginas" id="projetos-1">
<h3 class="Conteudo-da-pagina-titulo">Projetos</h3>
<div class="kodfun-galeri">
<div style="background-image: url('./Fotos/monibank.png');"></div>
<div style="background-image: url('./Fotos/apeperia.png');"></div>
<div style="background-image: url('./Fotos/spacepage.png');"></div>
<div style="background-image: url('./Fotos/JOGO.jpeg');"></div>
<div style="background-image: url('./Fotos/techbooks.png');"></div>
<div style="background-image: url('./Fotos/hortifrutfrutoefruto.png');"></div>
<div style="background-image: url('./Fotos/Captura\ da\ Web_17-4-2023_163927_mauricio2025.github.io.jpeg');">
</div>
</div>
</section>
</main>
<footer class="rodape" id="contato">
<div class="contato-icons">
<a href="linkedin.com/in/developer-mauricio-souza/">
<img src="./Fotos/linkedin.png" alt="logo linkedin" srcset="">
</a>
<a href="https://github.com/Mauricio2025">
<img src="./Fotos/github.png" alt="logo github" srcset="">
</a>
<a href="[email protected]">
<img src="./Fotos/instagram.png" alt="logo instagram" srcset="">
</a>
<a href="https://wa.me/5521974471841">
<img src="./Fotos/whatsapp.png" alt="logo WhatsApp" srcset="">
</a>
<a href="https://discord.com/channels/@me">
<img src="./Fotos/discordia (1).png" alt="logo discord" srcset="">
</a>
</div>
</footer>
<div class="layout">
<p>© 2024 Maurício Souza</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
</html>