-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
261 lines (228 loc) · 14.1 KB
/
index.html
File metadata and controls
261 lines (228 loc) · 14.1 KB
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
<!--Este modelo é compartilhável, modificável e está comentado por Roberto Nóbrega (http://github.com/devrenj)-->
<!--Projeto desenvolvido com o conceito Mobile First, quer aprender HTML5? Acesse: https://www.cursoemvideo.com/curso/html5/-->
<!--O conteúdo disposto é atualizado frequentemente. Acompanhe o desenvolvimento pelos Commits no GitHub-->
<!-- Para inserir seus dados, pesquise pela palavra "MODIFICAR" -->
<!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" />
<!--Configurações para mostrar no compartilhamento-->
<!-- MODIFICAR para seus dados -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Roberto Nóbrega Jr." />
<meta property="og:description" content="Analista de Sistemas e BI" />
<meta property="og:url" content="https://www.devrenj.github.io" />
<meta property="og:image" content="/src/images/og.jpeg" />
<!-- MODIFICAR em src/images o arquivo og.jpeg (recomendo ser estático) -->
<meta property="og:image:type" content="image/jpeg"> <!-- Extensão da imagem -->
<meta property="og:image:width" content="300"> <!-- Não alterar -->
<meta property="og:image:height" content="300"> <!-- Não alterar -->
<meta name="theme-color" content="#00d4ff" />
<!-- Adicionando Bootstrap 5 ao projeto -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<!-- Adicionando Sweet Alert -->
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<!--Aqui estamos conectando o 'style.css' ao html, para estilizarmos a página em CSS-->
<link rel="stylesheet" href="./src/styles/style.css" />
<!--Favicon-->
<link rel="mask-icon" href="https://img.icons8.com/3d-fluency/32/source-code.png" />
<link rel="alternate icon" class="js-site-favicon" type="image/png"
href="https://img.icons8.com/3d-fluency/32/source-code.png" />
<!--Defina aqui o título da página-->
<title>Perfil @Devrenj - Roberto Nóbrega Jr.</title> <!-- MODIFICAR para seu nome -->
</head>
<body class="d-flex flex-column">
<div class="container-fluid m-0 p-0 flex-grow-1">
<!-- Mensagem de confirmação, aparece quando clica em compartilhar -->
<!-- Modal -->
<div id="modal" class="modal fade" tabindex="-1" aria-labelledby="Botões para compartilhar" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered pb-5">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="modalLabel">Compartilhar nas redes</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body d-flex align-items-center justify-content-center w-100 p-2 my-4">
<ul class="list-inline d-flex justify-content-center align-items-center gap-md-2 flex-wrap">
<li class="list-inline-item d-flex mx-0 justify-content-center align-items-center">
<!-- WhatsApp -->
<img id="whatsapp" class="modal-btn" src="./src/svg/icons8-whatsapp.svg" aria-label="Whatsapp"
data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Whatsapp"></img>
</li>
<li class="list-inline-item d-flex mx-0 justify-content-center align-items-center">
<!-- Facebook -->
<img id="facebook" class="modal-btn" src="./src/svg/icons8-facebook.svg" aria-label="Facebook"
data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Facebook"></img>
</li>
<li class="list-inline-item d-flex mx-0 justify-content-center align-items-center">
<!-- Telegram -->
<img id="telegram" class="modal-btn" src="./src/svg/icons8-telegram-app.svg" aria-label="Telegram"
data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Telegram"></img>
</li>
<li class="list-inline-item d-flex mx-0 justify-content-center align-items-center">
<!-- X (Twitter) -->
<img id="x" class="modal-btn" src="./src/svg/icons8-twitterx.svg" aria-label="X/Twitter"
data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="X/Twitter"></img>
</li>
<li class="list-inline-item d-flex mx-0 justify-content-center align-items-center">
<!-- LinkedIn -->
<img id="linkedin" class="modal-btn" src="./src/svg/icons8-linkedin.svg" aria-label="Linkedin"
data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Linkedin"></img>
</li>
<li class="list-inline-item d-block justify-content-center">
<!-- Copiar Link -->
<img id="copiar" class="modal-btn" src="./src/svg/bi-copy.svg" aria-label="Copiar link"
data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Copiar link"></img>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Conteiner principal -->
<!--Foto-->
<header class="my-0 my-md-2 d-md-flex flex-md-row justify-content-md-center">
<div class="mt-2 d-flex justify-content-center">
<a href="https://github.com/devrenj"> <!-- MODIFICAR para seu perfil do GitHub -->
<button class="foto rounded-circle mx-md-3" data="foto" aria-label="@Devrenj" data-bs-toggle="tooltip"
data-bs-placement="bottom" data-bs-title="@Devrenj"></button>
</a>
</div>
<section class=" p-2 my-0 my-md-4 d-flex flex-column justify-content-center align-items-center">
<!--Defina o seu nome-->
<div class="d-flex flex-row">
<h3 class="fw-bold fs-sm-5">Roberto Nóbrega Jr.</h3> <!-- MODIFICAR para seu nome -->
<div class="d-flex flex-column flex-sm-row ms-2 gap-1">
<!-- MODIFICAR defina seu país e estado em script.js -->
<img id="bandeira-pais" src title alt="Bandeira do País"></img><img id="bandeira-estado" src title
alt="Bandeira do Estado" title="Bandeira do Estado"></img>
</div>
</div>
<!--Defina um subtitulo-->
<p class="lead my-0 fs-sm-6">Analista de Sistemas e BI</p> <!-- MODIFICAR para sua especialidade -->
<!-- Tecnologias desenvolvidas -->
<section class="my-2 my-md-4 d-flex flex-column justify-content-center align-items-center">
<!-- MODIFICAR para as suas tecnologias desenvolvidas (separando por virgula) -->
<!-- Lista em https://github.com/tandpfun/skill-icons -->
<img class="w-100 mx-auto d-block tecnologias"
src="https://skillicons.dev/icons?i=obsidian,kali,python,go,vscode,html,css,js,bootstrap,git,markdown,powershell,ai&theme=light"
aria-label="Tecnologias que desenvolvo" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-title="Habilidades que utilizo">
</section>
</section>
</header>
<!--Botão de testes, ative caso necessário testar alguma função -->
<!-- <div class="d-flex justify-content-center align-items-center">
<button id="teste" class="btn text-bg-primary my-1">Alerta</button>
</div> -->
<!--Ícones de Redes Sociais-->
<!-- A funcionalidade dos botões abaixo está no arquivo script.js na seção de Botões -->
<!-- Used icons8 icons templates -->
<nav class="redes-sociais container d-flex py-2 justify-content-center align-items-center flex-nowrap">
<!-- MODIFICAR de acordo com sua necessidade -->
<!-- Botão Whatsapp -->
<ul class="list-inline mb-0 d-flex flex-row justify-content-center align-items-center gap-md-2 flex-nowrap">
<li class="list-inline-item d-none mx-0 justify-content-center align-items-center">
<img src="https://img.icons8.com/fluency/40/whatsapp.png" class="nav-btn" data-platform="whatsapp"
aria-label="Entre em contato" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-title="Entre em contato"></img>
</li>
<!-- Botão Pix -->
<ul class="list-inline mb-0 d-flex flex-row justify-content-center align-items-center gap-md-2 flex-nowrap">
<li class="list-inline-item d-none mx-0 justify-content-center align-items-center">
<img src="https://img.icons8.com/color/40/pix.png" class="nav-btn" data-platform="pix"
aria-label="Apoie meu trabalho" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-title="Apoie meu trabalho"></img>
</li>
<!-- Botão GitHub -->
<li class="list-inline-item d-none mx-0 justify-content-center align-items-center">
<img src="https://img.icons8.com/fluency/40/000000/github.png" class="nav-btn" data-platform="github"
aria-label="Ver meus projetos" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-title="Ver meus projetos"></img>
</li>
<!-- Botão E-mail -->
<li class="list-inline-item d-none mx-0 justify-content-center align-items-center">
<img src="https://img.icons8.com/fluency/40/000000/mail.png" class="nav-btn" data-platform="email"
aria-label="Mande um e-mail para mim" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-title="Mande um e-mail para mim"></img>
</li>
<!-- Botão LinkedIn -->
<li class="list-inline-item d-none mx-0 justify-content-center align-items-center">
<img src="https://img.icons8.com/fluency/40/000000/linkedin.png" class="nav-btn" data-platform="linkedin"
aria-label="Perfil do LinkedIn" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-title="Perfil do LinkedIn"></img>
</li>
<!-- Botão Instagram -->
<li class="list-inline-item d-none mx-0 justify-content-center align-items-center g-0">
<img src="https://img.icons8.com/fluency/40/instagram-new.png" class="nav-btn" data-platform="instagram"
aria-label="Perfil do Instagram" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-title="Perfil do Instagram"></img>
</li>
<!-- Botão Compartilhar -->
<li class="list-inline-item d-none mx-0 justify-content-center align-items-center">
<img
src="https://img.icons8.com/external-others-inmotus-design/40/external-Link-round-icons-others-inmotus-design-5.png"
class="nav-btn" data-action="compartilhar" id="compartilhar" data-bs-toggle="tooltip"
data-bs-toggle="modal" data-bs-target="#modal" aria-label="Compartilhe este perfil!"
data-bs-placement="top" data-bs-title="Compartilhe este perfil!"></img>
</li>
</ul>
</nav>
<!-- A funcionalidade dos botões abaixo está no arquivo src/script/script.js na seção de Menu -->
<!-- MODIFICAR conforme sua preferência -->
<main class="d-flex flex-column p-0">
<section class="my-3 d-flex flex-column justify-content-center align-items-center botoes-projetos">
<!-- Botão Curriculum Vitae -->
<a href="https://tinyurl.com/devrenj-curriculum" target="_blank">
<button class="botao-menu botao-verde" role="button" aria-label="Acesse meu currículo"
data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Acesse meu currículo"><span
class="titulo-botao">Curriculum Vitae</span><br><span class="descricao">
Habilidades e Competencias
</span>
</button>
</a>
<!-- Botão Descomplicados -->
<a href="https://devrenj.github.io/descomplicados" target="_blank">
<button class="botao-menu botao-verde-azul" role="button"
aria-label="Projeto Acadêmico do curso de Análise e Desenvolvimento de Sistemas" data-bs-toggle="tooltip"
data-bs-placement="top"
data-bs-title="Projeto Acadêmico do curso de Análise e Desenvolvimento de Sistemas"><span
class="titulo-botao">Descomplicados</span><br><span class="descricao">Projeto Acadêmico do curso de
ADS</span></button>
</a>
<!-- Botão Babysteps -->
<a href="https://devrenj.github.io/babysteps" target="_blank">
<button class="botao-menu botao-azul-claro" role="button" aria-label="Roadmap para iniciantes"
data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Roadmap para iniciantes"><span
class="titulo-botao">Babysteps</span><br><span class="descricao">Comece por
aqui</span></button>
</a>
<!-- Botão DevLib -->
<a href="https://devrenj.github.io/devLib" target="_blank">
<button class="botao-menu botao-roxo" role="button" aria-label="Biblioteca do Desenvolvedor"
data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Biblioteca do Desenvolvedor"><span
class="titulo-botao">DevLib</span><br><span class="descricao">Biblioteca de
Desenvolvimento</span></button>
</a>
<!-- Botão Run -->
<a href="https://devrenj.github.io/run" target="_blank">
<button class="botao-menu botao-azul" role="button" aria-label="Execute diretamente os projetos"
data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Execute diretamente os projetos"><span
class="titulo-botao">Run</span><br><span class="descricao">Projetos
Executaveis</span></button>
</a>
</section>
</main>
</div>
<footer class="pt-1 w-100 align-self-end text-center align-items-center">
Copyright © 2023 Roberto Nóbrega Jr. <!-- MODIFICAR para seu nome -->
</footer>
<script src="./src/script/script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
crossorigin="anonymous"></script>
</body>
</html>