Portfolio website – development

In this blog I show few sketches which helped me to understad the structure of content in portfolio and contact pages.

portfolio page:

Layout, where content is split into 2 parts, where in frst one ( section#work_list ) is floated to left. This section contains extra jquery which opens its content when clicked, and show description of product. It helped me to achieve what I wanted.

Left navigation jquery downloaded from:

http://tympanus.net/Tutorials/FlexibleSlideToTopAccordion/index2.html

I made my own short version of html and css mentioned above, which helped to implement this jquery to my html code .

http://www.library.boristav.sk/tympanus/codrops.html

Second part of content ( section#slider ) is another jquery which is also implement into previous jquery, as outcome will be changed image on the  screen in slider section every time user change work list menu along with opening content (description of an item) it self.

Default jquery:

I just found out that this jquery doesn’t work when online.  Only on computer, but you can still have a look at code in source code view. how strange it is

http://www.library.boristav.sk/imgswitch/topnav.html

As my idea was, that in content of section#work_list will be along description also set of images which displays in screen on the left as slider.

Unfortunately I didnt manage to succeed in this task as jquery I have used has set width within jquery and this doesn’t  fulfill responsive design task.

http://www.library.boristav.sk/gallery/simple-silder-fade.html

Contact page:

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: