<header>
  <div class="NavBar">
    My beautiful Nav Bar
  </div>
</header>

<main>

  <div class="AboutMe">
    About Me
  </div>

  <div class="MySkills">
    <div class="SkillLeft">
      Skill Left
    </div>
    <div class="SkillRight">
      Skill Right
    </div>
  </div>

  <div class="Gallery">
    My Gallery
  </div>

  <div class="Contact">
    Contact Me
  </div>

</main>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-snap-type: y mandatory;
  overflow: scroll;
}
header,
.AboutMe,
.MySkills,
.Contact,
.Gallery {
  scroll-snap-align: start;
}
.NavBar {
  height: 180px;
  background-color: black;
  color: white;
}

.AboutMe {
  height: 120vh;
  background-color: lightblue;
}

.MySkills {
  display: grid;
  height: 99vh;
  grid-template-columns: 50% 50%;
}

.SkillLeft {
  background-color: crimson;
}

.SkillRight {
  background-color: darkolivegreen;
}

.Gallery {
  height: 150vh;
  background-color: goldenrod;
}

.Contact {
  height: 180vh;
  background-color: mediumseagreen;
}