Chad Oakenfold: Web Development

Portfolio

Below is a list of select projects from my time at Blast Radius. All designs and code samples are property of the respective owners. URLs have been provided where sites are still online. If the site is offline, designs and/or static html files used during development have been provided. Please note that static html files are hosted outside of their target environments, so links and services will not exist and the pages may not be fully functional.

2012

Starbucks Fall Landing Page

A one page responsive site promoting the Fall season and the Pumpkin Spice Latte. Curated content pulled from Twitter and Instagram feeds that are tagged with #itsfallwhen are presented in a responsive grid layout.

Features of note:

Responsive layout using the Skeleton library
JS carousel
Twitter API integration
JQuery templating
Consumed internal webservices that served twitter and instagram content.
The ‘See More’ button would grab any new content provided by the internal services and randomly slot content into their designated spots (instagram content in instagram slots, twitter in twitter slots)
Implemented social widgets: Twitter follow, G+, FB Like
Prototyped as flat html/css/js files and then integrated into the ASP.Net project

Live Link

Starbucks: It's Fall When

Nike VRS

A project supporting the launch of Nike VRS golf clubs. The goal of the site was to prove that yardage could be gained by using the VRS clubs. Users visited participating retailers to test the clubs and were issued a 'Speeding Ticket' showing increased yardage. This data was added to the website where leaderboards were created for retailers, regions (country, state, city) and user specific data. Initially it was intended for North American markets but it quickly expanded to EU countries after development had begun.

Features of note:

Delivered 8 versions of the site (US, 5 US Retailers, CA, EU) with localized copy and content with 3 phases each (pre, during & post)
Site needed to work on iOS devices
Raphaël library used to render the Yardage Gained arc animations

Created a custom JS animation framework which was triggered by a class and configured with data attributes. This framework was used for text and bar graph animations eg

<div class="anim the-new-face-of-speed" id="anim2" data-anim-replay="true">
  <img class="a a-the" data-delay="0" data-speed="80" data-anim="t-b" src="/nikegolf/global/resources/images/speedtrials/anim/the-new-face-of-speed/the.png" alt="THE" />
  <img class="a a-new" data-delay="200" data-speed="80" data-anim="t-b" src="/nikegolf/global/resources/images/speedtrials/anim/the-new-face-of-speed/new.png" alt="NEW" />
  <img class="a a-face" data-delay="400" data-speed="80" data-anim="t-b" src="/nikegolf/global/resources/images/speedtrials/anim/the-new-face-of-speed/face.png" alt="FACE" />
  <img class="a a-of" data-delay="600" data-speed="80" data-anim="t-b" src="/nikegolf/global/resources/images/speedtrials/anim/the-new-face-of-speed/of.png" alt="OF" />
  <img class="a a-speed" data-delay="900" data-speed="200" data-anim="l-r" src="/nikegolf/global/resources/images/speedtrials/anim/the-new-face-of-speed/speed.png" alt="SPEED" />
  <img class="a a-swoosh" data-delay="1100" data-speed="200" data-anim="l-r" src="/nikegolf/global/resources/images/speedtrials/anim/the-new-face-of-speed/swoosh.png" alt="Nike Swoosh" />
</div>

Created a custom templating system using <i class='replace'> as the placeholder to be replaced eg

<div id="tmpl_results">
  <table class="table-general" cellpadding="0" cellspacing="0">
    <tr>
      <td class="td-position">#<i class="replace" data-prop-name="ranking"></i></td>
      <td class="td-name"><i class="replace" data-prop-name="name"></i></td>
      <td class="td-yards"><i class="replace" data-prop-name="yards"></i></td>
    </tr>
  </table>
</div>

Multiple service integration points to pull and save the required data (eg: National Leaderboard, Leaderboard by State, Leaderboard by Store, etc)
Brightcove video player and js scripting
Omniture analytics tagging
Form validation
Custom skinned scroll bars
GMap integration
JS carousels
@font-face
JSP project

Live Links

Bacardi Classic Cocktails

Three Facebook pages supporting the launch of Bacardi's line of pre-mixed cocktails featuring actress Busy Phillips.

Features of note:

Used Sass & Compass eg

$nav_left_width: p1_m1-sprite-width(nav_bg_left);
$nav_right_width: p1_m1-sprite-width(nav_bg_right);
$nav_height: p1_m1-sprite-height(nav_bg_middle);

$nav_items: 3;
$nav_item_width: 64;
$nav_item_padding_right: 8;
$group_nav_width: ( $nav_items * $nav_item_width ) + ( $nav_item_padding_right * ($nav_items - 1));

...

#m1 .group_navigation{
  margin-left: $nav_left_width;
  margin-right: $nav_right_width; 
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 100;
  height: $nav_height;
  width: $group_nav_width + px;
  margin-left: -$group_nav_width/2 + px;
  background-image: sprite-url($p1_m1);
  background-position: sprite-position($p1_m1, nav_bg_middle);
}
#m1 .navigation li{
  width: $nav_item_width + px;
  float: left;
  padding-right: $nav_item_padding_right + px;
}

This site relied heavily on image replacement techniques and the sprite generation feature provided by Compass was relied upon to speed up production. eg

$ui-sprite-dimensions: true;
$ui-layout: smart;
$ui-clean-up: false;

...

@import "compass/utilities/sprites/base";

...

@import "ui/*.png";
@include all-ui-sprites;
$ui: sprite-map("ui/*.png");

JS carousels
Implemented social widgets: Twitter, FB Post, FB Like
YouTube videos loaded with swfobject inside a modal overlay
Webtrends analytics tagging
FB like gate

Live Links

Note: To view the Live Links a FB account is needed and there is a like gate in place.

Bacardi Oakheart

A reskin project where the design was updated and some new features added.

Features of note:

Integrated with internal webservices for 3-word submission and voting
Webtrends analytics tagging
Form validation Slide 5, Slide 7
JS carousel
Created HTML Emails
Implemented social widgets: Twitter, FB Post
Webtrends analytics tagging
FB like gate

Live Link

Bacardi: Oakheart (US)

Starbucks Pumpkin Spice Latte Challenge

Facebook page to support the launch of the 2012 Pumpkin Spice Latte Challenge. Cities competed to get the Pumpkin Spice Latte first in advance of the national release date. Built for CA and US markets.

Features of note:

Sass & Compass

The headers were image replaced using ems for the width & height properties. When combined with a background-size: 100% auto; declaration, the image replaced text would fit any new dimensions created by changing the text size in the browser. However, due to the large amount of headers on the site, Sass was relied upon to generate the required css declarations using lists, list functions and @for control directives eg

/* ================================================
  .scss
================================================ */
$mod_contest_summary_h2_2: 22px;
$mod_hero_coming_soon_h2_em: 78px;
  /* ...trimmed... */
$mod_challenge_wordsearch_h1: 18px;
$mod_challenge_wordsearch_instructions_h2: 18px;

$name: mod-contest-summary-h2-2,
  mod-hero-coming-soon-h2-em,
  /* ...trimmed... */
  mod-challenge-wordsearch-h1,
  mod-challenge-wordsearch-instructions-h2;

$font_size: $mod_contest_summary_h2_2,
  $mod_hero_coming_soon_h2_em,
  /* ...trimmed... */
  $mod_challenge_wordsearch_h1,
  $mod_challenge_wordsearch_instructions_h2;

$width: 289px,
  473px,
  /* ...trimmed... */
  272px, //mod-challenge-wordsearch-h1
  166px; //mod-challenge-wordsearch-instructions-h2

$height: 19px,
  71px,
  /* ...trimmed... */
  29px, //mod-challenge-wordsearch-h1
  19px; //mod-challenge-wordsearch-instructions-h2

@for $i from 1 through length($name){
  .ir-#{nth($name, $i)}{
    width: #{ calc-em( nth($width, $i), nth($font_size, $i) ) };
    height: #{ calc-em( nth($height, $i), nth($font_size, $i) ) };
    background-image: url("/assets/images/ir/#{nth($name, $i)}.png");
  }
}

/* ================================================
  .css
================================================ */
.ir-mod-contest-summary-h2-2 {
  width: 13.136em;
  height: 0.864em;
  background-image: url("/assets/images/ir/mod-contest-summary-h2-2.png");
}
.ir-mod-hero-coming-soon-h2-em {
  width: 6.064em;
  height: 0.91em;
  background-image: url("/assets/images/ir/mod-hero-coming-soon-h2-em.png");
}
  /* ...trimmed... */
.ir-mod-challenge-wordsearch-h1 {
  width: 15.111em;
  height: 1.611em;
  background-image: url("/assets/images/ir/mod-challenge-wordsearch-h1.png");
}
.ir-mod-challenge-wordsearch-instructions-h2 {
  width: 9.222em;
  height: 1.056em;
  background-image: url("/assets/images/ir/mod-challenge-wordsearch-instructions-h2.png");
}

Multiple service integration points to pull and save the required data (eg: api/GetCityTotalPoints, api/cities, api/saveuser, etc)
Implemented handy JS helper functions to add commas to numbers, add dots between content in lists, return relative times
Implemented social widgets: Twitter, FB Post
YouTube videos loaded with swfobject
ASP.Net project
Localized copy using .resx files

Starbucks Refreshers

A three page responsive site to launch Starbucks Green Coffee Refreshers beverages.

Features of note:

Between the media query breakpoints the text and images are fluid. To achieve this a mix of percentages and ems were used on the font-size, width, height, and position properties.
Responsive/Fluid JS carousel
Introductory animation executed in JS using the Greensock JS library. Runs only once using a cookie.
Used ICanHaz templating library

The design called for slightly different images and text depending on the device dimensions and orientation. Created a JS solution using class and data attributes eg

<img class="multi" data-portrait='/refreshers/assets/images/how-portrait.png' data-landscape='/refreshers/assets/images/how-portrait.png' data-large='/refreshers/assets/images/how.png' src='/refreshers/assets/images/how.png' />

$(window).bind('orientationchange', function () {
  //sets clientWidth & clientHeight in ems
  windowDimensions();
  //iPhone
  if( client_width_ems < 48 ){
    switch(window.orientation){
      case -90:
      case 90:
        $('img.multi').each(function(i,e){
          altSrc(this, 'large');
        });
        break; 
      default:
        $('img.multi').each(function(i,e){
          altSrc(this, 'portrait');
        });
    };
  };
});
/* ... trimmed... */
var altSrc = function(el, state){
  //pulls attr data-initial, if it doesn't exist creates data-initial from src
  var src = $(el).attr('src');
  var data_initial = $(el).attr('data-initial');
  if( typeof data_initial == "undefined" || data_initial == '' ){
    data_initial = src;
    $(el).attr('data-initial', src);
  };
  //pulls attr data-large, if it doesn't exist creates data-large from src
  var data_large = $(el).attr('data-large');
  if( typeof data_large == "undefined" || data_large == '' ){
    data_large = src;
    $(el).attr('data-large', src);
  };
  //pulls attr data-portrait, if it doesn't exist creates data-portrait from src
  var data_portrait = $(el).attr('data-portrait');
  if( typeof data_portrait == "undefined" || data_portrait == '' ){
      data_portrait = src;
      $(el).attr('data-portrait', src);
  }  ;
  //pulls attr data-landscape, if it doesn't exist creates data-landscape from data-portrait or failing that src
  var data_landscape = $(el).attr('data-landscape');
  if( typeof data_landscape == "undefined" || data_landscape == '' ){
    if( typeof data_portrait != "undefined" || data_portrait != '' ){
      data_landscape = data_portrait;
      $(el).attr('data-landscape', data_portrait);
    }else{
      data_landscape = src;
      $(el).attr('data-landscape', src);
    };
  };
  //swap the src with the passed in state
  switch(state){
    case 'large':
      $(el).attr('src', data_large);
    break;
    case 'portrait':
      $(el).attr('src', data_portrait);
    break;
    case 'landscape':
      $(el).attr('src', data_landscape);
    break;
    default:
      $(el).attr('src', initial_src);
  };
};

Google Analytics tagging
Implemented social widgets: Twitter, FB Post

Live Links

Starbucks: Refreshers

2011

Bacardi 150^th Anniversary

A site created to promote Bacardi's 150^th anniversary. It was a bit of a treasure hunt mixed in with trivia questions. Successful contestants won a prize.

Features of note:

Sub-sections of the site were activated over successive weeks. Pre, during & post states were coded for each sub-section
JS countdown timer Slide 2
Form validation Slide 8
Implemented social widgets: Twitter, FB Post
Webtrends analytics tagging
FB like gate

Live Link

Direct Link to FB App

Note: The app is geofenced for the US and there is no admin back entrance. Scrolling is disabled at that page since it is designed to be viewed within the Facebook interface.

BMW Canada Google Maps Update

Update to dealer locator section of the BMW Canada website.

Features of note:

Geolocation detection on page load attempts to place a marker close to where the user is located and then presents a list of BMW dealers sorted by distance. The lookup is canceled if it takes too long and an alphabetic list of dealers is presented instead.
GMaps driving directions Slide 3
Used GMaps static image service for thumbnail sized maps
Custom GMaps map pointers
Webtrends analytics tagging

Live Link

BMW Canada: Dealer Locator

Microsoft Office 365

Website for the cloud based Microsoft Office.

Features of note:

A novel ui where the content is displayed in an edge to edge grid that reacts to the mouse position
Sass
JQuery templating
HTML5 Boilerplate
Used Mojo, Blast Radius' JS MVC framework
.Net
Webtrends analytics tagging

Static Link

Microsoft: Office 365

Chanel J12 Cromatic

Facebook website to support the launch of Chanel's J12 Chromatic watch.

Features of note:

The watch carousel was a Flash piece (created by another developer) but the client wanted an html/js fallback for iOS devices. I created a custom JS carousel that consumed the xml file used by the Flash piece and recreated the animations eg

doubleCarouselInit = function(){
  htmlCarousel = $('#page-root .group-watch-carousel').length;
  if( !htmlCarousel ){
    //swfobject replaced the content already...
    return;
  }

  //parse flash xml
  var watchXML = "//cdn.chanel.com/wfj/j12/001/assets/chanel-swf/xml/watches.xml";
  $.ajax({
    url: watchXML,
    dataType: 'xml',
    success: function(data){
      // parse the xml and generate/populate the carousel
      var m1 = $('.group-watch-carousel .mask-1 .container');
      var m2 = $('.group-watch-carousel .mask-2 .container');
    
      $(data).find('watch').each(function(num){
      //Mask-1
        var liClassName = 'watch-'+num;
        var newLI = '<li class="item '+liClassName+'"></li>';
      
        m1.append(newLI);
        var m1LiRef = m1.find('.'+liClassName);
      
        //add image
        var watchImages = {
          'watchLarge' :  $(this).find('jpgurl').text()
        };
        
        //add watch images
        $( "#tmplWatchImages" ).tmpl( watchImages ).appendTo( m1LiRef );
      
        //Mask-2 prep
        m2.append(newLI);
        var m2LiRef = m2.find('.'+liClassName);
        var watchDetail = {
          'modelname' : $(this).find('modelname').text(),
          'desc' :  $(this).find('desc').text()
        };
        $( "#tmplWatchDetails" ).tmpl( watchDetail ).appendTo( m2LiRef );
        
        //add feature hotspots
        $(this).find('hotspot').each(function(i){
          var xPos = $(this).attr('x');
          var yPos = $(this).attr('y');
          var cssPos = "top: "+yPos+"px; left: "+xPos+"px;";
          
          var altClass = "";
          if( xPos >= 100 ){
            altClass = " feature-right";
          }
          i += 1;
          var watchFeature = {
            'inlineStyles' : cssPos,
            'featureClassName' : liClassName+'-feature-' + i,
            'subTitleText' : $(this).find('title').text(),
            'titleText' : $(this).find('subtitle').text(),
            'mainText' : $(this).find('text').text()
          };
          var watchFeature2 = {
            'featureid' : liClassName+'-feature-' + i,
            'featuretitle' : $(this).find('title').text(),
            'feature' : $(this).find('text').text()
          };
          $( "#tmplFeatureItem" ).tmpl( watchFeature ).appendTo( m1LiRef );
          $( "#tmplWatchFeatures" ).tmpl( watchFeature2 ).appendTo( m2LiRef );
        });
      });
    
      //start up carousel
      var dc = new doubleCarousel;
      dc.init();
    },
    error: function(){
      $('.group-watch-carousel').hide();
    }
  });
};
//doubleCarouselInit

doubleCarousel = function(){ 
  var cRoot = $('.group-watch-carousel');
  var m1C = cRoot.find('.mask-1 .container');
  var m1i = cRoot.find('.mask-1 .container .item');
  var m2C = cRoot.find('.mask-2 .container');
  var m2i = cRoot.find('.mask-2 .container .item');
  var bP = cRoot.find('.btn-previous');
  var bN = cRoot.find('.btn-next');

  var cI = 0;
  var pI = -1;
  //watch image dimensions
  var wLW = 307;
  var wLH = 425;
  var wSW = 125;
  var wSH = 173;
  //small watch end vars
  var wSML = -50;
  var wSMT = 130;
  //large watch end vars
  var wLML = -140;
  var wLMT = 0;

  var easing = "swing";
  var speed = 700;     
  
  carouselInit = function( m1First, m2First, w, h, mt, ml){
    $( m1First ).css('z-index',999);
    $( m1First ).find('.watch-large').css({
      "width": w + 'px',
      "height": h + 'px',
      "margin-top": mt +'px',
      "margin-left": ml +'px',
      "display":"block"
    });
    $( m1First ).find('.feature').fadeIn();
    $( m2First ).css({'left': 0, 'display': 'block', 'z-index':5});
  };
  
  expandW = function(ctxt, w, h, mt, ml, speed, easing){
    var wI = ctxt.find('.watch-large');
    wI.css({
      "display": "block",    
      "width": wI.width() + 'px',
      "height": wI.height() + 'px',
      "margin-top": wI.css('margin-top'),
      "margin-left": wI.css('margin-left')
    });
    wI.stop().animate({
      "width": w + 'px',
      "height": h + 'px',
      "margin-top": mt +'px',
      "margin-left": ml +'px'
    }, speed, easing, function(){
      ctxt.find('.feature').fadeIn();
    });
  };
  
  shrinkW = function(ctxt, w, h, mt, ml, speed, easing){
    var wI = ctxt.find('.watch-large');
    ctxt.find('.feature').hide();
    wI.css({
      "display": "block", 
      "width": wI.width() + 'px',
      "height": wI.height() + 'px',
      "margin-top": wI.css('margin-top'),
      "margin-left": wI.css('margin-left')
    });
    wI.stop().animate({
      "width": w + 'px',
      "height": h + 'px',
      "margin-top": mt +'px',
      "margin-left": ml +'px'
    }, speed, easing);
  };
  
  animateM1 = function(m1, l, speed, easing){
    m1.stop().animate({
      left: l + 'px'
    }, speed, easing);
  };
  
  animateM2 = function(c, p, speed, easing){
    $( c ).css({'left': 0, 'display': 'none', 'z-index':10});
    $( p ).css({'left': 0, 'z-index':5});
    $( c ).fadeIn(speed, easing, function(){
      $( p ).css({'left': "-9999px"});
    });
  };
  
  init = function(){
    //setup first item...
    carouselInit(m1i[0], m2i[0], wLW, wLH, wLMT, wLML);

    //next prev buttons...
    bN.click(function(){
      cI++;
      pI = cI - 1;
  
      if( cI >= m1i.length ){
        cI = 0;
        pI = m1i.length - 1;
      }
  
      //Watch incoming images...
      var cur = $( m1i[cI] );
      cur.css('z-index',999);
      expandW(cur, wLW, wLH, wLMT, wLML, speed, easing);

      //Watch outgoing images...
      var prev = $( m1i[pI] );
      prev.css('z-index',0);
      shrinkW(prev, wSW, wSH, wSMT, wSML, speed, easing);
  
      //Animate masks
      var m1CLp = $( m1i[cI] ).position();
      var m1CL = m1CLp.left * -1;  
      animateM1(m1C, m1CL, speed, easing);
  
      animateM2(m2i[cI], m2i[pI], speed, easing);
    });

    bP.click(function(){
      cI--;
      pI = cI + 1;
  
      if( cI < 0 ){
        cI = m1i.length - 1;
        pI = 0;
      }
      
      //Watch incoming images...
      var cur = $( m1i[cI] );
      cur.css('z-index',999);
      expandW(cur, wLW, wLH, wLMT, wLML, speed, easing);

      //Watch outgoing images...
      var prev = $( m1i[pI] );
      prev.css('z-index',0);
      shrinkW(prev, wSW, wSH, wSMT, wSML, speed, easing);

      //Animate masks
      var m1CLp = $( m1i[cI] ).position();
      var m1CL = m1CLp.left * -1;  
      animateM1(m1C, m1CL, speed, easing);

      animateM2(m2i[cI], m2i[pI], speed, easing);
    });

    $('.group-watch-carousel .feature').mouseover(function(){ 
      if( $(this).hasClass('displayed')){
        $(this).removeClass('displayed');
        $( '#' + $(this).attr('data-target') ).fadeOut();
      }else{
        $(this).addClass('displayed');
        $(this).siblings().removeClass('displayed');
        $( '#' + $(this).attr('data-target') ).css('z-index',999).siblings().css('z-index', 0);
        $( '#' + $(this).attr('data-target') ).fadeIn(500, function(){
          $(this).siblings('.watch-feature').hide();
        });
      }
    });
  };
  // init
  
  return{'init':init};
};

Store list is populated by consuming a static json file
Used iScroll for iOS touch scrolling of the store list
Used the JQuery Quicksearch plugin to filter the store list while searching
JQuery templating
FB like gate
Custom skinned scroll bars
Webtrends analytics tagging

Live Link

Chanel: J12 Chormatic

Starbucks Frappuccino Summer

Website allowing users to create customized Frappuccino's. The customized drinks could be used in the creation of a postcard. Visitors would then vote on their favourite drink/postcard.

Static Link

Starbucks: Gallery

Kodak Your Life on the Fridge

A Facebook app that gathered user's data to decorate a virtual fridge door with relevant photos and personal data. The goal of the site was to help users visualize how Kodak's products could be integrated into daily life.

Features of note:

Lead developer on the project. Provided estimates and status updates to the Project Manager. Worked with and managed a junior developer and saw the project to completion.
FB app with extended permissions
Extracted a wide variety of data from the FB profiles (eg: hometown, significant other, significant other's birthday, favourite music, books, movies, tv shows, etc) and used default fallbacks if the data wasn't available
Displayed a name using image replaced fridge magnets
Had to detect trailing s' on first and last names in order to pluralize it correctly

Live Link

Kodak: Your Life On the Fridge

2010

Standard Pacific Homes

Website to relaunch the digital presence of one of America's largest Home builder. It was the most time consuming and complex project that I worked on at Blast Radius. Development was over 15 months and the team had a total of 46 people from various disciplines.

Live Link

Standard Pacific Homes

American Society of Mechanical Engineers Engineering for Change

Website for the ASME that highlighted projects to help developing countries.

Engineering for Change provides a forum to connect, collaborate, solve challenges and share knowledge among a growing community of engineers, technologists, social scientists, NGOs, local governments and community advocates, who are dedicated to improving the quality of life all over the world.

Live Link

ASME: Engineering for Change

Electronic Arts Madden Ratings

Football fans could weigh-in on the NFL 11 player's ratings created by Donny Moore.

Features of note:

Site had three states: pre-voting, voting, post-voting.
During the pre-voting state a JS counter is displayed
Sprite generation was substantial. We used three versions of logos for each team in the NFL.

Electronic Arts Tiger Woods, NHL 11, NHL Slapshot, Fifa 2011 Reskins

I reskinned numerous EA games in 2010 Tiger Woods, NHL 2011, NHL Slapshot, and Fifa 2011. On average the turnaround time was pretty short.

2009

Starbucks UK Our Fairtrade Story

One page side scroller to promote Starbucks UK switch to Fairtrade coffee.

Features of note:

Custom JS scroller. Navigation arrows show/hide when at the ends of the carousel
Supported IE 6 with dynamically created dom elements, transparent pngs and videos in overlays

Static Link

Starbucks UK: Home

Nike Jordan Fundamentals Reskin

The Jordan Fundamentals Grant Program was established in 1999 to recognize outstanding teaching and instructional creativity in public secondary schools that serve economically disadvantaged students.

Static Link

Electronic Arts Player's Edge

A virtual training camp to learn techniques to become a better soccer player in EA sports games.

Electronic Arts Grand Slam Tennis

Grand Slam Tennis game for the Wii.

Electronic Arts Fight Night Reskin

2009 EA Fight Night reskin. Included a new JS countdown timer.

2008

Guthy Renker Proactiv

The Proactiv site reboot. Completely new design and codebase created from scratch.

Features of note:

Ruby on Rails build
Scriptaculous JS library
Used Mojo, Blast Radius' JS MVC framework

Static Links

Nintendo of America Club Nintendo

Members of Club Nintendo could complete tasks (eg: a survey) and earn coins that could be redeemed for Nintendo swag.

Features of note:

Ruby on Rails build
Used Mojo, Blast Radius' JS MVC framework
CVS

Nintendo of America Gift Guide

A Christmas themed site to generate e-cards for Nintendo products. Users could let the recipients know of gifts they plan to give or gifts they would like to receive.

Features of note:

Custom JS carousels
Coded html emails
Java EE/JBoss
CVS

Doppelganger vSide

vSide was a social networking site that was a cross between MySpace and Second Life with a focus on music, entertainment and fashion.

Static Links

2007

Nintendo of America

Nintendo of America's major website reboot. Completely new design and codebase created from scratch.

Features of note:

Linux
Ruby on Rails build
Used Mojo, Blast Radius' JS MVC framework
CVS

Static Link

Nintendo: Home

Chad Oakenfold, Front End Interface Developer web@oakenfold.ca

Portfolio

Starbucks Fall Landing Page

Features of note:

Live Link

Nike VRS

Features of note:

Live Links

Bacardi Classic Cocktails

Features of note:

Live Links

Bacardi Oakheart

Features of note:

Live Link

Starbucks Pumpkin Spice Latte Challenge

Features of note:

Starbucks Refreshers

Features of note:

Live Links

Bacardi 150th Anniversary

Features of note:

Live Link

BMW Canada Google Maps Update

Features of note:

Live Link

Microsoft Office 365

Features of note:

Static Link

Chanel J12 Cromatic

Features of note:

Live Link

Starbucks Frappuccino Summer

Static Link

Kodak Your Life on the Fridge

Features of note:

Live Link

Standard Pacific Homes

Live Link

American Society of Mechanical Engineers Engineering for Change

Live Link

Electronic Arts Madden Ratings

Features of note:

Electronic Arts Tiger Woods, NHL 11, NHL Slapshot, Fifa 2011 Reskins

Starbucks UK Our Fairtrade Story

Features of note:

Static Link

Nike Jordan Fundamentals Reskin

Static Link

Electronic Arts Player's Edge

Electronic Arts Grand Slam Tennis

Electronic Arts Fight Night Reskin

Guthy Renker Proactiv

Features of note:

Static Links

Nintendo of America Club Nintendo

Features of note:

Nintendo of America Gift Guide

Features of note:

Doppelganger vSide

Static Links

Nintendo of America

Features of note:

Static Link

Bacardi 150^th Anniversary