See above for breakdown of final project (the overall vision – probably not all executable by Thursday) including concept, precedent, process, wire frame and speculation on classes to use for coded component.
My main challenges were two fold, and probably related: Understanding positioning and keeping my code organized. I could probably have figured out my positioning trouble if I had organized my code better. Similarly, I could never get my margins/padding/borders to work like I expected them too – they always ruined my positioning/alignment. I think my plan for the final is to work through my wire frame in more detail assigning vw/vh values and margin values so that everything adds up and lines up and it will be less overwhelming when things start to not work because I will have a written plan.
- Text meant to only appear after a keyPressed selection is all appearing at the jump
- Would like to be able to expand or contract canvas size based on keyPressed selection as well
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.
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.
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.