-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
194 lines (186 loc) · 11.1 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
<!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">
<meta name="google-site-verification" content="nq24uk0FBh4b2r4BHBjwyp5nL7lWuFnX7641dR8d2Vw" />
<meta name="description"
content="Desenvolvedor apaixonado por tecnologia, café, fotografia e desafios. Olhar curioso e crítico sobre o mundo, a vida e as pessoas.">
<link rel="stylesheet" href="bootstrap/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="fontawesome-free-5.15.3-web/css/all.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Caveat&family=Raleway:wght@500&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="bootstrap/bootstrap/dist/js/bootstrap.bundle.js"></script>
<title>Wivson Machado</title>
</head>
<body class="body background-gradient">
<nav class="navbar navbar-expand navbar-expand-lg fixed-top background-gradient shadow-nav">
<div class="navbar-nav ml-auto">
<div class="nav-item dropdown dropleft">
<span class="fas fa-bars fa-2x text-white nav-link dropdown-toggl" data-toggle="dropdown"
id="dropdownMenuLink" role="button" aria-haspopup="true" aria-expanded="false"></span>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Inicio</a>
<a class="dropdown-item" href="#sobre">Sobre mim</a>
<a class="dropdown-item" href="#projetos">Projetos</a>
</div>
</div>
</div>
</nav>
<div class="container d-flex opacidade text-white h-100">
<div class="row box-principal align-self-center align-items-center">
<div class="col-12 col-sm-5 col-md-5 p-5 p-sm-0">
<img class="img-fluid img-width" src="images/Foto_perfil-square.png">
</div>
<div class="col-10 col-sm-6 col-md-6 justify-content-center">
<div class="row h-100">
<div class="w-100 align-self-center p-2 mt-5">
<h1 class="h4 text-center mt-2">WIVSON MACHADO</h1>
<p class="h5 text-center p-4" style="font-family: 'Architects Daughter', cursive;">Apaixonado
por tecnologia, café, fotografia e desafios.</p>
</div>
<div class="d-flex w-100 justify-content-center align-self-end">
<div class="col-2 col-sm-1 col-md-1 mr-sm-3">
<a href="https://github.com/wivsonmachado" id="link-contato" target="_blank"><i
class="fab fa-github fa-2x"></i></a>
</div>
<div class="col-2 col-sm-1 col-md-1 mr-sm-3">
<a href="https://twitter.com/wivson_machado" id="link-contato" target="_blank"><i
class="fab fa-twitter fa-2x"></i></a>
</div>
<div class="col-2 col-sm-1 col-md-1">
<a href="mailto:[email protected]" id="link-contato" target="_blank"><i
class="fas fa-at fa-2x"></i></a>
</div>
</div>
</div>
</div>
<div class="col-2 col-sm-1 col-md-1 justify-content-center align-self-center d-inline">
<i class="fas fa-code fa-2x py-2 icones"></i>
<i class="fas fa-coffee fa-2x py-2 icones"></i>
<i class="fas fa-camera fa-2x py-2 icones "></i>
<i class="fas fa-puzzle-piece fa-2x py-2 icones"></i>
</div>
</div>
</div>
<hr class="hr3">
<div class="container h-auto text-white" id="sobre">
<div class="row mt-4 p-md-3 mt-md-5">
<div class="col-12 col-md-12 mt-5 pt-0 mt-md-5 pt-md-0">
<h1 class="h1 text-right m-0 pt-3 pt-sm-3 pt-md-3">Sobre mim</h1>
</div>
<div class="col-12 col-sm-12 col-md-6 mt-md-5">
<h3 class="h3">Quem sou eu?</h3>
<p class="text-justify" style="text-indent: 1rem;">Um curioso compulsivo e insatisfeito com respostas
simples. A simplicidade é bela mas a complexidade é o que torna o que nós somos. Respostas como:
<u>porque sim</u>, <u>porque não</u> e <u>é assim e ponto</u>, definitivamente não são aceitas pelo
meu cérebro e de algum modo eu vou em busca do motivo ou da razão daquilo.
<p class="text-justify" style="text-indent: 1rem;">O que não sei pergunto, o que sei repasso. Acredito
que o aprendizado sobre qualquer coisa deve ser repassado, somos ao mesmo tempo professor e aluno.
</p>
</p>
</div>
<div class="col-12 col-sm-12 col-md-6 esconder-elemento">
<div class="citacao">
<q class="blockquote p-0 m-0">a simplicidade é bela mas a complexidade é o que torna o que nós
somos</q>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 esconder-elemento">
<div class="citacao">
<q class="blockquote p-0 m-0">a tecnologia é um amor de adolescência que foi reencontrado na fase
adulta</q>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6">
<h3 class="h3">Eu e a tecnologia</h3>
<p class="text-justify" style="text-indent: 1rem; ">Meu primeiro encontro com a tecnologia foi aos 16
anos com HTML, decorando tags e escrevendo páginas inteiras em bloco de notas, por algum motivo a
vida nos separou e eu a reencontrei aos 31 anos desenvolvendo planilhas com VBA. A tecnologia é um
amor de adolescência que foi reencontrado na fase adulta.
<p class="text-justify" style="text-indent: 1rem;">Depois de muitos anos voltei a estudar HTML e me
deparei com um outro mundo 15 anos depois: HTML5, CSS3, JavaScript, frameworks. Paixão antiga e
novos aprendizados.</p>
</p>
</div>
<div class="col-12 col-sm-12 col-md-6 mt-3 esconder-elemento">
<h3 class="h3">O que eu sei?</h3>
<p class="text-justify" style="text-indent: 1rem;">O conhecimento é algo fluido, hoje sei mais que ontem
e menos que amanhã, o sentimento de continuidade do aprendizado é algo enraizado em mim.</p>
</div>
<div class="col-12 col-sm-12 col-md-6 mt-3">
<div class="row">
<div class="col-5 col-md-4">
<h5 class="h5">HTML</h5>
</div>
<div class="col-7 col-md-8 pt-2">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 80%; background-color: hsl(96, 80%, 45%);" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div>
</div>
</div>
<div class="col-5 col-md-4">
<h5 class="h5">CSS3</h5>
</div>
<div class="col-7 col-md-8 pt-2">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 60%; background-color: hsl(72, 80%, 45%);" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div>
</div>
</div>
<div class="col-5 col-md-4">
<h5 class="h5">JavaScript</h5>
</div>
<div class="col-7 col-md-8 pt-2">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 75%; background-color: hsl(90, 80%, 45%);" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="hr3">
<div class="container h-100 text-white" id="projetos">
<div class="row">
<div class="col-12 d-flex justify-content-center my-5 pt-5">
<h1 class="display-5">PROJETOS</h1>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-6 d-flex justify-content-center p-4">
<div class="card text-secondary pb-4">
<img class="card-img-top" src="images/projetos/Gerador.gif" alt="Imagem de capa do card">
<div class="card-body">
<h5 class="card-title">Gerador de senhas</h5>
<p class="card-text">Gerador de senhas criado com JavaScript, HTML5 e CSS3. Crie senhas
aleatórias e seguras, o app conta com código que mede a força da senha gerada.</p>
</div>
<div class="d-flex justify-content-center">
<a href="projetos/geradorSenha.html" class="btn-wi-card mr-3" target="_blank">Visitar</a>
<a class="btn-wi-card" href="https://github.com/wivsonmachado/passwordGenerator"
target="_blank"><i class="fab fa-github fa-1x"></i>Repositorio</a>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 d-flex justify-content-center p-4">
<div class="card text-secondary pb-4">
<img class="card-img-top" src="images/projetos/praticagemSearch.gif" alt="Imagem de capa do card">
<div class="card-body">
<h5 class="card-title">Praticagem Search</h5>
<p class="card-text">Praticagem Search é um sistema de busca de navios que estão na listagem da praticagem do Rio de janeiro para manobra na baía de guanabara, o sistema faz um web scrapring no site oficial da praticagem-rj, retorna uma API em formato Json e o site busca o navio dentro da API, retornando de forma ordenada a manobra para o usuário.</p>
</div>
<div class="d-flex justify-content-center">
<a href="http://www.praticagemsearch.app.br/" class="btn-wi-card mr-3" target="_blank">Visitar</a>
<a class="btn-wi-card" href="https://github.com/wivsonmachado/praticagemSearch"
target="_blank"><i class="fab fa-github fa-1x"></i>Repositorio</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>