Repost - smaller scope - TopCoder-CloudSpokes Member Profile Page - Wordpress Theme Build

Welcome to TopCoder - CloudSpokes – Member Profile Page - WP Theme Build Contest.  We are building a NEW website from scratch and we now need you to convert provided Storyboard to responsive wordpress theme.
We want to leverage HTML5/CSS3 but we still need to support some older browsers. Feel free to use the HTML5 Shiv fix for Internet Explorer.
 

General Rules :

• Resources is provided in forum
• Update provided theme
• Please create new CSS and JS files for this template
• Please provide changelog for any changes (TCApi Plugin)
• Please visit http://docs.tcapi.apiary.io/ as reference JSON mockup and as API V2 reference
• Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly. Make sure you test on tablets and mobile phones too.
• Don't break any existing functionality
• Ensure you submission clear of HTML and CSS Validation error and warning
• Please leave any existing issues on provided UI Prototype, This prototype is being fixed by the winner
• Please use Mobile view is for portrait orientation of tablet device, and it should be fluid based on browser width
• Switching the orientation (from landscape to portrait or vice versa) will also switch layout to correct layout directly, without reloading page.  Example : http://www.cloudspokes.com/, http://bradfrostweb.com/demo/mobile-first/ and http://www.studiopress.com/responsive/ and provided Prototype
• Extend provided TC_API Plugin to add some PHP functions for new API Calls that will be described below
• Baseline URL : http:siteurl/member/{handle}, and please display Algo tab as default
• Current wordpress theme and plugin can display raw data, see http:siteurl/member-profile/?handle=iRabbit. you need to add rewrite_url so URL should be http:siteurl/member/{handle}
• Please use http://www.highcharts.com/demo/ for graphs or charts
• Scope is only on Member Profile, please call existing get_member_profile() function
• Splitting to child templates is recommended, and they will be loaded via get_template_part(). ie : page-member-design.php, page-member-develop.php, page-member-algo.php
• We're Using UI Prototype scorecard (not wp scorecard) no ensure this UI Prototype important thing and should work fine

Entire Template
- Please use existing header and footer, and also menus
- Photo should be displayed automatically based on handle. see how header.php display photo
- Add new 'Develop' button between 'Design' and Algorithm'. there is no storyboard for this 

Design Tab :
URL : http:siteurl/member/{handle}/?tab=design
- API : http://tcapi.apiary.io/v2/design/statistics/{iRabbit}
- Please see http://studio.topcoder.com/?module=ViewMemberProfile&ha=abedavera as reference
- Slideshow should work fine with smooth animation and should support touchswipe on mobile view. Big image above slideshow is as the preview. there is no API for now, so provide your own mockup API. This slideshow will be similar to http://demo.tutorialzine.com/2010/07/making-slick-mobileapp-website-jquery-css/mobileapp.html
- Please grab badget cabinet functionality from http://studio.topcoder.com/?module=ViewMemberProfile&ha=abedavera. Just assign "selected" class then badget should be displayed
 

Algorithm  Tab :
URL : http:siteurl/member/{handle}/?tab=algo
- API : http://tcapi.apiary.io/v2/data/srm/statistics/{handle}
- Please see http://community.topcoder.com/tc?module=MemberProfile&tab=alg&cr=15050434 as reference
- Please grab badget cabinet functionality from http://community.topcoder.com/tc?module=MemberProfile&tab=alg&cr=15050434
- Switching from  table view to chart view should be by JS (show/hide)
- Mobile view : donut chart can be swiped to slide in tables detail, see storyboard
- Mobile view : line chart (graph) has horizontal scrollbar
- There are other 4 tabs below stats, link them to dealink for now

Develop Tab :
URL : http:siteurl/member/{handle}/?tab={contesttype}
There is no storyboard for this, but this page will be similar to http://community.topcoder.com/tc?module=MemberProfile&tab=assembly&cr=15050434
- Please just hardcode everything in template, without calling mockup API
- Please reuse Algo tab style, but remove donuts chart, and table should contain submission statistics
- Please also Provide dummy line chart
- should also support mobile view, please reuse Algo table style

Graph :
- Please download demo version and we also recommend you to download API wrapper with PHP. We've tested it and it works fine

Forum Feed :
- This area should be should be called via get_template_part() wordpress function
- Please provide your own mockup API files for now, and should support pagination via AJAX or JS. your own mockup API URL should be defined in <head> tag so it can be easy to swap later

 

Specific Wordpress Requirements

In addition to following Wordpress standards and best practices, please note the following requirements.

• General Requirement - Do not break or override any of the standard Wordpress features. If you need to, please explicitly explain in your submission.
• Make proper use of the Wordpress Menu system.
• Do not hardcode settings/config in the template code. Please create a "Theme Options" panel for configuration settings.
• Use sidebars when appropriate. We should be able to add widgets to sidebars.
• Use Widgets when appropriate. We'd like to avoid doing a copy/paste to include the same functionality in multiple templates/pages.

 

Specific HTML/CSS/JavaScript Requirements

• You MUST use HTML5 and CSS/CSS3
• Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
• No inline CSS styles - all styles must be placed in an external stylesheet.
• Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
• Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent).
• Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
• Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
• Current website code has some inline CSS, please move them to external CSS file.

JavaScript Libraries/Plugins

JavaScript libraries already used in the current site can be used in this contest too. New ones need to be proved by client first.

Browser Requirements

• IE 7+
• FF 7+
• Safari 5+
• Chrome Latest
• Chrome / Safari