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

Chad Oakenfold has nine years of front end web development experience. While at Blast Radius, Chad worked with multiple high profile clients including Starbucks, Nike, BMW, Electronic Arts, and Nintendo of America.

Originally trained as an artist ( BFA from Emily Carr University of Art + Design ), he brings a unique combination of technical skills and artistic sensibilities to any project.

Chad is specialized in:

  • HTML/XHTML/HTML5
  • CSS/CSS3, Sass, Less
  • Javascript and Javascript frameworks
  • Ajax techniques including consuming 3rd party APIs

Chad offers:

  • 4 years of telecommuting experience working with teams in New York, Toronto, Vancouver, Portland, San Francisco and Seattle
  • Experience with Agile development practices
  • Strong creative problem-solving ability
  • Ability to multi-task, establish priorities and meet tight deadlines
  • Excellent communication skills and interpersonal skills
  • Experience working in a Mac/PC/Linux environment
  • Experience with a variety of source version control software (Git, SVN, CVS, TFS)

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

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

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
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

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
2011

Bacardi 150th Anniversary

A site created to promote Bacardi's 150th 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
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

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

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

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.

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
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.

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.

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

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.

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

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.

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