-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.php
255 lines (221 loc) · 17.9 KB
/
index.php
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
<?php
// Include NitroPack SDK
include_once "nitro/bootstrap.php";
include_once "nitro/booster.php";
?>
<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>
Emanuele Papale | Digital Art Director & Designer
</title>
<meta name="description"
content="I’m a multi-disciplinary art director with a focus on Digital Design, Interaction Design, and Prototyping" />
<link rel="canonical" href="https://emanuelepapale.com" />
<link rel="alternate" hreflang="en" href="https://emanuelepapale.com" />
<link rel="shortcut icon" href="/assets/favicons/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" sizes="57x57" href="/assets/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/assets/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/assets/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/assets/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/assets/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/assets/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/assets/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/assets/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/assets/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="192x192" href="/assets/favicons/android-icon-192x192.png">
<meta property="og:locale" content="en_GB" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Emanuele Papale | Digital Art Director & Designer" />
<meta property="og:description"
content="I’m a multi-disciplinary art director with a focus on Digital Design, Interaction Design, and Prototyping" />
<meta property="og:url" content="https://emanuelepapale.com" />
<meta property="og:site_name" content="Emanuele Papale | Digital Art Director & Designer" />
<meta property="og:image" content="/assets/images/og_main.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="photo" />
<meta name="twitter:url" content="https://emanuelepapale.com" />
<meta name="twitter:description" content="I’m a multi-disciplinary art director with a focus on Digital Design, Interaction Design, and Prototyping" />
<meta name="twitter:title" content="Emanuele Papale | Digital Art Director & Designer" />
<meta name="twitter:image" content="/assets/images/og_main.jpg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noodp">
<link rel="dns-prefetch" href="//emanuelepapale.com">
<link rel="stylesheet" href="/css/master.min.css">
<link rel="stylesheet" href="/css/normalize.min.css">
<link rel="stylesheet" href="/css/fancybox.min.css">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SXH584WB3E"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-SXH584WB3E');
</script>
</head>
<body>
<?php include "components/header.php"; ?>
<main id="wrapper" data-barba="wrapper">
<div data-barba="container">
<section class="home_hero--wrapper">
<div class="home_hero--container">
<div class="hero_heading--container">
<div class="heading_title text">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1800 630" xmlns:v="https://vecta.io/nano"><g fill="#111"><path d="M1526.2 93h-.4l-4.5 185.3-6.3 175.3h22.6l-6.1-175.3zM383.1 93h-.5l-4.4 185.3-6.4 175.3h22.7l-6.1-175.3z"></path><use xlink:href="#B"></use><path d="M0 0v630h1800V0H0zm113 73.6H80.1v187.7h26.5v48.9H80.1v241.6H113v46.3H31.6V27.3H113v46.3zm195 524.5h-45.5l2-272.3 4.9-236.3h-.4l-32.4 508.6h-39.5L164.5 89.5h-.4l5.1 236.3 1.8 272.3h-45.5V27.3h72.6L214 304.5l2.6 92.8h.4l2.7-92.8 15.7-277.2H308v570.8zm91.4 0l-3.3-93.6H370l-3.3 93.6H321l33.4-570.8h60.7l34.7 570.8h-50.4zm196.3 0h-54.8l-32-323.9-13.7-160.8h-.4l11.8 322.7 2.4 162.1h-46V27.3h55.9l30 292.1 14.7 184.7h.4l-11.4-307-2.7-169.8h45.9v570.8zM731 542.5c0 19.4-5 34.3-15 44.7s-24.4 15.6-43.1 15.6-33.1-5.2-43.1-15.6-15-25.3-15-44.7V27.3h48.5v515.1c0 9.4 3.2 14.1 9.6 14.1s9.6-4.7 9.6-14.1V27.3H731v515.2zM831.5 73.6h-32.8v187.7h26.5v48.9h-26.5v241.6h32.8v46.3h-81.3V27.3h81.3v46.3zM919 598.1h-74.8V27.3h48.5v524.5H919v46.3zm93.9-524.5h-32.8v187.7h26.5v48.9h-26.5v241.6h32.8v46.3h-81.3V27.3h81.3v46.3zm136 305.8h-7.1v218.7h-48.5V27.3h55.7c21.1 0 36.4 4.8 46.1 14.4 9.6 9.6 14.5 24.8 14.5 45.8v232c0 20.9-4.8 36.2-14.5 45.7-9.8 9.4-25.2 14.2-46.2 14.2zm137.2 218.7l-3.3-93.6h-26.1l-3.3 93.6h-45.7l33.4-570.8h60.7l34.7 570.8h-50.4zm119.2-218.7h-7.1v218.7h-48.5V27.3h55.7c21.1 0 36.4 4.8 46.1 14.4 9.6 9.6 14.5 24.8 14.5 45.8v232c0 20.9-4.8 36.2-14.5 45.7-9.8 9.4-25.1 14.2-46.2 14.2zm137.2 218.7l-3.3-93.6h-26.1l-3.3 93.6h-45.7l33.4-570.8h60.7l34.7 570.8h-50.4zm138.4 0h-74.8V27.3h48.5v524.5h26.3v46.3zm94-524.5h-32.8v187.7h26.5v48.9h-26.5v241.6h32.8v46.3h-81.3V27.3h81.3v46.3zM1269.8 93h-.4l-4.5 185.3-6.3 175.3h22.6l-6.1-175.3z"></path><use xlink:href="#B" x="256.4"></use></g><defs><path id="B" d="M1148.9 73.6h-7.1v259.7h7.1c4.2 0 7.3-1.1 9.2-3.3s2.9-5.7 2.9-10.6v-232c0-4.9-1-8.4-2.9-10.6-1.9-2.1-5-3.2-9.2-3.2z"></path></defs></svg>
</div>
<div class="heading_title gradient">
<canvas id="gradient-canvas"></canvas>
</div>
<div class="heading_title mask">
<svg version="1.1" id="letters" xmlns:v="https://vecta.io/nano" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" fill="#111" viewBox="0 0 1800 630" style="enable-background:new 0 0 1800 630;" xml:space="preserve" data-delay="0.2" data-stagger="0.05"><rect x="27.2" y="23.6" class="single_letter" width="90.1" height="584.4"/><rect x="122.5" y="23.6" class="single_letter" width="188.5" height="584.4"/><rect x="318" y="23.6" class="single_letter" width="134.8" height="584.4"/><rect x="460" y="23.6" class="single_letter" width="138.8" height="584.4"/><rect x="611.8" y="23.6" class="single_letter" width="122.2" height="584.4"/><rect x="747.2" y="23.6" class="single_letter" width="87.3" height="584.4"/><rect x="841.2" y="23.6" class="single_letter" width="80.8" height="584.4"/><rect x="928.9" y="23.6" class="single_letter" width="87" height="584.4"/><rect x="1090.3" y="23.6" class="single_letter" width="121.3" height="584.4"/><polygon class="single_letter" points="1339.5,608 1204.7,608 1234.7,23.6 1339.5,23.6 "/><rect x="1346.7" y="23.6" class="single_letter" width="121.3" height="584.4"/><polygon class="single_letter" points="1595.9,608 1461.1,608 1491.1,23.6 1595.9,23.6 "/><rect x="1603.1" y="23.6" class="single_letter" width="80.8" height="584.4"/><rect x="1690.6" y="23.6" class="single_letter" width="87" height="584.4"/></svg>
</div>
</div>
<div class="hero_text--container">
<p data-animation="chars" data-delay="4" data-stagger="0.02"><span data-animation="fade" data-delay="0.5"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" xmlns:v="https://vecta.io/nano"><g transform="matrix(0 1 -1 0 13 1)" stroke="#fff" fill="none" stroke-width="1.5"><path d="M2.769 0H12v9.231"/><path d="M12 0L0 12"/></g></svg></span>Digital art director and designer based in Amsterdam</p>
</div>
</div>
<div class="circular_text--container"></div>
</section>
<section class="default_row--container intro">
<div class="inner--container">
<div class="intro_text--container">
<p data-animation="words" data-delay="0" data-stagger="0.03">
I’m a multi-disciplinary art director with a focus on Digital Design, Interaction Design, and Photo Editing. I've been delivering creative and engaging solutions across brand identity, website, app, and digital media for almost 10 years.<br><br>
I’m currently working as a digital designer at Studio MINSK, a branding agency with devotion to motion, in Amsterdam.
</p>
<a data-animation="fade-up" class="lovely_button link" href="/about" target="_self" data-delay="0"><span class="text">More about me</span></a>
</div>
<div class="about_services--container">
<h3 data-animation="chars" data-delay="0" data-stagger="0.03">Expertises</h3>
<ul data-animation="animated-list" data-delay="0" data-stagger="0.06">
<li>Art Direction</li>
<li>Digital Design</li>
<li>Branding</li>
<li>UI / UX Design</li>
<li>Product Design</li>
<li>Graphic Design</li>
<li>Concepting</li>
</ul>
</div>
</div>
</section>
<section class="default_row--container home_portfolio--wrapper">
<div class="inner--container">
<div class="featured_projects--container">
<div class="featured_projects">
<div class="single_project">
<div class="project_info--container">
<p class="project_title">Studio MINSK</p>
<ul class="project_meta">
<li>UX/UI Design</li>
<li>Frontend Development</li>
</ul>
</div>
<div class="project_picture--container">
<img class="lazy" src="/assets/projects/featured_minsk.webp" srcset="/assets/projects/featured_minsk_XS.webp 600w, /assets/projects/featured_minsk.webp 1000w" sizes="(max-width: 600px) 100vw, 50vw" data-src-jpg="/assets/projects/featured_minsk.jpg" alt="Studio MINSK website laptop mockup">
</div>
<a href="/projects/studio-minsk" class="project_link" aria-label="Read more about this case study"></a>
</div>
<div class="single_project">
<div class="project_info--container">
<p class="project_title">Clavi App</p>
<ul class="project_meta">
<li>Branding</li>
<li>UX/UI Design</li>
</ul>
</div>
<div class="project_picture--container">
<img class="lazy" src="/assets/projects/featured_clavi.webp" srcset="/assets/projects/featured_clavi_XS.webp 600w, /assets/projects/featured_clavi.webp 1000w" sizes="(max-width: 600px) 100vw, 50vw" data-src-jpg="/assets/projects/featured_clavi.jpg" alt="Clavi App phone mockup">
</div>
<a href="/projects/clavi" class="project_link" aria-label="Read more about this case study"></a>
</div>
<div class="single_project">
<div class="project_info--container">
<p class="project_title">How Many Animals?</p>
<ul class="project_meta">
<li>Advertising</li>
<li>Photo Retouching</li>
</ul>
</div>
<div class="project_picture--container">
<img class="lazy" src="/assets/projects/featured_hma.webp" srcset="/assets/projects/featured_hma_XS.webp 600w, /assets/projects/featured_hma.webp 1000w" sizes="(max-width: 600px) 100vw, 50vw" data-src-jpg="/assets/projects/featured_hma.jpg" alt="How many animals tiger campaign">
</div>
<a href="/projects/how-many-animals" class="project_link" aria-label="Read more about this case study"></a>
</div>
<div class="single_project">
<div class="project_info--container">
<p class="project_title">Invest International</p>
<ul class="project_meta">
<li>UX/UI Design</li>
</ul>
</div>
<div class="project_picture--container">
<img class="lazy" src="/assets/projects/featured_invest.webp" srcset="/assets/projects/featured_invest_XS.webp 600w, /assets/projects/featured_invest.webp 1000w" sizes="(max-width: 600px) 100vw, 50vw" data-src-jpg="/assets/projects/featured_invest.jpg" alt="Macbook mockup with Invest International website">
</div>
<a href="/projects/invest-international" class="project_link" aria-label="Read more about this case study"></a>
</div>
<div class="single_project">
<div class="project_info--container">
<p class="project_title">Luxottica Instore Apps</p>
<ul class="project_meta">
<li>UX/UI Design</li>
<li>Motion Design</li>
</ul>
</div>
<div class="project_picture--container">
<img class="lazy" src="/assets/projects/featured_luxottica.webp" srcset="/assets/projects/featured_luxottica_XS.webp 600w, /assets/projects/featured_luxottica.webp 1000w" sizes="(max-width: 600px) 100vw, 50vw" data-src-jpg="/assets/projects/featured_luxottica.jpg" alt="Luxottica in-store ipad apps mockup">
</div>
<a href="/projects/luxottica" class="project_link" aria-label="Read more about this case study"></a>
</div>
<div class="single_project">
<div class="project_info--container">
<p class="project_title">Kill your idols Part II</p>
<ul class="project_meta">
<li>3D Design</li>
<li>Personal Project</li>
</ul>
</div>
<div class="project_picture--container">
<img class="lazy" src="/assets/projects/featured_kyi_part2.webp" srcset="/assets/projects/featured_kyi_part2_XS.webp 600w, /assets/projects/featured_kyi_part2.webp 1000w" sizes="(max-width: 600px) 100vw, 50vw" data-src-jpg="/assets/projects/featured_kyi_part2.jpg" alt="Kill your idols part II main visual">
</div>
<a href="/projects/kill-your-idols" class="project_link" aria-label="Read more about this case study"></a>
</div>
</div>
</div>
</div>
<div class="portfolio_trigger">
<div class="portfolio_scrollable--container">
<div class="scrollable_text"><p>Recent work</p></div>
<div class="scrollable_timeline">
<div class="progress bar"></div>
<div class="progress background"></div>
</div>
</div>
</div>
</section>
<section class="default_row--container sub_portfolio">
<div class="inner--container">
<a data-animation="fade-up" class="lovely_button link" href="/portfolio" target="_self" data-delay="0"><span class="text">View all projects</span></a>
</div>
</section>
<?php include "components/cta.php"; ?>
<div class="cursor__pointer"><img src="/assets/images/arrow_up.png" width="100" width="100"></div>
<?php include "components/mobile-menu.php"; ?>
<div class="loader_wrapper">
<div id="loading_animation"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
</div>
</div>
</main>
<?php include "components/footer.php"; ?>
</body>
</html>