-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
286 lines (235 loc) · 13.4 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Athos Jullian</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<nav>
<div>
<div class="logo"></div>
<ul>
<li><a href="#projetos">Projetos</a></li>
<li><a href="#dec">Design & Code</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
</div>
</nav>
<div id="keep" class="pop-up-description">
<div class="content">
<span class="close">×</span>
<img src="./assets/keep.png" alt="projeto seta turismo" />
<div>
<h2>Keep</h2>
<h3>Descrição</h3>
<p>Este foi um projeto de faculdade correspondente ao TCC com duração de 1 ano. Que neste caso foi realizado em equipe, por um grupo de 8 pessoas em diversas áreas de formação. <br/>
O objetivo era criar um modelo de negócios inovador com base em uma determinada dor de mercado escolhida pelo grupo. Que no nosso caso está relacionada às dificuldades de poupar, administrar e investir.
</p>
<h3>Processo</h3>
<p>Estudo de mercado <span class="breadcrumbs">></span> Pesquisas e Entrevistas <span class="breadcrumbs">></span> Validação <span class="breadcrumbs">></span> Análises (clientes, fornecedores, concorrentes) <span class="breadcrumbs">></span> SWOT <span class="breadcrumbs">></span> Formulação Estratégica <span class="breadcrumbs">></span> Proposta de valor <span class="breadcrumbs">></span> Branding <span class="breadcrumbs">></span> Planos de Ação (Marketing, Operacional, RH, Comunicação, Jurídico, Internacionalização, Financeiro) <span class="breadcrumbs">></span> Design <span class="breadcrumbs">></span> Entrega.
</p>
<h3>Sobre o projeto</h3>
<p>Neste projeto, durante todo o período eu estive no papel de líder, e encarregado da gestão do projeto. Com sorte estive acompanhado de pessoas bastante competentes.<br/>
Além das diversas demandas para o desenvolvimento do projeto, também fui responsável pela criação do design e protótipo.<br/>
Uma das premissas de Interface de usuário, é que seja intuitiva – ‘não me faça pensar’ – e fácil de usar.<br/>
Assim, optei por elementos mais destacados na tela mas com um design minimalista, apenas com informações relevantes e linguagem descomplicada, além de algumas mecânicas de jogos (gamification).
</p>
<h3>Ferramentas que usei</h3>
<img src="./assets/adobe-xd.svg" alt="Adobe XD">
<img src="./assets/adobe-illustrator-cc.svg" alt="Adobe Illustrator">
<a href="https://www.behance.net/gallery/90935661/Keep-Plataforma-de-Investimentos" class="botao-projetos btn-design-1" target="_blank"><i data-eva="brush-outline"></i>Ver design</a>
</div>
</div>
</div>
<div id="seta" class="pop-up-description">
<div class="content">
<span class="close">×</span>
<img src="./assets/Kyoto.jpg" alt="projeto seta turismo" />
<div>
<h2>Seta turismo</h2>
<h3>Descrição</h3>
<p>A Seta Turismo é um projeto fictício e independente criado por mim.<br/>
O objetivo era criar uma página de turismo que oferecesse pacotes de viagem com base nas experiências que o destino oferece.<br/>
</p>
<h3>Processo</h3>
<p>
Wireframing <span class="breadcrumbs">></span> Design <span class="breadcrumbs">></span> Desenvolvimento
</p>
<h3>Sobre o projeto</h3>
<p>Neste projeto fui responsável por todo design e desenvolvimento, com o objetivo de treinar conceitos de responsividade em uma página relativamente mais complexa e mobile-first.<br/>
Para o design escolhi cores mais vibrantes e alegres para estimular o desejo de viajar, e também optei por apresentar diversas imagens para reforçar este estímulo. A estrutura do site foi baseada em um grid simples de colunas para facilitar a visualização e navegação do usuário.
</p>
<h3>Ferramentas que usei</h3>
<img src="./assets/figma-1.svg" alt="Figma">
<img src="./assets/logo-javascript.svg" alt="JavaScrict logo">
<img src="./assets/html-5.svg" alt="Html5">
<img src="./assets/css3.svg" alt="Css3">
<img src="./assets/sass-1.svg" alt="Sass">
<div>
<a href="https://github.com/athosjullian/seta" class="botao-projetos" target="_blank"><i data-eva="code-outline"></i> Ver código</a>
<a href="https://www.behance.net/gallery/90934571/Seta-Website-de-Turismo" class="botao-projetos" target="_blank"><i data-eva="brush-outline"></i> Ver design</a>
<a href="https://athosjullian.github.io/seta/" class="botao-projetos" target="_blank"><i data-eva="globe-2-outline"></i> Visitar site</a>
</div>
</div>
</div>
</div>
<div id="cfo" class="pop-up-description">
<div class="content">
<span class="close">×</span>
<img src="./assets/CFO.png" alt="projeto seta turismo" />
<div>
<h2>CFOnline</h2>
<h3>Descrição</h3>
<p>Este é um projeto fictício e independente criado por mim.<br/>
A CFOnline se trata de uma página que oferece serviços de consultoria financeira online.<br/>
</p>
<h3>Processo</h3>
<p>
Wireframing <span class="breadcrumbs">></span> Design <span class="breadcrumbs">></span> Desenvolvimento
</p>
<h3>Sobre o projeto</h3>
<p>Esse foi um dos primeiros projetos que realizei e estive encarregado de todo design e desenvolvimento. A princípio a proposta era criar um website para praticar conceitos básicos do desenvolvimento web dentro de HTML e CSS.<br/>
Para o design optei por estrutura e cores que transmitissem seriedade e leveza, mas que trouxessem segurança sobre o serviço, para o cliente.
</p>
<h3>Ferramentas que usei</h3>
<img src="./assets/figma-1.svg" alt="Figma">
<img src="./assets/html-5.svg" alt="Html5">
<img src="./assets/css3.svg" alt="Css3">
<div>
<a href="https://github.com/athosjullian/cfonline" class="botao-projetos" target="_blank"><i data-eva="code-outline"></i> Ver código</a>
<a href="https://www.behance.net/gallery/90933217/CFOnline-Website-de-Consultoria-Financeira-Online" class="botao-projetos" target="_blank"><i data-eva="brush-outline"></i> Ver design</a>
<a href="https://athosjullian.github.io/cfonline/" class="botao-projetos" target="_blank"><i data-eva="globe-2-outline"></i> Visitar site</a>
</div>
</div>
</div>
</div>
<div id="ex" class="pop-up-description">
<div class="content">
<span class="close">×</span>
<img src="./assets/ex.jpg" alt="projeto seta turismo" />
<div>
<h2>EX</h2>
<h3>Descrição</h3>
<p>Este é um projeto fictício e independente criado por mim.<br/>
EX é uma página para conversão de moedas.
</p>
<h3>Processo</h3>
<p>
Wireframing <span class="breadcrumbs">></span> Design <span class="breadcrumbs">></span> Desenvolvimento
</p>
<h3>Sobre o projeto</h3>
<p>Este projeto foi realizado com o intuito de praticar alguns conceitos de JavaScript. Com foco principalmente na manipulação de uma base de Dados (API) em .JSON, e também em .CSV para criação de um gráfico.<br/>
O gráfico foi criado através do uso da biblioteca chart.js.
</p>
<h3>Ferramentas que usei</h3>
<img src="./assets/figma-1.svg" alt="Figma">
<img src="./assets/html-5.svg" alt="Html5">
<img src="./assets/css3.svg" alt="Css3">
<img src="./assets/logo-javascript.svg" alt="JavaScript">
<div>
<a href="https://github.com/athosjullian/ex" class="botao-projetos btn-design-2" target="_blank"><i data-eva="code-outline"></i> Ver código</a>
<a href="https://athosjullian.github.io/ex/" class="botao-projetos btn-design-2" target="_blank"><i data-eva="globe-2-outline"></i> Visitar site</a>
</div>
</div>
</div>
</div>
<div class="container">
<header>
<h1>Athos<br><span>Jullian</span></h1>
<h2>Webdesigner</h2>
<h2>Desenvolvedor FrontEnd</h2>
<ul>
<li>
<a href="https://github.com/athosjullian" target="_blank"><i data-eva="github-outline"></i></a>
</li>
<li>
<a href="https://www.linkedin.com/in/athosjullian/" target="_blank"><i data-eva="linkedin-outline"></i></a>
</li>
<li>
<a href="https://www.behance.net/athosjullian" target="_blank"><i data-eva="behance-outline"></i></a>
</li>
<li>
<a href="mailto:[email protected]?Subject=Hey,%20vi%20seu%20portfolio!" target="_blank"><i data-eva="email-outline"></i></a>
</li>
</ul>
</header>
<div class="scroll-down"></div>
<main>
<section id="projetos" class="projetos">
<h2>Projetos</h2>
<div class="borda-tablet"><div class="corpo-tablet"><div class="tela-tablet">
<div class="tela-hover projeto1">
<i data-eva="eye-outline"></i>
<p>Ver mais...</p>
</div>
</div></div></div>
<div class="rotate">
<div class="corpo-phone"><div class="audio-phone"></div><div class="tela-phone">
<div class="tela-hover projeto1">
<i data-eva="eye-outline"></i>
<p>Ver mais...</p>
</div>
</div></div></div>
</section>
<section id="dec" class="dec">
<h2>Design & Code</h2>
<div class="grupo">
<div>
<div class="projetos projeto2">
<div class="tela-hover">
<i data-eva="eye-outline"></i>
<p>Ver mais...</p>
</div>
</div>
</div>
<div>
<div class="projetos projeto3">
<div class="tela-hover">
<i data-eva="eye-outline"></i>
<p>Ver mais...</p>
</div>
</div>
</div>
<div>
<div class="projetos projeto4">
<div class="tela-hover">
<i data-eva="eye-outline"></i>
<p>Ver mais...</p>
</div>
</div>
</div>
</div>
</section>
<section id="contato" class="contato">
<h2>Contato</h2>
<h3>Entre em contato</h3>
<a class="botao-email" href="mailto:[email protected]?Subject=Hey,%20vi%20seu%20portfolio!" target="_blank"><i data-eva="email-outline"></i> Me envie um email</a>
</section>
</main>
</div>
<footer>
<div>
<div class="logo"></div>
<ul>
<li>
<a href="https://github.com/athosjullian" target="_blank"><i data-eva="github-outline"></i></a>
</li>
<li>
<a href="https://www.linkedin.com/in/athosjullian/" target="_blank"><i data-eva="linkedin-outline"></i></a>
</li>
<li>
<a href="https://www.behance.net/athosjullian" target="_blank"><i data-eva="behance-outline"></i></a>
</li>
</ul>
<p>Uberlândia - MG</p>
</div>
</footer>
<script src="https://unpkg.com/eva-icons"></script>
<script>eva.replace();</script>
<script src="./js/index.js"></script>
</body>
</html>