-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
295 lines (291 loc) · 17.2 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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="imagex/png" href="img/others/logo-icon.ico">
<title>Meu Portfolio</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<a href="index.html"><img src="img/others/logo-branca.png" class="logo"></a>
<nav class="navbar">
<ul class="navItems">
<a href="#about"><li>Sobre</li></a>
<a href="#projects"><li>Projetos</li></a>
<a href="#contacts"><li>Contato</li></a>
</ul>
</nav>
</header>
<main>
<div class="main-container">
<section class="main-content">
<div class="title-div">
<h1 class="title-txt">Seja Bem Vindo!</h1>
<h1 class="title-txt">Me chamo <a class="title-txt-1">Arthur Azevedo</a>.</h1>
</div>
<div class="teclogos-div">
<img title="HTML5" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-plain-wordmark.svg"/>
<img title="CSS3" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-plain-wordmark.svg"/>
<img title="Git" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original.svg"/>
<img title="MySQL" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-plain.svg" />
<img title="PHP" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg"/>
</div>
<div class="aboutme-txt">
<p class="abt-texto">Sou um <a class="abt-strong">Desenvolvedor Back-End</a>, procurando aprimorar e masterizar meus conhecimentos nas tecnologias que tenho mais afeição, e um entusiasta da informática, esse meu portfolio tem objetivo de demonstrar meus projetos pessoais e como utilizo minhas habilidades na programação!</p>
</div>
</section>
<section class="photo-div">
<img src="img/others/foto-pessoal.png" class="personal-photo">
</section>
</div>
</main>
<section class="aboutme-div" id="about">
<div class="div-title">
<h1 class="abtme-title">Sobre Mim</h1>
<div class="main-txt-div">
<p class="about-main-txt">Me chamo Arthur Azevedo de Oliveira, tenho <a class="abt-strong-2">17 anos</a> e estudo no 3º Ano EEEP José de Barcelos, na área de Informática, principalmente na parte do desenvolvimento. Gosto de desenvolver aplicações em que eu consiga desafiar minha capacidade de resolver problemas, e nas subjetividades dos códigos. Sou apaixonado por <a class="abt-strong-2">Jogos</a>, <a class="abt-strong-2">Linguas Estrangeiras</a>, <a class="abt-strong-2">Músicas</a> e obviamente <a class="abt-strong-2">Programação!</a></p>
</div>
</div>
</section>
<section class="projects-section" id="projects">
<div class="prj-title-div">
<h1 class="prj-title">Projetos</h1>
</div>
<section class="project-main-container">
<div class="projects-div">
<div class="projects-container">
<div class="crud-div">
<img src="img/others/crudimg-2.png">
</div>
<div class="div-txt">
<h3 class="title-crud-txt">CRUD PHP</h3>
<p class="txt-crud-abt">Projeto feito com a intenção de aprimorar as práticas de Programação Orientada a Objetos, passada como trabalho parcial das aulas de programação do Prof. Murilo Da Paz.</p>
<hr>
<p class="div-subtxt">Feito com :</p>
<div class="crud-tech-imgs">
<img class="crud-techs" title="HTML5" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-plain-wordmark.svg" />
<img class="crud-techs" title="CSS3" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-plain-wordmark.svg" />
<img class="crud-techs" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/php/php-original.svg" />
<img class="crud-techs" title="MySQL" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original-wordmark.svg" />
<a href="https://github.com/arthurztt/ProjetoCrudPHP"><img src="img/contacts-logo/github.svg" class="img-spacing"></a>
<a href="http://localhost/htdocs/INFOR%202/ARTHUR%20(XAMPP)/CRUD%20+%20PDO/"><img src="img/contacts-logo/globe.svg" class="access-img"></a>
</div>
</div>
</div>
<div class="caution-div">
<img src="img/others/caution.svg" class="caution-img">
<p class="caution-txt">Necessário um servidor Apache e MySQL ligado para o funcionamento do site.</p>
</div>
</div>
<section class="projects-div">
<div class="projects-container">
<div class="crud-div">
<img src="img/others/album-collection.png" class="design-img">
<p class="project-subtitle">Albums Collection
<link rel="stylesheet" type='text/css' href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />
</p>
</div>
<div class="div-txt">
<h3 class="title-crud-txt">Coleção de Albuns</h3>
<p class="txt-crud-abt">Site inspirado em uma coleção de albuns, utilizando meus albuns favoritos pessoais, incluindo informações como : Nome do artista, nome do album, tracklist e acesso ao album no Spotify.</p>
<hr>
<p class="div-subtxt">Feito com :</p>
<div class="crud-tech-imgs">
<img class="crud-techs" title="HTML5" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-plain-wordmark.svg" />
<img class="crud-techs" title="CSS3" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-plain-wordmark.svg" />
<img class="crud-techs img-spacing0" title="JavaScript" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/javascript/javascript-original.svg" />
<a href="https://github.com/arthurztt/AlbumCollection"><img src="img/contacts-logo/github.svg" class="img-spacing"></a>
<a href="https://github.com/arthurztt/ArtesDesign/blob/main/src/sanlorenzo.png"><img src="img/contacts-logo/globe.svg" class="access-img">
<link rel="stylesheet" type='text/css' href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />
</a>
</div>
</div>
</div>
<div class="caution-div">
<img src="img/others/database.svg" class="caution-img">
<p class="caution-txt">Futuramente será adicionado o back-end ao projeto.</p>
</div>
</section>
<section class="projects-div">
<div class="projects-container">
<div class="crud-div">
<img src="img/others/quadra-interativa-img.png" class="img-redmension">
<p class="project-subtitle">Quadra Interativa</p>
<link rel="stylesheet" type='text/css' href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />
</p>
</div>
<div class="div-txt">
<h3 class="title-crud-txt">Projeto Social</h3>
<p class="txt-crud-abt">Projeto Social (TCC) da minha equipe para o curso técnico da Escola José de Barcelos, com o objetivo de oferecer informações sobre acontecimentos na quadra da escola, e a opção de reservar horários para jogos.</p>
<hr>
<p class="div-subtxt">Feito com :</p>
<div class="crud-tech-imgs">
<img class="crud-techs" title="HTML5" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-plain-wordmark.svg" />
<img class="crud-techs" title="CSS3" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-plain-wordmark.svg" />
<img class="crud-techs" title="JavaScript" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/javascript/javascript-original.svg" />
<img class="crud-techs php-spacing" title="PHP" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/php/php-original.svg" />
<img class="crud-techs img-spacing3" title="PostgreSQL" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/postgresql/postgresql-original.svg"/>
<a href="https://github.com/arthurztt/Quadra-Interativa"><img src="img/contacts-logo/github.svg" class="img-spacing2"></a>
<a href="https://github.com/arthurztt/ArtesDesign/blob/main/src/sanlorenzo.png"><img src="img/contacts-logo/globe.svg" class="access-img">
<link rel="stylesheet" type='text/css' href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />
</a>
</div>
</div>
</div>
</section>
<section class="projects-div">
<div class="projects-container">
<div class="crud-div">
<img src="img/others/todo-list-img.png" class="design-img">
<p class="project-subtitle">To-do List
<link rel="stylesheet" type='text/css' href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />
</p>
</div>
<div class="div-txt">
<h3 class="title-crud-txt">Lista de Tarefas</h3>
<p class="txt-crud-abt">Uma lista de tarefas em que pode se adicionar tarefas para fazer, editar e excluir elas quando quiser, e também marcar elas como feitas. </p>
<hr>
<p class="div-subtxt">Feito com :</p>
<div class="crud-tech-imgs">
<img class="crud-techs" title="HTML5" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-plain-wordmark.svg" />
<img class="crud-techs" title="CSS3" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-plain-wordmark.svg" />
<img class="crud-techs php-spacing" title="PHP" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/php/php-original.svg" />
<img class="crud-techs" title="jQuery" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/jquery/jquery-plain-wordmark.svg" />
<a href="https://github.com/arthurztt/AlbumCollection"><img src="img/contacts-logo/github.svg" class="img-spacing"></a>
<a href="https://github.com/arthurztt/ArtesDesign/blob/main/src/sanlorenzo.png"><img src="img/contacts-logo/globe.svg" class="access-img">
<link rel="stylesheet" type='text/css' href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />
</a>
</div>
</div>
</div>
</section>
</section>
</section>
<section class="stacks-section">
<div class="stacks-title-div">
<h1 class="stacks-title">Stacks</h1>
</div>
<section class="cards-main-section">
<div class="cards-div">
<span class="stack-type">
<img class="stack-type-img" src="/img/others/lang-type-img.svg" title="Linguagem de Programação">
</span>
<div class="card-header">
<img class="stack-img php-logo-card" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/php/php-plain.svg" />
<h3 class="stack-name">PHP</h3>
</div>
<hr class="divisor-card">
<div class="content-card">
<p class="stack-about-txt php-txt-1">
O PHP (um acrônimo recursivo para PHP: Hypertext Preprocessor) é uma linguagem de script open source de uso geral, muito utilizada, e especialmente adequada para o desenvolvimento web.
</p>
<p class="stack-about-txtphp-txt-1">
O PHP é focado principalmente nos scripts do lado do servidor, portanto, você pode coletar dados de formulários, gerar páginas com conteúdo dinâmico ou enviar e receber cookies.
</p>
</div>
<hr class="divisor-card">
</div>
<div class="cards-div">
<span class="stack-type db-type">
<img class="stack-type-img db-type-img" src="/img/others/database-gear.svg" title="SGBD (Sistema de Gerenciamento de Banco de Dados)">
</span>
<div class="card-header">
<img class="stack-img" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/postgresql/postgresql-original.svg" />
<h3 class="stack-name">PostgreSQL</h3>
</div>
<hr class="divisor-card">
<div class="content-card">
<p class="stack-about-txt pg-txt">
O PostgreSQL é um sistema de gerenciamento de banco de dados objeto-relacional (ORDBMS) baseado no POSTGRES, Versão 4.2, desenvolvido pelo Departamento de Ciência da Computação da Universidade da Califórnia em Berkeley.
</p>
</div>
<hr class="divisor-card">
</div>
<div class="cards-div">
<span class="stack-type db-type">
<img class="stack-type-img db-type-img" src="/img/others/database-gear.svg" title="SGBD (Sistema de Gerenciamento de Banco de Dados)">
</span>
<div class="card-header">
<img class="stack-img" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/mysql/mysql-original.svg" />
<h3 class="stack-name">MySQL</h3>
</div>
<hr class="divisor-card">
<div class="content-card">
<p class="stack-about-txt pg-txt">
O programa MySQL é um servidor robusto de bancos de dados SQL muito rápido, multi-tarefa e multi-usuário. O Servidor MySQL pode ser usado em sistemas de produção com alta carga e missão crítica bem como pode ser embutido em programa de uso em massa.
</p>
</div>
<hr class="divisor-card">
</div>
<div class="cards-div">
<span class="stack-type vcs-type">
<img class="stack-type-img db-type-img" src="/img/others/file-earmark-zip.svg" title="Sistema de Controle de Versão">
</span>
<div class="card-header">
<img class="stack-img" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/git/git-original.svg" />
<h3 class="stack-name">Git</h3>
</div>
<hr class="divisor-card">
<div class="content-card">
<p class="stack-about-txt pg-txt">
O Git é um sistema de controle de revisão distribuído, rápido, escalável e com um conjunto de comandos incomumente rico que oferece operações de alto nível e acesso completo aos seus recursos.
</p>
</div>
<hr class="divisor-card">
</div>
<div class="cards-div">
<span class="stack-type">
<img class="stack-type-img db-type-img" src="/img/others/braces.svg" title="Linguagem de Marcação de Texto">
</span>
<div class="card-header">
<img class="stack-img" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/html5/html5-plain.svg"/>
<h3 class="stack-name">HTML</h3>
</div>
<hr class="divisor-card">
<div class="content-card">
<p class="stack-about-txt pg-txt">
HTML (Linguagem de Marcação de HiperTexto) é o bloco de construção mais básico da web. Define o significado e a estrutura do conteúdo da web. Outras tecnologias além do HTML geralmente são usadas para descrever a aparência ou a funcionalidade de uma página da web.
</p>
</div>
<hr class="divisor-card">
</div>
<div class="cards-div">
<span class="stack-type">
<img class="stack-type-img pencil-diff" src="/img/others/pencil-fill.svg" title="SGBD (Sistema de Gerenciamento de Banco de Dados)">
</span>
<div class="card-header">
<img class="stack-img" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/css3/css3-plain.svg"/>
<h3 class="stack-name">CSS</h3>
</div>
<hr class="divisor-card">
<div class="content-card">
<p class="stack-about-txt pg-txt">
O programa MySQL é um servidor robusto de bancos de dados SQL muito rápido, multi-tarefa e multi-usuário. O Servidor MySQL pode ser usado em sistemas de produção com alta carga e missão crítica bem como pode ser embutido em programa de uso em massa.
</p>
</div>
<hr class="divisor-card">
</div>
</section>
</section>
</section>
<footer>
<div class="footer-container">
<div class="footer-develop-div">
<p class="develop-txt">Developed by Arthur Azevedo</p>
</div>
<div class="footer-contacts-div" id="contacts">
<p class="contact-txt">
Contatos:
</p>
<a href="https://github.com/arthurztt"><img class="github-icon" src="img/contacts-logo/github.svg"></a>
<a href="https://www.instagram.com/ogarthwr/"><img id="contacts-hover" class="insta-logo" src="img/contacts-logo/instagram.svg"></a>
<a href=""></a><img id="contacts-hover" src="img/contacts-logo/linkedin.svg">
<link rel="stylesheet" type='text/css' href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />
</a>
</div>
</div>
</footer>
</body>
</html>