Ethan Chiu
Verified Expert in Engineering
Software Developer
Bangkok, Thailand
Toptal member since May 21, 2019
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
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
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
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.
Senior Creative Developer
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.
Creative Developer
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.
Web Application Developer
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.
Software Developer
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.
Student
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.
Experience
Nike | Feed of Speed
https://feedofspeed.ethanchiu.dev/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/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
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.devSo 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_gIn 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/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=NXv9HYxNp2wProject 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=Zvlws5Wvkk0Features:
• 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=HZcgJ8mttYQJordan Space Jam | Defy the Post
https://spacejam.ethanchiu.dev/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=rdyoNY20wMEEducation
Bachelor of Applied Science Degree in Computer Engineering
University of British Columbia - British Columbia, Canada
Skills
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
How to Work with Toptal
Toptal matches you directly with global industry experts from our network in hours—not weeks or months.
Share your needs
Choose your talent
Start your risk-free talent trial
Top talent is in high demand.
Start hiring