Work

Work

I am passionate about writing clean, reusable code to craft web experiences that work well for users. I love using tools like LESS and SASS to make stylesheets modular and improve code maintenance. And when it comes to writing markup, I'm a big fan of templating languages like Jinja and Nunjucks, which allow me to assemble pages using modular, reusable components.

REI

View website

  • Bootstrap
  • LESS
  • Gulp
  • CommonJS
  • Nunjucks

During my time at REI, I have built several customer-facing features and pages, including the mobile navigation menu, the mobile user account pages, and the outdoor school search results page. I arrived at REI just before they began to work on a new in-house mobile website and so I was part of that exciting project to create the new mobile experience for rei.com customers.

As I worked on the mobile site, I quickly realized that there was a need for an icon set to use across the site. So I worked with designers to create and implement an icon font that provided a tool for both designers and developers to use. I added this icon font to the fledgling UI framework that was built to support the mobile website project, and I later joined the team that maintains both the codebase and documentation for that framework. As REI is working on doing a complete site redesign, I'm leading the development for the new UI framework and its accompanying documentation.

Softcard

View website (archived view)

  • Hyde
  • Jinja
  • Bootstrap
  • LESS
  • Grunt
  • Handlebars
  • jQuery
  • AJAX

This is the consumer-facing website I built while at Softcard (formerly Isis). Its main function is to introduce the product (a mobile wallet) and help users know how to get started with the app (which has quite a few prerequisite requirements).

I built my local dev environment using Hyde (a Python static site generator) and the UI framework is built on Bootstrap 3. I also began using Grunt to manage my build process, which greatly simplified the day-to-day development tasks of compiling assets and building the site.

Designicity

View website

  • Wok
  • Jinja
  • Bootstrap
  • LESS
  • jQuery
  • Masonry.js

This is my first real freelance project for a friend I grew up with. She's an interior designer in New York, and this site is designed as a quasi-blog which she uses to promote products she sells for other companies.

The core of the site (especially the blog) uses Wok, a Python-based static HTML generator similar to Hyde. Wok uses a combination of Jinja2 templates for generating the page structure, and Markdown for page content. The base CSS is built using a customized version of Bootstrap.

A special thanks to Rob McGuire-Dale for referring me to Wok, and helping me learn how to use it effectively.

Search 3.3

View website (archived view)

  • HTML5
  • CSS3
  • jQuery
  • Responsive
  • ASP.NET
  • SharePoint
  • XSLT

Search 3.3 improved on the visual design of Search 3.1. Instead of using the homepage almost exclusively as marketing space, I decided to put whitespace around the search box so that functionality retained its precedence on the site.

The reference materials on the previous site had way too much information and were rarely used, so I reduced those materials to 4 pages. Each of these pages has a clean sub-navigation to quickly jump to the high-level topic of interest for more details.

Search 3.1

View website (archived view)

  • HTML5
  • CSS3
  • jQuery
  • Responsive

Search 3.1 was intended as the front-end for our new search engine, but it took so long for our infrastructure to be put in place that I ended up re-designing it before it could be implemented.

This was the first responsive design that I will claim ownership for (search 3.0 was a hodgepodge of experiments in responsive/adaptive layout). I designed the homepage (shown) to be like a marketing site for our service, with the idea of showcasing the improvements we were making to Search.

Search 2.0

View website (archived view)

  • SHTML
  • CSS
  • jQuery

Search 2.0 was the first re-design I did for Enterprise Search a few months after joining the group. Prior to this, the search landing page our user/developer reference materials were completely separate, so it was difficult for users to get self-help on everyday topics.

The previous landing page was completely different from the rest of the site, so it was unclear that it was even the same site. This design is simple, and was aimed at creating a more unified web presence for Enterprise Search.