There’s few things harder for a designer to do than redesigning their own portfolio. It feels virtually impossible to come up with a good concept, and moreover any concept you like at first will seem downright terrible as soon as you implement it.

So it wasn’t easy to come up with a new portfolio design, but I’m happy to say I finally managed to create something I’m happy with, and so I just released my new portfolio today.

The Concept

One of the challenges of building a portfolio for fresh designers is that it seems impossible to fit in everything you need: your bio, a witty tagline, a contact form, blog, links to your Twitter and Dribbble profiles…

But without a clear focus, the end result is more often than not a site that hides away a designer’s actual work instead of putting it front and center. So this time, I decided that I wanted to focus on my projects alone.

As soon as I made that decision the design process became much easier, and I almost immediately came up with the concept of a grid of circles (to match my own personal logo).

I also knew I wanted each individual project page to fill up the whole screen without any distractions. Again, the idea was to showcase my work and nothing else.

Once I had both these components in place, expanding each circle to fill up the whole screen just seemed like the obvious thing to do. As I would soon learn though, “obvious” and “easy” are two very different things…

The Code

I quickly realized that my simple concept would require complex coding.

First of all, I decided to forego having a back-end altogether. After all, who wants to fight with the WordPress admin every time you need to add or modify a project? Instead, I stored all the data in a json file and managed the single-page app with KnockoutJS.

Note: I should mention that I started coding this whole thing quite a while back, and at that time I hadn’t yet started playing around with (and writing a book about) Meteor. If I had to do it again today I’d probably use that, or if I wanted server-side rendering maybe hack something together with AngularJS and a static site generator like Middleman. But I digress.

I also tried to make the site as responsive as I could, using not only a responsive grid but also FitText to resize everything on the fly, and PictureFill to manage responsive images.

The Kitchen Sink

Here’s a list of all the things I used in no particular order:

JavaScript

• jQuery – you always need jQuery.
  
• KnockoutJS – to manage events and binding.
• RequireJS – to load all the scripts.
• FancyBox – for the lightbox popups.
• FitText – to make the text responsive.
• jQuery Hashchange – to respond to the hashchange event.
• jQuery Hotkeys – for keyboard shortcuts.
• PictureFill – for responsive images.
• matchMedia – not sure what I’m using this for anymore…
• Spin.js – resolution-independant spinner.

Services + Apps

• Typekit – for the always-gorgeous Proxima Nova Soft.
• Icomoon – to generate the icon font (Fontastic is cool too!).
• Codekit – to pre-process Haml & Scss.
• Susy – for the responsive grid.

No Firefox…!?

The result of all this crazy experimentation is that the thing doesn’t work in Firefox.

Now unlike what some people seem to believe, it’s not like I had something that worked great in Firefox and then decided to sabotage it on purpose because I hate open source and like to strangle kittens.

I also didn’t set out from the start to specifically use features that I knew wouldn’t work in Firefox just to make Firefox users feel miserable.

No, what happened is very simple: I developed the site in Webkit, and when I went to test it in Firefox it didn’t work. At all. I was then faced with a choice: spend the next X days/weeks/months debugging it until it did work, or release it in its current imperfect state…

So if you’re a frustrated Firefox user, I’m sorry… but if you’re willing to help me fix the site I’ll gladly welcome your help! (Or you know, you can also just use Chrome).

What Do You Think?

Looking back at the project, I can already see a ton of things that I would now do differently. Still, unlike with my previous attempts at designing a portfolio, I’ve remained pretty happy with the result. And in any case, I can now rest easy knowing I have something to show when people ask to see my work.

But let me know what you think. And if you find a bug, well… please pretend you didn’t see it!