Recently I deployed a new version of a photography portfolio, lischana-lane.co.uk, and would like to share the various tools/components I have used to build this.
The base theme for the Hugo application is the Hugo Creative Theme. However this theme was customised to include some additional features, as listed below.
Unitegallery with Flickr / Youtube
The original Hugo Creative Theme had support for projects, however these followed a more blog post style format. Therefore this section was customised to provide support for Flickr albums and Youtube videos.
The front-matter in the project markdown files was customised to include a new
flickrId property which correlates with a Flickr Album for fetching the correct images for each project. These are then rendered to the DOM using Unite Gallery which displays the images in a dynamic, responsive collage. Unite Gallery has also added the full screen carousel feature.
Another customisation made to the theme was to add the latest tweet from the portfolio owner beneath the projects. Previously this was a static text area driven from the
To do this a new NodeJs application was created and deployed to Heroku in order to return the latest tweet in JSON format:
This NodeJs application is available as a public GitHub repository, nodejs-twitter if you would like to make use of it yourself.
The final customisation made to the theme was to include the portfolio owner’s latest played track recorded on Last.fm.
This was done by using the lastfm-nowplaying AngularJs module which is currently used on this blog site.
Like with nodejs-twitter, this is also available as a public repository:
It’s also available as a node package:
npm install --save lastfm-nowplaying
If you’re interested in learning more about this application you can view the source code on GitHub. Feel free to raise any issues you may find!