cool
skills
contact
work
about
henry
cv
ripld
riplw
wedding
up
epac
ymsw
arrow

RIPL DESIGNS

Canvas Design &
Development

VIEW WEBSITE riplw riplw
As one of the two Design Engineers involved in the creation of design templates for the Ripl app, my responsibilities included developing a customized Javascript library for Canvas. Additionally, I implemented a feature that allowed users to incorporate videos into their chosen design templates. We enhanced the design templates by improving their capabilities and expanding the customization options available to users.
  • Technologies Used
  • Javascript
  • Canvas API
arrow

RIPL WEB APP

Frontend &
Backend Development

VIEW WEBSITE riplw riplw
I am proud to have been part of the early team of engineers who contributed to the development of the Ripl web application. I assisted the team in integrating Redux and Typescript into the project.
  • Technologies Used
  • React & Redux
  • TypeScript
  • Canvas
  • FFmpeg
  • Node.js
riplw
Ripl is a web and mobile application designed to help small businesses and individuals create and publish professional-looking social media content quickly and easily. The app provides a wide range of customizable templates, graphics, and fonts. It allows users to create eye-catching posts, videos, and stories for various social media platforms. With Ripl, users can also schedule and publish their content directly to their social media accounts, monitor their engagement, and track their performance analytics.
riplw
riplw
I led the effort of implementing two essential features: Brand Profile and Brand Slide. These features were critical in helping businesses establish a consistent brand identity and streamline their social media content creation process. The Brand Profile allowed users to create and save their brand assets, such as logos, colors, and fonts, in one place, enabling them to quickly access and apply these assets to their content. The Brand Slide feature, on the other hand, enabled users to create a custom slideshow of their brand assets, such as their logo and business contact. The Brand Profile and Brand Slide features have become integral parts of the Ripl App, helping small businesses to showcase their brand and enhance their social media presence.
riplw
riplw
Using FFmpeg, I developed a video trimming functionality that is now integrated into the Node backend. In addition to developing the video trimming feature on the backend, I also implemented the corresponding interface and progress bar on the frontend.
riplw
arrow

HENRY'S DREAM WEDDING

design & development

VIEW WEBSITE wedding ng
I designed and developed this customized full stack website that focused on interactive UI and communication tools with guests.
  • Technologies Used
  • Vue.js
  • CSS Animation
  • Node.js & Express
  • Postgres & Knex
  • Twillo text and email API
wedding
wedding
#54D4C4
#132237
#FCEEC9
AaBbCcDd

Oswald

AaBbCcDd

Poppins

Regarding the RSVP page for guests, I aim to enhance their user experience by incorporating captivating CSS animations for each step of the process. This will make the entire RSVP process more enjoyable and engaging. Furthermore, as guests submit their RSVPs, I have configured the backend to instantly notify me through both text and email, providing me with real-time updates on guest selections and statuses.
wedding
wedding wedding wedding
I have designed a table view that showcases the RSVP status and selections of every guest. The page features a search functionality, enabling users to easily locate and view any guest's information by name. Furthermore, the page also allows for manual editing of guest status and information, providing users with complete control and flexibility.
wedding
arrow

UP UP & AWAY

design & development

VIEW WEBSITE ng ng ng
Inspired by the Pixar movie Up, I designed and developed this 3D interactive game using Three.js that utilizes WebGl.
  • Technologies Used
  • Node.js & Express
  • Google SketchUp
  • Postgres & Knex
  • Javascript
  • Three.js
  • WebGl
  • Auth0
ng
The main design focus for this project is the house itself. The model is modeled in Google SketchUp and imported into the 3D environment.
ng ng

How to Create A WebGL Scene?

  1. A scene: consider this as the stage where every object needs to be added in order to be rendered
  2. A camera: in this case we will use a perspective camera, but it could also be an orthographic camera.
  3. One or more objects to render, in our case, the Up house, birds, balloons, sky, earth etc..
  4. One or more lights: there is also different types of lights available. In this project we will mainly use a hemisphere light for the atmosphere and a directional light for the shadows.
  5. A renderer that will display all the scene using WebGL.
ng ng
#2099e8
#61eeaa
#eadfff
#ee7261
AaBbCcDd

Amatic SC

ng ng
I implemented Auth0 as an authentication tool for users and PostgreSQL/Knex to store user data and high scores. I built the backend in Node and Express.
ng
arrow

EXPERIENMENTAL PERFORMING
ART CENTER

design & development

VIEW WEBSITE epac epac
I designed and developed this site to showcase one of my architectural studio project. Utilizing technologies such as Animate.css and Skroll.js to present an interactive Parallax site that exhibits different parts of the project.
epac epac epac epac
#ff6400
#c9c9c9
AaBbCcDd

raleway

epac epac
arrow

YMSW MARKETING
MATERIAL

print & product design

VIEW WEBSITE ymsw
ymsw
I designed the marketing package with product booklet to show off the hand finishes that are the highlight of YMSW collection. Leveraging the craftsmanship of these stone finishes, I want to inspire clients with curiosity and endless possibilities to use these beautiful, intricate products.
ymsw
#f9d022
AaBbCcDd

whitney

ymsw ymsw ymsw ymsw
ymsw ymsw ymsw ymsw
about1 about2

FRONT-END ENGINEER
MOTORCYCLE RIDER
1973 MINI OWNER
& ASPIRING WEDDING SINGER

Seattle based web developer with an Architectual Design background who is passionate about Data Visualization, Three.js, and Front-end Development.

I'm inspired to design & develop applications that combines user centered approach with a bold and appealing visual language.

Programming Skills

HTML5 | CSS3
JavaScript | TypeScript
ReactJS | AngularJS
RESTful APIs | GraphQL
SVG | D3.JS | Three.JS
PostgreSQL
Jest | React Testing Library
Bootstrap | Foundation
Web Accessibility
Agile Methodologies

Design Skills

UX | UI Design
Graphic Design
Product Design
Figma
Adobe Photoshop
Adobe Illustrator
Adobe InDesign
Google Sketchup
AutoCad | 3D Design

GET IN TOUCH WITH ME

phone425-443-6586

henrybidesign@gmail.com