Anatomy of an About Page Redesign

It's this time of the year again. Every once in a while comes that twitch, that realization that maybe, I should redo my website. Said and done, you are looking at the fourth revision of it. It all started with a Wordpress Blog for Maps Offline, then a Joomla CMS for Nam's Remote, then an iWeb site, then a basic Rails site and now hopefully a slightly more polished version. Back then, I also had very modest site titles such as "Nambrot.com - Showcase of Incredibility".

I wanted to take this opportunity and talk a bit about how I have approached this redesign.

Purpose

The very obvious purpose of a personal website lies in self-expression. While we nowadays have a lot of tools that allow us to express in various forms and shapes, I have always viewed a personal website as something very unique, truly mine. Whereas other services have often very clear rules of what you can do, only sky is the limit when it comes to your own baby.

As I'm going through my early 20's, self-discovery and self-definition is a major plotline in my life. My website needed to reflect that. I wanted to let people where I'm coming from and how I am viewing myself. I have thought and learned a lot about it at Credport with designing profiles to make people as trustworthy as possible by building a sense of familiarity.

I have concluded that an ideal about page/personal profile needed to be a mixture of the emotions of an autobiography combined with the brevity of a CV and craft of an online portfolio. Every single medium hat compromises I didn't like, but together it might work.

Complexity

I knew if I wanted to succeed, I needed to manage the classical trade-off between overview vs. detail. I wanted the readers to get to know me as best as possible, yet without making them wade through a boat load of (potentially) irrelevant information. It is important to keep overall complexity low, while keeping highly contextual depth when desired. At Apture, I learned to love contextuality on demand, fueling curiosity and digging deeper. You just have to give users the tools to do so.

There are three complexity layers when it comes to personal information and here's how I have approached them:

Importance of a particular data point

Personal data points have variable importance. Where I went to college is usually a lot more important I went to high school. A simple slider allows the time-pressured head hunter to get a quick glance, while the stalker can take all his time to learn every little nuance about me.

Relevance of a particular data point to a reader

Then again, if someone is interested in my travels or photgraphy, he couldn't care less about my latest github project. We as social beings belong to different social circles and have different facets to our personality. A couple of check boxes give the reader the ability to pick and choose.

Information complexity of that particular data point

Finally, there is the inherent complexity of a data point. Sometimes you just want to get a tl;dr, sometimes you wanna know it all. For sufficiently complext data points, you can break out a lightbox for more depth or show the photo gallery inline.

Implementation

Once I had the plan, implementation was relatively straightforward. The about page effectively consists of a lost of entries like these:

On load, the jQuery plugin parses these entries for their category tags as well as their importance. Whenever any of the variables change, I reflow the collection. When an entry is 'flippable', I apply some fancy schmancy CSS Transform for that card-flipping effect. I actually had to hack around a bit, as the back-flipping causes webkit to stop anti-aliase, so what you actually see is double-sized elements that get a scale(0.5) smashed onto them.

I have actually planned to refactor this "timelinify" jQuery plugin, but at this point it makes too many assumption in order to be useful to anyone. Maybe I will refactor it some more in the future, in the mean time you can check it out on Github

What actually made it out is the "gallery" gem I have written to supply my photos (gotta find some time for some minimal documentation though). It uses omniauth to fetch my albums from Google+ and then serves them via a mountable engine. The horizontal scroll design is heavily inspired by portfoliojs. I have modified it to take multiple galleries per page, as well as "decorate" image tags with their respective album as you can see on some travel entries.

Other notable features are the relative responsive-ness of the site as well as the off-canvas menu.

Done.

I'm fairly satisfied with the current iteration and hope i will last for a while. I would love to hear your opinion and feedback though. What I noticed during the implementation is that cross-browser development is still a pain in the ass. Also, I'm definitely a perfectionist when it comes thinking about every possible edge case, but incredibly lazy to finish the last 5%. There are so many minor annoyances that I have simply given up. I hope you won't notice.