diff --git a/README.md b/README.md index 983b61f..273928b 100644 --- a/README.md +++ b/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. diff --git a/gulpfile.babel.js b/gulpfile.babel.js index e50c327..4137e14 100644 --- a/gulpfile.babel.js +++ b/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', diff --git a/package-lock.json b/package-lock.json index 08c0c92..7e87f64 100644 --- a/package-lock.json +++ b/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", diff --git a/src/hbs/helpers/new-line.js b/src/hbs/helpers/new-line.js new file mode 100644 index 0000000..ce31530 --- /dev/null +++ b/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 + '
').join('') + ); + }); +}; diff --git a/src/hbs/index.hbs b/src/hbs/index.hbs index 85452a5..0145bcf 100644 --- a/src/hbs/index.hbs +++ b/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}} diff --git a/src/hbs/partials/components/introduction.hbs b/src/hbs/partials/components/introduction.hbs index 1cafd28..5043db8 100644 --- a/src/hbs/partials/components/introduction.hbs +++ b/src/hbs/partials/components/introduction.hbs @@ -35,11 +35,11 @@ }} -
- - {{ introduction.nextSectionLink }} - -
+ {{> components/next-section-link + class="introduction__link" + name=introduction.nextSectionLink + }} + diff --git a/src/hbs/partials/components/profile.hbs b/src/hbs/partials/components/profile.hbs new file mode 100644 index 0000000..74ec0da --- /dev/null +++ b/src/hbs/partials/components/profile.hbs @@ -0,0 +1,15 @@ +
+
+
+
+
+ +
+
+ {{#if profile.location }} {{ profile.location }} {{else}} undisclosed {{/if}} +
+ +

{{new-line profile.name }}

+
+
+
diff --git a/src/hbs/partials/components/team.hbs b/src/hbs/partials/components/team.hbs index 5f15c08..a09bf56 100644 --- a/src/hbs/partials/components/team.hbs +++ b/src/hbs/partials/components/team.hbs @@ -1,3 +1,37 @@
+
+ {{> components/heading + text=team.header + class="team__header" + }} + +
+
{{ team.quote.text }}
+

- {{ team.quote.author }}

+
+ +
+ {{#each team.profiles as |profile| }} + {{> components/profile + index=@index + class="team__profile" + profile=profile + }} + {{/each}} +
+ +
{{ team.counter }}
+ +
+

scroll

+ {{svg 'images/arrow-down.svg'}} +
+ + {{> components/next-section-link + class="team__link" + name=team.nextSectionLink + }} + +
diff --git a/src/images/dog-profile.png b/src/images/dog-profile.png new file mode 100644 index 0000000..4b24867 Binary files /dev/null and b/src/images/dog-profile.png differ diff --git a/src/images/jason-profile.png b/src/images/jason-profile.png new file mode 100644 index 0000000..5f8bb08 Binary files /dev/null and b/src/images/jason-profile.png differ diff --git a/src/images/jessica-profile.png b/src/images/jessica-profile.png new file mode 100644 index 0000000..6609a83 Binary files /dev/null and b/src/images/jessica-profile.png differ diff --git a/src/styles/base/_colors.scss b/src/styles/base/_colors.scss index d38b189..c69600e 100644 --- a/src/styles/base/_colors.scss +++ b/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; diff --git a/src/styles/base/_settings.scss b/src/styles/base/_settings.scss index 2fb2005..125aab4 100644 --- a/src/styles/base/_settings.scss +++ b/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})'; diff --git a/src/styles/components/_next-section-link.scss b/src/styles/components/_next-section-link.scss index b442062..e73a1ed 100644 --- a/src/styles/components/_next-section-link.scss +++ b/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; } diff --git a/src/styles/components/_profile.scss b/src/styles/components/_profile.scss new file mode 100644 index 0000000..1935ae3 --- /dev/null +++ b/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; + } +} diff --git a/src/styles/components/_project.scss b/src/styles/components/_project.scss index fbf19be..839b2f9 100644 --- a/src/styles/components/_project.scss +++ b/src/styles/components/_project.scss @@ -179,7 +179,7 @@ } @media #{$screen-md} { - padding: 50px 0; + padding: 60px 0 80px; } @media #{$screen-xlg} { diff --git a/src/styles/components/_team.scss b/src/styles/components/_team.scss index 55117b1..1025144 100644 --- a/src/styles/components/_team.scss +++ b/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; + } } diff --git a/src/styles/main.scss b/src/styles/main.scss index 30e725a..b382b2b 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -28,3 +28,4 @@ @import './components/button'; @import './components/heading'; @import './components/next-section-link'; +@import './components/profile';