Add avatars and make about page two-column

Author: jnewbery

_data/associates.yml

@@ -0,0 +1,31 @@
+## When putting either quotes or exposition into the same types of
+## slots, ensure quotations are displayed surrounded by quotes marks to
+## differentiate the two types of information
+associates:
+  -
+    name: John Newbery
+    role: Director & Engineer, Optech
+    other_affiliation: Developer, Chaincode Labs
+    github: jnewbery
+    avatar: https://avatars1.githubusercontent.com/u/1063656?s=400&v=4
+  -
+    name: James O'Beirne
+    role: Engineer, Optech
+    other_affiliation: Developer, Chaincode Labs
+    github: jamesob
+    avatar: https://avatars1.githubusercontent.com/u/73197?s=400&v=4
+  -
+    name: Steve Lee
+    role: Project Manager, Optech
+    github: moneyball
+    avatar: https://avatars0.githubusercontent.com/u/326147?s=400&v=4
+  -
+    name: David A. Harding
+    role: Contributing Technical Writer, Optech
+    github: harding
+    avatar: https://avatars1.githubusercontent.com/u/61096?s=400&v=4
+  -
+    name: Marcin Jachymiak
+    role: Engineer, Optech
+    github: marcinja
+    avatar: https://avatars1.githubusercontent.com/u/12243734?s=400&v=4

_includes/associates.html

@@ -0,0 +1,18 @@
+{% assign associates = site.data.associates.associates %}
+
+<div id="associates">
+
+    <ul class="associates two-column-list">
+        {% for associate in associates %}
+        {% assign avatar=associate.avatar %}
+        {% unless associate.avatar contains 'https://' %}{% capture avatar %}/assets/images/team/{{associate.avatar}}{% endcapture %}{% endunless %}
+        <li>
+            <img src="{{ avatar }}" class="bio-photo" width="150" height="150" alt="{{ associate.name }}" title="{{ associate.name }}">
+            <h3 itemprop="name">{{ associate.name }}</h3>
+            <p>{{ associate.role }} {% if associate.other_affiliation %}<br/>{{ associate.other_affiliation }}{% endif %}</p>
+            <a href="https://github.com/{{ associate.github }}" class="author-github" target="_blank"><i class="fa fa-fw fa-github-square" rel="nofollow"></i>GitHub</a>
+        </li>
+        {% endfor %}
+    </ul>
+
+</div>

_layouts/page.html

@@ -0,0 +1,16 @@
+---
+layout: default
+---
+<link rel="stylesheet" href="/assets/css/main.css">
+
+<article class="post">
+
+  <header class="post-header">
+    <h1 class="post-title">{{ page.title | escape }}</h1>
+  </header>
+
+  <div class="post-content">
+    {{ content }}
+  </div>
+
+</article>

about.md

@@ -5,29 +5,4 @@ permalink: /about/
 ---
 Principles and associates of Optech:
 
-- **John Newbery**
-  <br>Director & Engineer, Optech
-  <br>Developer, Chaincode Labs
-  <br>[GitHub][jnewbery github]
-
-- **James O'Beirne**<br>Engineer, Optech
-  <br>Developer, Chaincode Labs
-  <br>[GitHub][jamesob github]
-
-- **Steve Lee**
-  <br>Project Manager, Optech
-  <br>[GitHub][moneyball github]
-
-- **David A. Harding**
-  <br>Contributing Technical Writer, Optech
-  <br>[GitHub][harding github]
-
-- **Marcin Jachymiak**
-  <br>Engineer, Optech
-  <br>[GitHub][marcinja github]
-
-[jnewbery github]: https://github.com/jnewbery
-[jamesob github]: https://github.com/jamesob
-[moneyball github]: https://github.com/moneyball
-[harding github]: https://github.com/harding
-[marcinja github]: https://github.com/marcinja
+{% include associates.html %}