MAIN WORKS

Developing with user-first in mind is always my approach. Designing enjoyable contents for all users across different platforms is always my goal.

View Live | View Code

My Portfolio Website

For this project I decided to incorporate Bootstrap 4 to build my portfolio website. I love using Bootstrap because it makes your site responsive with little code and it is well documented as well. As such an amazing and popular framework, I feel it is important to know how to use it in a project.

Technologies used:
  • HTML5, CSS3, JavaScript, jQuery
  • Responsive Design
  • Bootstrap4
View Live | View Code

React Giphy Gallery

In this project I used create-react-app to build my Giphy gallery app. I fetched interesting gifs from Giphy's public API and utilized react router dom to link to different page URLs of the app.

Technologies used:
  • HTML5, CSS3, JavaScript
  • Responsive Design
  • React.js
  • AJAX
  • Public API: "Giphy" - Link
View Live | View Code

Employee Directory

In this project I built an employee directory using a public API "Random User Generator". I requested random user data from the API using AJAX and displayed the information on the page dynamically. Users can also search by employee names.

Technologies used:
  • HTML5, CSS3, JavaScript, jQuery
  • Responsive Design
  • AJAX
  • Public API: "Random User Generator" - Link
View Live | View Code

Interactive Video Player

In this project I built an interactive media player web page using a JavaScript video/audio player library. Customized the video player's style a little bit. Also added captions where they will be highlighted as the video plays. You can also click the captions to jump to the corresponding time of the video.

Technologies used:
  • HTML5, CSS3, JavaScript
  • Responsive Design
  • MediaElement.js
View Live | View Code

Web Style Guide

For this project I learned how to organize my CSS using Sass. Using Sass features like variable, mixin, and nested CSS properties helped making my CSS more modular and easier for applying future changes. Separating my CSS into different components with partials also makes it easier to debug my CSS code.

Technologies used:
  • HTML5, CSS3, JavaScript
  • Responsive Design
  • Sass
View Live | View Code

Interactive Photo Gallery

For this project I built a responsive and interactive photo gallery with a search filter input. You can search pictures with its captions. Unmatched pictures will be hidden.

Technologies used:
  • HTML5, CSS3, JavaScript
  • Responsive Design
  • Lightbox Plugin
➤