New website: Jeffrey and Anna

At work and at play, I’m always makin’ websites! Shortly after getting engaged at the beginning of the year, I started brainstorming on how best to tell family, friends, and the world at large about us. Naturally, it would be a website, but I realized I’d have to pick up a pen and pencil for the first time in years if I really wanted to make it special.

Screenshot of Jeffrey and Anna

After a few months of tinkering, I present to you Jeffrey and Anna, a super-fun, animated adventure through our life. Everything has been coded (save for some plugins) and drawn by me, and written by both of us.


What follows is a bit of a technical walk through the site.

Jeffrey and Anna is, naturally, pure HTML, CSS, and JavaScript. It adapts to different resolutions and form factors with media queries, using the same technology to gracefully degrade for less capable browsers. The site is very different from on a desktop computer, but hopefully just as usable, when you view it on a phone or tablet.

I drew everything on paper, scanned it, and colored it in Photoshop. I designed the site to use different complementary color schemes for every section, and further personalized it with Google Web Fonts and Font Awesome.

Superscrollorama is the engine behind the animations which happen as you scroll through the page. I slightly modified the library to detect whether you’re scrolling up or down, and to cause certain animations to start from wherever you currently are on the page.

I used certain parts of Twitter Bootstrap. Scrollspy causes our clothes to change as we jump through the sections, and Carousel provides CSS-animated navigation between subsections.

The site runs on Rails, my current web application framework of choice. Being database-driven, it doubles as our guest list management tool, as we can easily create invitations for guests by using RailsAdmin – and guests can enter their automatically-generated RSVP codes to instantly notify us of their attendance.

The stylesheet is written in Sass + Compass. Compass’ astounding ability to automatically generate sprites would have been an amazing help, given the massive amount of images on the site, but unfortunately, the sheer size of the sheets it generated caused the site’s performance to slow to a crawl. It turns out that it’s not a good idea to have dozens of images at tens of thousands of square pixels moving around on the screen at once. Instead, images are individually crushed and preloaded.

A little easter egg: some of you will see a little range slider in the lower-right corner of the page. Use it and see what happens!

I feel that this site represents the epitome of my current skills. It’s a bit hard to poke through the files on the site as it’s minified for best performance, but fortunately, it’s all open-source! Please poke through the code on GitHub, and feel free to comment (or create an issue) with any suggestions.


For those who are wondering, we haven’t sent out invitations yet! There’s still the task of combing over the list with the parentals, and then collecting the physical addresses of almost a hundred families. It’ll be a few weeks. But do be on the lookout soon for the location and date of our wedding!