Portfolio details

titleimg

When launching my portfolio I got some nice reactions. Some direct reactions through e-mail, direct messaging, spoken word (remember that one), but also silent reactions which I tracked down via my site stats. It’s kinda nice to find your portfolio on other websites/blogs. So here’s a selection, which at the same time must make my blog soooo google friendly:

Thank you China: RIAmeeting
Thank you Germany: Pixel Gangster
Thank you Italy: David Salvatori (nice to see your stuff alongside Kenda Perez)
Thank you Brazil: Cabanacriacao
Thank you Britain: Alex Constantinou (for choosing the Font(-style) :) )

Ok, enough of the SEO, and self-love, let’s look at some details:

I’ve always wanted to make a text-based website; it’s immediately personal because of the narrative style. But only text on a page can get boring really fast, so it needed a little funkyness.

MotionBlur
motionblur
Apart from the fact that I animated every character instead of whole words/lines, the main animation detail is the motion blur that is applied to everything that moves/rotates/scales. This makes motion more natural / film-like. And I’m trying to imitate film as much as possible, cause I think people find film-like visuals often beautiful.

DOF
dofblur1
Another blur-effect I use often is the Depth-Of-Field blur… You have one field of focus, and everything closer or further away from that field gets more blurred when moving away. This is used in film and photography to get the viewers attention to the subject, and thus isolating the main subject from the surrounding/background. I made a quick prototype of something with DOF effect here: Talk3D prototype. When I have some spare time I will make the classes a bit more solid and clean and release the code here.

talk3d

DropShadow
Another thing that’s applied on a lot of places in the site, is subtle dropshadow. Subtle dropshadow (not the classic dropshadow or bevels that people use on their photographs when they first use Photoshop) can create just a little bit more depth than normal text. Thanks again mr. Constantinou for pointing this out for me.

dsexample2left with, right without dropshadow

Code
If you came this far and expected some code-snippets; I will include/share some structured code in the future but these are little details where the code isn’t that exciting. (hint motionblur: TweenMax, onUpdate: BlurAlgorithm).

Tags: ,

Leave a Reply