/
index.html
410 lines (363 loc) · 28.3 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
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
<!DOCTYPE html>
<html id="home">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="header" class="header">
<span id="menu-toggle" class="header__show-menu">menu</span>
<ul id="menu" class="header__menu horizontal-list">
<li class="header__menu__item"><a class="header__menu__link" href="#home">home</a></li>
<li class="header__menu__item"><a class="header__menu__link" href="#frontend">frontend</a></li>
<li class="header__menu__item"><a class="header__menu__link" href="#design">design</a></li>
<li class="header__menu__item"><a class="header__menu__link" href="#backend">backend</a></li>
<li class="header__menu__item"><a class="header__menu__link" href="#experience">experience</a></li>
<li class="header__menu__item"><a class="header__menu__link" href="#education">education</a></li>
<li class="header__menu__item"><a class="header__menu__link" href="#other">other</a></li>
<li class="header__menu__item"><a class="header__menu__link" href="#contact">contact</a></li>
</ul>
</div>
<div class="intro">
<div class="content-wrapper clearfix">
<img class="intro__img left" src="img/me.png" alt="Rafa">
<div class="intro__text right">
<h1>Hi, my name is Rafa D. Latorre López Villalta</h1>
<p>I am a <strong>Frontend Engineer</strong> with a deep understanding of UX design and quite some experience in the Backend.</p>
<p>
I am more of a designer than the traditional Javascript programmer but still much more experienced at programming than designing.
</p>
<p>This odd mix allows me to design usable and appealing interfaces that have into account the architecture of the system and are easy to implement.</p>
</div>
</div>
</div>
<div class="highlights section">
<ul class="content-wrapper horizontal-list clearfix">
<li class="highlight">
<a class="highlight__link" href="#frontend">
<span class="highlight__main-icon icon-screen"></span>
<span class="highlight__title highlight__title--frontend">frontend</span>
<span class="highlight__left-icon icon-css3"></span>
<span class="highlight__right-icon icon-chrome"></span>
<span class="highlight__bottom-icon icon-html5"></span>
</a>
</li>
<li class="highlight">
<a class="highlight__link" href="#design">
<span class="highlight__main-icon icon-pen"></span>
<span class="highlight__title highlight__title--design">design</span>
<span class="highlight__left-icon icon-image"></span>
<span class="highlight__right-icon icon-quill"></span>
<span class="highlight__bottom-icon icon-pacman"></span>
</a>
</li>
<li class="highlight">
<a class="highlight__link" href="#backend">
<span class="highlight__main-icon icon-code"></span>
<span class="highlight__title highlight__title--backend">backend</span>
<span class="highlight__left-icon icon-console"></span>
<span class="highlight__right-icon icon-gears"></span>
<span class="highlight__bottom-icon icon-linux"></span>
</a>
</li>
</ul>
</div>
<div class="section skillset__wrapper">
<div class="content-wrapper">
<h2 class="skillset__header">Skillset</h2>
<svg id="skillset" class="skillset">
<text y="20" x="100%" dx="-180" id="skillset__back" class="skillset__back" >Back to General Overview</text>
</svg>
</div>
</div>
<div id="frontend" class="frontend section">
<div class="content-wrapper clearfix">
<div class="section__intro left" href="#frontend">
<span class="section__main-icon icon-screen"></span>
<span class="section__title section__title--frontend">frontend</span>
<span class="section__left-icon icon-css3"></span>
<span class="section__right-icon icon-chrome"></span>
<span class="section__bottom-icon icon-html5"></span>
</div>
<div class="section__description right">
<div class="clearfix">
<h3 class="section__description__title left">Javascript</h3>
<p class="section__description__experience right">Experience: <span class="js-experience" data-year="2009" data-month="9">4</span> years</p>
</div>
<p>I don't consider Javascript a toy language and I'm pretty aware of the bad habits usually related to this language. I follow Cockford's Javascript: The Good Parts advise and try to stay up to date on good Javascript Patterns. I would need a little push to use JSlint but I would be really glad to get to a company that encourages it.</p>
<p>I have been working for <span class="js-experience" data-year="2012" data-month="0">4</span> years with with different Javascript frameworks like Backbone, AngularJS, Knockout, SpineJS and React. Currently I work mainly with React which I find not only awesome and easy to use but a good way to enforce good practices.</p>
<p>I don't need to rely on Javascript frameworks to implement rich experiences. I have extensive experience using JQuery and UnderscoreJS and plenty of other libraries to bend the browser to my will.</p>
<p>Generally I create interactions optimized for smoothness and low power consumption, relying as much as I can on CSS transitions and animations, so I can keep Interaction, presentation and content layers separated.</p>
<p>Programming with Coffescript is not a problem to me, though I'm a bigger fan of Vanilla Javascript</p>
<p>I have played with Yeoman (Grunt+Bower+YO), Browserify and Webpack but didn't have the chance of using it in real life production environments, I would love to be able to use Webpack in production.</p>
<p>Videogame programming was one of my hobbies and I have explored several HTML5/JS game engines and frameworks such as Phaser, ImpactJS or EaselJS. That has been quite useful to learn new ways of structuring the code and write performant webapps.</p>
<h4 class="section__tag-title">keywords:</h4>
<ul class="horizontal-list section__tags--frontend clearfix">
<li class="section__tag" > Jquery </li>
<li class="section__tag" > Good Parts </li>
<li class="section__tag" > React </li>
<li class="section__tag" > Redux / Flux </li>
<li class="section__tag" > AngularJS </li>
<li class="section__tag" > SpineJS </li>
<li class="section__tag" > Knockoutjs </li>
<li class="section__tag" > Backbone </li>
<li class="section__tag" > D3JS </li>
<li class="section__tag" > Webpack </li>
<li class="section__tag" > Yeoman </li>
<li class="section__tag" > Underscorejs </li>
<li class="section__tag" > Javascript APIS </li>
<li class="section__tag" > Javascript + CSS3 transitions/Animations </li>
</ul>
<div class="clearfix">
<h3 class="section__description__title left">HTML <em>&</em> CSS</h3>
<p class="section__description__experience right">Experience: <span class="js-experience" data-year="2007" data-month="3">4</span> years</p>
</div>
<p>I'm very good & fast at writing clean, efficient, and semantically correct HTML & CSS.</p>
<p>I always apply graceful degradation philosophy to my works, due to my extensive experience I almost unconsciously apply styling patterns that result in posterior little or no crossbrowser debugging. I can also choose to ignore crossbrowser limitations to write code even faster and access features only available in modern browsers.</p>
<p>I have quite a good understanding of architectural strategies such as <a href="https://en.bem.info/methodology/quick-start/">BEM</a>, <a href="https://smacss.com/">SMACSS</a>, <a href="https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/">Object Oriented CSS</a> and <a href="http://bradfrost.com/blog/post/atomic-web-design/">Atomic Design</a>. I have used almost all of them or some useful bits in production environments.</p>
<p>I have experience with both SCSS and LESS and I'm pretty aware of the best practices to make them turn into a clean and efficient compiled CSS.</p>
<h4 class="section__tag-title">keywords:</h4>
<ul class="horizontal-list section__tags--frontend clearfix">
<li class="section__tag"> CSS </li>
<li class="section__tag"> CSS3 </li>
<li class="section__tag"> HTML </li>
<li class="section__tag"> HTML5 </li>
<li class="section__tag"> SMACSS </li>
<li class="section__tag"> BEM </li>
<li class="section__tag"> Atomic Design </li>
<li class="section__tag"> LESS </li>
<li class="section__tag"> SMACSS </li>
<li class="section__tag"> OOCSS </li>
<li class="section__tag"> Modular Design </li>
</ul>
</div>
</div>
</div>
<div id="design" class="design section">
<div class="content-wrapper clearfix">
<div class="section__intro right" href="#frontend">
<span class="section__main-icon icon-pen"></span>
<span class="section__title section__title--design">design</span>
<span class="section__left-icon icon-image"></span>
<span class="section__right-icon icon-quill"></span>
<span class="section__bottom-icon icon-pacman"></span>
</div>
<div class="section__description left">
<div class="clearfix">
<h3 class="section__description__title left">Design</h3>
<p class="section__description__experience right">Experience: <span class="js-experience" data-year="2008" data-month="3">4</span> years</p>
</div>
<p>At the beginning of my career as an all round developer I learnt the principles of good design, composition and readability.</p>
<p>Over the years I got a really good grip on how users interact with apps and how to guide them through the desired flows and goals in an easy and pleasant way.</p>
<p>I understand color theory in a way that I'm not only able to create or find good color schemes but I'm also able to parametrically generate color schemes which have a good contrast and great looks.</p>
<p>I'm really good at designing flows and using time as another dimension to have into account. This makes me able to spot problematic scenarios and solve them beforehand in any interaction flow.</p>
<p>I have some experience with Adobe products as Photoshop, Illustrator and Fireworks. I have been using the Gimp and Inkscape as my main design tools for several years. I switched to OSX in 2014, since then I have been using mainly Sketch and Affinity Designer, being specially proficient with the first.</p>
<p>During the last few years design has been my responsibility and I have been creating really detailed and complex mocks and prototypes in very short amounts of time.</p>
<p>Since I was a child I've been interested in art and drawing and it has been great hobby of mine since I was 8.</p>
<p>Usability and User Experience are extremely important to me. I have the need to make everything as easy and delightful to use as possible. That's why I invest a good share of my time studying psychology, Usability and UX in general. </p>
<h4 class="section__tag-title">keywords:</h4>
<ul class="horizontal-list section__tags--design clearfix">
<li class="section__tag">Color Theory </li>
<li class="section__tag">Aural proportions </li>
<li class="section__tag">Typography </li>
<li class="section__tag">Sketch </li>
<li class="section__tag">Affinity Designer </li>
<li class="section__tag">Invision </li>
<li class="section__tag">Inkscape </li>
<li class="section__tag">Phostoshop </li>
<li class="section__tag">Ilustrator </li>
<li class="section__tag">The Gimp </li>
<li class="section__tag">Prototyping </li>
<li class="section__tag">Interaction Design </li>
<li class="section__tag">UX Design </li>
<li class="section__tag">Art </li>
<li class="section__tag">Illustration </li>
</ul>
</div>
</div>
</div>
<div id="backend" class="backend section">
<div class="content-wrapper clearfix">
<div class="section__intro left" href="#frontend">
<span class="section__main-icon icon-code"></span>
<span class="section__title section__title--backend">backend</span>
<span class="section__left-icon icon-console"></span>
<span class="section__right-icon icon-gears"></span>
<span class="section__bottom-icon icon-linux"></span>
</div>
<div class="section__description right">
<div class="clearfix">
<h3 class="section__description__title left">Ruby on Rails</h3>
<p class="section__description__experience right">Experience: <span class="js-experience" data-year="2010" data-month="2">4</span> years</p> <!-- TODO: careful with on/off experience here -->
</div>
<p>I started to get into web development as a Ruby on Rails developer, mainly creating some custom CMS and internal webapps to manage small NGOs.</p>
<p>At the very beginning I would use Rails with MySQL and the basic templating system to create my websites.</p>
<p>When I began to participate in bigger teams with Java backends I would use Rails to create APIs for my client side applications which would use Solar, MySQL and mainly another API as data origins.</p>
<p>Later on I would be working in a company using Ruby as their main language where I would take care mainly of developing the "backend of the Frontend" with RoR (controllers, presenters, integration tests) while still needing to read and understand a big part of the deeper backend infrastructure.</p>
<p>I have some experience using TDD but I don't like it too much. I think it limits the possibility to explore while coding because it creates some kind of tunnel vision, thus I prefer to write tests after implementing features.</p>
<h4 class="section__tag-title">keywords:</h4>
<ul class="horizontal-list section__tags--backend clearfix">
<li class="section__tag">Ruby </li>
<li class="section__tag">Rails </li>
<li class="section__tag">Asset pipeline </li>
<li class="section__tag">MySQL </li>
<li class="section__tag">API Development </li>
</ul>
<p class="section__description__quote">Even if it didn't get to become my specialty, backend good practices heavily influenced on how I code in the frontend.</p>
<div class="clearfix">
<h3 class="section__description__title left">Node JS</h3>
</div>
<p>NodeJS is a great technology with a huge amount of possibilities and tools, so while I don't really have experience building full fledged websites with it I still have been experimenting and learning a little bit.</p>
<p>I have been using the typical frontend toolset and used npm to install and execute modules, but not more than that.</p>
<p>Generally speaking I would really appreciate to participate in production environments using NodeJS and getting a deeper understanding and better at using of it.</p>
<h4 class="section__tag-title">keywords:</h4>
<ul class="horizontal-list section__tags--backend clearfix">
<li class="section__tag">NodeJS </li>
<li class="section__tag">Npm </li>
<li class="section__tag">Webpack</li>
</ul>
</div>
</div>
</div>
<div id="experience" class="experience section">
<div class="content-wrapper clearfix">
<div class="section__intro right" href="#frontend">
<span class="section__main-icon icon-building-o"></span>
<span class="section__title">experience</span>
</div>
<div class="section__description left">
<ul class="companies">
<li class="company">
<h3 class="company__title">Lead Frontend Engineer</h3>
<h4 class="company__period">Tolq: July 2014 – Now</h4>
<ul class="company__tasks">
<li>Designing and implementing different applications for clients, translators and administrators that made complex translation memory based translations easy to handle for all actors involved.</li>
<li>Coding React, Vainilla JS, plenty of JS libraries, Ruby on Rails, and modern browsers HTML/CSS responsive layouts.</li>
<li>Creating detailed mocks to explain how new features would work and would be used.</li>
<li>Designing and implementing company website.</li>
</ul>
</li>
<li class="company">
<h3 class="company__title">Senior Javascript Developer</h3>
<h4 class="company__period">Qelp: December 2013 – July 2014</h4>
<ul class="company__tasks">
<li>Designing and implementing diferent versions of the company widget that offers tutorials for several mobile devices.</li>
<li>Coding CoffeScript, SpineJS and Mustache to Improve the Core funcionality of the Widget.</li>
<li>Refactoring styling strategy to a more maintanable and customisable version.</li>
<li>Implementing of a mobile version of the plugin.</li>
</ul>
</li>
<li class="company">
<h3 class="company__title">Frontend Developer and Interaction Designer</h3>
<h4 class="company__period">Elmar Reizen: April 2012 – December 2013</h4>
<ul class="company__tasks">
<li>Creating a customizable White Label travel website using Ruby on Rails and travel business API.</li>
<li>Helping on defining the architecture of the travel business API.</li>
<li>Transforming PSDs designs into HTML/CSS.</li>
<li>Analyzing & Designing Interactions and Behaviour of provided static designs.</li>
<li>Coding them using Jquery, AngularJS, Knockout and CSS3 animations.</li>
<li>Defining the transition from Java Seam to Ruby on Rails of the official websites of the company.</li>
<li>Adding new features in Seam to the official websites of the company.</li>
</ul>
</li>
<li class="company">
<h3 class="company__title">Sysadmin & All round developer</h3>
<h4 class="company__period">Junta de Andalucía: April 2010 – April 2012</h4>
<ul class="company__tasks">
<li>System administration of a public building.</li>
<li>Developing quality management intraweb application with heavy use of SVG charts.</li>
</ul>
</li>
<li class="company">
<h3 class="company__title">All round developer</h3>
<h4 class="company__period">Jaén de Medios: January 2009 – April 2012</h4>
<ul class="company__tasks">
<li>Creating several websites with custom management tools and CMS like.</li>
<li>Web & print Design, usability consultancy.</li>
</ul>
</li>
<li class="company">
<h3 class="company__title">All Round Developer, Teacher</h3>
<h4 class="company__period">Objetivo Vida: October 2006 – April 2010</h4>
<ul class="company__tasks">
<li>Information Technologies teaching for low educated excluded people.</li>
<li>Development of my first CMS and management tool http://objetivovida.org/</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="education" class="education section">
<div class="content-wrapper clearfix">
<div class="section__intro left" href="#frontend">
<span class="section__main-icon icon-graduation"></span>
<span class="section__title">education</span>
</div>
<div class="section__description right">
<p><strong>University of Jaén.</strong> Computer Engineer. Finished in 2006.</p>
<p>I keep on continuously reading books and articles in order to keep myself up to date and get more skills.</p>
<h4>Some of them as an example:</h4>
<ul>
<li>Javascript: Javascript: The Good Parts, Javascript Patterns, Maintainable Javascript, Jquery from Novice to Ninja, AngularJS...</li>
<li>Interaction/Gaming: HTML5 Canvas, Canvas the Pocket Guide, HTML5 Games, HTML5 Animation with Javascript...</li>
<li>Design/UX: The Smashing Book (1/3), The Mobile Book, Numbers in Graphic Design, History of Typography, Don't Make me Think, Inkscape Logo a Logo...</li>
<li>Ruby/Rails: Agile Web Development with Rails (1 to 3), Poignant Guide to Ruby, Programming Ruby 1.8, 1.9...</li>
</ul>
<p><strong>Languages:</strong> Fluent English, Native Spanish </p>
</div>
</div>
</div>
<div id="other" class="others section">
<div class="content-wrapper clearfix">
<img src="img/others.png" alt="me" class="section__img right">
<div class="section__description left">
<h2>Others</h2>
<p><strong>Agile strategies:</strong> For the last few years I've been working in agile environments with different implementations of Scrumm, Kanban and Extreme Programming in general. I have done this both in teams promoting knowledge sharing and pair programming, aswell as with more individualist approaches with high code ownership. Personally I prefer knowledge sharing with some space to focus on some problems on my own.</p>
<p><strong>Remote:</strong> I started experiencing remote working in 2013, since late 2015 I have been working remote full time</p>
<p><strong>Community building:</strong> I like to share what I know and to do so with internationals in mind, I host a Meetup in English in the city I currently live in: <a href="https://www.meetup.com/es/Frontend-Malaga/" target="_blank">Frontend Malaga</a></p>
<p><strong>Creativity:</strong> I'm extremely creative. I have a high capability to solve problems by thinking outside of the box, and doing
things as solving or minimizing problems whose source is in the Backend by using some interaction techniques in the
Frontend.</p>
<p><strong>Art:</strong> Drawing has been my hobby since I was a child, and I always like to have a pencil, an eraser and paper at hand. I'm able to make pretty decent drawings and I'm really efficient creating mocks on paper or on a whiteboard.</p>
</div>
</div>
</div>
<div id="contact" class="footer">
<div class="content-wrapper">
<h2 class="footer__header">...and now, make your call</h2>
<ul class="horizontal-list clearfix">
<li class="footer__item">
<a class="footer__link" href="https://github.com/Sauco82/sauco82.github.io">
<p class="icon-github footer__icon"></p>
<p class="footer__text">Check the Source</p>
</a>
</li>
<li class="footer__item">
<a class="footer__link" href="javascript:window.print()" >
<p class="icon-print2 footer__icon"></p>
<p class="footer__text">Print the CV</p>
</a>
</li>
<li class="footer__item">
<a class="footer__link" href="mailto:sauco82@gmail.com?Subject=Hey%20Rafa!">
<p class="icon-envelope-o footer__icon"></p>
<p class="footer__text">Get In touch</p>
</a>
</li>
</ul>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script src="js/vendor/d3.min.js"></script>
<script src="js/graphs.js"></script>
<script src="js/main.js"></script>
</body>
</html>