I craft cool things for the web.

Some of my recent projects

Heartland Cooking & Living

In Development

I've been working closely with my client to bring his vision for a unique culinary website to life. Although still in development, this project is an ongoing learning experience and a great opportunity to apply my skills in the following areas:

  • Custom CMS development
  • UI/UX design
  • Code scalability and maintainability
  • Workflow automation and version control
  • Client-side optimization
  • SEO
  • Brand development and design

The content management system (CMS) is where the magic happens. I built a custom Ember.js application to facilitate entering and organizing the site's data in the form of recipes, menus, articles, and users. Backed by Google's NoSQL platform Firebase, the data store allows structural flexibility and real-time collaboration while working seamlessly with Ember Data's JSON API implementation. Ember's tooling, addon ecosystem, and opinions on application structure helped speed up development and bring a bit of joy to the workflow.

After exploring a vast array of options for delivering content to users, I decided to also re-build the user-facing portion of the site as an Ember application, taking advantage of common data models and framework idioms to once again speed up the development process. With content visibility being so important in this project, I decided to utilize the emerging server-side rendering tool Ember FastBoot. FastBoot runs the isomorphic Ember application on a Node.js server and renders content to users, search engines, and social media before the single-page application (SPA) takes over on the client.

See it live
Technology Stack
  • Ember.js
  • Firebase (NoSQL)
  • Node.js
  • Express
  • Sass
  • jQuery
  • CSS3
  • HTML5
  • Git
Screenshot of the Heartland Cooking and Living website Screenshot of the Heartland Cooking and Living website Screenshot of the Heartland Cooking and Living website

Portfolio Website

May - June 2016

This portfolio website for an accomplished creative and recent college graduate was a refreshing project to both design and develop. I decided to use plain, old HTML and CSS instead of Jade and Sass (my usual go-to "client-side" development tools) because the website owner already had some knowledge of HTML and CSS and would need to easily edit the site over time. To limit the redundancy in markup and also introduce a single-page application (SPA) feel without page reloads, I decided to use AJAX with jQuery to simply load each "page" as a snippet of HTML to be placed in the main content area.

The portfolio itself is heavily focused on visual elements, leading to some challenges with responsive images and page performance. Therefore, I took care in optimizing thumbnails and taking advantage of preloading images with a lightbox jQuery plugin.

madelynandree.com
Technology Stack
  • AJAX
  • jQuery
  • CSS3
  • HTML5
Screenshot of Madelyn Andree's portfolio website Screenshot of Madelyn Andree's portfolio website Screenshot of Madelyn Andree's portfolio website

Project Hart

August - November 2015

I was excited to take on the challenge of developing a custom website for a non-profit organization that I joined as a founding member. The team wanted a clean, friendly website that would inform visitors of the organization's mission and encourage donations of e-readers to be redistributed to children in need of educational resources.

I first worked alongside the team in researching topics like search engine optimization (SEO), calls to action (CTA), and digital marketing strategies. I then carried out designing and developing the first iterations of the website using custom CSS on top of Bootstrap, not having a great deal of experience with modern CSS layout techniques at the time. As the team grew in size, we improved some design elements and worked together to create and refine the site's content.

The website was originally built as a server-side application with Node.js and Express, with expectations to build out a set of tools for the organization. However, after first setting up and deploying the site to a Linux server on DigitalOcean, I decided that a template-driven static site (using Jade/Pug) was a more appropriate solution for the needs of the team.

projecthart.org
Technology Stack
  • Sass
  • CSS3
  • Bootstrap
  • Jade/Pug
  • HTML5
  • jQuery
  • Gulp
  • Linux VPS
Screenshot of the Project Hart website Screenshot of the Project Hart website Screenshot of the Project Hart website

A little about me

Photo of Clayton Locher

I recently graduated from the University of Illinois at Urbana-Champaign with a degree in economics and a yearning for more creative and technical pursuits. Without hesitation, I decided to follow my passion for web development, and I couldn't be more excited to be launching a career doing what I love.