Merge pull request #52 from ascribe/feature/testimonials

Testimonials

_src/_assets/javascripts/bigchain/testimonials.js

@@ -0,0 +1,35 @@
+
+//=include ../../../../node_modules/is-in-viewport/lib/isInViewport.js
+
+var Testimonials = (function(w, d, $) {
+
+    'use strict'
+
+    var app, _private, _config
+
+    _config = {
+        testimonials: $('.testimonials'),
+        testimonial: $('.testimonial')
+    }
+
+    _private = {
+        toggleReady: function() {
+            $(window).on('load resize scroll',function() {
+                if (_config.testimonials.is( ':in-viewport()' ) ) {
+                    _config.testimonials.addClass('is-ready');
+                } else {
+                    _config.testimonials.removeClass('is-ready');
+                }
+            });
+        },
+    }
+
+    app = {
+        init: function() {
+            _private.toggleReady();
+        }
+    }
+
+    return app
+
+})(window, document, jQuery)

_src/_assets/javascripts/page-features.js

@@ -0,0 +1,8 @@
+
+//=include bigchain/testimonials.js
+
+jQuery(function($) {
+
+    Testimonials.init();
+
+});

_src/_assets/javascripts/page-front.js

@@ -1,6 +1,7 @@
 
 //=include bigchain/hero-video.js
 //=include bigchain/smoothscroll.js
+//=include bigchain/testimonials.js
 //=include ../../../node_modules/vivus/dist/vivus.js
 
 
@@ -26,4 +27,6 @@ jQuery(function($) {
 
     new Vivus('bigchain-graph', iconOptions);
 
+    Testimonials.init();
+
 });

_src/_assets/styles/bigchain.scss

@@ -43,6 +43,7 @@
 @import 'bigchain/_comments';
 @import 'bigchain/_toc';
 @import 'bigchain/_newsletter';
+@import 'bigchain/_testimonials';
 
 // specific page styles
 @import '_page-front';

_src/_assets/styles/bigchain/_animations.scss

@@ -43,7 +43,7 @@ $timing-bounce:         cubic-bezier(0,1.02,.32,1.34); // easeOutBack, modified:
 @keyframes slide-in-from-bottom {
     0%   {
         opacity: 0;
-        transform: translateY(100px);
+        transform: translateY(50px);
     }
     100% {
         opacity: 1;

_src/_assets/styles/bigchain/_testimonials.scss

@@ -0,0 +1,101 @@
+
+.testimonials {
+    margin-bottom: 0;
+
+    .grid__col {
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    // intro animation
+    &.is-ready .grid__col {
+        &:nth-child(2) .testimonial { animation-delay: .3s; }
+        &:nth-child(3) .testimonial { animation-delay: .6s; }
+    }
+}
+
+.testimonial {
+    display: flex;
+    flex-wrap: wrap;
+
+    .is-ready & {
+        @extend .animation-slide-in-from-bottom;
+        animation-fill-mode: backwards;
+    }
+}
+
+.testimonial__quote,
+.testimonial__caption {
+    flex: 0 0 100%;
+}
+
+.testimonial__quote {
+    // blockquote reset
+    margin: 0;
+    position: relative;
+    border: none;
+    color: $text-color;
+    padding: 0;
+    font-style: normal;
+
+    // styling
+    margin-bottom: $spacer;
+    align-self: flex-start;
+
+    // quote characters
+    &:before {
+        content: "“";
+        font-size: 250%;
+        color: $gray;
+        line-height: 1;
+        margin-left: -1rem;
+    }
+}
+
+.testimonial__caption {
+    align-self: flex-end;
+    display: flex;
+    align-items: center;
+    border-top: 2px solid $gray;
+    padding-top: $spacer;
+    position: relative;
+
+    // speech triangle
+    &:before {
+        content: "";
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        left: 4rem;
+        top: 0;
+        border-width: .9rem .9rem 0 0;
+        border-color: transparent;
+        border-top-color: $gray;
+    }
+}
+
+.testimonial__avatar {
+    @extend .img--responsive;
+    width: 4rem;
+    height: 4rem;
+    display: inline-block;
+    margin-right: $spacer;
+    border-radius: 50%;
+    border: 2px solid $gray;
+}
+
+.testimonial__cite {
+    @extend .small;
+    font-style: normal;
+    flex: 1;
+    color: $gray-light;
+}
+
+.testimonial__name {
+    font-weight: $font-weight-bold;
+}
+
+.testimonial__org {
+    display: block;
+}

_src/_data/testimonials.yml

@@ -0,0 +1,70 @@
+#
+#
+# Photo paths are relative to /assets/img/
+# Photos of quotees need to be square and should be at least or exact 144x144px.
+#
+
+set1:
+    - name: John Lilic
+      org: Consensys
+      link: https://consensys.net/
+      image: john-lilic.jpg
+      quote: 'BigchainDB is a system that affords enterprise an opportunity to credibly consider business processes with very high transaction through-put running on a blockchain.'
+
+
+    - name: Fabian Vogelsteller
+      org: Ethereum Foundation
+      link: https://www.ethereum.org
+      image: fabian-vogelsteller.jpg
+      quote: 'BigchainDB is the logical next step in scaling non-computational blockchains.'
+
+
+    - name: Chris Messina
+      org: Uber
+      link: https://www.uber.com
+      image: chris-messina.jpg
+      quote: 'From the makers of ascribe, this has the potential to be a big deal. The team has blown the cap off the conventional blockchain limitations.'
+
+
+set2:
+    - name: Brian Fabian Crain
+      org: Eris Industries Limited
+      link: https://erisindustries.com/
+      image: brian-fabian-crain.jpg
+      quote: 'BigchainDB is a daring attempt to create a highly scalable blockchain design by one of the best teams in the industry.'
+
+
+    - name: Juan Benet
+      org: IPFS
+      link: https://ipfs.io
+      image: juan-benet.png
+      quote: 'BigchainDB is exciting! It marries the performance and power of traditional databases with the public verifiability of blockchains.'
+
+
+    - name: Vinay Gupta
+      org: Ethereum Foundation & Consensys
+      link: https://www.ethereum.org/
+      image: vinay-gupta.jpg
+      quote: 'I think framing Ethereum as logic, IPFS as disk and BigchainDB as database - a direct parallel to the web stack - is nothing short of genius and really points the way to the future of this industry and, shortly, the web itself.'
+
+
+set3:
+    - name: Adi Ben-Ari
+      org: Applied Blockchains
+      link: http://appliedblockchain.com
+      image: adi-ben-ari.png
+      quote: 'An amazing piece of work that elegantly addresses some of the biggest challenges that we’re all facing.'
+
+
+    - name: Jutta Steiner
+      org: Ethcore
+      link: https://ethcore.io
+      image: jutta-steiner.jpg
+      quote: 'ascribe has begun tracing their path in that direction with a blockchain whose storage can scale without drastically compromising on decentralisation.'
+
+
+    - name: 'Carsten Stöcker'
+      org: RWE Innovation
+      link: http://www.rwe.com/
+      image: carsten-stoecker.jpg
+      quote: 'BigchainDB is a now signature milestone: a nicely scalable blockchainified database that powers decentralized processing platforms. We are excited to be working with the BigchainDB team.'

_src/_includes/section-testimonials.html

@@ -0,0 +1,11 @@
+<section class="section section-testimonials">
+    <div class="row row--wide">
+
+        <header class="section-header">
+            <h1 class="section-title">What others are saying</h1>
+        </header>
+
+        {% include testimonials.html %}
+
+    </div>
+</section>

_src/_includes/testimonials.html

@@ -0,0 +1,23 @@
+
+<article class="testimonials grid grid--full grid-medium--fit grid--gutters">
+
+    {% for testimonial in site.data.testimonials.[page.quotes] %}
+
+    <div class="grid__col">
+        <figure class="testimonial">
+
+            <blockquote class="testimonial__quote">{{ testimonial.quote }}</blockquote>
+
+            <figcaption class="testimonial__caption">
+                <img class="testimonial__avatar" src="/assets/img/{{ testimonial.image }}">
+                <cite class="testimonial__cite">
+                    <span class="testimonial__name">{{ testimonial.name }}</span>
+                    <span class="testimonial__org"><a href="{{ testimonial.link }}">{{ testimonial.org }}</a></span>
+                </cite>
+            </figcaption>
+        </figure>
+    </div>
+
+    {% endfor %}
+
+</article>

_src/features.html

@@ -3,6 +3,10 @@ layout: page
 
 title: How It Works
 description: 'Rather than trying to scale up blockchain technology, BigchainDB starts with a big data distributed database and then adds blockchain characteristics - decentralized control, immutability and the transfer of digital assets.'
+
+quotes: set2
+
+js: page-features.min.js
 ---
 
 <section class="section section-features">
@@ -213,6 +217,8 @@ description: 'Rather than trying to scale up blockchain technology, BigchainDB s
 
 </section>
 
+{% include section-testimonials.html %}
+
 <section class="section section-contribute background--photo">
     <div class="row">
         <header class="section-header">

_src/index.html

@@ -5,6 +5,8 @@ tagline:    'Meet BigchainDB. The scalable blockchain database.'
 
 front_page: true
 hero_video_name: northern-light
+quotes: set1
+
 js: page-front.min.js
 ---
 
@@ -94,6 +96,8 @@ js: page-front.min.js
     </div>
 </section>
 
+{% include section-testimonials.html %}
+
 <section class="section section-whitepaper background--photo">
     <div class="row">
         <header class="section-header">

docs/README.md

@@ -1,2 +1,3 @@
 
 - [CSS](css.md)
+- [Testimonials](testimonials.md)

docs/testimonials.md

@@ -0,0 +1,48 @@
+Testimonials
+------------------
+
+The [testimonials component](../_src/_includes/testimonials.html)'s quotes are based on simple YAML data defined in [`_src/data/testimonials.yml`](../_src/data/testimonials.yml) with different arrays. Each array holds a total of 3 quotes.
+
+The testimonials component consists of various files:
+
+- [HTML component](../_src/_includes/testimonials.html)
+- [HTML section](../_src/_includes/section-testimonials.html)
+- [YAML data](../_src/data/testimonials.yml)
+- [SCSS styles](../_src/_assets/styles/bigchain/_testimonials.scss)
+- [JavaScript](../_src/_assets/javascripts/bigchain/testimonials.js)
+
+### Photos
+
+Photos of quotees need to be square and should be at least or exact 144x144px. The lazy retina technique is in use where the photo is the @2x resolution but is scaled down by 50% with CSS. Photo paths are relative to `/assets/img/`.
+
+### JavaScript
+
+The small js component only handles activating the quotes intro animation once the whole section is in viewport. The component needs to be activated either globally or on each page it is used by calling:
+
+```js
+Testimonials.init();
+```
+
+### Select and output a set of quotes
+
+A set of quotes can be set as value of the custom variable `quotes` in the YAML Front Matter of the page where the testimonials component has been included.
+
+E.g. on the front page [`_src/index.html`](../_src/index.html) we want to include the whole testimonials section and use `set2` for the quotes. So in the YAML Front Matter of that file, write:
+
+```
+---
+
+quotes: set2
+
+---
+```
+
+In the content of the page where you want to have the testimonials section include it:
+
+```
+<body>
+    {% include section-testimonials.html  %}
+</body>
+```
+
+The value of the `quotes` variable will grab the associated set of quotes and outputs them on the front page.