Project: In2Ideas HTML5 Website

This is the complete rework of the front page of my (now ex) agency to show case our experiences and expertise. The concept was that the whole site is a mind map which is often associated with brainstorming & ideas generating.

The key feature of the site is the mind-map-like navigation in which you can drag to move in any direction. It works on both desktop and tablet's browsers. Looping animations are made of SVG graphics which were authoring in Flash and then converted to Google Swiffy. The dynamic dash lines were programatically drawn on HTML5 Canvas. To support older browser (IE8+), Flash will be in place of the SVG & Canvas graphics.

My roles: technical researcher, key front-end developer.
Technical highlights: HTML5, CSS3, RequiredJS, jQuery, Google Swiffy, FlashCanvas

Live URL: http://in2ideas.com

More screen shots:

Interaction demo:

Project: ISS 2012

This is a post-event highlighting microsite for Intεl Sοlμtiοn Sμmm!t 2012. The site is to capture the activities and everything related to event in the forms of videos, photos & other kind of materials. Audience of this microsite are participants of the event and other users of APɅC Intεl Channεl Pοrtal which is a member-only partners relation web site.

Live URL: www.%69%6E%74%65%6C.com/apac/channel/ISS2012/index.html [?]

Technical features:

• jQuery
• Galleria photo gallery (library)
• OSMF's Strobe Media Playback (component)

Obfuscation Reasons

Project: Justin Portfolio

One of the projects to challenge my skill in JavaScript and HTML5. The original parallax scrolling experience is coded from scratch with the help of MooTools framework. I learned a lot from this project and  got everything I need to handle larger front-end interactive websites.

Visit the site.

Technical features:

• HTML5 Boilerplate
• MooTools 1.4
• ThreeJS 3D library & its Birds Demo
• CSS3's transition & animation

Related posts:

• Realistic waterfall effect with CSS
• Fish boids

Case Study: WebGL 360° Panorama

A 360° walk-through of my office. This is a case study with the ThreeJS 3D engine for HTML5 Canvas and WebGL. I have adapted the ThreeJS WebGL equirectangular panorama demo, making it fall back to Canvas renderer when browser doesn't support WebGL. The overlaying markers are DOM objects. There's some coordinates conversion between ThreeJS 3D world and 2D DOM. In this adaptation, there are 2 spherical panoramas so users can navigate and see more corners of the office. Just for fun and experimental purpose, some snowing effect added on the occasion of Christmas 2011.

Components used:
- ThreeJS WebGL equirectangular panorama demo
- Snowing effect by Seb Lee-Delisle

Finally, check out the demo and grab the source code.

Case Study: In2 Profile

This is a case study that my team set out to explore HTML5 / CSS3 but it is also served as pitch deck for my company's profile presentation. This one-page parallax scrolling website is inspired by the one of the 2010 buzzing HTML5 experiences, nikebetterworld.com. Everything was coded from scratch.

We developed 2 versions. The first version features usual parallax scrolling with arrow drawing effect using canvas. The second version is a revamped one with additional animation on the illustrating graphics. I also experimented CSS3 transitions effect on the menu and some buttons.

My role: JavaScript + HTML Developer, Technical Researcher

Technical features:

• jQuery (library)
• HTML5 Boilerplate (library)
• HTML5 Canvas
• CSS3 transitions