forked from willianjusten/photo-portfolio
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
162 lines (148 loc) · 6.55 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
<!DOCTYPE HTML>
<html>
<head>
<title>Willian Justen Photos</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<!-- Header -->
<header id="header">
<h1>Willian Justen</h1>
<nav>
<ul>
<li><a href="#intro">Introdução</a></li>
<li><a href="#quem-sou">Quem eu sou?</a></li>
<li><a href="#o-que-faco">O que eu faço?</a></li>
<li><a href="#trabalhos">Meus trabalhos</a></li>
<li><a href="#contact">Contato</a></li>
</ul>
</nav>
</header>
<!-- Intro -->
<section id="intro" class="main style1 dark fullscreen">
<div class="content">
<header>
<h2>Hey!</h2>
</header>
<p>Bem vindo ao meu portfólio de fotos. Aqui você poderá ver algumas das fotos que tiro nas minhas viagens que faço enquanto
trabalho como nômade digital.</p>
<footer>
<a href="#quem-sou" class="button style2 down">More</a>
</footer>
</div>
</section>
<section id="quem-sou" class="main style2 left dark fullscreen">
<div class="content box style2">
<header>
<h2>Quem eu sou?</h2>
</header>
<p>Meu nome
<strong>Willian Justen</strong>, tenho 27 anos e sou de uma cidade linda na serra do Rio de Janeiro chamada
<strong>Petrópolis</strong>. Eu amo natureza, aventuras, viagens e meu dronezinho.</p>
</div>
<a href="#o-que-faco" class="button style2 down anchored">Next</a>
</section>
<section id="o-que-faco" class="main style2 right dark fullscreen">
<div class="content box style2">
<header>
<h2>O que eu faço?</h2>
</header>
<p>Eu sou Desenvolvedor de Front-end na <a href="https://toptal.com">Toptal</a>, trabalhando remoto e viajando pelo mundo. Também tenho um <a href="https://willianjusten.com.br">blog</a>, onde escrevo bastante sobre Front-end e também coisas mais pessoais. E agora tenho me aventurado em fotografia, adicionando minhas fotos no <a href="https://unsplash.com/@willianjusten">Unsplash</a> e no <a href="https://instagram.com/Will_justen">Instagram</a>.</p>
</div>
<a href="#trabalhos" class="button style2 down anchored">Next</a>
</section>
<!-- Work -->
<section id="trabalhos" class="main style3 primary">
<div class="content">
<header>
<h2>Meus Trabalhos</h2>
<p>Eu tenho uma paixão por fotografar paisagens, mas não fico somente a isto. Tenho fotos de arquitetura e também de macro
elementos, como, por exemplo, fotos de água-viva e outros objetos menores. Você pode ver todas as minhas fotos no site
do
<a href="http://unsplash.com/@willianjusten">Unsplash</a>.</p>
</header>
<!-- Gallery -->
<div class="gallery">
<article class="from-left">
<a href="images/fulls/hallstatt-full.jpeg" class="image fit">
<img src="images/thumbs/hallstatt-thumb.jpeg" title="Um barco chegando na cidade de Hallstatt." alt="" />
</a>
</article>
<article class="from-right">
<a href="images/fulls/iceland-waterfall-full.jpeg" class="image fit">
<img src="images/thumbs/iceland-waterfall-thumb.jpeg" title="Uma cachoeira em Iceland vista através de um drone." alt=""
/>
</a>
</article>
<article class="from-left">
<a href="images/fulls/iceland-waves-full.jpeg" class="image fit">
<img src="images/thumbs/iceland-waves-thumb.jpeg" title="A famosa Black Sand Beach de Iceland" alt="" />
</a>
</article>
<article class="from-right">
<a href="images/fulls/jellyfish-full.jpeg" class="image fit">
<img src="images/thumbs/jellyfish-thumb.jpeg" title="Uma água-viva vista no Aquário de Valência" alt="" />
</a>
</article>
<article class="from-left">
<a href="images/fulls/kaiaks-full.jpeg" class="image fit">
<img src="images/thumbs/kaiaks-thumb.jpeg" title="Kaiaks num pier visto por um drone." alt="" />
</a>
</article>
<article class="from-right">
<a href="images/fulls/pink-lake-full.jpeg" class="image fit">
<img src="images/thumbs/pink-lake-thumb.jpeg" title="Um lago rosa na Espanha sendo visto por um drone." alt="" />
</a>
</article>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="main style3 secondary">
<div class="content">
<header>
<h2>Diga um Oi :)</h2>
<p>Envie mensagens para contatos de trabalho ou qualquer outra dúvida.</p>
</header>
<div class="box">
<form method="post" action="/success" name="contact" netlify>
<div class="field half first"><input type="text" name="name" placeholder="Nome" /></div>
<div class="field half"><input type="email" name="email" placeholder="Email" /></div>
<div class="field"><textarea name="message" placeholder="Mensagem" rows="6"></textarea></div>
<ul class="actions">
<li><input type="submit" value="Enviar Mensagem" /></li>
</ul>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<!-- Icons -->
<ul class="actions">
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon fa-linkedin"><span class="label">LinkedIn</span></a></li>
<li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
<li><a href="#" class="icon fa-pinterest"><span class="label">Pinterest</span></a></li>
</ul>
<!-- Menu -->
<ul class="menu">
<li>© Untitled</li><li>Design: <a href="https://html5up.net">HTML5 UP</a></li>
</ul>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
</body>
</html>