integrate founder bios into about page

_src/_assets/javascripts/page-about.js

@@ -0,0 +1,18 @@
+
+document.addEventListener('DOMContentLoaded', function() {
+    var trigger = document.getElementsByClassName('team__bio__trigger')[0]
+    var bio = document.getElementsByClassName('team__bio')
+
+    trigger.addEventListener('click', function(e) {
+        for (var i = 0; i < bio.length; ++i) {
+            var item = bio[i]
+            if (item.style.display == 'block') {
+                item.style.display = 'none'
+                trigger.innerHTML = 'Show bios'
+            } else {
+                item.style.display = 'block'
+                trigger.innerHTML = 'Hide bios'
+            }
+        }
+    })
+})

_src/_assets/styles/_page-about.scss

@@ -0,0 +1,3 @@
+.section--team {
+    padding-top: 0;
+}

_src/_assets/styles/bigchain/_grid.scss

@@ -135,9 +135,9 @@
         max-width: none;
 
         &.grid__col--1 { flex: 0 0 16%; }
-        &.grid__col--2 { flex: 0 0 33.3%; }
+        &.grid__col--2 { flex: 0 0 25%; }
         &.grid__col--3 { flex: 0 0 50%; }
-        &.grid__col--4 { flex: 0 0 66.6%; }
+        &.grid__col--4 { flex: 0 0 75%; }
         &.grid__col--5 { flex: 0 0 84%; }
         &.grid__col--6 { flex: 0 0 100%; }
     }

_src/_assets/styles/bigchain/_team.scss

@@ -3,7 +3,6 @@
 // ---
 // bigchaindb.com
 //
-
 .team__image {
     @extend .img--responsive;
     background: $brand-main-gray;
@@ -64,6 +63,51 @@
     }
 }
 
+.team__bio {
+    text-align: left;
+    font-size: $font-size-sm;
+    margin-bottom: 0;
+    margin-top: $spacer;
+    display: none;
+}
+
+.team__bio__trigger {
+    display: block;
+    text-align: center;
+    cursor: pointer;
+    padding-top: $spacer;
+    border-top: 1px solid $gray-dark;
+    margin-top: $spacer * 3;
+    margin-bottom: $spacer * 2;
+    position: relative;
+    font-size: $font-size-sm;
+    color: $gray;
+
+    &:before {
+        content: '+';
+        width: 2rem;
+        height: 2rem;
+        display: block;
+        position: absolute;
+        left: 50%;
+        margin-left: -1rem;
+        top: -50%;
+        background: $gray-dark;
+        color: $gray-light;
+        font-size: $font-size-lg;
+        line-height: 1.3;
+        transition: .15s ease-out;
+    }
+
+    &:hover {
+        border-top-color: darken($gray-dark, 5%);
+
+        &:before {
+            background: darken($gray-dark, 5%);
+        }
+    }
+}
+
 
 //
 // Grid redefinition: more spacious

_src/_data/founders.yml

@@ -0,0 +1,21 @@
+- name:     Bruce Pon
+  position: CEO
+  image:    team-bruce.jpg
+  twitter:  BrucePon
+  linkedin: ponbruce
+  bio: "Bruce Pon is the CEO and co-founder of BigchainDB. Prior to BigchainDB, Bruce co-founded Avantalion International Consulting, a consulting firm specialized in building banks and industry startups in Europe and Asia for companies such as Mercedes-Benz, Volkswagen, Mitsubishi. Bruce is a board member, advisor and investor in six startups. He has an Advanced Executive Certificate from MIT Sloan and a B.Sc in Engineering from the University of Saskatchewan."
+
+- name:     Trent McConaghy
+  position: CTO
+  image:    team-trent.jpg
+  twitter:  trentmc0
+  facebook: trent.mcconaghy
+  linkedin: trentmc
+  github:   trentmc
+  bio: "Trent McConaghy has 15 years of deep technology experience with a focus on machine learning, data visualization and user experience. He was a researcher at the Canadian Department of Defense and in 1999, he co-founded Analog Design Automation Inc. and was its CTO until its acquisition by Synopsys Inc. In 2004, he co-founded Solido Design Automation Inc., once again in the role of CTO. Trent has written two critically acclaimed books on machine learning, creativity and circuit design and has authored or co-authored more than 40 papers and patents. Trent has a PhD in Engineering from KU Leuven, Belgium and Bachelor’s degrees in Engineering and in Computer Science from the University of Saskatchewan where he won awards for the top PhD thesis and top undergraduate thesis."
+
+- name:     Masha McConaghy
+  position: CMO
+  image:    team-masha.jpg
+  linkedin: mashamc
+  bio: "Masha McConaghy, curator and researcher, is a co-founder and CMO at BigchainDB and ascribe.io, a service enabling immutable attribution for artists and clear provenance for digital and physical art. She has a PhD in Arts from Pantheon-Sorbonne University, Paris and a Museology Degree from Louvre School, Paris. She has organized exhibitions throughout the world and has worked with curators at the Louvre Museum in Paris and directed a commercial gallery in Vancouver. Her current pursuits are at the intersection of art, IP and applications of new technology."

_src/_data/team.yml

@@ -17,25 +17,6 @@
   twitter:  Zimmtstern_7
   linkedin: simonschwerin
 
-- name:     Bruce Pon
-  position: CEO
-  image:    team-bruce.jpg
-  twitter:  BrucePon
-  linkedin: ponbruce
-
-- name:     Trent McConaghy
-  position: CTO
-  image:    team-trent.jpg
-  twitter:  trentmc0
-  facebook: trent.mcconaghy
-  linkedin: trentmc
-  github:   trentmc
-
-- name:     Masha McConaghy
-  position: CMO
-  image:    team-masha.jpg
-  linkedin: mashamc
-
 - name:     Alberto Granzotto
   position: Developer
   image:    team-alberto.jpg

_src/_includes/founders.html

@@ -0,0 +1,58 @@
+
+<div class="grid grid--full grid-small--half grid-medium--third grid--gutters text-center grid--founders">
+
+    {% assign founders = site.data.founders %}
+
+    {% for member in founders %}
+    <div class="grid__col">
+        <article class="team">
+            <img class="team__image" src="/assets/img/{{ member.image }}">
+            <h1 class="team__name">{{ member.name }}</h1>
+            <p class="team__position">{{ member.position }}</p>
+
+            <p class="team__social">
+
+                {% if member.twitter %}
+                    <a class="team__social__link" href="https://twitter.com/{{ member.twitter }}">
+                        <svg class="icon icon--social icon--twitter" aria-labelledby="title">
+                            <title>Twitter</title>
+                            <use xlink:href="/assets/img/sprite.svg#twitter"></use>
+                        </svg>
+                    </a>
+                {% endif %}
+                {% if member.facebook %}
+                    <a class="team__social__link" href="https://facebook.com/{{ member.facebook }}">
+                        <svg class="icon icon--social icon--facebook" aria-labelledby="title">
+                            <title>Facebook</title>
+                            <use xlink:href="/assets/img/sprite.svg#facebook"></use>
+                        </svg>
+                    </a>
+                {% endif %}
+                {% if member.github %}
+                    <a class="team__social__link" href="https://github.com/{{ member.github }}">
+                        <svg class="icon icon--social icon--github" aria-labelledby="title">
+                            <title>GitHub</title>
+                            <use xlink:href="/assets/img/sprite.svg#github"></use>
+                        </svg>
+                    </a>
+                {% endif %}
+                {% if member.linkedin %}
+                    <a class="team__social__link" href="https://www.linkedin.com/in/{{ member.linkedin }}">
+                        <svg class="icon icon--social icon--linkedin" aria-labelledby="title">
+                            <title>LinkedIn</title>
+                            <use xlink:href="/assets/img/sprite.svg#linkedin"></use>
+                        </svg>
+                    </a>
+                {% endif %}
+
+            </p>
+
+            <p class="team__bio">{{ member.bio }}</p>
+
+        </article>
+    </div>
+    {% endfor %}
+
+</div>
+
+<span class="team__bio__trigger">Show bios</span>

_src/_includes/team.html

@@ -1,10 +1,10 @@
 
-<div class="grid grid--full grid-small--half grid-medium--third grid--gutters text-center grid--team">
+<div class="grid grid--full grid-small--third grid-medium--columns grid--gutters text-center grid--team">
 
     {% assign team = site.data.team | sort: 'name' %}
 
     {% for member in team %}
-    <div class="grid__col">
+    <div class="grid__col grid__col--2">
         <article class="team">
             <img class="team__image" src="/assets/img/{{ member.image }}">
             <h1 class="team__name">{{ member.name }}</h1>

_src/_layouts/page.html

@@ -31,6 +31,18 @@ layout: base
 
 </section>
 
+{% if page.path contains "about" %}
+    <section class="section section--team section--founders">
+        <div class="row row--wide">
+            <h1 class="section-title">Team</h1>
+
+            {% include founders.html %}
+
+            {% include team.html %}
+        </div>
+    </section>
+{% endif %}
+
 {% if page.title == "Whitepaper" %}
     <section class="section section-whitepaper-download background--photo">
         <div class="row">

_src/about.md

@@ -2,16 +2,15 @@
 title: 'About BigchainDB'
 layout: page
 
+js: page-about.min.js
+
 ipdb: true
----
+---
+
 In the summer of 2013, we started working on a project that became ascribe, blockchain-based intellectual property (IP) attribution. We asked the question: how can creators of any digital IP get compensated? Why not own digital art the way you own Bitcoin? With a public store of attribution and provenance, blockchain technology could solve this. So we raised some money, hired a few early employees and kept working on the product until we were satisfied enough to release it, built on the Bitcoin blockchain. The product was basically in shape to serve larger-scale customers, with the glaring exception of the blockchain scalability. We found ourselves needing to turn down opportunities knowing that the Bitcoin blockchain wouldn’t be able to handle the throughput we needed to serve larger enterprises.
 
 With this as a starting point, we asked how do we “blockchain-ify” it? We drew on our experience in shipping blockchain products to define three specific characteristics: decentralized, immutable and the ability to register and transfer assets. With the definitions above as a starting point, we chose an enterprise-class distributed database and then built our own technology on top of that, adding those three key characteristics while improving base functionality, fault tolerance much more. See our roadmap <a href="https://github.com/bigchaindb/org/blob/master/ROADMAP.md">here</a>.
 
 From the seed of the idea, to intense efforts starting late summer 2015, we made the announcement in February 2016. What initially started as a “let’s solve our own problem” approach almost immediately turned into something much bigger than we expected. With people and enterprises from across all industries reaching out looking to partner, collaborate, license or build on the technology, it became clear that we were solving much more than our own problem. The result is BigchainDB, a scalable blockchain database for the world.
 
-<a href="https://www.ascribe.io/">ascribe</a>, <a href="https://www.whereonthe.net/">WhereOnTheNet</a> and <a href="https://ipdb.foundation/">IPDB</a> are all registered trademarks of BigchainDB.
+<a href="https://www.ascribe.io/">ascribe</a>, <a href="https://www.whereonthe.net/">WhereOnTheNet</a> and <a href="https://ipdb.foundation/">IPDB</a> are all registered trademarks of BigchainDB.
-
-## Team
-
-{% include team.html %}