Logo
30 Oct 2017 | 2 min. (340 words)

Lischana Lane Photography Portfolio

Lischana Lane Portfolio

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.

Hugo

Hugo

Similar to this blog site, lischana-lane.co.uk is built with a static site generator, Hugo. You can read more about Hugo in a previous blog post:

https://curtistimson.co.uk/post/cms/moving-wordpress-hugo/

Hugo Theme

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

Unite Gallery

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.

Twitter

Lischana Lane Tweet

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 config.toml file.

To do this a new NodeJs application was created and deployed to Heroku in order to return the latest tweet in JSON format:

https://lischana-lane-tweet.herokuapp.com/latest-tweet

This NodeJs application is available as a public GitHub repository, nodejs-twitter if you would like to make use of it yourself.

Lastfm nowplaying

Lischana Lane LastFm

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:

https://github.com/curtiscde/lastfm-nowplaying

It’s also available as a node package:

npm install --save lastfm-nowplaying

GitHub

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!

https://github.com/curtiscde/lischana-lane

project hugo lastfm twitter nodejs heroku
Twitter Facebook

AngularJs with Jest Unit Testing

Step-by-step guide on setting up AngularJs with Jest unit testing…

8 Useful Atom Packages

8 Atom Packages which are useful for front-end development…

Related Links

  • LinkedIn
  • Twitter: @curtcode
  • Stack Overflow
  • GitHub: @curtiscde

Stack Exchange

profile for Curtis on Stack Exchange, a network of free, community-driven Q&A sites
Follow @curtiscde

Recent Posts

  • Displaying latest posts on your GitHub profile
  • Using Codecov within a monorepo
  • Displaying Strava stats using webhooks & GitHub Actions
  • Filtering duplicate data points on Chart.js
  • Next.js Typerite Template Boilerplate
Theme Bleak by zutrinken Published with Hugo
Menu
  • Hugo
    • Hugo Theme
  • Unitegallery with Flickr / Youtube
  • Twitter
  • Lastfm nowplaying
  • GitHub