Website re-design – Converting to one page

Armed with my template and good intentions I set to work on converting my previous portfolio website to a more dynamic and interactive one-page site. I started by copying the HTML from the other pages into the index page, adjusting the code where needed to ensure everything was correctly placed and sized. Obviously this meant unifying some of the styles in the CSS in order to make sure the content was all properly matched, as well as adding anchor links to each section so that they could be linked to, and the browser would know it was a location in the same file – not a different file.

Anchor Tags

I expanded the content wrapper slightly also, as it matched more suitably with the fluid, responsive style of one-page sites more than the traditional header and wrapper combination I had used before, where it was indeed better suited to have a thinner wrapper. I ensured that text remained in reasonably short lines however, for user comfort when reading – as scanning across text on a wide monitor is uncomfortable for the eyes.

IMG_0525

I changed the background to a heavily manipulated, yet fit for purpose photo that I had taken instead of the one I used in the mock, since I felt the render I made did not reflect my digital design style very well – which was mostly the purpose of this portfolio. It reflected my traditional style more and thus I felt it was not well suited to this particular site. I did still blur the photo for composition reasons though – bringing the foreground to the front and disconnecting it from the background giving a floating effect, nicely combined with the smooth scrolling and opacity effects.

bg

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s