Thirty for Thirty

The client (a family member of the developer) participated in a 30-day challenge on Facebook a few years ago. They wanted to do it again next year (2020), but the original promoter of the challenge has since moved on to other things and is no longer running it. So the client decided to run their own challenge.

The idea is to encourage people to create/design something different every day for 30 days during the month of April, 2020. The goal is to help inspire creativity and showcase the talents of people around the world.

The clients primary means of reaching and interacting with people is via social media, but they thought a website would be nice to have as well. Since there was no budget for the project, this was a pro bono site done as simply and easily as possible. Backdrop was therefore a natural fit.

The site uses a one-page layout for it's modern feel, simplicity and lack of text-heavy content. A single content type (Section) provides the interface for creating each part of the page. In addition to the default Title field, it includes a Body (for the text in each section), Image (for the image associated with each section (be it in the foreground or background), and Menu Item (for the short text used as the link in the header to each section). A custom view then provides the page and menu itself. The Page display outputs the fields for each section, while custom views template files theme them appropriately (e.g. displaying the image field of one particular section as the background image and outputting the Menu Item field as a CSS ID). The Menu display outputs a block with an HTML list of URLs that link to each CSS ID (e.g. '#section'). This block is displayed in the site header as the main menu.

The following modules/functionality also help enhance the one-page experience, and the site in general:

• One-Page Navigation
  This module was written specifically for this site and then contributed to Backdrop. It provides smooth scrolling up/down the page when clicking on the menu links, and also makes each menu link 'active' when that section is scrolled into view.
• Sticky Nav
  This module allows the header of the site to remain at the top of the page when scrolling. Since it adds a class to the header when it's sticky, it allows custom theming of the sticky header (in this case, shrinking the size of the header to take up less vertical space). CSS transitions complete the effect nicely.
• Parallax Background
  While not necessary for a one-page site, this module provides a nice parallax effect for the section with the background image.
• Instagram Feed
  Since social media is a big part of this project, the client wanted feeds from both their Facebook and Instagram accounts on the site. Facebook was easy (provided by the Facebook Page Plugin module), but Instagram proved more difficult... Since Instagram recently changed their API, the existing Instagram Block module for Backdrop didn't work (and the Drupal version from which it was ported has been deprecated). The new Instagram API seems overly complicated for simply displaying a feed of images on a site, so this module was written specifically to address this use case. It uses the jQuery Instagram Feed library to provide a simple and easy feed with no APIs or authentication needed.

Additional functionality was added via a custom module (not contributed to Backdrop, though maybe in future) which adds the 'typing' effect seen in the hero block and the mobile navigation for smaller screens/devices.

The longest part of building a website is the theming. Because this site was a freebie, the client agreed to use Backdrop's default theme, Basis. A custom sub-theme was created to allow changing colours, override template files, etc., and the end result is a site that looks nothing like default Backdrop but also didn't take a lot of work to theme.