Curriculum vitae

Summary

A pixel-focused senior interactive front-end web developer with 15 years of commercial experience. Loves learning new things and be challenged as a tech lead on ambitious projects or as a code artist on beautiful interactive experiences.

Skills

Until 2011, I was mainly focussed on LAMP, HTML, CSS, JS, Wordpress, Joomla and Flash. Then I moved into modern front-end and back-end frameworks. Since 2013 I'm also working with Node.js, which is becoming part of my core tech stack: Javascript, HTML5 and CSS3.

Front End

Back End

Creative Technologies

OS / Systems administration / Networks

Software engineering

Software

Experience

Agile Prototyping Analyst

Mar 2016 - nowVodafone Global EnterpriseLondon (UK)

Leading the front-end architecture and development of responsive & progressive web apps using React, Redux, ES6, Webpack, Node.js, Angular, JSON API, Highcharts and other relevant technologies for data modelling and interactive visualisation.

Senior interactive developer

Jul 2013 - Nov 2015SapientNitroSpitalfields, London (UK)

SapientNitro is the number #1 digital agency in the UK. It's also a division of Sapient corporation, which belongs to the Publicis group.

October 2015: worked on a responsive front-end for the insurance quote journey in Travelers. Tech involves lot's of vanilla JS, mustache and path.js.

July - October 2015: co-led the front-end development of Unilever's new global digital platform (building reusable white-label components) and Dove's new website. We were a team of 8 front-end developers, working with a bespoke Node.js & Backbone framework and Adobe Experience Manager as CMS.

Aside from web development, I also helped with the management of the dev team, owning the deliverables of the team for a specific track, presenting the progress to the client, preparing prototypes for user testing, and updating the QA team.

May - July 2015: led a team of developers working on Save the children's Drupal website. The tech stories were based on a technical audit I wrote and presented to the stakeholders with recommendations for the website.

June - July 2015: lead developer for the creation of microsites for a high street bank pitch and incubation design service. Worked with Handlebars, Assemble.io, a custom static site generator, LESS, Grunt, etc.

May 2015: (individual work) created an artistic installation that lets users throw fireworks using their hands. The demo was built with Kinect and OpenFrameworks for a creative technology event in SapientNitro's Spitalfields office. The demo is currently installed in Eden House's exhibit area.

April - May 2015: lead developer for the creation of a new mobile journey for the car insurance services of SAGA. Using MS Visual Studio 2012, .Net, LESS, JavaScript, HTML5, CSS3, jQuery, Knockout.js and Grunt.

Mar 2015: Flash developer for a custom build of an iPad prototype with Adobe Air for Barclays.

Feb 2015: lead developer for the creation of a 2D HTML5 animation for Vitality/Pruhealth using different technologies: Box2d + RUBE, HTML5 Canvas API, JavaScript and SVG manipulation.

Feb 2015: contributed to a mobile responsive web prototype for Dyson.

Jan 15: lead developer for an internal web app to manage the technical skills of Sapient employees with Node.js, Sails.js and MongoDB.

Nov 2014: (individual work) built a real time multiplayer game with Sails.js (Node.js, Waterline ORM, Express.js, Socket.io), Grunt, Bootstrap, LESS, jQuery, Parsley.js, Heroku, Git,...)

Apr - Nov 2014: senior/lead developer for the end to end redesign of a responsive front-end for the UK's biggest telecommunications company with millions of customers. Using Angular.js, SEO, IE8 support, LESS, jQuery, Node.js, Grunt, Handlebars, JSON, Assemble.io, CSS3, Modernizr, SVN+Git, Vector icons font, iOS retina and iOS iOS compatible HTML5 canvas animations made with Adobe Flash CC.

Jun 2014: lead developer for a Volvo Trucks HTML5 prototype. Also worked in the Social Stock Ticker project using the PHP framework Laravel and Adobe Air.

May 2014: speaker at the Ember.js meetup (Introduction to the JavaScript port of Box2d and augmented reality with OpenCV realtime shape recognition with JavaScript).

Sep 2013 - Apr 2014: participated as a key member in the iPad frontend development team of the new Marks & Spencer's website. Tech used includes: CSS3, Pub/Sub, Mustache, PHP, jQuery, Javascript, Modernizr, HTML5, etc.

SapientNitro has lead M&S through quite literally the biggest multi-channel retail re-platform in history with more than 600 SapientNitro people on the project that have worked more than 1.1 million hours!

Jul - Sep 2013: worked on a microsite for the ICA (Institute of Contemporary Art) in London called The Art Rules. I was mainly focussed working on the physics and animations. Tech used includes: Ruby on Rails (RoR), HAML, Heroku, Github (including issue tracking), SASS, CSS3 animations and Javascript Box2d 2D physics. It got shortlisted in theFWA and showcased for a few months on Eden House's coffee & exhibit space.

Creative Technologist

Aug 2012 - Jun 2013WCRSOxford Circus, London (UK)

WCRS belongs to the Engine Group, which is the number #5 digital agency in the UK.

During my tenure at WCRS, I worked on these accounts: BMW, MINI, Santander, Sky, Subway, Bupa, Unilever, Warburtons, Royal Navy, Churchill, Artemis and B&Q.

Achievements:

  • Pushed the technical boundaries and created innovative solutions
  • Advised and worked with creative teams on proposals and pitches
  • Built Facebook apps (mainly contests and promotions)
  • Built responsive HTML5 prototypes, microsites, blogs and websites
  • Built internal tools, demos and small games

Projects:

  • A Twitter sentiment extraction app
  • Several Kinect driven (hand tracking) particle systems
  • A Kinect driven (hand tracking) DJ sound mixing app with virtual vinyls and multi-screen support. It includes sound scratching and reverse playback
  • A Kinect driven demo (tracking the body) that forwards a video based on the user movement and position
  • Several demos with Box2d
  • An augmented reality car racing game with real-time obstacles and level editor

Some of the technologies used: Zend, C++, OpenFrameworks, OpenNI, Epoc Emotiv, Arduino, Android SDK, AndEngine, JAVA, Titanium SDK, Wordpress, Drupal,3rd party APIs, etc.

My articles in the WCRS blog:

Digital developer

Feb 2011 - Sep 2012Royal Opera HouseCovent Garden, London (UK)

I joined the newly created development team under the digital media department with a very important objective: to completely rebuild the ROH website from scratch. A business critical project that required a major overhaul in the ticketing system, server infrastructure, information architecture, user experience, content management and online shop to match the high standards of the organisation.

The development team was small; two full-stack developers, one design manager and a CTO. This scenario allowed me to have considerable influence in the application architecture and the overall development of the website.

As a result, the online ticket sales increased to 60% - no more waiting room - and all the digital content and user experience improved thanks to the robust framework and work methodology stablished by the digital media team.

I also developed an app to display the schedule of the Royal Ballet rehearsals in TV screens

Technologies used (in no particular order): HTML5, CSS3, Javascript, jQuery, PHP5, MySQL, Apache, Zend Framework, Doctrine ORM, Scrum, Trac, Agile, XSLT, Flickr API, Youtube API, Delicious API, Restaurant Diary API, Facebook API, SoundCloud API, Google+ API, QAS API (UK address validation), Wordpress (including plugin dev.), CDN, SSH,
SSL, SQL injection, XSS, Varnish, APC, SOAP, REST, Basecamp, Confluence, Jira, Semantic markup, Domain-driven design, Open Data (XML, JSON, RDF, RSS, ATOM, ICS), Linux (Ubuntu 11), Windows7, Firebug, IE, Firefox, Opera, Chrome, Safari, ODBC, MS SQL Server 2008 (TSQL), Amazon AWS (EC2, SES, IAM, CloudFront, S3,...), Rackspace, Tessitura, IIS, Isapi Rewriter, WinSCP, Tortoise, SVN, Putty, Netbeans, Eclipse,...

Relevant articles:

Co-founder, CTO & Web developer

Sep 2006 - Jul 2012Webmarket S.C.Alicante (Spain)

Co-founded a small digital agency specialised in design and development of multimedia applications and websites based on Adobe Flash (AS2), MdM Zinc, Wordpress and front-end technologies.

Brands we worked for: Estrella Galicia, Santillana, Editex, Philippines government, Grupo Soledad, IBCmass, Cogersa, Digital Toy Shop, IES Miguel Hernández, etc

Some of the bespoke products we created:

  • TiendaFlash: a Flash, AMFPHP & MySQL e-commerce CMS with unlimited products, VISA/Master Card and Paypal integration
  • InmoFlash: a Flash, AMFPHP & MySQL real-state CMS with unlimited properties
  • FinanFlash: a Flash, AMFPHP & MySQL finance CMS with dynamic PDF generator (FPDF)

We also provided web hosting with cPanel/WHMCS and digital marketing services to our clients (mainly SMEs) and collaborated with other freelance designers, developers and agencies in Spain.

Web design teacher

Feb 2009 - May 2009ESUMAAlicante (Spain)

Web design teacher in the Master of Marketing and Advertising of ESUMA

Joomla web designer / developer

Mar 2008 - Sep 2008WebempresaBarcelona (Spain)

Web development and design using Dreamweaver, Fireworks, Photoshop, Joomla CMS, Joomla Components, HTML, CSS, PHP, MySQL, JavaScript and Google Apps.

Some of the projects I worked on include: Escuela de cocina Hoffman, Hoyesarte.com, Gimnasio femenino 30 minutos, Aarcs, Altair consultores, Aurall, Aitor Aurrekoetxea, Baldirialeu, Dimas, BGT Musics, Fama Systems, Geograma, Infolimpieza, Lluisa Sallent, Lodisoft, LOPDYA, Segurodelhogar, Torques, Noelia Compte, Trabajos y reformas, Mongrafic, Norma3, NRC Courier, Orbitel, Lexicos traducciones, Agrocesped, ByPerson, Circulo hostelero, Training home,...

Web designer / developer

Sep 2001 - Sep 2006FreelanceMúltiple locations

Freelance web design and development for local SMEs using Frontpage, Photoimpact, Sound Forge, Power Director, Premiere, Dreamweaver, Fireworks, Photoshop, Freehand, Flash, ActionScript 1 and 2, XML, HTML, CSS, PHP, MySQL, JavaScript and PHP-Nuke.

Software Engineer

Sep 2003 - Jul 2005Slater Software Laboratories S.L.Cuzco, Madrid (Spain)

Participated in the development of three desktop applications for real-time TV production, from initial conceptualisation to final development (HP business partner). Based on C++, QT, DirectX 9 and other API’s.

Headed the development of the audio and video mixers (major features in these applications) to support high quality computer media formats, capture cards, cameras, image projection systems and other audiovisual devices.

Solid experience in C++ OO programming, QT 3.2, DirectX 9 (DirectMusic, DirectAudio, DirectShow, DirectInput), ASIO 2.0, analog-digital television production systems, DSP, image projection systems, MS Visual Studio 2003 and Source Safe.

Working experience in DSP (Sound effects, spectrum analysers, Oscilloscopes, sound editing programming, multi Channel (I/O) audio engines.

IT computer technician

Oct 2001 - Jul 2002PC City Sverige ABAlicante (Spain)

IT support for customers and custom builds of desktop computers

CTO & Network Administrator

Sep 2001 - Nov 2001Times CafeAlicante (Spain)

Designed a technical implementation for a local area network in a cyber coffee shop. Purchased the equipment and software. Installed all the machines and programs. Managed the day to day computer rental operations and maintenance.

Junior web designer / developer

May 2001 - Aug 2001Grupo Odessa S.L.San Juan, Alicante (Spain)

Built websites for SMEs using XHTML, CSS, Flash 5, Photoshop and Javascript

Computer technician

Jan 2000 - May 2000BEEPAlicante (Spain)

IT support for customers, retail assistant and custom builds of desktop computers

Computer technician

Oct 1999 - Jan 2000NecomplusAlicante (Spain)

IT support to update the company software installed on the customers machines to avoid the “Y2K effect”.

Education

BA & Sc in Multimedia, minor in web engineering (4 years)

Oct 2006 - 2017Universitat Oberta de CatalunyaOnline (4 years, 240 ECTS)

Homologated in the EU. Euro-Inf certified. 60 ECTS = 1700 hours

Multimedia foundations
Video
English I, II
Programming
Mathematics I, II
Interactive narrative
Information architecture
Administration and management of organisations
Languages ​​and Web Standards
Graphic Design
Image and visual language
Web Programming
3D graphics
Physics
Animation
Design of interfaces
Integrating digital content
Networks
Database Design
Interactive Media
Processing and publication of image and video
Audio editing and publishing
Digital composition
Project Management
Market and legislation
Methodology and project development
Creativity and aesthetics
Digital Photography
Advanced Web Programming
Safety and quality in web servers
User Testing
Usability
Virtual Reality
Interaction Design
Content Management Systems
Publication and distribution platforms
Audiovisual documentation
Software Engineering
OO Design and programming
Analysis and design patterns
Entrepreneurship of organisations

Msc (certificate) in profesional videogames creation (1 year)

Oct 2002 - Jun 2003Universitat Pompeu FabraBarcelona (Spain)

C++, OpenGL, Direct3D, Quadtree, Octree, PVS, Clipping with LOD’s, BSP’s, Portals, ROAM and 3D Studio SDK, IA (FSM, DFA and FA programming experience. Syncronized IA’s programming using Rules Sytem. Theoretical Knowledge in Boids algorithm and Path Finding A*), Gameplay programming (Coldet), Motion Capture systems, Scripting with LUA, Skeletton animation, Cal3D. Working Knowledge in EAX HD 4.0, BASS, PortAudio and FMOD

HND in Computer Science (2 years)

Oct 1998 - Jun 2000Instituto Mare NostrumAlicante (Spain)

Pascal, Assembler, Cobol, Delphi, SQL (Access), C, OO programming, Linux, Network Management, Business Administration, English language

High School Diploma (3 years)

Oct 1994 - Jun 1997IB Bahía BabelAlicante (Spain)

Courses, events, conferences and certifications

  • Feb 2016: HackerRank - 7 Days of JavaScript
  • Feb 2016: Introduction to Meteor.js Development, University of London (Coursera)
  • Feb 2016: Learn and Understand AngularJS (Udemy)
  • Jan 2016: Build Web Apps with React JS and Flux (Udemy)
  • Jan 2016: JavaScript: Understanding the Weird Parts (Udemy)
  • Oct 2015: FullStack conference, London
  • Oct 2015: Big Data, University of San Diego, California (Coursera)
  • Jul 2015: Harry Roberts (CSSWizardry) workshop
  • Aug 2015: British Airways Open Day 2015
  • Mar 2015: Reasons to be creative. London, Old Street
  • May 2014: jQuery UK 2014, Oxford
  • Apr 2014: Sapient Advanced Presentation Skills
  • Apr 2014: London JS Night Class: CSSFlex
  • Several dates: EmberJS & AngularJS meetups
  • Mar 2014: London JS Night Class: D3.js with Tim Ruffles
  • Mar 2014: London JS Night Class: BackboneJS
  • Mar 2014: Sapient MEP (Negotiating expectations)
  • Feb 2014: White Pencil & Swam. Climate Change President Lecture - Geek Out
  • Feb 2014: jQuery Conference in Oxford. AngularJS workshop with Peter Bacon Darwin
  • Nov 2013: Full Frontal 2013. Debug workshop with Remy Sharp
  • Nov 2009: iWeekend Alicante 2009 (40 hours)
  • Sep 2007: UA, Advanced Flash 8, Web development (8 hours)
  • Nov 2006: Certified Macromedia Flash MX 2004 designer
  • Oct 2003: DeepBlue TV production workshop
  • Feb 2002: Advanced Shaders (cg) programming
  • Mar 2002: Business Management of the videogames industry, ArtFutura Festival - Ubi Soft

Recognitions

The following are some recognitions from my former co-workers, partners and clients. Some of them know me as “Pach” (my nickname).

Core Value: Creativity
Nominator: Marisa Parsons (UX Manager at SapientNitro)
Date: 8-Jan-2016

Joan is a talented developer with creative flair. Working with him is always a pleasure even when there are tight timelines and tricky pages to build. Joan always embraces challenges with a smile on his face and determination to find a solution. Through his experimentation with code, attention to detail and dedication to crafting elegant solutions, he is an invaluable member to any creative team.

Core Value: Creativity
Nominator: Owen Cowdry (Senior Developer at SapientNitro)
Date: 28-Nov-2015

Pach is a top quality developer. This guy has been working with computers and programming for a very long time. He has run his own web development and hosting agency. His programming experience spans both front-end to back-end. His love of art and creative thinking drives his passion for creative technology. As if that wasn't enough, he's lovely chap, very easy to get along with. I would jump at the chance to work with Pach again, so should you!

Core Value: Creativity
Nominator: Denise Neves Santos (Manager of Interactive Development at SapientNitro)
Date: 26-Oct-2015

Joan is an extremely talented developer and technologist: no technology is a problem! Whether you are looking for a Vanilla JS, Angular, ReactJS, [insert library/framework/tech here], I'm positive Joan will deliver it, high quality, on time.

His knowledge and attitude makes him one of the best developers I had the pleasure to work with, as he's not only committed to the quality of the code, but to the overall delivery of the project, which can make all the difference when delivering large-scale projects. Having Joan in the team is a joy, I wholeheartedly recommend Joan.

Joan is also a very good fußball player, although not as good as myself :)

Core Value: Leadership
Nominator: Hadleigh Smith (Account Director at SapientNitro)
Date: 30-Sep-2015

Description: I brought Pach (Joan) on board to work on Dove 2.0, having worked with him previously on BT. Pach was part of a front-end development team of seven people, and very early in the project you could see that Pach was a front-runner and was willing to lead the team. In the end we split the development and build work in to two tracks, and asked Pach to lead one of them. From start to finish Pach was calm, lead from the front, was a problem solver, and helped deliver the project with minimal defects and on time. His qualities were also recognized by the wider team and he became a trusted and valuable member of the overall delivery.

Core Value: Creativity
Nominator: Marisa Parsons (UX Manager at SapientNitro)
Date: 30-Sep-2015

Description: I would like to nominate Joan for his work on the Dove project. Working with him on this project we had tight timelines and tricky pages to try and build but Joan always embraced these challenges with a smile on his face and a determination to find a solution to the design teams requests. Not only is he a talented developer he also brings his own creative flair to a build. Through his experimentation with what was possible with code, his attention to detail and dedication to crafting elegant solutions he made an invaluable contribution to the animations and interactions of the new Dove site.

Core Value: Leadership
Nominator: Daniel De Oliveira (Senior Interactive Developer at SapientNitro)
Date: 29-Sep-2015

Description: I’ve had the pleasure of working with Pach on the recent Dove 2.0 project, during this time he has gone above and beyond what was asked of him. He remains calm and focused in stressful situation and is brilliant at managing other developers. The team looks to him for guidance and he as show true leadership qualities. His knowledge on all things digital and the industry make him a valuable asset in any team. Pach is a agile master!

Core Value: Creativity
Nominator: Yandis Ying (Creative Director at SapientNitro)
Date: 29-Sep-2015

Description: Pach is a very creative and design-aware developer, his motion coding skills is unreal and really had inspired the UX, Design and his FE team digital team and of course clients. As a person he is so easy to work with for he's polite, well mannered and focussed on getting the job done. He had lots of great ideas which really add values to the experiences. He created the ‘Curtains Up’ motion transition on the Dove 2.0 homepage which everyone in the team and the clients love. Pach’s contagious enthusiasm contribution making my time on Dove 2.0 a delight. I am sure everyone will agree that it was truly a pleasure working Pach!

Core Value: Creativity
Nominator: Angellina Yuanmalai (Design Manager at SapientNitro)
Date: 17-Sep-2015

Description: For me creativity is the ability to solve a problem but in a way that delights people in new and different perspectives. We tend to forget that creativity takes on many forms and in this case, Pach has rightfully reminded me so. Pach has been an absolute joy to work with. Where an animation or difficult task is presented, the usual response from developers would be a quizzical look and a shake of the head. Pach has been nothing but enthusiastic to tackle animations and other challenges full on, constantly coming up with better, improved solutions to the code and researches and suggests his own ground breaking ideas on animations and possible renditions to the creative work. On top of this, he has stepped in as a wonderful and reliable leader within the team and displayed commendable organisational and management skills. Finding a developer than can code exceptionally is very, very difficult, but finding one that also has wonderful people and leadership skills that greets problems with smiles is practically impossible - I'm so glad we've got Pach in the company. He has been an invaluable asset to the team and I couldn't stop singing his praises. If anyone deserves this award it would definitely be Pach.

Core Value: People Growth
Nominator: Shaun Wallace (Senior Developer at SapientNitro)
Date: 01-Dec-2014

Description: I have only been a part of the development team here in London for a few weeks but I have seen on multiple occasions Joan's committed efforts in building up and training others within our team. He has worked hard to share his level on knowledge with others more junior than himself while remaining teachable and working to grow his own skills. He continues to provide important feedback with regards to developmental processes and the work of others. I have seen his effort over the last few weeks, even while on the bench, enable others to learn and grow in their skills and he has brought people into his research efforts and helped to grow our team.

Core Value: Client focus delivery
Nominator: Josep Manen (Artist and Sound Designer at TensionStudio)
Date: 04-Oct-2015

There is a special thing that I love from Joan, he is extremely amazing caching the fist idea from your project included in a difficult steps, changes or corrections. Your company will be blessed with an amazing programmer.

Core Value: Client focus delivery
Nominator: Jose Luis Marron (Account Director at Narcea Multimedia)
Date: 22-Feb-2009

He is a great person to work with, always gets the work done and on time. I will hire him again for other projects.

Core Value: Creativity
Nominator: Tuesday Gutierrez (Art blogger at Momardi.com)
Date: 29-Sep-2008

Joan is a multimedia guru. Always pushing the boundaries of his pixel-focused mind, Joan never runs out of creative ideas and the enthusiasm to get things done. He is full of passion for his craft.

Core Value: Client focus delivery
Nominator: Carlos Ocaña (Graphic designer at Slater Labs)
Date: 30-Sep-2008

Joan es una persona seria y responsable, ante la aparición de cualquier problema o duda no para hasta obtener la solución al mismo.
En definitiva es una persona con gran talento.