Gennie Harris

Parkitects is a playground design company that has completed hundreds of projects in central NY. They wanted to be able to highlight these projects on their website through a filterable map. I built a custom content type for them to enter project information, and then displayed the playgrounds in a custom Google map.

We'd used MapBox for past projects, which I found clunky and difficult to work with, so I was excited to try out the Google Maps JavaScript API for this site. It made it much smoother to build out a map with pin clusters, as well as filters for build year, location, and other playground attributes.

Accessibility is always a consideration when I'm building a site, but some clients have higher requirements than others. As a part of Cornell University, the Bronfenbrenner Center for Translational Research required a website that passed strict accessibility standards.

I created several custom content types for them to highlight publications, media, and more; and then worked with an IT Accessibility Coordinator at Cornell to audit and adjust the site as needed. I learned a lot from this project about how to make a site as accessible as possible without sacrificing a smooth UI.

The Cornell University Insect Collection is a massive research and training collection with over 7 million insect specimens. They wanted to use their website to catalog the insects in their collection and highlight thousands of photos of these specimens.

I started by building a custom content type which the CUIC team could use to categorize insects by biological taxonomy, add information about the specimens, and upload photos with metadata such as life stage and view. I then built out the Type Collection and Insect Images Gallery to highlight these insects.

The Center for Alkaline-Based Energy Solutions is a national lab research center whose goal is to make cheaper, more efficient clean energy solutions. They wanted a fairly basic brochure site to highlight their research efforts, but with a homepage that told their story in a unique way.

To implement our vision, our designer came up with a series of svg illustrations to portray the steps in the clean energy process, and we dropped them into a WordPress page so that the CABES team could update the corresponding content as needed. I then used a combination of html, css, and javascript to connect all the illustrations with lines and desaturate them. As the user scrolls down the page, each subsequent section comes to life - the illustration becomes fully saturated and animates in some way.

This was one of my favorite projects to work on because it took a lot of strategic thinking and finicky calculations: to make the html lines connect the illustrations correctly even if the user resizes the browser, to ascertain which section the user is looking at, and to animate the SVGs using only css. Unfortunately there wasn't a good way to stack the illustrations with the content on mobile, so make sure to check this site out on a larger screen!

The Northeast Pollinator Partnership is a citizen science project that aims to help apple growers make more informed decisions about pollination and pest management. One way they wanted to do this was to enlist local farmers and citizens to count honey bees and native pollinators in upstate apple orchards.

I built a web app for NEPP that asks users for some personal and location information, and then provides a five minute timer in which the user counts bees and records their numbers in the app. The app runs on Foundation for Apps, which I wanted to try out after building several web apps on AngularJS.

The Downtown Ithaca Alliance manages their business directory through a CRM, but wanted to highlight these businesses on their WordPress site. I created a custom content type for the directory and then set up a user-friendly import system.

Now, site visitors can find places to shop and eat downtown, and content managers can update business information with a couple clicks of a button.

Codenames is a card game that pits two teams against each other to figure out clues provided by their team's "spymaster." My friends and I play this game a lot, and one night someone said they wished that we could play on the go or while out at dinner without having to set up the 25 cards the game requires. I had recently learned AngularJS for a project at work, so I was inspired to try to recreate the game online.

My version of Codenames just requires two devices - a tablet or TV to display the "board" where everyone can see it, and a phone or tablet for the two spymasters to look at the "map" together. It was pretty simple to put together an Angular app to achieve this - just a template and controller for each view, and a factory that holds the list of words (created using an online random noun generator).

And if you're a fan of all things nautical, be sure to check out the extra-fishy version of this game, Codwords.

Go Finger Lakes promotes conservation and recreation in upstate NY by helping users find places to get outside and go hiking, biking, kayaking, and more. They wanted a map to highlight these locations, plus robust detail pages for each location that had trail and parking maps, location descriptions, photo galleries, and other useful information.

Locations are managed as a custom WordPress content type, which are then loaded into a GeoJson file and rendered into a MapBox map. Site visitors can filter the map by trail length and location attributes such as attractions and amenities.

The HR in Hospitality Conference is a national conference presented by Cornell University's ILR & Hotel Schools. They wanted a brochure site that they could easily customize each year, including a complete session list, compact schedule, and a list of speakers for the upcoming conference.

To achieve this, I created custom content types for speakers and sessions and built out pages to display the listings of each. Then, I created a shortcode so that the content managers could make a schedule page and drop in listings for individual sessions in the appropriate time slots.

The Carshare website was originally built on Drupal 7, but after several years the site managers wanted a simpler platform for adding and updating content. We rebuilt their site on WordPress - copying the design, rebuilding functionality, and migrating content in just one week.

I thrive under pressure (there's nothing worse than being bored at work!), so getting to spend an entire week seeing just how fast I could recreate a theme as pixel-perfect as possible was a fun challenge.

The Cornell High Energy Synchrotron Source provides synchrotron radiation facilities for researchers in various STEM fields. They wanted a website that followed the Cornell brand fairly closely while still having a touch of its own character.

This was the first Drupal 8 site I ever built, and it was a great learning experience.

I've always loved writing and editing, so when I was working at Singlebrook I really enjoyed contributing to the company blog. One of my favorite posts was about using the Underscore.js library to make data manipulation easier and more fun.

I wrote several other posts during my time at the company, including one about maintaining a clean git history and another about the importance of security updates (I also had a lot of fun creating all of the illustrations for this one).