Ethan Chiu, Developer in Bangkok, Thailand
Ethan is available for hire
Hire Ethan

Ethan Chiu

Verified Expert  in Engineering

Software Developer

Bangkok, Thailand

Toptal member since May 21, 2019

Bio

Ethan is an expert in web technology, and that shows when he creates innovative experiences that are enjoyable on mobile, desktop, and in person (events through digital installations). He also possesses a keen eye for UX/UI design and animations. Ethan has worked for various clients, including Nike, Airbnb, Adidas, Chanel, Martell, Jordan, Ant Financial, Lincoln, General Electric, and Ford.

Portfolio

Resn
PixiJS, A-Frame, Three.js, Webpack, Vue
AKQA
Gulp, Webpack, PixiJS, Three.js, Angular, Vue
Imagination
Gulp, Three.js, Angular, React

Experience

  • JavaScript - 15 years
  • Three.js - 10 years
  • WebGL - 10 years
  • Vue - 8 years
  • Games - 8 years
  • React - 5 years
  • Nuxt.js - 4 years
  • Next.js - 1 year

Availability

Part-time

Preferred Environment

Vue, React, Three.js, Nuxt.js, Next.js

The most amazing...

...thing I've worked on was a web experience for Airbnb that demonstrates the life styles of an old Chinese village using illustrations placed in a 3D environment.

Work Experience

Senior Developer

2017 - 2019
Resn
  • Created and maintained a new template based on Vue.js and A-Frame, consisting of clean and reusable components and services. It was soon adopted by offices globally and used to build the latest web apps at an unprecedented pace.
  • Experimented with cutting-edge technology to produce working prototypes for pitches such as browser-based AR web apps and VR with positional audio.
  • Led a team of five remote developers to create a high-end 3D illustrated website that tells the stories of an old Chinese village for Airbnb.
  • Created a mini-game for Chanel that was subsequently deployed at events globally including China, Korea, Japan, Hong Kong, Taiwan, and France.
  • Built a system involving accelerometers, gyroscopes, Bluetooth, and wireless charging all plugged into a shoe model that was then used to control an on-screen virtual shoe, highlighting every detail and innovation within.
Technologies: PixiJS, A-Frame, Three.js, Webpack, Vue

Senior Creative Developer

2016 - 2017
AKQA
  • Produced a multitude of innovative campaign websites for the Nike and Jordan brands—regularly developing uniquely usable and animated interfaces and often integrating then with Nike running and training data to tell more personalized stories.
  • Worked closely with UX designers to improve consistency so that the use of reusable components could simplify, clean up, and speed up tech development.
  • Collaborated with visual designers to improve the connections between layouts so that smoothly animated transitions can be used to organically and logically link them.
  • Integrated with WeChat including the use of account data, and binding with existing user account systems.
  • Prototyped numerous modern and novel ideas in the commerce UX/UI for Nike.com. A/B testing showed significant improvement in speed and usability.
Technologies: Gulp, Webpack, PixiJS, Three.js, Angular, Vue

Creative Developer

2013 - 2016
Imagination
  • Spearheaded the creation of an innovative social media-driven art piece for the VIP lounge at a major art exhibition in Hong Kong 2014.
  • Integrated an animated 3D Coverflow and map system for an interactive digital directory using WebGL.
  • Created a fast and beautifully animated search system for an interactive digital directory including an on-screen virtual keyboard that supports English, Pinyin, and CJK stroke (calligraphic strokes needed to write Chinese) input entirely in HTML5 and animated with CSS3.
  • Produced brand new, fully responsive websites (including mobile, tablet, and desktop support) for Pacific Place and City Plaza Hong Kong.
Technologies: Gulp, Three.js, Angular, React

Web Application Developer

2013 - 2013
vCumulus
  • Developed a Dropbox-like application for enterprises (private servers). HTML5 was used to integrate a selectable, draggable, and droppable UI for the desktop web app.
  • Completed a suite of fully featured mobile apps including a web app, Android app, and iOS app made with HTML5, AngularJS, and Cordova.
Technologies: Cordova, JavaScript, HTML5, AngularJS

Software Developer

2011 - 2012
Corinex Communications Corporation
  • Created a customer portal website for viewing electricity usage data including charts and statistics such as weekly and monthly usage, trends, and projections.
  • Composed a web application for using and administrating an infrastructure of electric vehicle charging stations for BC Hydro including Google Maps integration in the front end and PHP Modbus communication to the stations in the back end.
  • Conceived of numerous Python scripts including complex statistical database analysis (MySQL) that helped troubleshoot and discover problematic electricity meters, and automated multithreaded SNMP and Telnet clients that helped to solve the problems.
  • Produced an iOS mobile application for viewing electricity usage data; it was built using PhoneGap, jQuery Mobile, and Xcode.
Technologies: PHP, jQuery UI, jQuery, JavaScript, CSS, HTML

Student

2004 - 2010
University of British Columbia
  • Created an iTunes-like interface for searching and listening to music through YouTube. This included features such as scraping through YouTube's metadata to look for a video's artist and album data, then automatically searching through an album database to check and confirm the details, then saves to the database as a song. It also had Facebook connect, so users can share their songs and playlists with their friends. At its peak, it had over 4,000 users.
Technologies: WebGL, JavaScript, CSS, HTML

Nike | Feed of Speed

https://feedofspeed.ethanchiu.dev/
To continue the story of Breaking 2, an attempt to break the two-hour marathon record, we challenged users to go on a finger-marathon by swiping hard and fast at their screen and to keep doing it even when their fingers were already tired and sweaty.

I built a 3D racer using WebGL along with Three.js, but instead of being in a car, you were running in a first-person role along with other runners. It also had special visual effects such as zoom blurring and speed lines which added to the excitement.

Winner of an FWA award with a very high score of 87.

Airbnb | More of Less

https://moreofless.ethanchiu.dev/
In More of Less, Airbnb China invites you to visit a traditional rural village where time-honored practices are cultivated and passed on to the next generation. Explore five different stories, carefully brought to life with more than 300 hand-painted illustrations, animated in a 3D environment.

Built using a combination of Vue.js and A-Frame, we placed 2D illustrations in a 3D environment, with each layer being revealed by a custom ink-shader. Each story had a long gsap animation that paused (with its time controlled by the amount scrolled).

Winner of an FWA and Awwwards.

KFC Chickendales

For Mother's Day 2019, KFC collaborated with the Chippendales to create Chickendales. Users can visit the site to create a personalized video where strippers will dance and tell your mom she's the best by name.

Using just HTML, CSS, and JavaScript (no 3D involved), we created a beautifully animated theater marquee UI for users to enter their mom's name and location.

Chanel | Coco Crush

https://cococrush.ethanchiu.dev
Chanel wanted to create a game that would become a player's next little obsession. It needed to be quick, fun, addictive, and endlessly replayable.

So we created what is essentially a whack-a-mole game at its core but added many new features such as multi-tap rings, simultaneous tap rings, and bomb items that would end the game instantly. On top of that, every once in a while, there would be a randomized mini-game within this mini-game to keep things exciting and unpredictable.

The game was a huge success and was subsequently launched all over the world including China, Korea, Japan, Hong Kong, Taiwan, and France.

Martell Taste of Life

https://www.youtube.com/watch?v=RwTKMEZQ2_g
Visit the Martell restaurant and be a part of 3 interactive stories.

In the first story, a friend has invited you to a restaurant, but he is late, and the table is full of strangers. Talk with the people at your table to discover why Martell is being served in this special occasion.

In the second story, 3 good friends are having a heated argument. View flashbacks to find out why they are fighting and how Martell will help resolve their differences.

In the last story, a CEO is having an intense business meeting over a meal. What should he order? Should he bring up the contract? Every move could help make or break the deal.

Built for mobile, this project involves a complex system to preload and switch to different videos on user interaction, similar to Netflix's choose-your-own-adventure used in Black Mirror: Bandersnatch.

Nike | Remix My Airs

https://remixmyairs.ethanchiu.dev/
Through an interactive questionnaire, users received an opportunity to remix one of six original tracks from well-known artists. Partnering with Peter Tarka on the 3D visuals, we created an environment where everything reacts to the rhythm of the track that you mixed.

The site was built with Pixi.js using existing rendered 3D images. Every possible remix was pre-created and exported to MP3s, and they were sampled at different frequencies to animate different parts of the visuals. At the end of the experience, users can choose to save their mix in their playlist.

Galaxy Macau | Interactive Digital Directory

https://www.youtube.com/watch?v=NXv9HYxNp2w
The project centered around a digital directory kiosk for the Galaxy casino in Macau.

Project Specifics:
• Integrated an animated 3D CoverFlow of cards for all the stores, restaurants, hotels, and other relevant locations.
• Created a fast and beautifully animated search system including an on-screen virtual keyboard that supports English, Chinese Pinyin, and CJK stroke input entirely in HTML5 and animated with CSS3.
• Implemented a 3D zoomable and rotatable map that included multiple floors and areas.
• Wayfinding would draw a line from the user's current location to their destination; including an under-18 option that would route around the casino floor and a wheelchair option that would avoid escalators.

361 Interactive Physical Shoe

https://www.youtube.com/watch?v=Zvlws5Wvkk0
At the Jakarta Asian Games 2018, we made a shoe into a controller for the display that would then show additional information on the shoe itself.

Features:
• We packed a gyroscope, accelerometer, Bluetooth, and battery into the sole of the shoe.
• Users can rotate the physical sneaker, and see the on-screen shoe rotate to the same angle.
• The on-screen shoe includes hotspots, and when the hotspot is centered, it opened up additional information on that part of the shoe such as the heel, the sole, or the tongue.

Lincoln | Personalization Studio

https://www.youtube.com/watch?v=HZcgJ8mttYQ
The project involved a kiosk and video wall car customizer; we deployed it at Lincoln showrooms all over China.

Jordan Space Jam | Defy the Post

https://spacejam.ethanchiu.dev/
The monsters are back! They’ve taken over the courts and the web. Get them through this gamified mobile site that lets you defy their social posts with your skills.

Features:
• It contained a fake social media page that included posts that were taken over by the monsters. Users were challenged to beat the monsters by completing different mini-games.
• One mini-game involved spinning a basketball so fast a tornado would form and destroy the page itself bit by bits.
• Another mini-game involved shooting a basketball at a satellite that would then shoot lasers to destroy the page.

The site was created using a mix of Vue.js and Three.js along with the two mini-games and the entire ending sequence was in 3D.

Bohan Phoenix: Overseas Interactive Music Video

https://www.youtube.com/watch?v=rdyoNY20wME
Partnering with a popular Chinese rapper, we created a music video in the style of the 80s. Users can tap and hold on different areas of the video to watch in a different point of view.
2004 - 2010

Bachelor of Applied Science Degree in Computer Engineering

University of British Columbia - British Columbia, Canada

Libraries/APIs

Vue, Vuex, jQuery, Underscore.js, Lodash, Three.js, React, Node.js, WebGL, WebVR, jQuery UI

Tools

Sublime Text, Webpack, Gulp, ITerm, Git, Illustrator CC, Photoshop CC, Vue CLI

Languages

JavaScript, ECMAScript (ES6), Sass, CSS, HTML5, HTML, CSS3, SCSS, Less, Pug, JADE, Python, ES7, PHP, C++, Java, Python 3

Frameworks

Chrome, Nuxt.js, A-Frame, PixiJS, Tailwind CSS, AngularJS, Angular, Express.js, NestJS, Next.js

Paradigms

Agile, Scrum, Waterfall Development

Platforms

MacOS, Visual Studio Code (VS Code), Amazon Web Services (AWS), Firefox, Safari

Storage

MongoDB, MySQL

Other

Vue Router, Games, 2D Games, 3D Games, User Interface (UI), WebSockets, Cordova

Collaboration That Works

How to Work with Toptal

Toptal matches you directly with global industry experts from our network in hours—not weeks or months.

1

Share your needs

Discuss your requirements and refine your scope in a call with a Toptal domain expert.
2

Choose your talent

Get a short list of expertly matched talent within 24 hours to review, interview, and choose from.
3

Start your risk-free talent trial

Work with your chosen talent on a trial basis for up to two weeks. Pay only if you decide to hire them.

Top talent is in high demand.

Start hiring