Project 5 – Professional Practice – My own Portfolio

After I had done the research on different portfolios and individual project pages, it was pretty clear to me what I wanted:

The portfolio landing page was to be a 3 column/unlimited rows of screenshots with a 2 line short description. To link all screenshots together, I wanted black and white images that changed to colour on rollover. and when clicked linking to the individual project page.

For the individual project pages I wanted a reasonable sized slideshow on the right of the page and on the left a short introduction with a link to read more, a testimonial if available and a bullet point list of the services that were provided. When clicked on the ‘read more’ link, the slideshow would give way to more information about what the client asked for, what I did and the result. At the bottom of the page, small thumbnails linking to the other projects, in black and white with a colour rollover.

The reason I wanted it to look that way is because I thought it would be aesthetically pleasing with the emphasis on visuals which would entice people to click to find out more and not making them read lots of text if they didn’t want to. I also think it is easy to navigate by having links to all projects at the bottom.

Here is what I did:

PEELING SHADOW


On my Tutorials page where the blog excerpts are shown, there is a shadow effect that looks like the page is peeling.
I want to keep this consistency and show the same ‘peeling shadow’ on the portfolio page’s screenshots and on project page’s slideshow and thumbnails at the bottom.

SPEECH BUBBLES

For the testimonials I ended up finding a great way to make speech bubbles in CSS and gave this a peeling shadow too. The speech bubbles are made by adapting the code from this page: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
I won’t paste all of the CSS code here because it was quite a lot, but I will explain what I did: Using Firebug in Firefox which can change css in the page, I selected to inspect the speech bubble code pasted straight from the above website. By changing colours and backgrounds in Firebug, I was able to figure out which bits of code corresponded to what part of the speech bubble, which is how I managed to both change it and add the shadow.

The original speech bubble and my one customized with CSS and a shadow image

This is what I found:

  • .rectangle-speech-border:after is the left border of the triangle
  • .rectangle-speech-border:before is the right border of triangle – (I had to give this a background to give the point of the speech bubble to have a colour AND gave :after the same background as the body, or else it didn’t look right)
  • .rectangle-speech-border is the speech bubble itself
  • .rectangle-speech-border > *:first-child:after is the part of the speech bubble where the triangle attaches (so you want to hide this by giving this background a colour the same as the speech bubble background)
  • .rectangle-speech-border > *:first-child:before is the point of the triangle (this background should be the same colour as the border, or if no border, the same as the background of the speech bubble)

The peeling shadow is an image, which I added in the html code right after the speech bubble. then in CSS Igave this image a z-index of -1 making it go ‘under’ everything else and used position:relative to position it under the speech bubble. I used the selector ‘bottom’ rather than ‘top’ so that it would be the same distance from the bottom of each speech bubble, regardless of how much text was places inside the speech bubble. This is the css result for the shadow:

/*Speech bubble shadow positioned under the speech bubble using z-index*/
div.project-left img{
    bottom: 40px;
    left: 10px;
    position: relative;
    z-index: -1;
} 

ROLLOVERS

adding rollover images in DreamWeaver

The rollovers of both the portfolio page and the thumbnails in the project pages, was made in DreamWeaver. The colour images were made to size and saved in Photoshop , then changed to black and white and saved again.
In Dreamweaver I created a new site, with an HTML page and separate stylesheet. I started with creating a div that would house the project’s screenshot, I do this in a div, so that I can attach the peeling shadow to each individual screenshot, which is css taken from WordPress’s ‘Press This’ button (see my post …. ). If I didn’t use a div and tried to attach the shadow to the img, it would not show the shadow, because the :after and :before do not do work unless attached to a div.
I styled the div in the style sheet with a width of 310px and float it left so that all the images will neatly stack up next to each other.
I copied and pasted 9 of these divs and within each div I clicked on Insert/Image Object/Rollover Image from where I browse to the image I want as the original and the image I want as the rollover/hover, I also add the link to the project page using relative paths.
All the images are located in the ‘images’ folder within the new site I created.

After adding all the project screenshots, I copy all images to my website’s images folder, copy the javascript code within the head of the DreamWeaver and paste this into my theme’s head and copy the CSS from the style sheet and paste this into my theme’s CSS area. Lastly, I copy the HTML code in the page, and paste it in my WordPress portfolio page. I had to add a trailing slash before each ‘images/blabla.png’ like so: ‘/images/ blabal.png’ because DreamWeaver does not add the slash and in WordPress the slash is needed for it to work.
Luckily, it all looked how I wanted it to look and the rollovers worked perfectly! I then added the text introduction, carefully making sure that it did not exceed 2 lines so it all looked the same.

SLIDESHOWS

The deafault 'Noble' slider

In the Project Page, I added a slideshow using WOW-slider, software that I have purchased and works together with a free WordPress plugin.
There are many looks to choose from, but I liked a combination of two: One called ‘Noble’, that has neat little squares at the top, lovely next and previous buttons and subtle grey tones and a white opacity caption bar. and another called ‘Noir’ which has a nice peeling shadow underneath both corners, that is similar to my CSS shadow.
I chose the ‘Noble’ slider and by using Firebug I could see that each slider had a ‘ws-shadow’ div, even if there was no shadow. I created a ‘Noir’ slider, copied the CSS for the .ws-shadow and copied the shadow-image to my images folder. When I inserted the CSS into my theme, my lovely Noble slider had shadows. I then erased half the

The deafault 'Noir' slider

shadow in PhotoShop, so that only one corner was ‘peeling’ , consistent with the rest of my website (I used the same image for the speech bubble).
However, I did not like the title being a third up the page so I used Firebug again to find out what was pushing it up and changed it. I also changed the opacity because I found the captions difficult to read. Finally I decided I wanted a small border around the slideshow to set it off against the grey noise background in my website.
I ended up with the following CSS in my theme’s CSS inserts:

My CSS adapted 'Noble' slider wit 'Noir' shadow

 .ws_shadow {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("/images/shadow.png");
    background-origin: padding-box;
    background-position: left 100%;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.ws_shadow {
    bottom: -4%;
    height: 4%;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: -1;
}
.ws-title{
	bottom: 0% !important;
	width: 602px;
	opacity: 0.9 !important;
}
.ws_images {
    border: 1px solid #FFFFFF;
}

SWITCH SLIDESHOW TO TEXT

The last thing I needed to figure out, was how to get the slider to make way for text, when the ‘read more’ link was clicked.

I searched for some JavaScript/Jquery on Google and found a script called ‘switch class’ here: http://www.jqueryui.com/demos/switchClass/
This uses some JavaScript code which switches the class of your div.
I copied the example code into my page and copied the scripts into my theme’s head. initially it did not work, but after I double checked, I realized not all the code had been pasted into the head and when I rectified it, the classes were switched.
However, the example code was a div with text, and the different class was given styling of a different line height, but the text remaining the same. I needed to switch a completely different div. I looked at the code for 45royale’s project pages (from my research, who gave me the idea of swapping the slideshow for more information) and saw they had a div with two different classes: the slideshow, and the text, initially set to display:none; in the CSS.
So I tried to do the same: I used the same names and div’s of the example:

 <div id="effect" class="newClass ui-corner-all"> and <div id="effect" class="anotherNewClass ui-corner-all">  

both within a div called ‘toggler’ (taken from the jQuery example)
in the class ‘newClass’ I added the slideshow and in ‘anotherNewClass’ I added the text. in my CSS inserts I gave the ‘anotherNewClass’ a display:none and amazingly: this worked!

HOMEPAGE NEW MENU

making the menu bevel in PhotoShop

I also had to change the home page of my website. In the previous project I had added a letterpress menu of the ‘About’, ‘Blog’ and ‘Contact’ pages. I added ‘Services’ and ‘Portfolio’ in PhotoShop, using tracking and leading and different font sizes, to make it fit into a ‘square’.
I also decided that I wanted a rollover effect to emphasise that it is a navigation menu. For the rollover effect I made the menu blue and used bevel and emboss to make it look pressed ‘out’ rather than ‘in’. I then copied the whole menu to a new image, deleted all the effects and pasted each menu item in using ‘paste in place’. This made them all be in different layers that I could switch on and off.

The menu end result (with the cusor hovering over 'Tutorials')

This allowed me to save the menu as letterpress, and then each individual items with bevel.
I then used DreamWeaver to create hotspots and used the behavior panel to create a rollover image. and copied the code into my homepage and the javascript into the head of my theme.
I didn’t like the grey I initially chose, so I changed it to blue to make it stand out more and make people aware of the menu, and made the bevel orange, keeping the colours consistent with the header colours.

SERVICES PAGE

Apart from all the above styling, I have also written a Services page, going a little more in depth to what services I can offer people.

Have a look at the end result here: my newly finished website on Web Design in Brighton

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>