That Dev Girl

Board Game Innovation (May 2017)

WordPress, WooCommerce, HTML 5, CSS, Bootstrap 4 (alpha), jQuery

BGI reached out to me in early 2017 to redesign and replatform their website. I created a new site design based on their logo and existing style guide standards. I also helped them evaluate several ecommerce platforms, including Shopify and WooCommerce, to determine which platform would best fit their needs.

I implemented the design in WordPress with WooCommerce. The site also includes custom functionality, including integration with Braintree for payment processing, integration with Stamps.com to provide shipping options, and support for international pricing and checkout.

View Site

McCourt School of Public Policy @ Georgetown (2016)

Drupal 7, Bootstrap 4 (alpha), jQuery, Sass, CSS, HTML 5

I currently work full-time for Georgetown University as a Senior Javascript front-end developer in our University Information Services department. I worked with a team of developers, designers, and product managers to create a flexible and responsive Drupal 7 themes for the University's school websites.

The site is part of a Drupal 7 multi-site implementation that includes 300+ other university sites, many of which use an older theme (for now). Our biggest challenge was creating this theme using best practices while not affecting sites on the older theme, knowing that both themes share many back-end modules and features.

View Site

Whitehaven Code Playground @ Georgetown (2016)

Jekyll, jQuery, HTML 5, CSS, Bootstrap 4 (alpha)

This site is also part of my work at Georgetown University. I created this site as part of our documentation efforts to encourage Drupal content editors be familiar with Bootstrap code supported in our website themes.

Users can insert commonly used code blocks and immediately see what they will look like in our Drupal 7 theme. (The theme's stylesheet is included on this page.) Users are also encouraged to play around with the code to update classes and add their own HTML as part of their training on the theme and Bootstrap.

View Site

SemanticClarity (February 2016)

Drupal 7, Sass, CSS, HTML 5

SemanticClarity reached out to me in late 2015 about relaunching their website in parallel with an initiative to refocus their business strategy.

I worked with them to create a new design based on their current branding and develop a flexible, responsive Drupal theme based on that design. The new site was on the Acquia platform.

View Site

Chicago Community Trust (May 2015)

Wordpress, Javascript, SASS, CSS, HTML 5

I led the development of this project while working at AMS. Our team of developers collaborated with the designer, managers, and content editors during the course of the project. The site won the 2015 OMMA award for website excellence in the charity/non-profit space.

View Site

Macy's Internal Application (2014)

Backbone.js, Marionette, jQuery, Jasmine, CSS

At Optaros, I was the lead front-end developer on a team that re-platformed the UI of Macy's internal product management application as a Backbone application, using Marionette, Require, Jasmine, jQuery, and a custom light-weight CSS grid framework. We are created a library of core UI components to be used by us throughout this application, as well as by other Macy's teams.

My primary function on this team was to create component designs for each section of the application in development. These component designs included the Backbone model structure, necessary REST calls for a given section, and payloads for those REST calls.

Accessible Web Development

We develop websites for everyone to use, so why not make sure that everyone is able to use our sites? We as developers need to plan for accessibility before we write our first line of code.

This talk was given at NoVA CodeCamp (April 2017) and ConvergeSE (June 2017). A shorter version of this talk was given at edUi (September 2017).

See slide deck

Introduction to SVG

Notes and example code for my introductory lecture about creating and using SVGs.

See notes on GitHub

Introduction to Ember

Notes and example code for my introductory lecture about using Ember.js.

See notes on GitHub

CSS Navigation

Video lecture tutorial on how to create a multi-level website navigation with only HTML and CSS.

View on YouTube