I was always wondering how a timeline layout for a portfolio website could look like. I tried two timeline layouts:

1) The thumbnail timeline

• Projects or entries are aligned next to each other according to the year when it was released.
• The timeline can be browsed to the left and right.
• Hovering the thumbnail will give additional information in a mouse over
• Clicking the thumbnail will change the image and information of the main body

2) The “topic” timeline

• Projects or entries are aligned in a information graphic where the user can define how much she worked on one topic
• Example:
  • red represents a topic like graphic design
  • orange a topic like audio production
  • The user can display how much time effort she put on one topic in which year
  • This would also work for carrier steps (company 1 = red, company 2 = blue, University = yellow and so on)
• Finished projects would be represented by dots
• Hovering the dots will give additional information in a mouse over
• Clicking the dots will change the image and information of the main body
• The timeline can be browsed to the left and right.

So what?

I built prototypes for both in flash and they work pretty fine. I ran obviously into usability issues with the second approach when testing them.
The focus is simply too much on “it looks nice” rather have an interface which is well understood.
I also realized that flash is not a good technology for a portfolio or website anymore and stopped working on it. Check out a rough, almost not working version here.