Selected Portfolio


There are more work samples to check out on icoya.

There are some code samples on github.

Return Home

At-A-Glance

  • Static, HTML-only responsive site - uses Twitter Bootstrap
  • ADA Compliant (Level AA) per client requirements
  • Built using Gulp Web App & Gulp File Include

Description

Twitter Bootstrap-based marketing site for Chevron, which is entirely static and hosted on Amazon S3. Initial scaffold was based on Gulp Web App, plus additional Gulp plugins to increase development efficiencies: I did not want to have to create unique complete HTML pages for each page, so I utilized Gulp File Include to partial out the components. Users are able to share individual components on social media, using a sharing-proxy approach. Site tracks user interactions and sends data up to Google Analytics, which was debugged using a jQuery plugin I developed.

Challenges & Solutions

We were asked to build this using static html only. Based on that, I decided to utilize Gulp File Include to template out repeatable sections of code. This meant I was able to write many templates for similar sections and pass through variables such as colors, headlines, text, YouTube links, etc. While it meant the un-packaged website consisted of many small include files, it is a very modular site that can be mixed-and-matched and accordingly themed.

I also wrote a handy SCSS theming approach to capitalize on the Chevron brand standards, which was comprised of 6 different colors in 3 shades each. Each component could have any combination of these colors and their shades, so this approach allowed for maximum flexibility, all configurable in the markup using css class names.

Technology Used

  • NPM
  • Bower
  • Gulp
  • SCSS
  • Twitter Bootstrap
  • Social Sharing

At-A-Glance

  • Wordpress custom theme with all content on each page editable - using Advanced Custom Fields
  • Twitter Bootstrap
  • Mobile-Responsive

Description

As an avid cyclist, it was an honor to work with a local cause that I fully support! MCBC's old site needed a lot of visual and technical TLC and the group needed to uplift their site to match their new branding. I worked with a Bay Area design agency who provided the UX/UI, and developed a fully customized responsive theme that allows easy content updates.

Technology Used

  • Wordpress
  • Twitter Bootstrap
  • SCSS
  • NPM
  • Bower
  • Gulp
  • Social Sharing

At-A-Glance

  • .net / C# Web Forms Site
  • Lazy-loaded responsive images
  • Dynamic Brand Loading based on URL

Description

Unilever wanted to promote its new Organic & Carefully Crafted egg-free products with a landing page. However, the brand is known as Best Foods on the West (Best?) Coast, and Hellmann's on the East Coast - while the content on the site is mostly the same, the image assets, references brand names and URLs all needed to be unique based on the parent domain. To facilitate this, I wrote a single page and swapped out assets as needed by parsing the URL using standard .net http utilities

Technology Used

  • .Net Web Forms back-end
  • Twitter Bootstrap
  • SCSS
  • NPM
  • Bower
  • Gulp

At-A-Glance

  • Mobile-Responsive with Retina image support
  • Wordpress-driven CMS allows authors to change theme from year to year
  • Mobile-Responsive with Retina image support

Description

Dark Lord Day is an annual event held by 3 Floyds Brewing in Indiana each year to celebrate the release of their highly-desirable and rare Dark Lord Russian Stout. The label design changes every year, and the client wanted control over the look & feel of the site from year-to-year to without having to redesign the entire site. Working with Zimmer Design, we came up with a solution that allowed the client to control all the visual elements via Wordpress — which means the visuals can change to match that year's bottle artwork and gives a new feeling to the site annually with minimum effort.

Technology Used

  • Wordpress
  • SCSS

At-A-Glance

  • Mobile-Responsive with Retina image support
  • Wordpress-driven CMS
  • Single-page driven design

Description

Another Zimmer Design joint, Commonwealth Cure has a very floaty & high-end feel to it. There were many challenges in delivering a high-fidelity design that was able to capture the feel desired by the client, but still maintain a small footprint to allow for rapid loading on mobile. The design is based on a multi-layered approach that incorporates lots of moving elements as the user scrolls. The overall result does not compromise style for function or vice versa, but strikes a proper balance between delivering the message without inhibiting the experience.

Technology Used

  • Wordpress
  • SCSS

Additional Projects