I started off my blank portfolio site by applying the background colour in my practice layouts. I then inserted the nav bar with drop down menu and roll over functions. This proved quite difficult to negotiate around in order for it to look like my plans...
One issue I struggled with was the rollover colours (as you can see the 'portfolio' title can't be seen against the white box when hovered over)
With many attempts it then couldn't be see against the black...
But with some help from my teacher it was all sorted and now looks like this...
I then discovered that my typeface wouldn't be embedded into the site and so would appear differently on each computer so I chose Helvetica for my nav bar text.
As you can see the rollover functions work to highlight the button your mouse is hovering over.
I then positioned it to the left of the site.
Added in my title (as an image so that I could still have that typeface) However, it then offset the navbar...
So I moved it up to sit next to the title.
I then began adding in my images which also had rollover functions to give some more details of the work - once clicked the image will take you to the page of the site that it is featured in full on.
However, I then discovered that the drop down menu was hidden behind the image...
After some help by my teacher we found away to number the div to tell it how far back it was on the web page.
Finished home page with working links and roll over functions...
Moving to the other pages of the site...
Here is my packaging page (however, I made some small changes to the layout as I don't yet know how to add the arrows to change the image on view)
After receiving news that our deadline would be extended by two months I decided to try and implement the arrow functions I planned on my practice layouts. So I made this arrow shape but inserted it as a rollover image so that it would change colour as someone hovered their mouse over it.
The arrows take the viewer to other pieces of work under the same category of Packaging almost like a slideshow. So the arrows take the viewer to a new web page (as I didn't know how to change the image in view). Here you can see the arrows on either side of the page (the mouse is currently hovering over the arrow on the right) This gives the user more content to view in a more interactive way than scrolling down a very long page to view all of the work under the "Packaging" category for example.
Here is that same page finished with the description bubble.
I then had to implement this same design across the pages I had already made.
I then added the arrows to my new pages to continue the design.
I then added more pages for the "more+" category so that as the user clicked through the arrows there would be more content to view...
And again another piece of work for the "more+" page.
For my contact page I wanted to have a really fun and interactive way for the user to contact me. I made my own social media icons that when clicked will take the user to the website they can contact me by.
Here is my contact page with all of my icons (the mouse is currently over the 'P' button (Pinterest) as the circle now white with the icon in red.
I didn't have any other content on this page so I removed the arrows to not confuse the user. I then did the same across all of my web pages.
I made an initial about me page that mimics the design in my plan. (I will be adding legitimate details and a photograph)
I decided to remove this feature to make it more professional & give the user an easy guide of what my skills and qualifications were. I came up with the idea to have the same circular icons as my social network ones but with the qualification/skill - For the softwares I colour coded them by what the application's logo is...
After I had seen that a few of my classmates were also doing this I decided to add a bar feature that shows how confident I am with each of the software applications.
