A pixel-focused, creative, all-around front-end engineer / interactive developer / UX designer with 18 years of experience.
Loves to learn new stuff, organise and make things look pretty and cool, be challenged on ambitious projects or code beautiful interactive and innovative experiences.
- Autodidact. Extensive education in computer science, multimedia & web design
- Entrepreneurial spirit. Started work at age 17 & co-founded a company at age 26
- Multi-cultural attitude. Lived in Barcelona, Alicante, Madrid, London and Tokyo
- Speaks Spanish, Catalan and English. Learning Japanese
- Went on a motorcycle adventure across the world, from Spain to Japan
In the past I have worked as a full-stack developer and web designer, but the current complexity of the web industry led me to focus primary in the front-end, specially the UI, although I still like to play with servers and back-end code once in a while.
My interests and abilities are more aligned with the creative tracks (the visual, artistic, interactive and UI/UX side of the front-end work). Although I’m also experienced and comfortable with all the other aspects, like dealing with REST/GraphQL APIs, tooling/configuration, testing, performance optimisation, etc.
I will omit web browsers, sub-modules, polyfills, plugins, presets, loaders and minor modules.
- Frameworks: ReactJS, VueJS, AngularJS
- State management: Redux, Reselect, Vuex, MobX
- React modules: ReactVis, ReactRouter, React-dnd
- CSS: Emotion, Styled Components, LESS, SASS, PostCSS
- Component libraries: Styleguidist, Material UI, Vue Material, Bootstrap
- Utility libraries: Apollo, FlowJS, Axios, Lodash, date-fns, Moment.js, Showdown, History, jQuery, Require.js, Browserify, VeeValidate, Iframe resizer
- Other libraries: Highcharts, OrgChart
- Static site generators: Assemble, GatsbyJS
- Templating: Handlebars, Mustache, HAML, EJS
- Tooling: Yarn/NPM, Webpack, Babel, ShipIt, Grunt, Gulp, Bower
- Localisation: i18next, Lokalize
- Testing: Prettier, ESlint, Jest, React Testing Library
- Animation: GSAP, Phaser, Box2d, ActionScript
- Real-time: Socket.io, SignalMaster, SimpleWebRTC
- PHP: Zend Framework, Laravel, LAMP stack
- BaaS: Firebase
- CMS: Wordpress, Drupal, Joomla
- DB: MySQL, MongoDB, PostgreSQL, SQLite, MS-SQL
- ORM: Doctrine, Waterline
- Principles: PWA, ITCSS, BEM, Responsive design, Mobile First, Semantic Markup, SEO, Accessibility, Common design patterns, MVC, domain driven design, REST, JSON API
- Version control: GIT, SVN, SourceTree, TortoiseSVN
- Project management: ZenHub, Atlassian software (Trello, Bitbucket, Jira, Confluence), Basecamp
- Code Quality: Honeybadger, Codeclimate, SonarQube
- Continuous Integration: Travis, CircleCI, Jenkins, Vagrant, Docker
- Methodologies: Agile, Scrum, Waterfall, Kanban
- Editors: Atom, SublimeText, Eclipse, Xcode, CodeBlocks, Visual Studio
- SaaS, IaaS, PaaS: Slack, Github, AWS, Heroku, Netlify, Firebase, Xirsys, Sendgrid, Mailchimp, Twilio
- SEO & Performance: Webmaster Tools, Analytics, GTMetrix, Lighthouse, Varnish, Memcached
- Solutions architect: project analysis, tasks breakdown, documentation, prototyping, time estimates
- UX: IA (sitemaps), wireframes, storyboards, target audience/Personas, user testing sessions, clickable prototypes
- Software: Invision, Sketch, Zeplin, Adobe CC (Photoshop, Illustrator, Premiere, After Effects, XD, Audition), 3dS Max
- Primary OS: MacOS, secondary: Windows and Ubuntu/CentOS
- Networking: HTTP, Apache, Nginx, SSH, DNS, SSL, XAMPP, MAMP
- Hosting: Rackspace, DigitalOcean, OVH, WHM, cPanel, Plesk, WHMCS
- OpenFrameworks (C++), Processing (Java), QT, DirectX
- NUI, Hand/skeleton tracking with Kinect, OpenNi and OpenCV
Senior Frontend Engineer
Feb 2019 - NowTableCheckGinza, Tokyo (Japan)
Successfully led the front-end architecture of insight, TableCheck’s data analytics app for the hospitality sector.
Together with the Head of Data Science and a team of 3 front-end engineers and 3 back-end engineers, we built one of the most advanced analytics suite in the industry for TableCheck’s customers like Hilton, IHG Intercontinental, Hyatt, Westin or Okura hotels.
Managed to bring the product from its initial prototyping stages until its release in August 2019 in 3 languages: Japanese, English and Spanish. Since then, we continued adding new features, languages and improving its performance.
The front-end tech stack involved React 16, GraphQL, Apollo, MobX, Flow, Emotion, ReactVis, i18Next, Lokalise, ReactPDF, Lodash, MomentJS, TableCheck’s own design system and UI component library and other NPM modules.
CI and code reviews were driven by Gitlab and the back-end involved Amazon AWS, RedShift, Elixir, K8S and other technologies to manage millions of records related with customers’ reservations, revenue data, sms messages, surveys data, etc.
Agile Prototyping Analyst
Mar 2016 - Feb 2019Vodafone Global EnterpriseNewbury (UK) & Alicante (Spain)
Conceptualised, designed, built, tested and supported web apps (mostly SPAs) for the sales & digital operations of the Vodafone Global Enterprise division. Some of them were intended to aid the sales team with the visualisation of the pipeline, revenue and sales forecast, data quality, sales opportunities and other data related with performance. Others were more related with internal comms, problem solving and HR.
Worked 95% of the time remotely from different countries and used tools like slack, github and skype to communicate and manage our agile work methodology
Collaborated with data scientists, business analysts, back-end developers and designers to improve sales performance & productivity in the organisation
Successfully led the migration from jQuery/Angular to a React based architecture for all apps by creating a custom boilerplate with Redux state management, Webpack, JSON API integration, SASS and other modern technologies
Helped the rest of the front-end team to embrace the new React architecture
Owned the front-end development of 8 prototypes and participated in the development of a few others.
Led the redesign and development of a new dashboard app with widgets for the main website of the department
Identified the need of improving the UI and UX consistency of our apps and led the creation of a UI library (based on React and Styled Components) and a design system based on Vodafone’s design guidelines
Also worked with VueJS, Webpack, Highcharts, D3, MaterialUI, WebRTC, Express, CircleCI, GhostJS, HoneyBadger, CodeClimate, Jest, React testing library, JSON API, REST, etc
Senior interactive developer
Jul 2013 - Nov 2015SapientNitroSpitalfields, London (UK)
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 was installed in Eden House’s exhibit area:
Feb 2015: contributed to a mobile responsive web prototype for Dyson.
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.
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!
Aug 2012 - Jun 2013WCRSOxford Circus, London (UK)
- 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
- 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](Box2d and OpenCV
- An augmented reality car racing game with real-time obstacles and level editor
My articles in the WCRS blog:
UPDATE: the articles are no longer available at WCRS’ blog, so I replaced the links to relevant publications from other media outlets.
- Churchill beats Spiderman to world record
- An introduction to mobile development
- If content is king, data is queen
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
Co-founder, CTO & Web developer
Sep 2006 - Jul 2012Webmarket S.C.Alicante (Spain)
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)
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)
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
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)
Jan 2000 - May 2000BEEPAlicante (Spain)
IT support for customers, retail assistant and custom builds of desktop computers
Oct 1999 - Jan 2000NecomplusAlicante (Spain)
IT support to update the company software installed on the customers machines to avoid the “Y2K effect”.
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.
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
- Sep 2018: React Alicante, Spain
- Jun 2018: Alicante Frontend: agile development in real life
- Dec 2017: Alicante Frontend: codePen official meetup
- Sep 2017: Alicante Frontend: optimal way of loading images on the web
- Sep 2017: React Alicante, Spain
- Sep 2017: FullStackFest Barcelona, Spain
- May 2017: JSDayES Madrid, Spain
- 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)
- 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
June 2018: Top performer. Recognised by my line manager as one of the two awarded top performers in a team with dozens of employees at Vodafone Global Enterprise
January 2017: EduTECH Emprèn. My final project was selected and I was granted a course financed by the Catalunya and EU governments for mentoring entrepreneurs and accelerate their eLearning projects
November 2016: Recognised by my line manager with the innovation award at Vodafone Global Enterprise
February 2014: the Art Rules project were I was heavily involved in the front-end was shortlisted for a prestigious FWA award
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
“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
“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
“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
“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: Angie Yuanmalai (Design Manager at SapientNitro) Date: 17-Sep-2015
“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
“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.”