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.
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.
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.