Wednesday 1 June 2011

My Portfolio Site

Initial Ideas
I tried to make the bottom middle one on the computer but it ended up being this:
Mockups




In this design the homepage is the video page, with only one video - my showreel.

All the black would be fixed and in front of the page content using the Z index in CSS so when you scroll, you get to different videos or images, and its as though your looking through some kind of blobby hole into the light of my portfolio.

After the crit I changed the navigation to Home, Projects and Showreel
Using a generic projects page instead of segregating them into web, motion and print means that I can have projects that combine two or more of the web/print/motion categories and means that I can have a nice long page of work - I'd only have two things in the 'web' section.
Contact information will be on the homepage so I don't need that on it's own page.

The screenshot above has a new shaped blob, this is so that the navigation buttons can touch the top, in the same way that HARRY WINTER does at the bottom.
It's horrible now though.

Coding it up

Here's the makings of my website. This is when I got @fontface working. This will allow anyones computer to display the font that I want without having to resort to nasty images. The font I chose is called Folk. It's free to use under creative commons licence.

I downloaded the kit from fontsquirrel.com which provides the font in all the different formats that different browsers want.
Then the CSS points to all the files.

After a while I realised the site looked better without the blob:

So I took the blob image out of the code and made a black background and borders:
This is the homepage before I realised I didn't have time before the deadline to make a showreel.
I then changed the 'showreel' buttons to 'blog'
and I put some better pictures in.

The projects page has the same layout as the homepage, it just goes on longer:
When you click on a project, you get a page like these.



I used a "showcase" class in the CSS to centre this content:

Here's a link to my site as it is now! harrywinter.co.uk


No comments:

Post a Comment