Converting a Bootstrap 2 page to Foundation 5

Closed - This job posting has been filled and work has been completed.
Web, Mobile & Software Dev Web Development Posted 1 year ago

Fixed Price

Delivery by May 10, 2014

$150.00

Budget

Details

I need a very experience programmer to help port a page so it functions using Foundation 5's framework on a concrete5 CMS page.
here is the old page
http://skywaydesignstudio.com/index.php?cID=155
here is the new page
http://skywaydesignstudio.com/index.php?cID=185

as you can see, foundation, all the scripts, and css files should be correctly linked.
there are references to superscrollorama, scrollspy, and easing.

the main thing that needs to be done is to get the HTML structure similar to the old version, and to go through the custom.js to see if any names need to be updated. the offcanvas.js/css can be ignored, and rather plugged into foundation's own version.

i've included all the JS files, but if you can use magellan vs. scroll spy, and anything else that foundation offers, what ever makes the project easier.

the ideal end result is to get the site put together so it works, i'm not the most experience UX programmer so if you see a function going about something in a roundabout way, just assume that it's a hack and do what works best for you. as long as the page stretches full screen, i can use concrete5 to add more slides, the menu comes off canvas, and there's parallax, i'm happy!!

Additional Project Description:
04/04/2014 at 16:30 ICT
thanks for those with a quick reply! so i just want to confirm with anyone bidding, that they are clear that even the page listed as "old page" has issues not found on the original starting point , which is this theme.
so please make sure you can preserve the text and scroll animation, and that the layout remains beautiful and full screen across media.

http://longstoryshortparallax.15robots.com


also, good to note, is that i wish for the push menu icon to be visible even in full screen size, not just for mobile.
ideally this project will be finished in 1-2 days, so i can put content on sunday.

thanks again for the interest, i look forward to working with you.

04/05/2014 at 10:12 ICT
DETAIL SPECS -please read

the overall feeling desired is like:
http://jswebtech.com/projects/alomar/

the original Theme
http://skywaydesignstudio.com/index.php?cID=155
adapted from
http://longstoryshortparallax.15robots.com/

and foundation5 has been installed on this page
http://skywaydesignstudio.com/index.php?cID=185



WORK TO BE DONE:
Navigation:
2 types of navigation: one is for front page only -
NAVI 1 is slides 1-x (controls per block/stack added)
NAVI 2 is other pages in concrete5, and this is added by AJAX plugin in for concrete5.

navigation working like this:
http://www.iamfredfocus.com/
notice in the beginning, the “slide 1, 2, 3, 4” appear centered below the logo,
then use an AFFIX/magellan interaction to turn into a top bar.

off canvas toggle button is there in the top left always.

SLIDE 1:
NAVI 1 is floating on the first slide with parallax effect when scroll
and become “affixed” once we pass slide 1.
a white bar appears from top , and the mini-logo is centered in the middle of the bar.
the function “‘.$blockName.’” is removed or hidden from inside the
so all there is is 4 dots inside the menu bar. simple, much like a image carousel.
the off canvas menu is still visible always, now inside the bar as well

SLIDE 2:
USING STACK - ABOUT
the three paragraphs should actually be side by side, with gutters.
in the original concrete5 theme “long story short parallax”
you could load 3 blocks, and assign bootstrap class span4 to each one.
probably the core feature needs to be updated to Foundation Grid.

OFFCANVAS:
a copy of the NAVI 1 resides there already.
below that is an auto-nav block, and a login block that may need a CSS adjustment to match
also there is the AJAX repaid page loading. please keep in mind to set the appropriate CSS selectors
so the pages load with AJAX.

the off canvas menu behaves exactly like the
foundation.zurb.com , simple elegant. and works on mobile.

note: the other pages in concrete5 i will be loading through AJAX are mainly photo galleries, and other blocks,
there will need to be a bind function assigned to the isotope sorting of the front page gallery in case someone goes back to front page.


Isotope Filter (portfolio section):
USING STACK - FOLIO
/packages/dojo-page filter pro
page list block templates, one acts as a menu selector for categories,
one acts as the isotope grid.
this section, please make the isotope items fluid, so that they resize as well as reorganize.

also i use /packages/tony_popup
to load videos and media galery inside a modal window
right now, as you can see the sorting is not working properly yet, and of course the popup is not working because of the class changes.


About the Client

(5.00) 2 reviews

Vietnam
Thanh Hoa 05:42 PM

16 Jobs Posted
25% Hire Rate, 1 Open Job

$333 Total Spent
4 Hires, 0 Active

Member Since Jan 18, 2014