-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
309 lines (288 loc) · 17.9 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
304
305
306
307
308
309
<!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>Gabriel Web Developer</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/51f7ea6787.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Menu feito no bootstrap -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary ">
<div class="container-fluid">
<a class="navbar-brand" href="#">Gabriel Web Developer</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse align-items-center justify-content-end " id="navbarNav">
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Início</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#conhecimentos">Conhecimentos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#servicos">Serviços</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfólio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#metodologia">Metodologia</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contato">Contato</a>
</li>
</ul>
</div>
</div>
</nav>
<section id="topo">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-12 text-center" id="titulo-topo">
<h1>Gabriel Vasconcelos - Web Developer</h1>
</div>
</div>
</div>
<div class="container">
<div class="row align-items-center justify-content-center ">
<div class="col-md-6 text-center " id="caixa-perfil">
<img src="img/perfil.jpg" alt="foto do Gabriel" id="foto-perfil">
<h2>Gabriel Vasconcelos</h2>
<p>Olá, meu nome é Gabriel Vasconcelos, tenho 22 anos e sou apaixado pelo universo da programação. Sou estudante de engenharia, mas a programação é o meu grande hobby. Logo abaixo é possível acessar minhas redes socias.</p>
<div class="row">
<div class="col-3"><a href="https://api.whatsapp.com/send?phone=5585991387335" target="_blank"><i class="fab fa-whatsapp"></i></a></div>
<div class="col-3"><a href="https://www.linkedin.com/in/gabrielsvasconcelos/" target="_blank"><i class="fab fa-linkedin"></i></a></div>
<div class="col-3"><a href="https://github.com/gabrielsvasconcelos" target="_blank"><i class="fab fa-github"></i></a></div>
<div class="col-3"><a href="mailto:[email protected]" target="_blank"><i class="fas fa-envelope"></i></a></div>
</div>
</div>
<div class="col-md-6 bg-light text-center" id="resumo">
<h2>Breve resumo</h2>
<p> Trabalho na empresa júnior do meu curso, no setor de Gente e Gestão e também trabalho como freelancer de Front-end. Durante toda a minha vida sempre gostei de computadores, então não tenho problemas com programas como o Word, Excel, Power Point, Photoshop e afins. Eu programo desde os 12 anos, minha área preferida é o desenvolvimento web, tenho conhecimento em HTML5, CSS3, Javascript, Bootstrap etc. Minha especialidade são Landing pages, mas também trabalho com sites normais. Tenho um inglês intermediário, consigo ler e escrever textos em inglês razoavelmente bem e consigo acompanhar diálogos básicos.</p>
</div>
</div>
</div>
</section>
<section id="conhecimentos">
<div id="container">
<div class="row text-center">
<div class="col-12">
<h2>Conhecimentos</h2>
<hr>
</div>
</div>
<div id="icones-conhecimentos">
<div class="icone" ><i class="fab fa-html5"></i></br><h3>HTML 5</h3></div>
<div class="icone" ><i class="fab fa-css3-alt"></i></br><h3>CSS 3</h3></div>
<div class="icone" ><i class="fab fa-js-square"></i></br><h3>JAVASCRIPT</h3></div>
<div class="icone" ><i class="fab fa-bootstrap"></i></br><h3>BOOTSTRAP</h3></div>
<div class="icone" ><i class="fab fa-wordpress"></i></br><h3>WORDPRESS</h3></div>
<div class="icone" ><i class="fab fa-php"></i></br><h3>PHP</h3></div>
</div>
</div>
</section>
<section id="servicos">
<h2>Serviços</h2>
<article>
<div class="caixa-servico">
<h3>Web Developer</h3>
<p>Criação de Sites, Blogs, Portais, criação de Landing Pages e criação de Sistemas Web em geral</p>
</div>
<div class="caixa-servico">
<h3>SEO</h3>
<p> Modifico o seu site para que ele seja uma das primeiras opções quando alguém pesquisar no Google, com isso suas vendas e visualizações do site irão aumentar bastante</p>
</div>
<div class="caixa-servico">
<h3>Manutenção de Sites</h3>
<p>Vou deixar seu site bonito, bem apresentável e moderno, visando acompanhar os avanços tecnológicos, digitais e até mesmo de segurança</p>
</div>
<div class="caixa-servico">
<h3>Suporte</h3>
<p>Vou fornecer ajuda sempre que tiver algum problema, seja com SEO, desempenho, manutenção e afins. Quando precisar alterar alguma cor, texto ou imagem eu lhe ajuderei</p>
</div>
</article>
</section>
<section id="portfolio">
<h2>Portfólio</h2>
<hr>
<p>O início é sempre meio tortuoso, mas quem não começa nunca termina, certo? Portanto, estes são alguns de meus trabalhos</p>
<article id="modelos-sites">
<!-- Início do card-->
<div class="conteiner">
<div class="row">
<div class="col-lg-4">
<div class="card" style=" margin: 10px;">
<img class="card-img-top" src="img/capa01.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Restaurante Fresco</h5>
<p class="card-text">Site completo com cardápio, contato, quem somos e ainda um blog. Desenvolvido para um restaurante de comida italiana</p>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Saiba mais
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Restaurante Fresco</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img src="img/site01-01.jpg" style="width: 100%; ">
<p>Esse foi um site feito para um restaurante de comida italiana</p>
<img src="img/site01-02.jpg " style="width: 100%; ">
<p>Cardápio com preços e com os componentes de cada prato</p>
<img src="img/site01-03.jpg " style="width: 100%; ">
<p>Design moderno e layout feito para restaurantes</p>
<img src="img/site01-04.jpg " style="width: 100%; ">
<p>Site conta com um blog onde é possível publicar conteúdos sobre gastronomia</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
<!-- Fim modal-->
</div>
</div>
<!-- fim do card -->
</div>
<div class="col-lg-4">
<div class="card" style=" margin: 10px;">
<img class="card-img-top" src="img/capa02.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Hotel Paraíso</h5>
<p class="card-text">Site estático de uma página com sobre, reservas, contato, captura de e-mail (newsletter) e com uma galeria de fotos. Desenvolvido para um hotel</p>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal2">
Saiba mais
</button>
<!-- Modal -->
<div class="modal fade" id="modal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Hotel Paraíso</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img src="img/site02-01.jpg" style="width: 100%;">
<p>Este site foi desenvolvido para um hotel</p>
<img src="img/site02-02.jpg " style="width: 100%;">
<p>Várias fotos mostrando o ambiente</p>
<img src="img/site02-03.jpg" style="width: 100%;">
<p>Lista mostrando as vantagens do hotel</p>
<img src="img/site02-04.jpg" style="width: 100%;">
<p>Espaço para colocar o e-mail e receber promoções, espaço para contato logo abaixo</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
<!-- Fim modal-->
</div>
</div>
<!-- fim do card -->
</div>
<div class="col-lg-4">
<div class="card" style=" margin: 10px;">
<img class="card-img-top" src="img/capa03.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">SeuPetshop</h5>
<p class="card-text">Site estático de uma página com sobre, produtos, contato e espaço para captação de e-mail (newsletter). Desenvolvido para um petshop</p>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal3">
Saiba mais
</button>
<!-- Modal -->
<div class="modal fade" id="modal3" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">SeuPetshop</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img src="img/site03-01.jpg" style="width: 100%;">
<p>Esse foi um site feito para um Petshop</p>
<img src="img/site03-02.jpg" style="width: 100%;">
<p>Caixas interativas, ao clicar no saiba mais uma caixa flutuante abre com mais detalhes</p>
<img src="img/site03-03.jpg" style="width: 100%;">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
<!-- Fim modal-->
</div>
</div>
<!-- fim do card -->
</div>
</div>
</div>
</article>
</section>
<section id="metodologia">
<h2>Metodologia</h2>
<hr>
<h3>Processo de desenvolvimento</h3>
<!-- scrollspy-->
<div id="caixa-scrollspy">
<div id="lista" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1">BRIEFING E ESCOPO</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">DESIGN E APROVAÇÃO</a>
<a class="list-group-item list-group-item-action" href="#list-item-3">CODIFICAÇÃO E USABILIDADE</a>
<a class="list-group-item list-group-item-action" href="#list-item-4">PÓS-DESENVOLVIMENTO</a>
</div>
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0" id="caixa">
<h4 id="list-item-1">BRIEFING E ESCOPO</h4>
<p>Primeiramente procuro entender como funciona o negócio do cliente e quais são as suas necessidades, recolho o máximo de informações possíveis e adapto todas as ideias dadas pelo cliente. Procuro também pesquisar pelos seus principais concorrentes para saber o que está certo e errado em relação ao site. A partir disso eu elaboro um escopo exclusivo em que os principais erros da concorrência serão evitados.</p>
<h4 id="list-item-2">DESIGN E APROVAÇÃO</h4>
<p>Com o escopo aprovado pelo cliente eu começo a elaboração do wireframe e do layout desktop e responsivo. Esse momento é muito interessante pois você já terá uma ideia de como o seu projeto irá ficar depois de pronto. Só começo a programar quando o layout for integralmente aprovado.
</p>
<h4 id="list-item-3">CODIFICAÇÃO E USABILIDADE</h4>
<p>A terceira etapa é onde toda a magia acontece. Essa é a parte da programação na qual redesenho o layout através das linhas de códigos legíveis seguindo padrões elaborados da interface e experiência do usuário (UI/UX).
</p>
<h4 id="list-item-4">PÓS-DESENVOLVIMENTO</h4>
<p>Depois de pronto e aprovado, otimizo o site para ser encontrado com facilidade nos principais motores de busca. Após isso é só testar nos diferentes tipos de navegadores e dispositivos e observar como o seu projeto está se comportando em todos eles. E voilà! Seu projeto está pronto.
</p>
</div>
</div>
<p style="margin-top: 20px;">obs: Esse processo é apenas um modelo, estou aberto para outras formas de trabalho</p>
<!---->
</section>
<section id="contato">
<h2>Contato</h2></br>
<hr>
<p style="text-align: center;">Meu Whatsapp, Linkedin, Git e e-mail profissional:</p>
<div id="div-contato">
<a href="https://api.whatsapp.com/send?phone=5585991387335" target="_blank"><i class="fab fa-whatsapp"></i></a>
<a href="https://www.linkedin.com/in/gabrielsvasconcelos/" target="_blank"><i class="fab fa-linkedin"></i></a>
<a href="https://github.com/gabrielsvasconcelos" target="_blank"><i class="fab fa-github"></i></a>
<a href="mailto:[email protected]" target="_blank"><i class="fas fa-envelope"></i></a>
</div>
<div style="text-align: center;">
<p>Se preferir, meu contato direto:</p>
<p><a href=”tel:+5585991387335″ style="text-decoration: none; color: black;">+55(85)991387335</a></p>
<p><a href="mailto:[email protected]" style="text-decoration: none; color: black;">[email protected]</a></p>
</div>
</section>
<footer>
<h3>Site desenvolvido por Gabriel Vasconcelos</h3>
<p>Todos os direitos reservados - 2022</p>
</footer>
</body>
</html>