Please swipe to the left to go forward or to the right to go backward.
In the first half of our Digital Design class we were required to make a PSD mockup of a website. We had to make 3 pages, all belonging to that website.
In the second half of our course, we had were challenged to convert the PSD file to an HTML5 website, using CSS3.
This was my first time coding a website from a PSD photoshop mock-up. Some of the features and functionalities that I wanted the website to have could not be expressed in an image, such as the hover effect shown on the left. To achieve this effect using the jQuery displayed below, CSS styling and a useful tooltip plugin.
$j = jQuery.noConflict();
$j(document).ready(function(){
$j("div.item").tooltip();
});
$sh = jQuery.noConflict();
$sh(document).ready(function(){
Shadowbox.init({
overlayOpacity: .8
});
});
For the "About Me" page, I wanted to try something different so I decided to create an infographic without using images -- it would all be CSS and SVGs (except for the first image).
This was challenging, but made possible by the new CSS transform properties where I could skew the position of a div and change the angles of it.
Here is an example of the CSS:
#blackborder, #box2, #whatiknow, #box4 {
background-color: #000000;
color: #FFFFFF;
height: 89px;
margin-top: 285px;
padding: 4px;
transform: skewY(-5.8deg);
width: 602px;
}
For the portfolio page, I wanted a simple way to showcase my previous work without taking the visitor to a new page. I did this by using a plugin called Shadowbox. It creates a modal window using Javascript and Jquery, and displays a larger picture when you click on the icon. If there are multiple images associated with a thumbnail, the visitor can go through them using the arrows provided.
Feel free to head over to mockup website to see it in action.