-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
199 lines (154 loc) · 9.83 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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alan Fernandes - UI/UX designer</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@200;300;400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@700;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/home.min.css">
</head>
<body class="home">
<nav>
<button class="hamburger" aria-label="Menu">
<div>
<span></span>
<span></span>
<span></span>
</div>
<p>Menu</p>
</button>
<ul>
<li><a href="#sobre">Sobre mim</a></li>
<li><a href="#projetos">Projetos</a></li>
<li><a href="#hobbies">Hobbies</a></li>
<li><a href="#contato">Contato & Links</a></li>
<li><div class="languages"><a class="lang" href="index.html?en">EN</a> | <a class="lang" href="index.html">BR</a></div></li>
</ul>
</nav>
<main>
<section id="sobre">
<div class="contents">
<h1>Oi, eu sou o Alan!</h1>
<h3>UI/UX Designer e Maker</h3>
<p>Bacharel em design pela UTFPR, atualmente morando em Curitiba. Minha área de expertise é UI/UX, mas eu sei me virar com HTML/CSS, javascript e PHP (para Wordpress). Eu também entendo de manipulação de imagem, edição de vídeo e bricolagem, fazer pão, potinhos de cerâmica, e pintar miniaturas. Tenho uma mente muito agitada e facilidade de aprendizado, estou constantemente desenvolvendo novas habilidades para resolver novos problemas.</p>
</div>
</section>
<section id="projetos">
<a href="tpk.html" class="projetos-sect" id="tpk">
<img class="background tpk-bg" src="img/tpk-bg.jpg" srcset="img/tpk-bg.jpg 1920w, img/tpk-bg-med.jpg 1000w, img/tpk-bg-sml.jpg 500w">
<div class="overlay"></div>
<img class="logo tpk-logo" src="img/tpk-logo.svg" alt="TPK Miniaturas">
</a>
<a href="warlock.html" class="projetos-sect" id="warlock">
<img class="background warlock-bg" src="img/warlock-bg.jpg" srcset="img/warlock-bg.jpg 1920w, img/warlock-bg-med.jpg 1000w, img/warlock-bg-sml.jpg 500w">
<div class="overlay"></div>
<img class="logo warlock-logo" src="img/warlock-logo.svg" alt="Warlock's Book Stock">
</a>
<a href="taverna.html" class="projetos-sect" id="taverna">
<img class="background taverna-bg" src="img/taverna-bg.jpg" srcset="img/taverna-bg.jpg 1920w, img/taverna-bg-med.jpg 1000w, img/taverna-bg-sml.jpg 500w">
<div class="overlay"></div>
<img class="logo taverna-logo" src="img/taverna-logo.svg" alt="Taverna - Baralho de Personagens para D&D">
</a>
</section>
<section id="hobbies">
<div class="left-col">
<h1>Hobbies</h1>
<p>
Devido à minha hiperatividade, eu fico muito fixado em algumas coisas muito aleatórias, e por isso acabei adquirindo um montão de hobbies ao longo da vida, e você pode ver o resultado de algumas dessas empreitadas nessa página.
<br><br>
Ainda não tem muita coisa aqui porque eu não costumo registrar os meus hobbies, mas eu pretendo popular essa página no futuro.
</p>
</div>
<div class="right-col">
<div class="right-col-content">
<div class="hobby-thumb">
<div class="hobby-thumb-content">
<img src="img/hobbies/MoP.jpg">
<div class="overlay"><p>Maquete desenvolvida para a matéria Modelos de Maquetes durante a faculdade. Tem mais informação sobre esse projeto no meu repositório de trabalhos antigos.</p></div>
</div>
</div>
<div class="hobby-thumb">
<div class="hobby-thumb-content">
<img src="img/hobbies/cranio.jpg">
<div class="overlay"><p>Exercício de modelagem 3D. Peguei uma semana no início do ano para aprender a modelar, mas tive que dar uma pausa.</p></div>
</div>
</div>
<div class="hobby-thumb">
<div class="hobby-thumb-content">
<img src="img/hobbies/cuppernaut.jpg">
<div class="overlay"><p>Copo de cerâmica inspirado no personagem Juggernaut, de Dota 2.</p></div>
</div>
</div>
<div class="hobby-thumb">
<div class="hobby-thumb-content">
<img src="img/hobbies/mimico.jpg">
<div class="overlay"><p>Potinho de sal mímico.</p></div>
</div>
</div>
<div class="hobby-thumb">
<div class="hobby-thumb-content">
<img src="img/hobbies/myconid.jpg">
<div class="overlay"><p>Meu primeiro exercício com pintura de miniaturas usando tinta óleo. Falta um passe de highlights, mas achei bem bacana o resultado até agora.</p></div>
</div>
</div>
<div class="hobby-thumb">
<div class="hobby-thumb-content">
<img src="img/hobbies/minis.jpg">
<div class="overlay"><p>Minhas primeiras pinturas de miniatura. Longe de um bom resultado, mas tem que começar de algum lugar, né.</p></div>
</div>
</div>
<div class="hobby-thumb">
<div class="hobby-thumb-content">
<img src="img/hobbies/Royan.jpg">
<div class="overlay"><p>Eu pagando mico fazendo "cospobre" de Royan Machado de Tinta, o anão bárbaro, meu personagem numa mesa de RPG da faculdade.</p></div>
</div>
</div>
<div class="hobby-thumb">
<div class="hobby-thumb-content">
<img src="img/hobbies/imperio.gif">
<div class="overlay"><p>Mapa do mundo que estou criando para a minha campanha de RPG.</p></div>
</div>
</div>
<div class="hobby-thumb">
<div class="hobby-thumb-content">
<img src="img/hobbies/cadernos.jpg">
<div class="overlay"><p>Cadernos de couro que fiz para os meus jogadores anotarem informações de seus personagens</p></div>
</div>
</div>
</div>
</div>
<div class="bigger-images">
<button aria-label="Imagem anterior" class="img-arrow prev-img"><svg width="71" height="127" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M63.4679.4645l6.9611 6.9567-56.078 56.0433 56.078 56.0435-6.9611 6.956L.4289 63.4645l63.039-63z" fill="#fff"/></svg></button>
<button aria-label="Fechar imagem" class="img-close"><svg width="35" height="35" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 13.6537L31.1537 0 35 3.8463 21.3463 17.5 35 31.1537 31.1537 35 17.5 21.3463 3.8463 35 0 31.1537 13.6537 17.5 0 3.8463 3.8463 0 17.5 13.6537z" fill="#fff"/></svg></button>
<img src="img/hobbies/MoP.jpg">
<img src="img/hobbies/cranio.jpg">
<img src="img/hobbies/cuppernaut.jpg">
<img src="img/hobbies/mimico.jpg">
<img src="img/hobbies/myconid.jpg">
<img src="img/hobbies/minis.jpg">
<img src="img/hobbies/Royan.jpg">
<img src="img/hobbies/imperio.gif">
<img src="img/hobbies/cadernos.jpg">
<button aria-label="Próxima imagem" class="img-arrow next-img"><svg width="71" height="127" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.39 126.464l-6.961-6.956 56.0779-56.0435L.4289 7.4212 7.39.4645l63.0391 63L7.39 126.464z" fill="#fff"/></svg></button>
</div>
</section>
<section id="contato">
<h1>Contato</h1>
<h3>[email protected]</h3>
<h3>(41) 98714-1567</h3>
<h1>Links</h1>
<a href="https://www.linkedin.com/in/alan-fernandes-300259201/"><h3>Linkedin</h3></a>
<a href="https://drive.google.com/file/d/1YyzbaZaGHMigN7XdDTMKl1TIswtJiB9h/view?usp=sharing"><h3>Currículo</h3></a>
<a href="https://github.com/Rayuaz/Portfolio"><h3>Código fonte deste site</h3></a>
<a href="https://alanfernandes.myportfolio.com"><h3>Repositório com alguns trabalhos antigos</h3></a>
</section>
</main>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/home.js"></script>
<script src="js/nav.js"></script>
<script src="js/translate-home.js"></script>
</html>