New HTML5 Portfolio

portfolio screenshot
This week I put my new portfolio site live showcasing some of the client work I’ve done over the past two years. I decided to it would also be a good opportunity to skill up on the latest advances in html5. The concept behind the site was to create a typically Flash style experience but using javascript/css3 and html5 instead. The most interesting feature of the site is the fullscreen animated background. This was created using the EaselJS library to draw colors and shapes to a canvas element. You’ll need a modern browser like Chrome, Firefox or ie9 to view this feature. The site is also compatible with mobile and iOS devices. Unfortunately these devices do not have enough power to run the background animations at a decent framerate so make sure you checkout it out on a desktop too. There is also a fun easter egg embedded in the site, have fun trying to activate it.

This site was awarded site of day at Awwwards on 19th Aug 2011.



See more ,

8 comments ↓

#1 Bill on 08.19.11 at 7:02 am

I saw your website at the awwwards and was really amaze. I never though that you can do website as interactive like this. great work!!!

#2 joe on 08.21.11 at 3:21 am

Hello Philip,
thats a realy interesting site your new portfolo. I like the background effect in html5.
Can you explain it a little bit further more. May be a “how-to” will be your next post here …
thanks in advance

#3 Chris on 08.22.11 at 3:47 am

Hello,
thats a good idea.
phil show us how you realized it.
make a tutorial …
or
provide more code
cheers

#4 Fábián Gábor on 09.06.11 at 8:03 am

This is amazing! I also would like to read a “how-to”. Would you make at least a basic tutorial please?

#5 phil on 09.06.11 at 3:45 pm

ok, ill put up a tut in a few weeks

#6 Jay on 09.11.11 at 5:54 pm

Thanks! Learning more about HTML5/jQuery/CSS3 the tut would be pretty helpful

#7 Olivier on 10.05.11 at 8:30 am

Simple, clean and interesting! I’m looking forward to see your tutorial

#8 phil on 02.14.13 at 7:11 pm

I’ve published the source code for the background to jsdo.it http://jsdo.it/fatlinesofcode/5Tqn

Leave a Comment