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.
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
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.
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.
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.
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
#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.
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.
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
The main design focus for this project is the house itself. The model is modeled in Google SketchUp and imported into the 3D environment.
How to Create A WebGL Scene?
A scene: consider this as the stage where every object needs to be added in order to be rendered
A camera: in this case we will use a perspective camera, but it could also be an orthographic camera.
One or more objects to render, in our case, the Up house, birds, balloons, sky, earth etc..
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.
A renderer that will display all the scene using WebGL.
#2099e8
#61eeaa
#eadfff
#ee7261
AaBbCcDd
Amatic SC
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.
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.
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.