Add reveal in project section

src/hbs/partials/components/heading.hbs

@@ -3,7 +3,7 @@
     class="js-parallax"
     data-rellax-speed="{{ternary rellax-speed rellax-speed 0}}"
   >
-    <span class="js-reveal-block {{ternary orangeReveal "js-reveal-orange" ""}}">
+    <span class="js-reveal-block {{ternary orangeReveal "js-reveal-orange" ""}} {{ternary lightReveal "js-reveal-light" ""}}">
       <span>{{text}}</span>
     </span>
   </div>

src/hbs/partials/components/project.hbs

@@ -4,6 +4,7 @@
 
     {{> components/heading
       text=project.header
+      lightReveal=true
       class="project__header"
       rellax-speed="-0.2"
     }}
@@ -20,6 +21,7 @@
           class="project__button"
           backgroundColor="#ff5301"
           blackBgHover="true"
+          orangeReveal=true
           label=project.button.label
           href=project.button.href
           rellax-speed="0.8"
@@ -29,12 +31,12 @@
 
       <div class="project__images">
         {{#each project.images as |image|}}
-          <img
+          <div
-            src={{image.src}}
+            class="js-reveal-block project__image project__image--{{@index}} js-parallax"
-            class="project__image project__image--{{@index}} js-parallax"
-            alt=""
             data-rellax-speed="{{ image.parallax }}"
-          />
+          >
+            <img src={{image.src}} alt="" />
+          </div>
         {{/each}}
       </div>
 

src/scripts/reveal.js

@@ -22,7 +22,7 @@ class Reveal {
     inView(REVEAL_BLOCK_SELECTOR)
       .on('enter', (el) => {
         const randNum = Math.floor(Math.random() * 30) + 1;
-        const timeout = 20 * randNum;
+        const timeout = 10 * randNum;
         setTimeout(() => el.classList.add(ACTIVE_CLASS), timeout);
       });
 

src/styles/base/_common.scss

@@ -45,7 +45,7 @@
   }
 
   &.js-reveal-light::before {
-    background-color: $color-tangerine;
+    background-color: $color-white;
   }
 
   > * {

src/styles/components/_project.scss

@@ -77,6 +77,10 @@
     width: 100%;
     margin: 10px 0;
 
+    img {
+      width: 100%;
+    }
+
     @media #{$screen-sm} {
       width: 80%;
       max-width: 250px;