Portfolio Website

Header of portfolio website

header

The Header of my website contains the main logo of the site, which I created in photoshop, using a custom typeface which I also used for the splash page menu. I added the bevel and emboss effect and a gradient overlay to give it a metallic look. I like the blue tint and it fits in well with the space themed background and the overall design of the page.

Jquery roundabout

jquery roundabout

I used this jquery roundabout to section off different categories from one another. I feel that this is effective because it doesn’t group all of my work together and each section focuses on a specific aspect of design. I didn’t like the idea of having all of my designs on one page and the user having to scroll down the page to see different categories, so I created a separate page for each category and used the images in the roundabout as links. The download of the plugin contained css and javascript documents which I had to connect to in html in the head section. I customized the css and javascript pages to make the plugin fit into the ‘mainbody’ div in html. Elements I customised in css were the size of the images and the space in width and the amount of space they had in between one another, I also changed the opacity of the image in the background so it didn’t interfere with the image in the foreground. I had to alter the css until all the images were level with one another, this did take some time to make the plugin look right. In javascript I changed the ’tilt’ which altered the way in which the images moved, I also enabled the images to change automatically instead of having to click on the left or right images to make the roundabout move.

In the future I would like to write my own javascript code from scratch but this gave me a better understanding of what javascript and css can do and how they work together and what someone can do with jquery. This has helped me to come up with ideas that I would like to work on in the future, and has given me a better understanding of css javascript and jquery.

Advertisements

JQuery Plugins

Recently I have added some Jquery plugins to my website to glam it up a bit. I researched different plugins a lot and looked at many different examples before I selected what I thought would be most useful for my site. I find the JQuery plugins useful because they show me the possibilities of Javascript and provide me with knowledge on writing in Javascript.

I have used two plugins for my site, firstly I used Roundabout by Fred LeBlanc (http://fredhq.com/projects/roundabout/) to showcase the different categories of my portfolio. I liked this plugin because it was easy to personalise and fun to mess about with.

The other plugin I used was the Jquery lightbox ‘fancybox’ (http://fancybox.net/). This serves two functions on the site, firstly it enlarges my portfolio images and secondly the lightbox allows the user to look through every piece of work like a gallery so they can browse images by pressing left or right on the keyboard and looking at large examples of my work instead of having to scroll down the page and look at small pictures.

I had to connect to a number of sources in my html including css pages (link href=) and jquery and other javascrit document (script src=).

Portfolio Update

Last week I started working on my Portfolio site, my splash page is based loosely around the retro 80’s game ‘Simon’ –http://en.wikipedia.org/wiki/Simon_(game). The idea came to me when I was walking home and felt I wanted the site to have a retro feel to it. The coloured sections inside the circles are links to other parts of the website. When the mouse icon rolls over them they will light up, like the simon game. This is done using javascript and I’ve used the same image rollover for a previous website design. I have created this design in photoshop and have used css to align the images on to the grey circular base. This has helped me to become more familiar with css as I had to find out how to make the divs go over one another, which is the z-index attribute. It still isn’t 100% finished and needs some touching up done to it but I feel that I will be satisfied with the final product.

simon