take a look at this , i added a hero section before and after the 3 sections

https://codepen.io/vkv88/pen/poJEXOG

CHANGES:

1. in HTML you duplicate the scection tag with its content only change the texts

2. in SCSS you duplicate the &:nth-child(3) {
background-image: url(https://i.postimg.cc/TY0xQ41T/photo-1433840496881-cbd845929862.jpg);
}

   the 3 here is the number of the hero so if you want 10 heros you duplicate 10 times each time increment that number

3. also in SCSS you change the $slide-number: 5; to the number of Heros you want in this example it’s 5 heros

.

to implement this code first you load jquery from https://code.jquery.com/jquery-2.1.4.min.js in script tag
also LoadAsh library from https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js

also install sass then run sass NAME_OF_CSS_FILE index.css
then link this index.css in your webpage

ps: if you dont want to use scss go to options in css pane in codepen then select show compiled css .. copy that css into your portfolio

.
also if you landing page/about separate i edited the code for another page
https://codepen.io/vkv88/pen/wvagaKV?editors=1100

I saw this parallax code from Codepen
https://codepen.io/eehayman/pen/qdGZJr

<div class="container">
  <section class="background">
    <div class="content-wrapper">
      <p class="content-title">Full Page Parallax Effect</p>
      <p class="content-subtitle">Scroll down and up to see the effect!</p>
    </div>
  </section>
  <section class="background">
    <div class="content-wrapper">
      <p class="content-title">Cras lacinia non eros nec semper.</p>
      <p class="content-subtitle">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras ut massa mattis nibh semper pretium.</p>
    </div>
  </section>
  <section class="background">
    <div class="content-wrapper">
      <p class="content-title">Etiam consequat lectus.</p>
      <p class="content-subtitle">Nullam tristique urna sed tellus ornare congue. Etiam vitae erat at nibh aliquam dapibus.</p>
    </div>
  </section>
</div>

// ------------- VARIABLES ------------- //
var ticking = false;
var isFirefox = (/Firefox/i.test(navigator.userAgent));
var isIe = (/MSIE/i.test(navigator.userAgent)) || (/Trident.*rv:11./i.test(navigator.userAgent));
var scrollSensitivitySetting = 30; //Increase/decrease this number to change sensitivity to trackpad gestures (up = less sensitive; down = more sensitive) 
var slideDurationSetting = 600; //Amount of time for which slide is "locked"
var currentSlideNumber = 0;
var totalSlideNumber = $(".background").length;

// ------------- DETERMINE DELTA/SCROLL DIRECTION ------------- //
function parallaxScroll(evt) {
  if (isFirefox) {
    //Set delta for Firefox
    delta = evt.detail * (-120);
  } else if (isIe) {
    //Set delta for IE
    delta = -evt.deltaY;
  } else {
    //Set delta for all other browsers
    delta = evt.wheelDelta;
  }

  if (ticking != true) {
    if (delta <= -scrollSensitivitySetting) {
      //Down scroll
      ticking = true;
      if (currentSlideNumber !== totalSlideNumber - 1) {
        currentSlideNumber++;
        nextItem();
      }
      slideDurationTimeout(slideDurationSetting);
    }
    if (delta >= scrollSensitivitySetting) {
      //Up scroll
      ticking = true;
      if (currentSlideNumber !== 0) {
        currentSlideNumber--;
      }
      previousItem();
      slideDurationTimeout(slideDurationSetting);
    }
  }
}

// ------------- SET TIMEOUT TO TEMPORARILY "LOCK" SLIDES ------------- //
function slideDurationTimeout(slideDuration) {
  setTimeout(function() {
    ticking = false;
  }, slideDuration);
}

// ------------- ADD EVENT LISTENER ------------- //
var mousewheelEvent = isFirefox ? "DOMMouseScroll" : "wheel";
window.addEventListener(mousewheelEvent, _.throttle(parallaxScroll, 60), false);

// ------------- SLIDE MOTION ------------- //
function nextItem() {
  var $previousSlide = $(".background").eq(currentSlideNumber - 1);
  $previousSlide.removeClass("up-scroll").addClass("down-scroll");
}

function previousItem() {
  var $currentSlide = $(".background").eq(currentSlideNumber);
  $currentSlide.removeClass("down-scroll").addClass("up-scroll");
}

I want to utilize it but I want to add two (non-parallax) hero section at the top and 2 at the bottom (non-parallax).

1. At the homepage, user will see the non-parallax hero (image) first
2. and when he scrolls down will see the 2nd non-parallax hero, then the next section is the parallax and will be triggered
3. Once all the parallax has been navigated, another fixed image (similar to #1) will again show.
4. and when user scrolls back up, parallax (in reverse) will be