Portfolio

FreeMarker Preprocessor Redesign

I love FreeMarker and I reached out to its maintainer to see if I could contribute a facelift to the FreeMarker projects.

I’ve built several websites using the FreeMarker Preprocessor–which is a fantastic static site generator–and was more than happy to update the design of the FMPP project.

Screenshots

Bourbon.com

Small, responsive landing page I set up for a client. The logo and background images were provided but I did the rest of the design.

Screenshots

REI Responsive Checkout

  • Year2014
  • Relevant techBootstrap 3.1, LESS, Gulp, KnockoutJS

One of the first projects I tackled when I started at REI was to migrate the entire checkout process to a responsive layout.

Using a custom compilation of Bootstrap 3.1 and REI’s own style guidelines, I created and implemented a responsive LESS framework for the checkout process. This framework has since been adopted for REI’s mobile-only site that I helped relaunch in August 2014.

Screenshots

Diablo 3 Open Graph

  • Year2013
  • Relevant techOpen Graph

How pages look when shared on Facebook is often overlooked by developers and in 2013 I took it upon myself to improve this across the Diablo III website.

Note: Since this implementation Facebook has changed the minimum dimensions for the og:image meta tags and these images no longer show up when sharing on Facebook.

Screenshots

Overview of before and after pages.

Before

Diablo III Before

After

Diablo III After

Diablo 3 SEO improvements

Search Engine Optimization (SEO) is something I take a considerable interest in–too many sites neglect quick-wins like canonical urls and basic meta tags.

As part of an effort to improve SEO across the Diablo 3 website, I added Schema.org markup across the site and shared libraries.

Screenshot

SEO screenshot

Brian Church Archictecture

While freelancing in summer 2013 I had a client who wanted an easier way to maintain their website. Without changing the design, I migrated the site to Wordpress and also incorporate a responsive design.

ASCE Cincinnati Section

When my mom became an officer in the Cincinnati Section of the American Society of Engineers, I volunteered to help maintain their website.

The site runs on Wordpress and uses a customized version of the aptly-named Responsive theme.

Screenshots

Cincy ASCE screenshot Cincy ASCE screenshot

Corenting

Another freelance project I took on in 2013 involved developing Corenting.com for a client. I architected and developed this site using CakePHP and Bootstrap 3.0.

Diablo 3 Profiles

The project to put up player profiles for Diablo 3 was a big project worked on by several people. Two backend engineers worked to provide data to the frontend, and a couple graphic designers created the layouts.

My role on this project was to take the Photoshop files and turn them into a working website as well as hookup the backend data. Part of the work had been started by a previous frontend engineer, but I took over after that coworker moved on to a different project.

One of the cool things about this project is that when you are looking at a specific hero, navigating between other heroes is done asynchronously using the HTML 5 JavaScript history. (Note: If you are browsing the site using Internet Explorer 9 or lower, you will not see this functionality.)

Screenshots

Note: With the release of the Diablo III expansion Reaper of Souls in March 2014, the live site differs slightly from these screenshots.

Profile screenshot Profile screenshot

Relevant code and sprites

Diablo 15-Year Anniversary

The year 2012 marked 15 years of Diablo. To commemorate the occasion I worked on a page to give an overview of Diablo over the years.

Screenshots

Anniversary screenshot

Relevant code and sprites

Dotaist

  • Year2011
  • Relevant techCakePHP, MySQL, ImageMagick, jQuery, Google Custom Search

In a past life I was a really avid Dota player. When Valve decided to develop Dota 2, I excitedly got to work on my own Dota 2 fansite.

I used the project to learn about CakePHP and setting up and running my own webserver. I signed up for my own VPS server from Media Temple and got my hands dirty with setting up my own installs of phpMyAdmin, Apache2, and PHP5. It was pretty fun and challenging to get everything securely up and running!

Screenshots

Dotaist screenshot Dotaist screenshot

Blizzard 20th Anniversary

Blizzard Entertainment celebrated 20 years’ of epic game making in 2011. As part of a year-long celebration, a 20th Anniversary Site was set up with contests and information for fans.

Screenshots

Heart of the Swarm Preview

Blizzard launched Heart of the Swarm in March 2013. These pages give fans a preview of what they could expect in the StarCraft II expansion.

Screenshots

Example CSS and sprites

BlizzCon Tournament Brackets and VOD Archives

In addition to architecting the BlizzCon site, I also created the tournament brackets and archives. These brackets were updated live during the event using a CMS tool.

Because not everyone can see the matches live, I implemented several spoiler toggles so that users could reveal the match outcomes when they wanted.

Screenshots

BlizzCon Screenshot

StarCraft II brackets, results hidden

BlizzCon Screenshot

StarCraft II brackets, results shown

BlizzCon Screenshot

World of Warcraft brackets, results hidden

BlizzCon Screenshot

StarCraft II VOD player

BlizzCon Screenshot

StarCraft II VOD archive, results hidden

Relevant code and sprites

Battle.net Lightbox

  • Year2010
  • Relevant techjQuery

Another shared library I wrote was the lightbox code that is used across the Battle.net community sites. It supports viewing a single image or a group of images, with the option to add an external link.

Screenshots

Lightbox Screenshot

World of Warcraft lightbox, paging arrows

Lightbox Screenshot

StarCraft II lightbox, external link option

Relevant code and sprites

Warcraft.com Redesign

In 2009 I implemented a complete redesign of Warcraft.com.

Fun fact: This design was later copied by Riot Games for their League of Legends sign up and success pages.

Screenshots

Warcraft.com screenshot Warcraft.com screenshot

CapIntro

  • Year2008
  • Relevant techAdobe Flex 3, ActionScript 3, MXML, Photoshop 7, C#, ASP.NET

In 2008 I worked on a financial app related to hedge fund investment. This app was built using Adobe Flex 3 (now Flash Builder) and supported by a C# backend that integrated with Adobe’s RTMP and Remote Objects to bind and deliver data to the flash layer.

Screenshots

Host Exchange

  • Year2006
  • Relevant techPHP 4, MySQL, Photoshop 7

While working in Chicago, my employer wanted to make a website where users could buy and sell website hosting accounts. I designed and developed this site as a prototype for that functionality.

Screenshot

Screenshot

Illinois Soybean Rust

  • Year2005

This is a mock-up of a site I designed while working as a student web developer at University of Illinois at Urbana Champaign.

Screenshot

UIUC Screenshot

UIUC Engineering Advocates

  • Year2004

While employed as a student developer at UIUC, I made a website for the Engineering Advocates organization. I designed and developed the whole thing using PHP.

(Unfortunately the site has since been taken down, and I couldn’t find any high-res screenshots of the site.)

Screenshot

UIUC Screenshot

UIUC Engineering Outreach

  • Year2003

In 2003 I was hired as a student web developer and for $8/hr I created my first ever professional website! I designed and developed the entire thing using PHP, and they even printed it out on a huge posterboard to advertise the site on campus.

Screenshots

UIUC Screenshot UIUC Screenshot