Awesome work makes me happy.

My past works, inspirations and random projects.

Eversnap

Website design and development.

  • Python
  • Django
  • HTML 5
  • CSS 3
  • jQuery
  • angular
  • Photoshop
l

Eversnap is an event photography company that matches events with photographers.

My role

  • UI · UX Design
l
l

Brief

Redesigned company's landing page based on business contexts and company style guidelines. Eversnap project can be found at eversnappro.com.

l

Everhash

Public API consumption

  • Python
  • Django
  • MySQL
  • Amazon Web Service
  • HTML 5
  • CSS 3
l

A Twitter hashtag image crawler.

My role

  • Frontend & Backend architecture
l
l

Brief

Everhash is a Twitter hashtag image crawler which collects images in albums given by its posted hashtag name. I developed the business logic to crawl the Twitter universe through REST and Streaming API. Everhash project demo can be found HERE.

l
l
Questions

Each of the albums updates asynchronously at real-time through Twitter's publicly available REST/Streaming API when new hashtag images are tweeted by Twitter users.

Everhash is an open source project. Source code can be found at my github repository.

l

Beebeta

Website design and development.

  • Python
  • Django
  • MySQL
  • Amazon Web Service
  • HTML 5
  • CSS 3
  • jQuery
  • AJAX
  • Photoshop
l

Beebeta is a public polling application to poll netizens on trending questions.

My role

  • UI · UX Design
  • Frontend & Backend architecture
l
l

Brief

A web based application built on Python/Django web framework and Linux Apache MySQL Python(LAMP) stack. I worked on the application's frontend web design & backend architecture. Beebeta project can be found at www.beebeta.com.

l

UI · UX Design

l

Beebeta was designed with the following goals in mind:

  • Poll qestions are prime contents.
  • User voting should be encouraged visually.
  • Web pages should be simple and minimalistic.
Typography


Typography

I chose Helvetica Neue as the default typeface. It’s a very clean and smooth looking font that works especially well for larger sized text and headings.

Questions

Questions are the main content. My design concept for questions takes the form of ‘question cards’. Each poll question is a unique question card. To distinguish different categories, i added colour-coded border for each question card of its associated category.

Home page

Homepage design

The design concept is centered around question cards. This layout allows users to easily browse some of the latest trending questions and participate. To aid navigation, the entire question card is a clickable region.

Poll page

Poll page design

Poll choices are laid out on the left as multiple-choice style and users can vote by clicking on each corresponding 'arrow-up' button. Question image provides visual context to the choices.

Frontend

Using standard Web 2.0 tools such as HTML5/CSS3, jQuery and Bootstrap3 framework, i hand-coded cross-browser compatible and W3C validated web pages. I have also applied Object Oriented CSS(OOCSS) coding methodology into CSS styles.

Check out my blogpost, Designing Beebeta which further details my design work.

l

Backend

l

I used Python/Django framework and MVC architecture to develop Beebeta's backend. Some of the core web tools i developed includes: Relational database architecture, Business logic, Platform API, Authentication, Caching, Pagination, Data Validation, Static files management and Email automations.

l

Web Stack

l

I was responsible for setting up Beebeta's web stack. Beebeta runs on linux operating system, apache web server and MySQL relational database. An array of Amazon Web Services such as Amazon EC2, Amazon S3 and Elastic Load Balancing are used in conjunction to provide an optimal web solution. Web analytical tools such as Google analytics, New Relic and Mixpanel are also used to monitor the application round the clock.

Check out my blogpost, Beebeta Engineering on stack implementation details.

l

PerfectPic

Application design and development.

  • Java
  • Android
  • App engine
l

PerfectPic is an Android application which improves the picture quality of mobile phone cameras by implementing various image stabilisation techniques.

My role

  • Project Lead
  • Business Logic Implementation
  • Backend Administration
l

Challenge

  • Mobile camera hardwares are incapable of handling image processing due to spatial/cost constraints.
  • Pure implementations on the software side is computationally intensive and takes a toll on power consumption.

Solution

l

I have implemented solutions to reduce the effect of unintended camera shakes & motion blurs, which drastically improves the quality of pictures taken.

Accelerometer's coordinate system used by Sensor API.
Gyroscope's coordinate system used by the rotation vector sensor.

Utilize mobile device’s in-built sensors, TYPE_ACCELEROMETER & TYPE_GYROSCOPE as data sources to determine the motion and rate of rotation of device. Index readings are derived from each of the hardware’s coordinate system readings and compared against threshold readings. Machine learning algorithms are implemented on threshold readings that adapts to users' behavior overtime and adjusts itself for optimal picture quality.

Camera shake adjusted
Camera shake adjusted with Image Fix

On camera-click, application captures successive sets of images with burst-camera mode and compares each image's index readings with threshold readings. With index comparison results, coupled with aperature & shutter speed readings, determines the extent of image fix. Image fix procedures includes adjustments to contrast, brightness, hue saturation and image blurs.

Motion blur adjusted
Motion blur adjusted with Image Fix
l

Result

Check out PerfectPic's sample implementation at my Github repository.

Shapify

Branding and corporate website design and development.

  • Python
  • Django
  • Amazon Web Service
  • HTML 5
  • CSS 3
  • Photoshop
l

My role

  • UI · UX Design
  • Frontend & Backend architecture
l
l

Brief

Shapify is your factory of limitless creativity. The website is the gateway to offering 3D printing and modeling services to individual and/or corporate projects. Visit Shapify at www.shapify.asia.

l

UI · UX Design

l

Shapify was designed and developed with the following goals in mind:

  • Clear and concise service details.
  • Optimal display of portfolio projects.
Typography

Typography

I chose Helvetica Neue as the default typeface. It’s a very clean and smooth looking font that works especially well for larger sized text and headings.

Shapify logo
Namecard
Namecard

Branding & Logo Design

The logo concept was ‘building with basic elements’. In the 3D modeling world, the fundamental building piece is a polyon, in this case, represented with blue sierpinski triangle.

Website Design

Website design

The website focus on the company's services primarily and subsequently showcases its past works as service validations. I used white/grey backgrounds to allow important blue coloured contents to stand out.

Frontend

Using standard Web 2.0 tools such as HTML5/CSS3 and Bootstrap framework, i hand-coded cross-browser compatible and W3C validated web pages.

l

Backend

l

I used Python/Django framework and MVC architecture to develop Shapify's backend. Some of the core web tools i developed includes: Business logic, Platform API, Caching, Data Validation and Static files management.

l

Web Stack

l

I was responsible for setting up Shapify's web stack. Shapify runs on linux operating system, apache web server and MySQL relational database. Amazon Web Services such as Amazon EC2, Amazon S3 are used in conjunction to provide an optimal web solution.

l

Milaap

UI design for corporate website.

  • HTML 5
  • CSS 3
  • Photoshop
  • Unbounce
l

Corporate website design for new campaign.

My role

  • UI Design
  • Frontend Development
l
l

Brief

My client was looking for a simple design for a new campaign that appeals to Indian audience. I designed the campaign homepage with a mix of grey and light-pink theme to give the campaign trust and warmth.

l

UI Design

l
Milaap campaign page

Website Design

The aim was to design a campaign website which encourages visitors to pledge donations for a cause. Homepage is centered around donation beneficaries with case details. A dark grey section highlights the issues of concern.

l

Network Packet Reader

Network & software development

  • C++
  • Visual Studio
l

Software development project on network packet analysis.

My role

  • Software Developer
l
l

Brief

Network packet reader is part of a network packet analysis module i developed to identify raw data packets sent over the internet. This implementation could be further developed into packet sniffers to monitor networks, perform diagnostic tests and troubleshoot network problems.

l

Software Implementation

l
IPv4 packet header
IPv4 packet header

IPv4 packet header is found at the start of every IPv4 packet. It is normally 20 bytes in length. The fields, Version, Types of Service(TOS) and Protocol are used to identify different types of network packets. Some common protocol numbers for IPv4 are:

IPv4 packet header

With the above protocol numbers, packet reader identifies different network packet types and subsequently performs checksum operations to ensure correctness of the packet.

Check out Network Packet Reader's source code at my Github repository.

l

Life begins at USA

Video clip compilation with iMovie 10.

  • iMovie
l

Video clip compilation with iMovie 10.

My role

  • Author
l
l

Video

l
HOME
PORTFOLIO