Website 2.0

Recently I have  redeveloped my portfolio website, when in the planning phase of the website I wanted to create something completely different from my first one so the idea that I came up is a horizontal Parallaxing website, which is something that is not commonly seen all over the internet. The problem I had is that I didn’t know where to start, but that was solved by some research and looking through tutorials and how other people have done it before. Even though I found tutorials helping me with how to create the basis of this website the code was still quite complex and I felt my previous experience with HTML and CSS helped dramatically as I was able to debug the code and understand what everything does even if I didn’t know before.

Before anything fancy was put on my website I just wanted to get the core structure down and then add on the rest. Below is how the website started off, which was just a horizontal single paged website, which had set out panels which fit the screen size and you can navigate through them.

website img

website img1

From this I then added a parallax and other elements on the pages that I created and that brings my website to what it is up to date which I will talk about below.

p1Website

This is my homepage, the first page/ panel that you start on when the website is opened. I wanted to keep this page nice and simple just a fresh greeting to my website. My idea for the background being different from the rest of the website is that I wanted it to juxtapose the other websites to represent the light and easy side of my personality before it delves into the more serious worker side which is the rest of my website. Also I have the two different font weights as a design feature  to keep the user interested in what there looking at but the font family is the same so the theme doesn’t waver.

p2Website

This is my gallery where I show off the work that I have done. I feel this page needs the work even though it is simple which and is a gallery which is what I want it doesn’t fit in with the overall theme and is a bit bland. The improvements that I would make is to have a caption on each of the images when hovering over it and when a image active the small image will be a different colour.

p3Website

This is my about page, and on this page I have a picture me cut out and saved as a png so it gives the effect of hovering of the page, it also includes a short description about me and the skills that I have, this is one of my favourite pages as it is complete and there’s not much more you can do with it, the design is clean and fits in with the overall theme.

p4Website

 

This is my last page and it is my contact page. I also really like this page because it is simple but effective, everything needed is on there, the contact form and my details and these objects all conform to the general theme. I need to tweak some of the image sizes and positions but overall I happy with this page.

So that’s my website I feel that I have developed a strong structure and design to my website there is some tweaks I need to make to improve my website but overall I think its quite nice.

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