-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
303 lines (273 loc) · 16.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 http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Diogo Silas - Desenvolvedor Front-end</title>
<meta name="description" content="Portfólio do Diogo Silas.">
<!-- Styles: -->
<link rel="stylesheet" href="./src/css/reset.css" />
<link rel="stylesheet" href="./src/css/globais.css" />
<link rel="stylesheet" href="./src/css/variables.css" />
<link rel="stylesheet" href="./src/css/sections/header.css" />
<link rel="stylesheet" href="./src/css/sections/home.css" />
<link rel="stylesheet" href="./src/css/sections/about.css" />
<link rel="stylesheet" href="./src/css/sections/skills.css" />
<link rel="stylesheet" href="./src/css/sections/certificates.css" />
<link rel="stylesheet" href="./src/css/sections/projects.css" />
<link rel="stylesheet" href="./src/css/sections/contact.css" />
<link rel="stylesheet" href="./src/css/sections/footer.css" />
<link rel="stylesheet" href="./src/css/sections/modal-window.css">
<link rel="stylesheet" href="./src/css/mediaqueries.css">
<!--Google Fontes-->
<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 fontes-->
<!--Bootstrap Icons-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!--Fim Bootstrap Icons-->
<!--Styles Icones:-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!--Scripts JS-->
<script src="./src/scripts/javascript/index.js" defer></script>
<script src="https://unpkg.com/scrollreveal" defer></script>
<script src="./src/scripts/javascript/reveal.js" defer></script>
</head>
<body>
<header class="header">
<a href="#" target="_top">
<h1 class="logo"><<span>DS</span> Dev/></h1>
</a>
<nav class="menu-desktop">
<ul>
<li><a href="#about">Sobre</a></li>
<li><a href="#skills">Habilidades</a></li>
<li><a href="#certificates">Certificados</a></li>
<li><a href="#projects">Projetos</a></li>
<li><a href="#contact">Contatos</a></li>
</ul>
</nav>
<button class="btn-open-menu" id="btn-open-menu"><i class="bi bi-list"></i></button>
<div class="menu-mobile" id="menu-mobile">
<button class="btn-close-menu" id="btn-close-menu"><i class="bi bi-x-lg"></i></button>
<nav>
<ul>
<li><a href="#">Início</a></li>
<li><a href="#about">Sobre</a></li>
<li><a href="#skills">Habilidades</a></li>
<li><a href="#certificates">Certificados</a></li>
<li><a href="#projects">Projetos</a></li>
<li><a href="#contact">Contatos</a></li>
</ul>
<div class="redes-sociais-menu">
<a href="https://www.linkedin.com/in/diogosilasds/" target="_blank"><i class="fab fa-linkedin-in"></i></a>
<a href="https://github.com/DiogoSilas" target="_blank"><i class="fab fa-github"></i></a>
<a href="https://www.instagram.com/diogosilas_ds/" class="" target="_blank"><i
class="fab fa-instagram"></i></a>
</div>
</nav>
</div><!-- Menu Mobile -->
<div id="overlay-menu-mobile" class="overlay-menu-mobile"></div><!--overlay-menu-mobile-->
</header><!--Interface-->
<main>
<section class="home interface">
<div class="txt-home">
<p>Olá 🎈,</p>
<h1>Sou o Diogo Silas,</h1>
<h2 class="txt-animation">Estudante de Softwares e Inteligência Artificial (IA's)</h2>
<a href="https://www.linkedin.com/in/diogosilasds/" target="_blank"><i class="fab fa-linkedin-in"></i></a>
<a href="https://github.com/DiogoSilas" target="_blank"><i class="fab fa-github"></i></a>
<a href="#contact" target="_self"><i class="fas fa-envelope"></i></a>
<a href="https://www.instagram.com/diogosilas_ds/" class="" target="_blank"><i class="fab fa-instagram"></i></a>
</div><!--TEXT TOPO SITE -->
<div class="img-home"><img src="./assets/images/foto-perfil.jpg" alt="Foto de Perfil do Diogo Silas" /></div>
<!--IMG TOPO SITE-->
<i id="arrow-down" class="fa-solid fa-arrow-down"></i>
</section><!--Home-->
<aside class="about interface">
<div class="titulos" id="about">
<h2 class="titulo">Sobre mim</h2>
<h3 class="sub-titulo">Quem Sou eu?</h3>
</div>
<section class="container">
<img src="./assets/images/foto-section-about.png">
<div class="txt-about">
<h2>Muito prazer,<span>Sou Diogo Silas.</span></h2>
<p>
Com base nos meus interesses, é evidente que sou uma pessoa profundamente comprometida com o autoaperfeiçoamento, a aquisição de conhecimento e a exploração de várias facetas da vida. Tenho uma grande curiosidade para entender os mistérios da natureza, como a história da educação e das artes, particularmente música e literatura.
</p>
<p>
Além disso, meu envolvimento com testes de personalidade como o Big Five, DISC e o MBTI demonstra um forte desejo de me entender melhor, identificar pontos fortes, motivações e trabalhar em áreas de crescimento. Reconheço a importância da autoconsciência e como isso pode levar ao desenvolvimento pessoal e a interações eficazes com os outros.
</p>
<p>
Esse engajamento revela uma abordagem proativa para a aprendizagem e a solução de problemas, como visto no interesse em IA, GPTs e estratégias para criar um segundo cérebro. Valorizo o processo de experimentação e melhoria contínua, buscando otimizar habilidades cognitivas e aprimorar a saída criativa.
</p>
<p>
Em conclusão, a dedicação à aprendizagem ao longo da vida, autodescoberta e crescimento holístico brilham através desses interesses, mostrando um indivíduo multifacetado com sede de conhecimento, uma paixão por conexões humanas e um impulso pelo desenvolvimento pessoal. O compromisso de explorar diversos campos e abraçar novos desafios me posiciona como um indivíduo dinâmico e intelectualmente curioso em busca de excelência e realização.
</p>
<a href="https://drive.google.com/file/d/1NpF0CwtcptntkYysboy9VNfQTZb518E9/view?usp=sharing" target="_blank"><button>Visualizar Currículo</button></a>
<a href="mailto:diogosilascontato@gmail.com" target="_blank"><button>ENVIAR E-MAIL</button></a>
</section><!-- Container Sobre Mim -->
</div>
</aside><!--SOBRE MIM -->
<section class="skills interface">
<div class="titulos" id="skills">
<h2 class="titulo">Serviços</h2>
<h3 class="sub-titulo">O que forneço?</h3>
</div>
<section class="container">
<section class="skill">
<i class="bi bi-infinity"></i>
<h3>Inteligência Artificial (IA's)</h3>
<p>Ao abranger desde algoritmos e AWS até GDPR e mineração de dados, compilo informações que não só esclarecem os conceitos, mas também fomentam uma comunicação mais eficaz entre profissionais e entusiastas da inteligência artificial (IA). Não apenas para o aprimoramento do conhecimento, mas também para facilitar minhas pesquisas e impulsionar a IA em direção a novas possibilidades e inovações em diversas esferas da sociedade.</p>
</section>
<section class="skill">
<i class="bi bi-braces"></i>
<h3>Programação Web</h3>
<p>Desenvolvimento Front-end e futuramente o Back-end, estou pronto em colocar os meus estudos em prática e
poder ir
adquirindo conhececimentos para transformar sites eficientes e de alta performance para os usuários.</p>
</section>
<section class="skill">
<i class="bi bi-code-slash"></i>
<h3>Front-End</h3>
<p>Desenvolvo interfaces especializados em entregar os sites responsivos, desde a codificação, até a
implementação
de animações e interações, garantindo uma experiência do usuário fluida e otimizada.</p>
<ul>
<li>React.JS</li>
<li>JavaScript</li>
<li>Obsidian</li>
<li>Notion</li>
<li>Figma</li>
<li>CSS3</li>
<li>HTML5</li>
</ul>
</section>
</section><!-- Container das Skills -->
</section><!-- SKILLS - SERVIÇOS -->
<section class="certificates interface">
<div class="titulos" id="certificates">
<h2 class="titulo">Certificados</h2>
<h3 class="sub-titulo">Cursos</h3>
</div>
<section class="container">
<section class="certificate">
<h3>Dev Quest</h3>
<div>
<img src="./assets/images/certificates/dev-quest.png" alt="">
<p>Curso de Desenvolvimento Web FullStack, que através das inúmeras monitorias, mentorias, desafios corrigidos por desenvolvedores experientes, conteúdos diretos e organizados, e análise de redes e currículo, desenvolvem as habilidades de um desenvolvedor através da prática constante e incentivo à metodologias eficazes de estudo.</p>
</div>
<a href="#" target="_blank">Em Andamento</a>
</section><!--certificate-->
<section class="certificate">
<h3>Obsidian</h3>
<div>
<img src="./assets/images/certificates/obsidian.png">
<p>O Obsidian permite criar notas em que, cada uma representando um conceito específico. Essas notas podem ser interconectadas, formando uma rede de ideias, uma estrutura que ajuda a organizar o conhecimento de maneira mais eficaz.</p>
</div>
<a href="#" target="_blank">Ver certificados</a>
</section><!--certificate-->
<section class="certificate">
<h3>Reservatório de Dopamina</h3>
<div>
<img src="./assets/images/certificates/reservatorio-dopamina.png" alt="">
<p>Em um mundo que parece incentivar apenas comportamentos disfuncionais, como beber em excesso, dormir mal, usar entorpecentes e só reclamar, o RD nada contra a maré e ensina que uma rotina regrada é o melhor caminho para uma vida feliz. Com as nossas aulas, você vai descobrir como não há nada melhor que acordar tranquilo.</p>
</div>
<a href="#" target="_blank">Em andamento</a>
</section><!--certificate-->
</section><!--Container certificates-->
</section><!--Certificates-->
<section class="projects interface">
<div class="titulos" id="projects">
<h2 class="titulo">Projetos</h2>
<h3 class="sub-titulo">Meu portfólio</h3>
</div>
<section class="container">
<section class="project">
<img src="./assets/images/projects/portfolio.png" alt="Imagem" class="section-image">
<h3>Portfólio</h3>
<p>O portfólio, nesse cenário, configura-se como uma compilação meticulosa de trabalhos anteriores, destacando projetos de criação e design de sites. Esse conjunto oferece uma visão concisa e eficaz das habilidades e experiências.</p>
<footer>
<a class="btn-project" href="https://www.instagram.com/diogosilas_ds/" target="_blank">Saiba Mais</a>
<div class="social-icons">
<a href="https://diogosilas.github.io/diogo-silas-portfolio/" target="_blank"><i class="bi bi-link-45deg"></i></a>
<a href="https://github.com/DiogoSilas/diogo-silas-portfolio" target="_blank"><i class="bi bi-github"></i></a>
</div>
</footer>
</section> <!--Project-->
<section class="project">
<img src="./assets/images/projects/landing-page.png" alt="Imagem" class="section-image">
<h3>Landing Page</h3>
<p>Uma página web projetada para direcionar visitantes para uma ação específica, fazer uma compra. Essa página é simplificada, focada e persuasiva, com elementos como títulos impactantes e chamadas de ação claras.</p>
<footer>
<a class="btn-project" href="https://www.instagram.com/diogosilas_ds/" target="_blank">Saiba Mais</a>
<div class="social-icons">
<a href="https://diogosilas.github.io/landingPageGTA/" target="_blank"><i class="bi bi-link-45deg"></i></a>
<a href="https://github.com/DiogoSilas/landingPageGTA" target="_blank"><i class="bi bi-github"></i></a>
</div>
</footer>
</section>
<section class="project">
<img src="./assets/images/projects/githubApi.png" alt="Imagem" class="section-image">
<h3>GitHub API</h3>
<p>O projeto em foco incorpora a API do GitHub para apresentar informações abrangentes sobre um usuário específico. Ao integrar essa API, a aplicação consegue exibir detalhes como a biografia, lista de projetos e a foto de perfil do usuário. Essa abordagem permite uma visualização rápida e conveniente das contribuições e interesses do usuário na plataforma GitHub, oferecendo uma experiência informativa e interativa.</p>
<footer>
<a class="btn-project" href="https://www.instagram.com/diogosilas_ds/" target="_blank">Saiba Mais</a>
<div class="social-icons">
<a href="https://diogosilas.github.io/github-api/" target="_blank"><i class="bi bi-link-45deg"></i></a>
<a href="https://github.com/DiogoSilas/github-api" target="_blank"><i class="bi bi-github"></i></a>
</div>
</footer>
</section>
</section><!-- Container dos Projetos -->
</section><!--Projetos -->
<section class="contact interface">
<div class="titulos" id="contact">
<h2 class="titulo">Contato</h2>
<h3 class="sub-titulo">Fale Comigo</h3>
</div>
<section class="container">
<p>Agradeço por ter dedicado seu tempo para conhecer um pouco da minha jornada. <strong>Sinta-se à vontade para entrar em contato
</strong>.</p>
<section>
<form class="form" method="POST" action="https://formsubmit.co/diogosilascontato@gmail.com">
<input type="text" name="username" id="username" placeholder="Seu Nome Completo:" required
autocomplete="off">
<input type="email" name="email" id="email" placeholder="Seu E-mail:" required autocomplete="off">
<input type="number" name="phone" id="phone" placeholder="Seu Celular: (DDD) Numero" pattern="[0-9]{11}"
autocomplete="off">
<textarea name="message" id="message" placeholder="Sua Mensagem" required></textarea>
<button id="btn-enviar" type="submit" value="enviar">Enviar</button>
<input type="hidden" name="_next" value="https://diogosilas.github.io/diogo-silas-portfolio/">
<input class="input-of-docum" type="hidden" name="_subject" value="Portfólio - Nova mensagem">
<input type="hidden" name="_autoresponse" value="Obrigado pela mensagem. Responderei em breve.">
<input class="input-of-docum" type="hidden" name="_honey">
<input class="input-of-docum" type="hidden" name="_captcha" value="true">
</form>
</section><!--Fim da seção do formulário-->
</section><!--Container do Formulário para contato-->
</section><!-- FORMULÁRIO PARA CONTATO -->
</main>
<footer class="footer interface">
<section class="redes-sociais">
<h3 class="logo-copyright">© Diogo Silas <i class="fa-solid fa-heart"></i></h3>
<div>
<a href="https://www.linkedin.com/in/diogosilasds/" target="_blank"><i class="fab fa-linkedin-in"></i></a>
<a href="https://github.com/DiogoSilas" target="_blank"><i class="fab fa-github"></i></a>
<a href="https://www.instagram.com/diogosilas_ds/" target="_blank"><i class="fab fa-instagram"></i></a>
</div>
</section><!--Logo e Redes sociais do Footer-->
<section class="email">
<i class="fas fa-envelope"></i><a href="mailto:diogosilascontato@gmail.com"
target="_blank">diogosilascontato@gmail.com</a>
</section><!--Email do Footer-->
</footer>
</body>
</html>