diff --git a/_src/_assets/images/adi-ben-ari.png b/_src/_assets/images/adi-ben-ari.png new file mode 100644 index 0000000..4e5d126 Binary files /dev/null and b/_src/_assets/images/adi-ben-ari.png differ diff --git a/_src/_assets/images/brian-fabian-crain.jpg b/_src/_assets/images/brian-fabian-crain.jpg new file mode 100644 index 0000000..693ffd4 Binary files /dev/null and b/_src/_assets/images/brian-fabian-crain.jpg differ diff --git a/_src/_assets/images/carsten-stoecker.jpg b/_src/_assets/images/carsten-stoecker.jpg new file mode 100644 index 0000000..d57537a Binary files /dev/null and b/_src/_assets/images/carsten-stoecker.jpg differ diff --git a/_src/_assets/images/chris-messina.jpg b/_src/_assets/images/chris-messina.jpg new file mode 100644 index 0000000..a4a6843 Binary files /dev/null and b/_src/_assets/images/chris-messina.jpg differ diff --git a/_src/_assets/images/fabian-vogelsteller.jpg b/_src/_assets/images/fabian-vogelsteller.jpg new file mode 100644 index 0000000..e971017 Binary files /dev/null and b/_src/_assets/images/fabian-vogelsteller.jpg differ diff --git a/_src/_assets/images/ian-worrall.jpg b/_src/_assets/images/ian-worrall.jpg new file mode 100644 index 0000000..47b1c9a Binary files /dev/null and b/_src/_assets/images/ian-worrall.jpg differ diff --git a/_src/_assets/images/john-lilic.jpg b/_src/_assets/images/john-lilic.jpg new file mode 100644 index 0000000..f63b025 Binary files /dev/null and b/_src/_assets/images/john-lilic.jpg differ diff --git a/_src/_assets/images/juan-benet.png b/_src/_assets/images/juan-benet.png new file mode 100644 index 0000000..9c7a2e0 Binary files /dev/null and b/_src/_assets/images/juan-benet.png differ diff --git a/_src/_assets/images/jutta-steiner.jpg b/_src/_assets/images/jutta-steiner.jpg new file mode 100644 index 0000000..19cedd8 Binary files /dev/null and b/_src/_assets/images/jutta-steiner.jpg differ diff --git a/_src/_assets/images/vinay-gupta.jpg b/_src/_assets/images/vinay-gupta.jpg new file mode 100644 index 0000000..29cd8c8 Binary files /dev/null and b/_src/_assets/images/vinay-gupta.jpg differ diff --git a/_src/_assets/javascripts/bigchain/testimonials.js b/_src/_assets/javascripts/bigchain/testimonials.js new file mode 100644 index 0000000..d30115d --- /dev/null +++ b/_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) diff --git a/_src/_assets/javascripts/page-features.js b/_src/_assets/javascripts/page-features.js new file mode 100644 index 0000000..9ba44f5 --- /dev/null +++ b/_src/_assets/javascripts/page-features.js @@ -0,0 +1,8 @@ + +//=include bigchain/testimonials.js + +jQuery(function($) { + + Testimonials.init(); + +}); diff --git a/_src/_assets/javascripts/page-front.js b/_src/_assets/javascripts/page-front.js index 8345338..670db29 100644 --- a/_src/_assets/javascripts/page-front.js +++ b/_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(); + }); diff --git a/_src/_assets/styles/bigchain.scss b/_src/_assets/styles/bigchain.scss index bd15754..932d9f0 100644 --- a/_src/_assets/styles/bigchain.scss +++ b/_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'; diff --git a/_src/_assets/styles/bigchain/_animations.scss b/_src/_assets/styles/bigchain/_animations.scss index 407aa8a..570e80e 100644 --- a/_src/_assets/styles/bigchain/_animations.scss +++ b/_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; diff --git a/_src/_assets/styles/bigchain/_testimonials.scss b/_src/_assets/styles/bigchain/_testimonials.scss new file mode 100644 index 0000000..3380677 --- /dev/null +++ b/_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; +} diff --git a/_src/_data/testimonials.yml b/_src/_data/testimonials.yml new file mode 100644 index 0000000..ec598d3 --- /dev/null +++ b/_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.' diff --git a/_src/_includes/section-testimonials.html b/_src/_includes/section-testimonials.html new file mode 100644 index 0000000..92403bb --- /dev/null +++ b/_src/_includes/section-testimonials.html @@ -0,0 +1,11 @@ +
+
+ +
+

What others are saying

+
+ + {% include testimonials.html %} + +
+
diff --git a/_src/_includes/testimonials.html b/_src/_includes/testimonials.html new file mode 100644 index 0000000..3bc06d8 --- /dev/null +++ b/_src/_includes/testimonials.html @@ -0,0 +1,23 @@ + +
+ + {% for testimonial in site.data.testimonials.[page.quotes] %} + +
+
+ +
{{ testimonial.quote }}
+ +
+ + + {{ testimonial.name }} + {{ testimonial.org }} + +
+
+
+ + {% endfor %} + +
diff --git a/_src/features.html b/_src/features.html index ffb34a9..f85a00a 100644 --- a/_src/features.html +++ b/_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 ---
@@ -213,6 +217,8 @@ description: 'Rather than trying to scale up blockchain technology, BigchainDB s
+{% include section-testimonials.html %} +
diff --git a/_src/index.html b/_src/index.html index 58af21a..b17f6a0 100644 --- a/_src/index.html +++ b/_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
+{% include section-testimonials.html %} +
diff --git a/docs/README.md b/docs/README.md index 8b03d6c..0ca569f 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,2 +1,3 @@ - [CSS](css.md) +- [Testimonials](testimonials.md) diff --git a/docs/testimonials.md b/docs/testimonials.md new file mode 100644 index 0000000..daa0de9 --- /dev/null +++ b/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: + +``` + + {% include section-testimonials.html %} + +``` + +The value of the `quotes` variable will grab the associated set of quotes and outputs them on the front page.