Mass Effect Style Résumé

April 1, 2010

Mass Effect Style Résumé - Intended for Chrome, FireFox 3+, Safari 4+ and IE 8+

I really enjoyed customizing my character in Mass Effect. So much so that I would frequently fantasize how a Mass Effect version of me would operate in the real world. More tech skills than combat but still a pure paragon at heart.

Actually, the more I thought about it, the more I wanted to create a character sheet for my real life persona. A sort of strange resume that would confuse corporate types and attract creatives at the same time.

In the best case it would help me land a new job. In the worst case it would improve my skills enough to attempt an even more fantastical project.

Outfitted with pure optimism, I set forth into a night illuminated by the glow of liquid crystals.

Design

I wanted to recreate the Mass Effect character screen as accurately as possible which meant lots of reference shots. I would then dim these shots by 50% in Photoshop and lay down new lines, shapes and gradients over them. Usually working at ridiculously high zoom levels in order to get things not only pixel perfect but sub pixel perfect!

Some things were incredibly easy to recreate while others required complex gradients, masks and alpha settings. Most of them time I could get them to be exact although there were a few places were slight compromises had to made in order to keep the project moving forward.

I was very pleased when I finished this initial phase. I had gained some new techniques and produced something I could be proud of.

Coding

Converting the Photoshop mock-up to HTML was actually pretty easy. Just a lot more absolute positioning and z-indexes than a normal design. The real challenge would be in all the complex hover states and animations.

I'm an old hand at JavaScript but coding with it can be quite tedious, especially when cross-browser issues arise. To alleviate this headache and do something a bit more modern I decided to use jQuery.

Talk about a good decision! I don't think I've ever enjoyed front-end coding so much. With browser inconsistencies out of the way only thought is left in peace with means speed and entering the zone. It honestly makes me giddy and grin like an idiot. I'm in love! *swoon*

Eventually everything was working wonderfully in Chrome. Very interactive, responsive and no bugs. A few tweaks and FireFox was the same. Then came the trials of Internet Explorer. Multiple hovers active, flickers, stuck states and worse. I was baffled. What had gone wrong with my beautiful code?

I soon learned that nothing was wrong. Everything was just running in slow motion thank to Internet Explorer's lack of JavaScript performance. My beautiful code was actually terribly inefficient.

A few more nights and everything was tuned for all the major browsers. No more odd behaviors, a tremendous speed boost and best of all, it just felt right.

Tweaks

Besides a pretty accurate 3D version of me lovingly created by Parrhesia, there were hardly an deviations from the original Mass Effect screen during its initial recreation. In fact, it only when the project was nearing completion did Parr and I notice that it wasn't really working as a resume.

We proceeded to trim anything that didn't add to the experience like the Paragon/Renegade bars, extraneous text and other assorted bits. These minor changes made all the difference in the end result.

Mass Effect Style Résumé - Intended for Chrome, FireFox 3+, Safari 4+ and IE 8+

Epilogue

An epic quest on the edge of my ability and one I am proud to have undertaken.

The end result doesn't quite work like a traditional resume but then again... if it reveals my true nature to a prospective employer... maybe it works better.

The journey was all that mattered. The destination, just a bonus.