Web Homework – Day 4

I’ve updated the code to have some “pizzazz” as requested with some animations. Hover over the bio, my picture, or the portfolio pictures to see them in action.

Github URL:

https://github.com/jwoa/WebHomework4

Homework Day 3

Hey here is my homework for day three.

 

I cleaned up the code and used clearer class and div names for positioning:

https://github.com/jwoa/WebHomework3

 

I drafted up a wireframe in my notebook and then went on to mock it up in Sketch.

Bootcamp Website Mapping with Details/Movement Plan

 

Call outs:

Nav Menu in upper right is single block with words appearing beneath on mouse over: About, Projects, and Contact

Title adds a bounding box with mouse over

Social icon (linked in only) doesn’t move

Main project blocks descend one appearing from underneath another as the page loads

The small of the two sub divs will have a second one hidden. It slides out from under the IMG to cover the Project title. It could be a second image or a description.

Call Outs:

 

Content blocks on product and about pages move same as above on open

Two blocks spread out and make room for a third in the center when mouse over one of them – a detail image or description related to the corresponding content block. Single image will be format for all in most cases.

Related projects get a slightly transparent overlay with another image or title or both when moused over. As is they show a single image with now title.

Inspiring Portfolio Sites

https://www.cedricpereira.com/

https://fabianirsara.com/

https://www.graz.io/

 

I like these sites because they are interactive/responsive but they are not excessive about it. They display skills and their design aesthetic without distracting from the content.