Portfolio page of xinteractionx
1140 CSS Grid jQuery Responsive Measure galleria.io tinycarousel backbone.js underscorejs
Fetch and render projects from Behance. KIM: if you want to add functionality to the app, you might want have a look at the Backbone extension from Behance. We decided against using it since we need to cache the json for projects anyway (limited number of calls allowed by Behance) and load them from file. It is therefore sufficient to use Backbone.
PHP script that fetches all projects on behance and writes them to a file called projects.json.
You want to call this script everytime the projects change on Behance.
If you serve the page through a web server (e.g. Apache), you can just point your browser to behanceUpdateScript.php.
Otherwise, type on a shell (terminal on Mac) the command php /path/to/behanceUpdateScript.php.
e.g. if your project is located in your home in a folder named Portfolio, you'd
type `php ~/Portfolio/behanceUpdateScript.php
Let a cronjob call this script on a regular basis. On Hostpoint, you'd install it as follows:
- upload your whole project (including behanceUpdateScript.php) to the server
- Log into the control panel
- Go to "Admin" > "Cronjobs Manager" and click on "Cronjob erstellen"
- To run it every 15 minutes, enter "/15" for m (minutes) and "" for all other time related fields; enter "php /pathToScript" for command, e.g. "php ~/public_html/behanceUpdateScript.php" if the project is located directly in public_html
- Click "Erstellen" If everything works, the script will create and fill projects.json when it is run the next time (which in above sample will be the next quarter of an hour). If anything goes wrong, the script will output an error message which will be emailed to you.
The styling done so far is very limited to nonexistant.
- works for 1140px or wider, but needs adaption for smaller screens. See the media query at the end of behance.css for a styling sample to make the navigation half the size.
- make sure previous/next buttons stay next to viewport and don't flow above/below
- make sure pager is displayed centered
Main issue here will be styling of the Galleria. I've added a theme to js/galleria/themes/portfolio where I added some basic styling. Note that the controls have a red background so you can properly see them.
- handle configuration of gallery in js/galleria/themes/portfolio/galleria.portfolio.js
- handle styling of gallery in js/galleria/themes/portfolio/galleria.portfolio.css
- note that you can use js/galleria/themes/portfolio/portfolio-demo.html while styling
- to replace the control icons, either change portfolio-map.png (looks like a sprite, keep controls in their respective place) or change using css
- jparallax
- curtain
- stellar.js
- Tutorial looks pretty similar to what we want
- could interfere with css3-mediaqueries.js (did when I tried to adapt the sample to 1140)
- One Page Websites tagged with: Parallax Scrolling
- Found only one example that is responsive as well: http://www.duluthtrading.com/site/components/last-pants-standing -> consider disabling effect with media queries
- 1140 used in other templates as well, e.g. 1140 Fluid Starkers WordPress Theme
- decide whether to work with pages or posts (from what makes sense in regard to information structure)
-
assume pages:
- make onepager: probably just adapt template to render all pages on one (see http://stackoverflow.com/questions/7023310/wordpress-display-all-pages-on-one-page)
- adapt template to only render what we need
- disable side-bar and comment box in page.php
- put fixedwrapper in header.php
-
assume posts: make categories for home/work/who
-