About

Tools

This site was built with Squarespace, my preferred CMS these days.

Specifically, I upgraded to version 7.1 which is now really just one template based upon sections and color themes and which makes it much easier to work with given that all of the markup for built in elements is consistent.

Sorcery/JS

The full screen slideshow on the homepage was achieved with Vegas.js, a high quality, free and well documented slideshow system.

jQuery

It’s not the hippest anymore, now that there’s React.js, Vue.js, Angular.js, et al, but jQuery is still pretty damn handy and is responsible for some of the other niceties of this site that would be prohibitive (mostly meaning I’d have to really devote time I don’t have to becoming an expert in a system that’s no longer being developed… ummm… nope!) to do with Squarespace’s built in and now deprecated YUI Library.

The Tricksy Scripts

I’d be remiss if I didn’t mention the invaluable javascript tools created by Michael Mashay at SquareWebsites, Admin tools, Lazy Summaries and Universal Filter, plus the Squarespace Websites Pro Chrome plugin which all make developing in Squarespace both much easier while extending the already powerful platform’s capabilities via it’s JSON API.

The typed text

https://www.typeitjs.com/

new TypeIt('#letsBuildSomething', {   strings: ["Let's build something beautiful", "Let's build something beautiful together!"],   speed: 100,   lifeLike: true,   breakLines: false,   waitUntilVisible: true,   afterComplete: function (instance) {     let element = instance.$e;     //-- Hide the cursor by setting opacity to zero.      var cursor = element.querySelector('.ti-cursor');     cursor.style.animation = "none";     cursor.style.opacity = "0";   } }).go();

Scroll to top floating button

Add the markup to a code block in the footer and style it:

<a href="#" id="scroll" style="display: inline;"><span></span></a>

// Scroll to top floating button
$(window).scroll(function(){
      if ($(this).scrollTop() > 100) {
          $('#scroll').fadeIn();
      } else {
          $('#scroll').fadeOut();
      }
  });
  $('#scroll').click(function(){
      $("html, body").animate({ scrollTop: 0 }, 600);
      return false;
  });