-
Notifications
You must be signed in to change notification settings - Fork 0
/
index2.html
250 lines (235 loc) · 13 KB
/
index2.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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Portfolio de Dani Fernández | Product Designer UX/UI</title>
<meta name="description"
content="I'm Dani Fernández, a passionate about Product Design and a good problem-solver. An eternal student who learns something new related to the field every day. A great team player, comfortable working together with other designers, receiving feedback, sharing and learning together.">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-138930336-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-138930336-1');
</script>
<!-- fin del script de Google Analytics-->
<link rel="icon" type="image/png" href="img/favicon.ico">
<style>
@import url('https://fonts.googleapis.com/css?family=Cabin&display=swap');
</style>
<meta name="description" content="Dani Fernàndez's portfolio. UX/UI designer">
<meta name="keywords"
content="UX, User Expirience, UI, Product Designer, User Interface, IA, Information Arquitecture, web design, mobile design, app design, mobile first, pixel perfect, sketch, framer, zeplin, axure, xd, hotjar">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/fonts.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive-css.css">
<link rel="stylesheet" href="grt-responsive-menu.css">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
</head>
<body>
<!-- <div class="fullscreen-bg">
<video loop muted autoplay class="fullscreen-bg__video">
<source src="img/background-video/background-vd.ogv" type="video/ogg" />
</video>
</div> -->
<header>
<div class="container">
<div class="grt-menu-row">
<div class="grt-menu-logo">
<a href="#" class="grt-logo"><img id="logo" src="img/Logo.svg" alt="Logo" height="50" width="68">
</a>
</div>
<div class="grt-menu-right">
<nav>
<button class="grt-mobile-button"><span class="line1"></span><span class="line2"></span><span
class="line3"></span></button>
<ul class="grt-menu">
<li><a href="about-me.html">About</a></li>
<li class="grt-dropdown"><a>Work<span style="font-size: 0.75em;">
<i class="fas fa-chevron-down"></i></span></a>
<ul class="grt-dropdown-list">
<li><a href="/work/wellness.html">Safely</a></li>
<li><a href="/work/capstone.html">Capstone</a></li>
<li><a href="/bac.html">Barcelona Activa</a></li>
<li><a href="/work/dali.html">Museu Dalí</a></li>
<li><a href="/work/extra.html">Extra</a></li>
</ul>
</li>
<li><a href="mailto:danifdezalonso@gmail.com">Contact</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<div class="container">
<!-- introducción -->
<div class="bienvenida">
<div class="my-name">
I'm Dani, a multidisciplinary and proactive designer from Barcelona. I'm passionate about technology and
willing to learn and try new things. I enjoy creating user-centric, empathetic and human experiences
with a focus on detail, quality and results.
</div>
<div class="my-work">Currently working as a Product Designer at <a class="link" target="_blank"
href="https://ubeeqo.com/en/es">Ubeeqo</a> and as Professor Assistant at <a class="link"
target="_blank" href="https://www.uoc.edu/">UOC</a>.
<br><span style="font-weight: 500; font-size: 24px;"><a href="about-me.html" class=”link">Read more
about me →</a></span>
</div>
</div>
<!-- proyectos -->
<main>
<div class="row projectes">
<div class="col-lg-5 box wellness">
<a href="work/wellness.html" style="text-decoration:none;">
<article>
<div>
<h2>Wellness project</h2>
<h5>Mobile app</h5>
<p>
Safely is a shared geolocation app. It allows user to share their location with
loved ones and feel secure in the knowledge that someone is looking out for them. In
addition, it provides extra useful functionalities for emergencies such as emergency
call, false call, etc </p>
<span class="leer-case-study">Read Case Study in Spanish</span><img
src="img/icons/arrow-right.svg" height="32px" width="32px" style="margin-left:8px">
</div>
<div>
<img class="center-img" src="img/Mockup_Safely.png" height="300" width="150">
</div>
</article>
</a>
</div>
<div class="col-lg-5 box capstone offset-lg-1">
<a href="work/capstone.html" style="text-decoration:none;">
<article>
<div>
<h2>Capstone project</h2>
<h5>Mobile app</h5>
<p>
TaxiSharing is an application that allows you to find companions for taxi journeys
and thus be able to split expenses and minimize environmental impact. </p>
<span class="leer-case-study">Read Case Study</span><img src="img/icons/arrow-right.svg"
height="32px" width="32px" style="margin-left:8px">
</div>
<div>
<img class="center-img" src="img/Mockup_TaxiSharing2.png" height="300" width="150">
</div>
</article>
</a>
</div>
</div>
<div class="row projectes">
<div class="col-lg-5 box dali" data-aos="fade-up">
<a href="work/dali.html" style="text-decoration:none;">
<article>
<div>
<h2>Fundación Gala - Salvador Dalí</h2>
<h5>Web project</h5>
<p>
The Gala-Salvador Dalí Foundation is a private cultural organization which, as
stated in its bylaws, has the mission to promote, foster, explain, give prestige,
protect and defend the artistic, cultural and intellectual oeuvre of the painter,
both inside and outside Spain. </p>
<span class="leer-case-study">See more</span><img src="img/icons/arrow-right.svg"
height="32px" width="32px" style="margin-left:8px">
</div>
<div>
<img class="center-img" src="img/extra/cabecera-dali-mobile.png" height="auto"
width="100%">
</div>
</article>
</a>
</div>
<div class="col-lg-5 box bac offset-lg-1" data-aos="fade-up">
<a href="work/bac.html" style="text-decoration:none;">
<article>
<div>
<h2>Barcelona Activa</h2>
<h5>Web project</h5>
<p>Design of the Barcelona Activa website, a local development agency of Barcelona City
Council. From this website, traffic is distributed to the four main sections to
promote the local economy.</p>
<span class="leer-case-study">See more</span><img src="img/icons/arrow-right.svg"
height="32px" width="32px" style="margin-left:8px">
</div>
<div>
<img class="center-img" src="img/extra/cabecera-bac-mobile.png" height="auto"
width="100%">
</div>
</article>
</a>
</div>
</div>
<div class="row projectes">
<div class="col-lg-11 box extra" data-aos="fade-up">
<a href="work/extra.html" style="text-decoration:none;">
<article style="padding-bottom: 40px;">
<h2>Extra</h2>
<p>
Compilation of projects in which I participated. </p>
<span class="leer-case-study">See more<img src="img/icons/arrow-right.svg" height="32px"
width="32px" style="margin-left:8px"></span>
</article>
</a>
</div>
</div>
</main>
</div>
<!--Footer-->
<footer class="footer" data-aos="fade-up" style="margin-top:-20px;">
<div class="container">
<section id="mainfooter">
<h3 class="a-left">
For work inquiries, collaboration or feedback drop me a line at <a
href="mailto:danifdezalonso@gmail.com" target="_blank">danifdezalonso@gmail.com</a>
</h3>
<nav class="socialnav">
<span class="linkedin"><a href="https://www.linkedin.com/in/dani-fdez/" class="linkedin"
target="_blank">LinkedIn</a></span>
<span class="medium"><a href="https://danifdezalonso.medium.com/" class="medium"
target="_blank">Medium</a></span>
<span class="twitter"><a href="https://twitter.com/dani_fdezalonso" class="twitter"
target="_blank">Twitter</a></span>
<span class="github"><a href="https://github.com/danifdezalonso" class="github"
target="_blank">GitHub</a></span>
</nav>
</section>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<!-- Github button for demo page -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<!-- GRT Youtube Popup -->
<script src="grt-responsive-menu.js"></script>
<!-- AOS Libreria de animación -->
<!--Animaciones AOS quitadas en mobile-->
<script>
AOS.init({
duration: 400,
disable: 'mobile',
once: true,
});
</script>
<script src="js/footer.js"></script>
</body>
</html>