Navigation and Portfolio Planning

    A website is nothing without navigation and buttons. In today's session I added links to my navigation bar, and added some styling to make them pop a bit more.

My lovely navigation buttons in all their glory

    I already had the navigation in my website from last week, using un-ordered lists and the "display:inline-block" CSS styling to get the buttons horizontal, rather than vertical. From here, I added in links to external sites, and also added an internal link. The internal link is found on the final nav button 'Contact', but it just links to the bottom of the page. This is done by giving the destination of the link " tags, and then the link text on the contact button looks like this: "". The # symbol is the key to linking internally on a single page.

    When you make something a link, the browser gives it default styling, usually a purple colour and an underline. I didn't like this, so I changed it. I removed the underline, changed the colour, and also gave the text a drop shadow. The drop shadow really makes the text stand out, and makes it look like a button, which communicates to the user that it's a clickable link. To make this effect even better, I added an "a:hover" style, where the drop shadow inverts when the user hovers the cursor over the text. This gives an effect of the text being pressed in to the page, and again emphasizes that it's a button.

    This site is my portfolio. In it's current state, I don't like it. Luckily, today we were tasked with creating a proper plan for our portfolio. I sketched out a template, and annotated the sections with what they will include and some key features of each section. I am going to have a big image or video on my landing page, which will take up the full width of the screen, and this section will cycle through a number of images, dependent on how many projects I have completed. When scrolling down, each project will have a bit more time and space dedicated to it specifically, followed by sections such as About Me, or Contact/Social. These sections will all contain links to full pages, which will have images, text, videos, just more content for each area of the site. I think this will give a good overview of my work at a glance whilst scrolling, but also gives the option for any user to click onto a page if something in particular catches their eye.

A revised layout sketch of my portfolio website

    I would like to include interactive elements in my site, I even thought of presenting the entire thing as an old school text adventure using Javascript, but the main problem I saw this creating is that my site wouldn't be easy to navigate. I don't want prospective employers to get turned off from my site because they cannot find what they want. If I can design the text adventure in a way that makes it easy to figure out, then I'd love to implement that idea. The other solution would be to have the text adventure alongside the regular site, so that if people just wanted to get to the information then they could do, but this would essentially mean developing two sites, and I think it would be better to absolutely nail one site rather than get two sites kind of right.