John Ritterbush Full Stack Developer    •    UI/UX Consultant

I'm a web developer currently working as part of the Brand Creative team at Sprout Social. As a freelancer, I’ve done design, development, and digital project consulting for the Fire Arts Center of Chicago, Wicker Park Choral Singers, and Ringspann Corporation.
Read more about me

Featured Projects

JohnRitterbush.com. var self = this;

This site is a testament to the full-stack nature of how I work. It starts with Vagrant and Ansible for local development and provisioning for the staging/production servers. Add in npm/bower/gulp to automate the build of the site, including styles generated using SCSS with dependencies on Bootstrap. All wrapped neatly in version-controlled repositories for the server and the site itself. From zero to full site in a few commands. View the GitHub repository

HTML/CSS SCSS JavaScript jQuery Bootstrap Ansible Vagrant Gulp Git Node Bower

Examples of responsive layout for Van Gogh's Bedrooms AngularJS quiz

Van Gogh's Bedrooms. Promotional Site.

The site was created to pique interest in the exhibition Van Gogh’s Bedrooms for the Art Institute of Chicago. The marketing team needed landing pages to complement the ad campaign around the city and also a place for visitors to go and see materials they may have missed during their visit. We combined style guides from the marketing campaign with digital and print assets in the exhibition, to provide the visitor with an online resource that reflected their experience at the museum. Visit the site

HTML/CSS SCSS JavaScript Foundation

Examples of responsive layout for Van Gogh's Bedrooms chair page

Van Gogh's Bedrooms. AngularJS Quiz.

A complement to the Van Gogh’s Bedroom website, this quiz lets visitors test their knowledge of Van Gogh in pop culture. They can share their results on social media, garnering more interest and potential visitors to the exhibition. Visit the site

HTML/CSS SCSS JavaScript Foundation AngularJS

Examples of responsive layout for Van Gogh's Bedrooms AngularJS quiz

Find your #ArtThrob. Custom JavaScript Quiz.

As a Valentine’s Day social media promotion, I collaborated with the social media manager to create a Buzzfeed-style quiz that would use the answers to identify a visitor's ideal love interest. It was a fun way for the museum to engage with its social media followers who could take the quiz and then share with their friends. Visit the site

HTML/CSS JavaScript Foundation

Examples of responsive layout for Who's Your ArtThrob quiz

Visit Art Institute. Tourism marketing site.

Working with the marketing and tourism department, I developed a site that provided a quick way to create an ad campaign for digital ads. When the marketing team came up with a concept, e.g. "Playing Hooky”, we could build a data file with the text and images as well as a stylesheet to customize any colors or elements and then quickly build and plug the new page into the tourism main site. It allowed for very agile promotions that could come and go based on seasons or special offers, yet still maintain a consistent feel with the other offers. Visit the site

Ruby Nanoc JavaScript Foundation

Screenshot of visitartinstitute.com

Drupal Updates. Zzzzzzzzzz.

While not as exciting as the other items on the list, making sure the latest security patches are applied to a site running on Drupal is critical. I stay tuned into the Drupal updates to ensure the latest and greatest is always running. Also important in this process is to talk to the content producers to find out which areas of the admin need feature enhancements and bug fixes.

Drupal PHP Git Drush

Screenshot of Drupal security updates page

Additional Projects

Site Testing

Using a local server running PhantomJS and CasperJS, I built out tests for various sections of our site to ensure updates to the code or database didn't break functionality. Tests run on local development, staging and production servers to check at all levels of deployment.

JavaScript Node Bower Grunt PhantomJS CasperJS

Freelance

Converted fixed-width Wordpress themes to responsive layout. Improved accessibility on mobile devices and helped pass Google's Mobile Friendly Test.

HTML/CSS JavaScript Wordpress Git Gulp

Playground

Sometimes it's fun just to tinker around. I use FreeCodeCamp and CodePen as a way to test my skills and try some new tools as well as quiz myself on some basic knowledge. CodePen is also a great way to try out an idea or explore a library/framework for future use. Visit my CodePen for examples.

HTML/CSS SCSS JavaScript Foundation

Skills

HTML5

I make it a priority to write semantic markup which not only improves accessibility and findability, but also makes for more future-friendly code.

CSS3

Using CSS to improve layout and animations helps minimize the need for JavaScript.

CSS Precompilers

I am familiar with LESS and SASS preprocessing as well as using tools like Autoprefixer to make CSS compatiable with as many browsers as possible.

CMS/CMF

I have worked with a variety of content management systems and frameworks. The bulk of that work revolves around Drupal and Wordpress.

JavaScript

I have focused lately on vanilla JavaScript for front-end scripting, but also integrating tools like jQuery and underscore, MV* frameworks like AngularJS and Backbone, and templating tools like Mustache and dōmo.

Automation

Tools like Vagrant and Ansible for server automation plus scripting automation from NPM, Bower, Gulp, and Grunt, have made continuous deployment much less of a chore. I use these tools every chance I get.

Server-Side Languages

I maintain and develop projects mainly in PHP and Ruby, but have also worked on small projects with ASP and Python.

Databases

My primary database of choice has been MySQL for ease-of-use and compatibility, but have worked with Microsoft SQL and NoSQL databases like RethinkDB.

About

I am a self-taught web developer with a background in art and art history. On paper those things seem disconnected, but the knowledge I gained in both practices have been critical in my development. My interest in art and education led me to volunteer my time to improve the website of a local arts center. In return, that experience led me to pursue web development, a career I have found equal fulfillment in.

Since then I have continued the ongoing process of learning and have built a personal library of development knowledge. I am always excited to take on new challenges that let me expand and share that set of tools.

What I have learned from...

Art

My fine art practice focused on the lost-wax, bronze-casting technique. Similar to web development each step builds on the previous one—from creating a clay model to finishing the bronze—if you don't understand all the steps in the process, you jeopardize the final product. Working in this tradition taught me to be aware of each action and its role in the project, ensuring the best result for the client and their customers.

Art History

Hours of research are the backbone for a great art historian, in the same way that hours of online research result in great development. If you run into a problem in your work, the solution is just a search away. And if that search turns up nothing, you celebrate because you just found your focus or thesis. Even when the result isn't out there yet, the solution becomes a synthesis of existing ideas to solve your problem. Dedication, time, and a few breaks can lead to great results.

Failure

The first couple of flops (some still floating around the interwebs) are hard. Each time I wanted to walk away and give up but I soon realized that those were the best moments to learn from. Now I embrace mistakes and let them educate each subsequent project.

Experience

The Art Institute of Chicago

Web Architect

October 2013–present

In the digital marketing department, I serve as web architect. In that role, I have improved revenue tracking across three separate sales channels in Google Analytics, brought our Drupal development in-house saving money and time, converted email campaigns to responsive templates, and developed promotional sites for marketing campaigns.

WTTW/WFMT

Web Developer

August 2008–August 2013

As a web developer in the marketing department, I oversaw the migration from a proprietary CMS to Drupal, coordinated the launch of a new sales channel, assisted in the development of several promotional email campaigns, and maintained and developed content to supplement on-air programming.

Nimlok Company

Webmaster

January 2007–August 2008

In the role of webmaster at Nimlok company I was tasked with a wide variety of jobs. Primarily I maintained over 85 websites for the US main office and its distributors. I also created email templates for a variety of customer and distributor communications.

Freelance

Web Developer/Designer

May 2005–present

As a freelance developer, I have worked for a variety of clients ranging from local arts groups to international, industrial manufacturing equipment sales. I develop Wordpress sites, improve search engine optimization, convert fixed-width websites to responsive, and provide an expert voice on digital projects.

Read more about my experience on my LinkedIn page.