Break each name into lines with hbs helper. Fix first team member name

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',

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/partials/components/profile.hbs

@@ -13,6 +13,6 @@
       {{/if}}
     </h6>
 
-    <h3 class="profile__name">{{ profile.name }}</h3>
+    <h3 class="profile__name">{{new-line profile.name }}</h3>
   </div>
 </div>

src/styles/components/_profile.scss

@@ -49,7 +49,7 @@
 
       &--index {
         &-0 {
-          transform: translate(-20%, -150%);
+          transform: translate(-20%, -100%);
         }
 
         &-1 {