"Developed a responsive page with captivating scroll animations, enhancing the brand representation of the LLM products. Adapted to evolving requirements and tight schedules."

"label": "tongyi.aliyun.com",
"href": "https://tongyi.aliyun.com?mode=native"

"React, Javascript, GSAP, Lottie

Served as main developer and maintainer of React UI library with 45 components, with 10,000 downloads used by 100+ projects and 3 tech teams. Use React, Ant Design, Webpack, Node.js

Maintained 17 iteration for 2 design version upgrades, and automized the compilation process
   
React, Ant Design

NPM @b-design/antd

https://www.npmjs.com/package/@b-design/antd

"Crafted WebGL experience and real-time data dashboard for visualizing abstract energy concepts, achieving 5000 PV within 3 days.",
"Gained visiblity through on-site display, positive feedbacks from key stakeholders and media coverage."

"label": "oew.energy.alibabacloud.\ncom/viz",
"href": "https://oew.energy.alibabacloud.com/viz"

tech WebGL, Three.js, React Chart

![](/images/Energy-Expert-Dashboard.png)

Served as main developer and maintainer of React UI library with 45 components, with 10,000 downloads used by 100+ projects and 3 tech teams. Use React, Ant Desi

## Background

In China, coding never stops. In a year where Covid limited physical festivals to virtual events, Google seeks to empower developers' bodies and minds using their innovations and products. To demonstrate this, we created Noodling- an interactive gaming experience that literally got developers out of their chairs and moving during the 6-day summit. Resulting in tripled engagement compared to 2019, 7.36million unique views in 5 days, 6.5km of virtual noodles made. Plus, 98% of devs agreed that Google is helpful to devs in China.

![](https://res.cloudinary.com/djbqu5ifh/image/upload/v1620528872/google-developer-summit/3.gif)
![](https://res.cloudinary.com/djbqu5ifh/image/upload/v1620528872/google-developer-summit/2.gif)
![](https://res.cloudinary.com/djbqu5ifh/image/upload/v1620528872/google-developer-summit/1.gif)
![](https://res.cloudinary.com/djbqu5ifh/image/upload/v1620528872/google-developer-summit/4.gif)


## Introduction

This game deploys Tensorflow that detects gesture and motion. The user is prompted to move their hands to make virtual noodles like how a noodle master would with real noodles. The game challenged them to make the noodle as long as they possibly could in 2 minutes. To up the game, special toppings were available in the gameplay if the user attended more talks. 

![](https://res.cloudinary.com/djbqu5ifh/image/upload/v1620817944/google-developer-summit/desktop1.jpg)
![](https://res.cloudinary.com/djbqu5ifh/image/upload/v1620817944/google-developer-summit/desktop2.jpg)
![](https://res.cloudinary.com/djbqu5ifh/image/upload/v1620817944/google-developer-summit/desktop3.jpg)

## Tech highlights

I worked independently for this game module, from phsycis engine, game system, frontend ML model and integration of all these in Angualr framework. 


Frontend:
 Angular
 Tensorflow.js (PoseNet)
 Phaser3
 canvas & web cam stream

![](https://res.cloudinary.com/djbqu5ifh/image/upload/v1620817944/google-developer-summit/desktop4.jpg)
![](https://res.cloudinary.com/djbqu5ifh/image/upload/v1620817944/google-developer-summit/desktop5.jpg)


## Media

![](https://res.cloudinary.com/djbqu5ifh/image/upload/v1620817944/google-developer-summit/desktop7.jpg)


谷歌开发者 微信公众号
🔗 [Google 面馆营业啦！揭秘拉面背后的机器学习技术](https://mp.weixin.qq.com/s/AfQLps9jqnqtxYQjt3u5OQ)

TXD技术体验设计 微信公众号
🔗 [今日灵感VOL.03: 谁是终极拉面之神](https://mp.weixin.qq.com/s/YDBSWtGR1TH9W_gfmc3ZDA)


![](https://res.cloudinary.com/djbqu5ifh/image/upload/v1620817944/google-developer-summit/desktop6.jpg)

## Background

Women Will is a Grow with Google program making an impact in 49 countries, supporting women’s economic potential through digital skills and community building.

Our data-driven insights show that while the gender gap persists, women are unable to truly thrive at home and at work.

Explore tools that can help you, follow us on social media, or find out about the latest events around the world / in your area.

When women have equal access to information and opportunity, anything is possible.


## Introduction

We propose to create the most simple website there is:
One page for everything you need about Women Will.

![img1](https://res.cloudinary.com/djbqu5ifh/image/upload/v1620866598/women-will/slide17.jpg)
![img2](https://res.cloudinary.com/djbqu5ifh/image/upload/v1620866598/women-will/slide18.jpg)
![img3](https://res.cloudinary.com/djbqu5ifh/image/upload/v1620866598/women-will/slide19.jpg)
![img4](https://res.cloudinary.com/djbqu5ifh/image/upload/v1620866598/women-will/slide20.jpg)


## Tech highlights

Frontend: Angular7 
Lottie 
Animation 
GSAP 
Animation

Difficutlies:
Deal with animation timeline of different elements to have a consistent looking in every subpage.
Deal with Right-To-Left text for the page in some region.

![img1](https://res.cloudinary.com/djbqu5ifh/image/upload/v1620866598/women-will/slide21.jpg)
![img2](https://res.cloudinary.com/djbqu5ifh/image/upload/v1620866598/women-will/slide22.jpg)

## Background

Every year, Google holds hundreds of events and conferences for its potential business partners, users and developer community. What can Google do as event hosts other than simply displaying event information on its own website? How to grasp what topics are most interesting to users? Is there a programmatic way to bridge speakers and audience?

<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto,w_470/v1586229609/join-live/event/think-platform.jpg" />

Google Event Think Platforms 2019 in Singapore

## Introduction
JoinLive is a progressive web application for better event management and participation experience.
<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto,w_470/v1586230315/join-live/thumbnail.png" />

For event hosts, it serves as an all-in-one platform that helps from pre-event planning, real-time info update during the event, and data collection for after-event analysis.

For even attendees, the web app is a place where you could not only access information of all detail of the event, but also take notes with session information as context, interact with speakers, and submit feedback to claim a swag and etc,. The app tracks all events you’ve participated so that you don't have to scrape together information pieces from different event websites.
<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto,w_470/v1586229608/join-live/event/question.jpg" />
The speaker answering questions the audience submitted in the app

## Achievement

JoinLive, previously names as Audience Connect, is initialized by Google Singapore marketing team, developed by R/GA Tokyo Google Embedded team, and first launched at Google event Think Platform 2019. With evident improvement in event management and user data collection, other office in APAC starts to utilizing the app in events too.
<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto,w_470/v1586229609/join-live/event/feedback.jpg" />

The event host introducing JoinLive to audience

The first development phase of this app is from July 2019 to Jan 2020. With professional delivery on time and significant improvement in audience user experience, the client (Google Singapore) extends the contract for a second iteration that starts from Feb 2020 and will end in June 2020. The phase 2 focuses on implementing more new features and improving user interfaces.

## Tech highlights

I’ve been working as full stack developer with, Nicolas Pinto, Tech Lead.
We built it from 0, leveraging Google’ python scaffold. During the process, we work closely with UX team in translating and advising the user flow.

This on-goning project includes 2 parts: client side app and admin side platform, deployed as 2 projects respectively. Both application require login and are accessible by invitation only.

## Admin side platform
<a href="https://gweb-joinlive-backend.appspot.com/" target="_blank">https://gweb-joinlive-backend.appspot.com/</a>
<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto/v1586228668/join-live/admin/overview.jpg" />
provides functions for event hosts to manage event information, guest user list, and real time features to send notification. Event admin can invite guests not only by a specific email address, but also by domain in order to easily grant access to a whole company. The backend of the admin platform also responses to data request from client side application.

## Client side app
<a href="https://joinlive.withgoogle.com/" target="_blank">hhttps://joinlive.withgoogle.com/</a>
<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto/v1586229280/join-live/pwa/iphone-mockup-scene.jpg" />
displays events information by events, tracks in an event and session in a track. Users can take notes with one specific session information as context. The notes can be exported to their email. Each session has tags and topics in which user can express their interest. During speeches, user can asks question or participation in a poll. Data are collected only with users’s consents.

## Frontend
Angular7


## Backend
Python Flask with webapp2 framework


## CSS Framework:
Material Angular


## Deployment and Stage:
Google App Engine


## Database:
Google Cloud Datastore & its NDB client Library
Firebase Realtime Database


## Difficulties
-- In order to have event hosts familiarized with the admin platform without too much training cost, the platform fully leverages the ecosystem of Google products. For example, event admin can edit event information and guest list in a Google sheet, and then import this sheet in the platform to create or update an event. In addition, the feedback forms utilizes the interface and API of Google FormBox.

-- Usually, event hosts invite guest users by their work emails. As that users are required to login with a Google account, it may happen that the user’s work email invited by event hosts is not a Google email. In order to solve this problem, the client side application allows a user to associate his current login email with a non-Google work email, in order to validate the events he can access.

-- As a PWA (Progressive web application), JoinLive strives to provide an experience that is close to native app as much as possible. In order to achieve this, the client side app implements ngrx, a state management tool in AngularJS, and requests data of the delegate(user) and all events on the first login.

## More Showcase
#### Client side app
<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto/v1586223371/join-live/pwa/overview/signin.jpg" />
<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto/v1586223371/join-live/pwa/overview/participation.jpg" />
<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto/v1586223370/join-live/pwa/overview/participation-poll.jpg" />
<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto/v1586223371/join-live/pwa/overview/participation-result.jpg" />
<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto/v1586223370/join-live/pwa/overview/feedback-notification.jpg" />
<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto/v1586223371/join-live/pwa/overview/feedback.jpg" />
<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto/v1586223371/join-live/pwa/overview/notes.jpg" />

#### Admin platform
User flow
<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto,w_auto/v1586223171/join-live/admin/userflow.png" />

Event list & Event detail
<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto/v1586227242/join-live/admin/event-list.jpg" />
<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto/v1586227242/join-live/admin/event-detail.jpg" />

User list
<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto/v1586227242/join-live/admin/user-list.jpg" />

Feedback list & Feedback detail
<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto/v1586227242/join-live/admin/feedback-list.jpg" />
<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto/v1586227242/join-live/admin/feedback-detail.jpg" />

Question list
<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto/v1586227242/join-live/admin/participation-question.jpg" />

<div className="align-center post-video--vertical">
 <video controls poster="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto,w_470/v1585048058/we-are-ghosts/homepage_3.jpg">
 <source src="https://res.cloudinary.com/djbqu5ifh/video/upload/v1585898061/we-are-ghosts/WEAREGHOSTS.mp4" type="video/mp4" />
 </video>
</div>

## Brief
Netflix is launching the action blockbuster of the 2019 holiday season 6 Underground

Against the constant surveillance that we face today, a covert group of highly trained operatives are on the search for a special breed of individuals to fall off the grid and join them – by becoming ‘ghosts’.

## Campaign idea

In today’s hyper connected world,

You’re constantly tracked,

monitored and surveyed.

So how do you disappear

when you’re always being watched?

YOU BECOME A GHOST!


## What we did

R/GA worked with Netflix Korea for the launch of 6 Underground by helping the citizens of Seoul 
disappear. WeAreGhosts.org(<a href="http://ec2-13-209-96-219.ap-northeast-2.compute.amazonaws.com:3000/" target="_blank"></a>) is a micro-website that tests a user’s detectability and stealth level on the internet.


## Tech highlights

I worked as main React developer on frontend and image processing in the backend, with Rollen Gomes, Tead Lead, and Laurent Thevenet, Executive Tead Director.

Frontend: React

 with 1i8next framework to provide bilingual content, and redux to manage user test input 

Backend: Node.js

Deployed on AWS

## Typing effect + Noisy glitch background
![](https://res.cloudinary.com/djbqu5ifh/image/upload/f_auto,c_scale,q_50,w_200/v1585898042/we-are-ghosts/UniConverter_000001.webp)


![](https://res.cloudinary.com/djbqu5ifh/image/upload/f_auto,c_scale,q_50,w_200/v1585898042/we-are-ghosts/UniConverter_000001.webp)

## Carousel that listens to horizontal scroll
![](https://res.cloudinary.com/djbqu5ifh/image/upload/f_auto,c_scale,q_50,w_200/v1585898042/we-are-ghosts/UniConverter_000002.webp)

## Showcase
(It takes some time to load all the gifs and the video...)

## Introduction

![](https://res.cloudinary.com/djbqu5ifh/image/upload/f_auto,c_scale,q_50,w_200/v1585898042/we-are-ghosts/UniConverter_000003.webp)

## Choose image
![](https://res.cloudinary.com/djbqu5ifh/image/upload/f_auto,c_scale,f_auto,q_40,w_200/v1585048058/we-are-ghosts/homepage_2.jpg)

#### Image processing

## Result page & SHarable assets
![](https://res.cloudinary.com/djbqu5ifh/image/upload/f_auto,c_scale,q_40/v1585048058/we-are-ghosts/result.jpg)


## Performance
The website achieves high quality visitors despite low paid digital media investment,
![](https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_40/v1585808336/we-are-ghosts/performance1.jpg)

and also highly engaged visitors with high interest in content.
![](https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_40/v1585808336/we-are-ghosts/performance2.jpg)

Tongyi LLM official website

B-Design System

Energy Expert Visualization

Ali Cloud Careers

Google Noodling

Women Will

Join Live

We are ghosts