-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
269 lines (254 loc) · 14.9 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Portafolio</title>
<link rel="shorcut icon" type="assets/images/joy.png" href="assets/images/joy.png">
<link rel="stylesheet" href="css/main.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Pacifico|Sacramento" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.8/typicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
</head>
<body>
<!-- Header Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<header id="header">
<div class="main_nav">
<div class="container">
<div class="mobile-toggle"> <span></span> <span></span> <span></span> </div>
<nav>
<ul>
<li><a class="smoothscroll" href="#header">Home</a></li>
<li><a class="smoothscroll" href="#about">About</a></li>
<li><a class="smoothscroll" href="#portfolio">Work</a></li>
<li><a class="smoothscroll" href="#skills">Services</a></li>
<li><a class="smoothscroll" href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</div>
<div class="title">
<div><span class="typcn typcn-heart-outline icon heading"></span></div>
<div class="smallsep heading"></div>
<h1 class="heading"> Joy Esquivel</h1>
<h2 class="heading">UX DESIGNER & RESEARCHER</h2>
<a class="smoothscroll" href="#about">
<div class="mouse">
<div class="wheel"></div>
</div>
</a> </div>
<a class="smoothscroll" href="#about">
<div class="scroll-down"></div>
</a> </header>
<!-- About Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<section id="about">
<div class="container">
<div class="row">
<h1>Sobre mí</h1>
<div class="block"></div>
<p>Estratega UX. Investigo y diseño estrategias, servicios y productos que tienen sentido para las empresas y los usuarios. Disfruto convertir problemas complejos en diseños de interfaces simples, hermosas e intuitivas</p>
</div>
<div class="row">
<div class="six columns">
<h3><span class="typcn typcn-device-desktop icon"></span>Qué hago</h3>
<p>Ayudo a las empresas con la innovación (digital). Al diseñar sus servicios, pero aún más importante al responder a sus desafíos de estrategia digital:
"¿Qué hacemos?", "¿Para quién?", "¿Por qué exactamente?" Y "¿Por dónde empezamos?"</p>
</div>
<div class="six columns">
<h3><span class="typcn typcn-pen icon"></span>Enfoque</h3>
<p>Trabajar duro todos los días para mantener una cultura constructiva y positiva y difundir esa alegría y pasión en las oficinas y en los hogares de los usuarios finales en todo el mundo.</p>
</div>
<div class="row">
<div class="six columns">
<h3><span class="typcn typcn-cog-outline icon"></span>Meta</h3>
<p>Generar un impacto global, siempre dispuesta a dar más, y unirme a un equipo multidisciplinario, para desarrollar la mejor tecnología, que facilite y mejore la vida de los usuarios cada día.</p>
</div>
<div class="six columns">
<h3><span class="typcn typcn-lightbulb icon"></span>Misión</h3>
<p>Hacer las cosas más fáciles de usar, sobre la base de la ciencia, el diseño y la idea de que todas las cosas pueden ser intuitivas si están diseñadas con un profundo conocimiento del comportamiento humano.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Team Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<section id="portfolio">
<div class="container">
<div class="row">
<h1>Portafolio</h1>
<div class="block"></div>
<!-- <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> -->
</div>
<div class="row">
<div class="three columns"> <a href="http://busticket.techroom.mx/" target="_blank"><img src="assets/images/busticket_logo-01.png" width="220" height="220" alt=""/></a>
<h5><strong>Bus ticket</strong></h5>
<p><strong>UX Researcher</strong></p>
<a href="https://github.com/joyloove/Busticket" target="_blank"> <span class="typcn typcn-social-github-circular icon"><!--</span><span class="typcn typcn-social-instagram-circular icon"></span><span class="typcn typcn-social-google-plus-circular icon"></span><span class="typcn typcn-social-linkedin-circular icon"></span>--></a> </div>
<div class="three columns"> <a href="https://joyloove.github.io/Guanajuato-talent/" target="_blank"><img src="assets/images/guanajuato-01.jpg" width="220" height="220" alt=""/></a>
<h5><strong>Guanajuato</strong></h5>
<p><strong>Product Owner</strong></p>
<a href="https://github.com/joyloove/Guanajuato-talent" target="_blank"> <span class="typcn typcn-social-github-circular icon"><!--</span><span class="typcn typcn-social-instagram-circular icon"></span><span class="typcn typcn-social-google-plus-circular icon"></span><span class="typcn typcn-social-linkedin-circular icon"></span>--></a> </div>
<div class="three columns"> <a href="https://goo.gl/BjmRKA" target="_blank"><img src="assets/images/stcm-01.png" width="220" height="220" alt=""/></a>
<h5><strong>Save The Children</strong></h5>
<p><strong>UX Researcher & Designer</strong></p>
<a href="https://github.com/joyloove/Save-The-Children"> <span class="typcn typcn-social-github-circular icon"><!--</span><span class="typcn typcn-social-instagram-circular icon"></span><span class="typcn typcn-social-google-plus-circular icon"></span><span class="typcn typcn-social-linkedin-circular icon"></span>--></a> </div>
<div class="three columns"> <a href="https://joyloove.github.io/lab-car-boilerplate/" target="_blank"> <img src="assets/images/iPhone6Plus.png" width="220" height="220" alt=""/></a>
<h5><strong>LabCar</strong></h5>
<p><strong>FrontEnd Developer</strong></p>
<a href="https://github.com/joyloove/lab-car-boilerplate" target="_blank"><span class="typcn typcn-social-github-circular icon"><!--</span><span class="typcn typcn-social-instagram-circular icon"></span><span class="typcn typcn-social-google-plus-circular icon"></span><span class="typcn typcn-social-linkedin-circular icon"></span>--></a> </div>
</div>
</div>
</section>
<!-- Skills Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<section id="skills">
<div class="container">
<h1>Services</h1>
<div class="block"></div>
<div class="row">
<div class="one-third column">
<h3>Branding</h3>
<p>Exploto toda mi creatividad para crear campañas de publicidad que estén en boca de todos. Creo marcas cuidando cada detalle en el proceso para asegurandome de hablar el mismo lenguaje que su mercado. ¿Nueva marca? Me encargaré de su identidad corporativa y web.</p>
</div>
<div class="one-third column">
<h3>User Experience</h3>
<p>Me enfoco en tener una comprensión profunda de los usuarios, lo que necesitan, lo que valoran, sus habilidades y también sus limitaciones. También tomo en cuenta las metas y objetivos del negocio para quién se desarrolla el proyecto. Con las mejores prácticas de UX promoviendo la mejora de la calidad de la interacción del usuario con el producto y los servicios relacionados.</p>
</div>
<div class="one-third column">
<h3>Marketing</h3>
<p>Planeo, desarrollo y ejecuto campañas en medios digitales a gran escala, tanto en redes sociales como en la red de display y búsqueda de Google Adwords. Además, ofrezco consultoría en marketing digital, publicidad, web y capacitaciones de redes sociales.</p>
</div>
</div>
<div class="row">
<div class="eight columns">
<div class="progressBar">
<h4>HTML5</h4>
<div class="progressBarContainer">
<div class="progressBarValue value-90"></div>
</div>
</div>
<div class="progressBar">
<h4>CSS3</h4>
<div class="progressBarContainer">
<div class="progressBarValue value-80"></div>
</div>
</div>
<div class="progressBar">
<h4>JavaScript</h4>
<div class="progressBarContainer">
<div class="progressBarValue value-60"></div>
</div>
</div>
<div class="progressBar">
<h4>WordPress</h4>
<div class="progressBarContainer">
<div class="progressBarValue value-70"></div>
</div>
</div>
</div>
<div class="four columns">
<!-- <p>Lorem ipsum dolor sit amet, enim soluta consectetur adipisicing elit. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis in quia eum autem. Enim soluta consectetur adipisicing elit.</p>-->
</div>
</div>
</div>
</section>
<!-- Portfolio Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<!-- <section id="portfolio">
<div class="container">
<h1>Work</h1>
<div class="block"></div>
<div class="row">
<div class="three columns"> <img src="http://placehold.it/220x220" class="image" alt="Work One"/></div>
<div class="three columns"> <img src="http://placehold.it/220x220" class="image" alt="Work Two"/></div>
<div class="three columns"> <img src="http://placehold.it/220x220" class="image" alt="Work Three"/></div>
<div class="three columns"> <img src="http://placehold.it/220x220" class="image" alt="Work Four"/></div>
</div>
<div class="row" style="margin-top: 30px;">
<div class="three columns"> <img src="http://placehold.it/220x220" class="image" alt="Work Five"/></div>
<div class="three columns"> <img src="http://placehold.it/220x220" class="image" alt="Work Six"/></div>
<div class="three columns"> <img src="http://placehold.it/220x220" class="image" alt="Work Seven"/></div>
<div class="three columns"> <img src="http://placehold.it/220x220" class="image" alt="Work Eight"/></div>
</div>
</div>
</section> -->
<!-- Testimonials Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<section id="testimonial">
<div class="container">
<div class="quoteLoop">
<blockquote class="quote"> <img src="assets/images/laura-295x295.jpg" width="100" height="100" alt=""/>
<h5> <br>
”Proactiva y creativa por naturaleza. Busca de forma constante el progreso en su trabajo y en el de su equipo. Organización y planificación de proyectos es su fuerte.”<br>
<small>Laura Figueroa, Communitty Manager, Laboratoria</small></h5>
</blockquote>
<blockquote class="quote"> <img src="assets/images/camilo-400x400.jpg" width="100" height="100" alt=""/>
<h5> <br>
“Muy buena investigadora y diseñadora. Esta preparada para manejar personal.”<br>
<small>Camilo Salazar París, CCO & Lead Designer - Synapbox</small></h5>
</blockquote>
<blockquote class="quote"> <img src="assets/images/karla-400x400.jpg" width="100" height="100" alt=""/>
<h5> <br>
“Joy es muy profesional, siempre busca cómo ir más allá e inspirar a sus compañeras de hacerlo también.”<br>
<small>Karla Nava, UX Teacher, Laboratoria</small></h5>
</blockquote>
<blockquote class="quote"> <img src="assets/images/lucille-258x258.jpg" width="100" height="100" alt=""/>
<h5> <br>
“Jocelyn nos ha impresionado durante la especialización UX Design por su gran capacidad de liderazgo y por la creatividad de sus proyectos. Es muy capaz y dedicada.”<br>
<small>Lucile Baratier, Training Manager, Laboratoria</small></h5>
</blockquote>
</div>
</div>
</section>
<!-- Contact Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<section id="contact">
<div class="container">
<h1>Contacto</h1>
<div class="block"></div>
<div class="row">
<div class="six columns">
<img src="assets/images/joy.jpg" alt="">
</div>
<div class="six columns">
<h3><span class="typcn typcn-device-phone icon"></span>55.40.68.20.87</h3>
<h3><span class="typcn typcn-mail icon"></span>jocelyn.esquivel24@gmail.com</h3>
</div>
</div>
<!-- <div class="six columns">
<label for="exampleRecipientInput">Name</label>
<input class="u-full-width" type="text">
</div>
<div class="six columns">
<label for="exampleEmailInput">Email</label>
<input class="u-full-width" type="email">
</div>
</div>
<div class="row">
<label for="exampleMessage">Message</label>
<textarea class="u-full-width"></textarea> -->
<div class="row">
<div class="six columns">
<a href="assets/documents/joycv-ux.pdf" class="action-button shadow animate blue" download="Joy-CV" class="download-cv">Descarga mi CV</a>
</div>
</div>
</section>
<!-- Footer Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<footer>
<div class="container">
<div class="nine columns">
<p class="by">Created with <span class="typcn typcn-heart-full-outline socialIcons"></span> by Joy.</p>
</div>
<div class="three columns"> <a href="https://github.com/joyloove" target="_blank"><span class="typcn typcn-social-github-circular socialIcons"></span></a> <a href="https://www.linkedin.com/in/joylov3/" target="_blank"><span class="typcn typcn-social-linkedin-circular socialIcons"></span></a> </div>
</div>
</footer>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>