About This Site

Here are some details regarding the different technology and techniques I use throughout this website.

Navigation

Produced with {if} liquid tags and a combination of individual front matter. Here is what my new (current) header.html file looks like:

<nav class="nav">
  <ul>
    <li><a class="{% if page.home %}active{% endif %}" href="/">Home</a></li>
    <li><a class="{% if page.about %}active{% endif %}" href="/about/">About</a></li>
    <li><a class="{% if page.photos %}active{% endif %}" href="/galleries">Photos</a></li>
    <li><a class="{% if page.blog %}active{% endif %}" href="/blog/">Blog</a></li>
    <li><a class="{% if page.contact %}active{% endif %}" style="margin-right:0" href="/contact/">Contact</a></li>
  </ul>
</nav>

And then the files for those pages have front matter that look like this:

---
permalink: /blog/
blog: true
title: Blog
---

The line blog: true meets the if condition that we made in our navigation code meaning that list item will have the active class applied to let site visitors know what page they are viewing.

Blog with Tags

I first began making websites with Weebly and that is what I used for my personal site until switching to Jekyll in 2015. One of the features that I liked with Weebly was that you can add tags to blog posts and then use them to sort blog posts by those tags. I didn’t do much writing with my previous set up but when I brought my site to Jekyll I knew I wanted to get in a habit of writing blog posts more often and I wanted to carry that system over as well.

After some research I came across this blog post by Esther Jun Kim and applied it on this website.

Photos

My photo gallery pages have two main components: the layout and the slider. To learn about the code I use to create galleries, read this.

CollagePlus.js

I really enjoy the layout that photo sharing sites such as Flickr and 500px utilize and I knew I wanted to use it as well. After researching scripts for "justified" layouts I came across PhotoCollage.js by Ed Lea. I was able to get this plugin up and running smoothly and quickly and I’m super happy with it and would highly recommend trying it first if you’re looking to do this kind of layout.

Swipebox.js

The other key to my gallery pages is Swipebox from Brutal Design. I use this as a lightbox/zoom feature to make a more full-featured gallery and it works great. Both of these plugins are already fully responsive.

Contact

Formspree

I wrote a simple HTML form and connected it to Formspree to collect the data. That’s all straightforward and farily simple but I wanted to mention that Formspree does in fact support select elements as well as checkboxes. I previously used selects but in this version I changed up the information I wanted to collect and now use checkboxes instead. The key to getting both of these to work is giving these elements name="your-name-here". Any form elements without a name basically get skipped by Formspree. I have not tested with any other form elements to report on those but I would assume that they all work the same way.

jQuery Form Validator

Form validation is very helpful and I do this through jQuery Form Validator. It is pretty simple and straight forward and available through cdnjs.


I code this site by hand using Jekyll. I use my www.domain.com for my domain services and the site is hosted for free using Surge.

Last updated: August 2018.

Thank you for reading! If you enjoyed this post, please feel free to share it.

More Posts