You can view the full website here
Some technical challenges faced during the project
Challenge: Graphical elements size optimization for quicker web performance
Solution: Since the website's artwork included a lot of raster graphics with transparencies and realistic textures, a lot optimisation needed to be done. So, I removed unnecessary gradients and transparencies, modified background/footer textures into tileable images, reduced image quality utilising JPGs and 8-bit PNGs. Each asset needed a separate treatment so that the optimal balance between size and crisp look was achieved in each case.
Challenge: Hover animate the home page collage image.
Solution: In the home screen I had initially made the collage as a single image. Then, in order to create a more interactive feel, I broke it apart to its components and placed them in the exact positions and angles through CSS in order to recompose the initial PSD collage. Then I created hover animations using again CSS3 by fixing their keyframe positions of each separate collage component.
