Merge pull request #11 from wswidzinski/section-team

Team Section

README.md

@@ -22,7 +22,6 @@ Join us - the revolution will rendered artistically!
 * [Handlebars](http://handlebarsjs.com/) templates
 * ES6 support (provided by [Babel](https://babeljs.io/))
 * [Sass/SCSS](http://sass-lang.com/) support
-* Tests with [Mocha](https://mochajs.org/) and [Chai](http://chaijs.com/)
 
 ## Prerequisites
 You will need the following things properly installed on your computer.

gulpfile.babel.js

@@ -124,6 +124,7 @@ gulp.task('hbs', () => {
         helpers: [
           './src/hbs/helpers/repeat.js',
           './src/hbs/helpers/svg-icon.js',
+          './src/hbs/helpers/new-line.js',
           './node_modules/handlebars-helpers/lib/fs.js',
           './node_modules/handlebars-helpers/lib/comparison.js',
           './node_modules/handlebars-helpers/lib/collection.js',

package-lock.json

@@ -15487,6 +15487,11 @@
       "integrity": "sha1-HCQ6ULWVwb5Up1S/7OhWO5/42BM=",
       "dev": true
     },
+    "vanilla-tilt": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/vanilla-tilt/-/vanilla-tilt-1.4.1.tgz",
+      "integrity": "sha512-yZS4jIejmhqThLlwzJ5juPwDMk6rtf+ekADDK1lAYNiw6H2VGAJr9bt8vCp+ED5kyK6sE0sMq6mxPfV8a/NdFw=="
+    },
     "verror": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",

src/hbs/helpers/new-line.js

@@ -0,0 +1,9 @@
+'use strict';
+
+module.exports.register = function(Handlebars, options) {
+  Handlebars.registerHelper('new-line', function(text) {
+    return new Handlebars.SafeString(
+      text.split(' ').map(word => word + '<br />').join('')
+    );
+  });
+};

src/hbs/index.hbs

@@ -61,6 +61,36 @@ structure:
   nextSectionLink: 'Learn more about the team ↓'
   counterText: '04 - 06'
 
+team:
+  header: 'Team -'
+  quote:
+    text: '"Everything I do is some kind of modified borrowing from others who have been close to me either actually or virtually, and the virtual influences are amongst the most profound"'
+    author: 'Douglas Hofstadter'
+  profiles:
+    - name: 'Doge Doe'
+      image: 'images/dog-profile.png'
+    - location: 'New York'
+      name: 'Jessica Angel'
+      image: 'images/jessica-profile.png'
+    - name: 'Jason Teutsch'
+      image: 'images/jason-profile.png'
+    - location: 'Toronto'
+      name: 'Robbie Bent'
+      image: ''
+    - location: 'San Francisco'
+      name: 'Sina Habibian'
+      image: ''
+    - name: 'Emily Hunter'
+      image: ''
+    - name: 'Jane Doe'
+      image: ''
+    - location: 'Toronto'
+      name: 'Aqeel Mohammad'
+      image: ''
+
+  nextSectionLink: 'Learn more about getting involved ↓'
+  counter: '05 - 06'
+
 getInvolved:
   header: 'Get Involved —'
   description:
@@ -97,11 +127,11 @@ getInvolved:
 
     {{> components/introduction introduction=frontMatter.introduction}}
 
-    {{> components/project project=frontMatter.project }}
+    {{> components/project project=frontMatter.project}}
 
     {{> components/structure structure=frontMatter.structure}}
 
-    {{> components/team}}
+    {{> components/team team=frontMatter.team}}
 
     {{> components/get-involved getInvolved=frontMatter.getInvolved}}
 

src/hbs/partials/components/introduction.hbs

@@ -35,11 +35,11 @@
         }}
       </div>
 
-      <div class="introduction__link">
-        <a href="#project">
-          {{ introduction.nextSectionLink }}
-        </a>
-      </div>
+      {{> components/next-section-link
+        class="introduction__link"
+        name=introduction.nextSectionLink
+      }}
+
     </div>
   </div>
 </section>

src/hbs/partials/components/profile.hbs

@@ -0,0 +1,15 @@
+<div class="profile {{ class }}">
+  <div class="profile__container">
+    <figure class="profile__image-wrapper">
+      <div class="profile__image" style="background-image: url('{{ profile.image }}')"></div>
+    </figure>
+
+    <div class="profile__detail profile__detail--index-{{ index }}">
+      <h6 class="profile__location">
+        {{#if profile.location }} {{ profile.location }} {{else}} undisclosed {{/if}}
+      </h6>
+
+      <h3 class="profile__name">{{new-line profile.name }}</h3>
+    </div>
+  </div>
+</div>

src/hbs/partials/components/team.hbs

@@ -1,3 +1,37 @@
 <section class="section team">
+  <div class="team__container">
 
+    {{> components/heading
+      text=team.header
+      class="team__header"
+    }}
+
+    <div class="team__quote">
+      <blockquote class="team__quote__text">{{ team.quote.text }}</blockquote>
+      <p class="team__quote__author">- {{ team.quote.author }}</p>
+    </div>
+
+    <div class="team__profiles">
+      {{#each team.profiles as |profile| }}
+        {{> components/profile
+          index=@index
+          class="team__profile"
+          profile=profile
+        }}
+      {{/each}}
+    </div>
+
+    <div class="team__counter">{{ team.counter }}</div>
+
+    <div class="team__scroll">
+      <p class="team__scroll__text">scroll</p>
+      {{svg 'images/arrow-down.svg'}}
+    </div>
+
+    {{> components/next-section-link
+      class="team__link"
+      name=team.nextSectionLink
+    }}
+
+  </div>
 </section>

src/styles/base/_colors.scss

@@ -6,9 +6,9 @@ $color-navy: #1e1e1e;
 $color-black: #000;
 
 $color-fuchsia-pink: #ca4eca;
-$color-fuchsia-blue:#694ac9;
+$color-fuchsia-blue: #5862a9;
 $color-citron: #94ac20;
-$color-scampi: #5761aa;
+$color-scampi: #694ac9;
 $color-corn: #e4c102;
 $color-red: #ef2f00;
 $color-turquoise: #6eccce;

src/styles/base/_settings.scss

@@ -16,7 +16,8 @@ $container-md: 940px;
 $container-lg: 1140px;
 $container-xlg: 1340px;
 
-$screen-xs: 'only screen and (min-width: 1px)';
+$screen-xxs: 'only screen and (min-width: 1px)';
+$screen-xs: 'only screen and (min-width: #{$xs})';
 $screen-sm: 'only screen and (min-width: #{$sm})';
 $screen-md: 'only screen and (min-width: #{$md})';
 $screen-lg: 'only screen and (min-width: #{$lg})';

src/styles/components/_next-section-link.scss

@@ -1,5 +1,7 @@
 .next-section-link {
   display: block;
-  font-size: 12px;
+  font-family: $base-font-family;
+  font-size: 13px;
+  font-weight: 500;
   text-transform: uppercase;
 }

src/styles/components/_profile.scss

@@ -0,0 +1,137 @@
+.profile {
+  &__container {
+    @media #{$screen-lg} {
+      position: relative;
+      max-width: 250px;
+    }
+  }
+
+  &__image-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    background-color: $color-white;
+  }
+
+  &__image {
+    width: 100%;
+    height: 100%;
+    padding-bottom: 114%;
+    background-position: center center;
+    background-size: cover;
+  }
+
+  &__location,
+  &__name {
+    @include heading;
+
+    text-transform: uppercase;
+  }
+
+  &__location {
+    font-size: 12px;
+  }
+
+  &__name {
+    font-size: 24px;
+
+    @media #{$screen-md} {
+      font-size: 32px;
+    }
+
+    @media #{$screen-lg} {
+      font-size: 48px;
+    }
+  }
+
+  &__detail {
+    margin-top: 10px;
+
+    @media #{$screen-md} {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      margin: 0;
+
+      &--index {
+        &-0 {
+          transform: translate(-20%, -100%);
+        }
+
+        &-1 {
+          top: 0;
+          transform: translate(80%, -20%);
+        }
+
+        &-2 {
+          transform: translate(-25%, 40%);
+        }
+
+        &-3 {
+          transform: translate(-20%, 50%);
+        }
+
+        &-4 {
+          transform: translate(20%, 45%);
+        }
+
+        &-5 {
+          transform: translate(55%, -60%);
+        }
+
+        &-6 {
+          transform: translate(-20%, 25%);
+        }
+
+        &-7 {
+          transform: translate(-30%, 40%);
+        }
+      }
+    }
+
+    @media #{$screen-lg} {
+      line-height: 1.1;
+
+      &--index {
+        &-0 {
+          transform: translate(-25%, -50%);
+        }
+
+        &-1 {
+          top: 0;
+          transform: translate(80%, -25%);
+        }
+
+        &-2 {
+          transform: translate(-45%, 45%);
+        }
+
+        &-3 {
+          transform: translate(-25%, 65%);
+        }
+
+        &-4 {
+          transform: translate(20%, 45%);
+        }
+
+        &-5 {
+          transform: translate(75%, -50%);
+        }
+
+        &-6 {
+          transform: translate(-20%, 25%);
+        }
+
+        &-7 {
+          transform: translate(-40%, 45%);
+        }
+      }
+    }
+  }
+
+  @media #{$screen-lg} {
+    width: 33%;
+    max-width: initial;
+  }
+}

src/styles/components/_project.scss

@@ -179,7 +179,7 @@
   }
 
   @media #{$screen-md} {
-    padding: 50px 0;
+    padding: 60px 0 80px;
   }
 
   @media #{$screen-xlg} {

src/styles/components/_team.scss

@@ -1,3 +1,199 @@
 .team {
+  $profile-colors: (
+    $color-tangerine,
+    $color-fuchsia-blue,
+    $color-citron,
+    $color-corn,
+    $color-red,
+    $color-fuchsia-pink,
+    $color-scampi,
+    $color-turquoise
+  );
+
+  padding: 20px 0;
+  color: $color-white;
   background-color: $color-black;
+
+  &__container {
+    @include container;
+
+    position: relative;
+  }
+
+  &__header {
+    margin-bottom: 20px;
+
+    @media #{$screen-md} {
+      position: absolute;
+      top: 42%;
+      z-index: 1;
+    }
+
+    @media #{$screen-lg} {
+      top: 46%;
+    }
+  }
+
+  &__counter {
+    font-size: 20px;
+
+    @media #{$screen-md} {
+      position: absolute;
+      top: 0;
+      right: 0;
+      font-size: 24px;
+      transform: rotate(90deg) translate(70%, 20%);
+      transform-origin: right center;
+    }
+  }
+
+  &__scroll {
+    display: none;
+
+    @media #{$screen-md} {
+      position: absolute;
+      top: 100px;
+      right: -18px;
+      display: block;
+      text-align: center;
+
+      &__text {
+        margin-bottom: 30px;
+        font-size: 12px;
+        font-weight: 600;
+        text-transform: uppercase;
+        transform: rotate(-90deg);
+      }
+    }
+  }
+
+  &__quote {
+    margin-bottom: 20px;
+
+    &__text {
+      margin: 0;
+    }
+
+    &__author {
+      font-size: 12px;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+
+    @media #{$screen-md} {
+      max-width: 40%;
+      font-size: 24px;
+      font-weight: 300;
+
+      &__author {
+        margin-top: 30px;
+      }
+    }
+  }
+
+  &__profiles {
+    @media #{$screen-xs} {
+      display: flex;
+      flex-flow: row wrap;
+      justify-content: space-between;
+    }
+  }
+
+  &__profile {
+    margin: 10px 0 25px;
+    text-align: center;
+
+    @for $i from 1 through length($profile-colors) {
+      &:nth-of-type(#{$i}) {
+        color: nth($profile-colors, $i);
+      }
+    }
+
+    @media #{$screen-xs} {
+      width: calc(50% - 10px);
+    }
+
+    @media #{$screen-md} {
+      max-width: 250px;
+      margin: 40px 0;
+      text-align: left;
+
+      &:nth-of-type(1) {
+        transform: translate(30%, 0);
+      }
+
+      &:nth-of-type(2) {
+        transform: translate(20%, -55%);
+      }
+
+      &:nth-of-type(3) {
+        transform: translate(0, 10%);
+      }
+
+      &:nth-of-type(4) {
+        transform: translate(10%, 10%);
+      }
+
+      &:nth-of-type(5) {
+        transform: translate(5%, -40%);
+      }
+
+      &:nth-of-type(6) {
+        transform: translate(-10%, 5%);
+      }
+
+      &:nth-of-type(7) {
+        transform: translate(80%, 0%);
+      }
+
+      &:nth-of-type(8) {
+        transform: translate(-30%, 10%);
+      }
+    }
+
+    @media #{$screen-lg} {
+      margin: 55px 0;
+
+      &:nth-of-type(1) {
+        transform: translate(35%, 0);
+      }
+
+      &:nth-of-type(2) {
+        transform: translate(30%, -40%);
+      }
+
+      &:nth-of-type(3) {
+        transform: translate(10%, 20%);
+      }
+
+      &:nth-of-type(4) {
+        transform: translate(10%, 60%);
+      }
+
+      &:nth-of-type(5) {
+        z-index: 1;
+        transform: translate(5%, -20%);
+      }
+
+      &:nth-of-type(6) {
+        transform: translate(-5%, 30%);
+      }
+
+      &:nth-of-type(7) {
+        transform: translate(95%, 0%);
+      }
+
+      &:nth-of-type(8) {
+        transform: translate(40%, 10%);
+      }
+    }
+  }
+
+  @media #{$screen-md} {
+    padding: 50px 0;
+  }
+
+  @media #{$screen-lg} {
+    padding: 60px 0 40px;
+  }
 }

src/styles/main.scss

@@ -28,3 +28,4 @@
 @import './components/button';
 @import './components/heading';
 @import './components/next-section-link';
+@import './components/profile';