Click the links at the bottom to navigate. You can also click on the article's text to go to the next page. Click on an image to enlarge it.

How it all started

This project started in June 2009 after I landed on the portfolio site of a freelance designer. I really liked it and I thought it would be nice to have such a site.

I started by doing a ton of research. I must have spend close to one hundred hours looking at other portfolio websites and reading articles on what makes such a site great. I was looking for patterns. What did those sites have in common? What did I like. What did I dislike. Why? I learned that for a portfolio website to be outstanding it must have a personal touch and be unique.

What follows is how the project evolved. It is full of pictures and tidbits at different stages . I also try to demonstrate my thought process.

Draw like you mean it

I like to draw on a whiteboard. There's something magical about it compared to drawing on a piece of paper or on the computer. I got mine from work. They were going to throw it away so I was happy to bring it home. I cleaned it and it was ready to use.

The board featured below became the portal for my initial ideas.

We can see a list of the pages I wanted on the site. That big green rectangle was supposed to be the home page but I scratched it for a better idea later on.

Note: if you’re wondering what the items 1 through 10 are, it has nothing to do with the project. They are stuff I've put on for Team Fortress 2.

Draw like you mean it - Part 2

This is a draft closer to the current home page.

I was foreseeing the double navigation menu. The arrows were suppose to give a hint to hover the cursor over them. After a close examination, I decided not to put them because the text alone was fulfilling that task and they were taking too much space.

I've put a note that scrollbars cannot be used because every time you would reach for them it would trigger the menus.

Below, is another early draft where I was arranging the content for the home page. The big blue lines are supposed to be light rays while the green marks are light spots. It never made it out in the final version because I never managed to create the effect that I truly liked.

Draw like you mean it - Part 3

The important part here is the rectangle with all the arrows going in all directions. It was an original idea of mine for presenting the books for my reviews section. With the books in the rectangle you could move in every direction given by the black arrows while the red ones would take you to the edge when clicked. I never got the chance to execute the idea because after thinking about the implementation I made the conclusion that it would take too long to develop and the result might be not what I had expected. So I went with a safer bet: the 3D wall. That being said, one day I'll take the time to create a prototype for this widget.

First Designs

What is this monstrosity?! That's the first attempt at a concrete design. Yes, it's pretty bad but that's how all first designs are. So without further ado, let's see something more pleasing to the eyes.

On my second design of the site, I dropped the color blue in the background and went for green because I felt that it was giving a more "nature" feeling to the site. I also decided to add transparency to the content box to not hide the background completely.

First Designs - Part 2

Hello beautiful! This beauty was created in one big session on a Friday night. I got back from work at around 6PM and went to buy a Rock Star energy drink (the white can) and a bar of Kit Kat. I also ordred a pizza. I don't recall all the little details but I do remember one thing. It's was 2 o'clock in the morning, I stood up from my chair and staired at the screen with a big happy smile : ) "This is it" I exclaimed. This really was it! In fact, the current version is not much different from this one.

Contact Me

I made the contact form very simple. I wanted users to focus on the message and less on the other fields. Here was the first design of the form.

The page felt empty so I added a short introduction at the top. I also changed the font and the background colors to match the "About" and "Projects" pages but the result was still bad.

In the third attempt, the colors were still not quite right. I also decided to add more space around the form to make it more appealing.

The last attempt is what is currently on the site. I re-used almost the same colors for the font and background as in the first design because after many tries and errors they looked the best to me.

Book Reviews Section

As I wrote earlier, I did not go with my initial idea for the book reviews due to lack of time. Here's is the alternative that I came up with.

Not the result I expected because it did not fit nicely into a one page layout. After spending some time looking around for inspiration, I landed on a site demonstrating a 3D wall for a gallery. The widget was bundled with the source code and after playing with it I noticed some key variables were hard coded and in general the drawing module was not very flexible. So I decided to rewrite that part.

A 3D wall can be created in different ways. You can use a mathematical formula or a 3D object where each vertex represents the center of an item. In my case, I picked a 3D cylinder. Here's how my 3D wall looked like when it was still under construction. After that, it's just a matter of applying the desired effects.

The Navigation Menu Rocks

The navigation menu was done in two phases. In phase one, I coded how it should behave and in phase two, I added the icons. Here's a video showing an early navigation menu in action:

All the animations were done using jQuery.

The Navigation Menu Rocks - Part 2

I created the navigation menu as a jQuery plugin. That way, my code is cleaner and easier to test. Also, it will be easier to re-use for another project. I used qUnit for my unit testing.

For the icons, as usual, I started with a draft on the whiteboard.

I knew I didn't have the skills to create those images so I seeked the services of a professional graphist.

The Navigation Menu Rocks - Part 3

Unfortunately, it didn't go as smoothly as I wanted. It required two graphists. The first one was a young and motivated digital art student that I met playing Golden Eye Source. I was quite fond of his work actually. Here are the icons that he did.

Afterwards, it went downhill. I started to hear how he was overloaded with school and I just knew it wasn't going to end well. I realized that I could not stop the inevitable and started to look for another artist.

This time, I wanted someone from my town. Someone I could meet in person. I met Luc. The quality of his work blew me away.

I loved it. I literally felt down my chair after seeing the Projects icon. It happened again after seeing the About Me icon.

Heroku is the Man

Since this is my first Rails website, I decided to deploy it on the internet when it was around 80% done. The idea behind that was to discover big problems early on. Also, if my hosting provider was not up for the task, I would have found another one when the project was finished. Finding an Internet provider turned out easier than I expected thought.

I declined using a Rails hosting company in Canada because among the five companies at that time, none got great reviews.

My second option was to host on a Virtual Private Server with Slicehost or Linode. I was thrilled with the idea because it would have given me an opportunity to manage my own server. There was only one problem: they offer Linux servers exclusively. I had no experience with Linux and didn't have the luxury of time to learn it. I finally discovered Heroku.

HEROKU IS THE MAN because it does only one job and does it perfectly. It's simple, user-friendly and fun to use. There's also plenty of documentation on their home page. I love the fact that you need to go through Git to deploy your project. It's free to try and since it's in the cloud, it's easy to upgrade and you only pay for what you use. Heroku team, if you are reading this, you did an amazing job!

Beta + Optimization

I gathered a small team of beta testers to test the site. Their job was to find bugs and tell me what they liked and didn't liked. I especially remember this one long conversation I had with one of them. We discussed back and forth about the flags on the Home page and a weird behaviour in the Contact page. It was great fun, and a lot of small stuff came out of that conversation.

Also, while the team was performing tests, I was working on optimizations. Because the site is small I didn't have any speed issues. However, for experience purposes, I decided to squeeze anything I could get.

Using tools such as Pngslim, Smush.it and JPEG Cruncher, I was able to reduce the size of the images by half. I also embedded my small image directly into my Html and Css files. It made those file bigger but it removed a couple of server requests. Lots of requests is the number one site performance killer.

Post-Mortem - Part 2

What went right

  • The navigation menu

    I already devoted a paragraph to this but it's worth mentioning it again. I just love the navigation menu. Not only the icons look better than I envisioned but I also love how it behaves. The small interaction and the screen fading really makes it fun.

  • The development process

    With no time constraint this project became a success. It gave me more time to analyze my designs. Consequently, once I settled on an idea I was confident it was good because I was able to consider a lot of other possibilities.

    It's amazing the results you can achieve by simply drawing an idea on the whiteboard, staring at it for fifteen minutes, going for a walk in the park or going to sleep and giving this same drawing a second look in the morning. During all this time, different "what ifs" start to pop-up and you realize that your initial idea was not that good after all. Another important lesson I learned is not to get attached to your first version--it will suck! It takes a couple of iterations before getting something of good quality.

    Finally, Rails coupled with jQuery really makes web development fun!

Post-Mortem - Part 2

  • Automated unit testing

    I added unit tests to my navigation menu plugin and it payed out for me. I initially hard coded some numbers so I could focus on the implementation. Once I started to fix those, my tests started to fail. I was able to quickly identify where the problems were in my code. Later on, having all my tests pass gave me confidence that I have broke nothing after adding new stuff.

What went wrong

    Graphics

  • Trying to do most of the graphics by myself was a big mistake. I spent half of my time on them which could have been used coding or writing content. Although I did enjoy it, I realized I'm not a professional graphist and I don't want to be. In the future, I will hire professional artists. They can deliver my standard of quality in half the time I can.

The Future

I hope you enjoyed reading this article as much as I had creating this site.

It's my little baby now. I plan to help it grow as there is still room for improvement.

I'm already foreseeing the second release. In the making, is a sixth section of the site containing advanced articles and tutorials. I will also re-design the Projects section, because as it is now, it is not very user-friendly for lots of projects. Of course, I will add more projects too!

Another concern is for the About page. It needs to be spiced up a little, it's pretty dry at the moment and I'm afraid some people won't read it until the end.

The End