Oh look, I made a new website

It was about time.

I’ve had this website as a static landing page for quite a few years, and at some point, I also tucked a WordPress blog behind it to show off some personal and professional projects. But it was a totally disjointed experience between the two, and really not optimal for someone whose job is creating nice user experiences. So here we are, fully WordPressified with a single experience across all templates, and hopefully a major upgrade over what I had before.

Two interesting things to share about the front-end work I did:

Responsive Images

If you check the source for that large image above, you’ll see I’m using the new <picture> element with a few responsive sizes that get loaded depending on your screen width. I’m using Picturefill, which is a stupid simple JS library for making this work across browsers. I just set up a couple different new image sizes in WordPress that corresponded with some CSS breakpoints, and my templates take care of the rest.

SCSS Mixins

This would be harder to spot, but I had a lot of fun with SCSS mixins. (Side note: if you’re on WordPress, use this plugin to automatically compile SCSS, and don’t waste time with any of your other options) Among other things, I was able to plop in the latest Twitter Bootstrap grid system and also create this really handy function that helps create cross-browser semi-transparent backgrounds.