JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div class="box-wrapper">
	<section id="profile" class="panel apage" data-selection-name="profile">
		<div id="profinf">

			<img id="propic" src="https://pp.vk.me/c625528/v625528296/265ef/SXD2yfVV7sc.jpg">

			</img>

			<div id="aboutinfo">
				<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in sem pellentesque, iaculis ligula eget, dapibus nibh. Phasellus sollicitudin malesuada placerat. Proin elementum condimentum magna eget blandit. Cras nec ipsum in metus bibendum feugiat ac et velit. Ut et nibh non mauris hendrerit aliquet. Etiam feugiat sollicitudin lorem, auctor porttitor purus pretium sed. Pellentesque convallis semper ante eget elementum. Ut pulvinar nisi id libero bibendum, eu rutrum dolor porttitor. Fusce eu est metus.</p>
				<br>
				<p>
				Mauris volutpat, libero sit amet luctus lobortis, diam ligula auctor augue, eget vestibulum enim dui non diam. Morbi a metus sed augue sollicitudin sodales ut vitae velit. Sed sed lectus egestas, consequat lectus eu, pretium nunc. Integer convallis efficitur quam, et tempus enim placerat at. Nulla vulputate lectus erat, ac sollicitudin mauris varius at. Morbi vestibulum, tortor ac interdum rhoncus, mauris elit mattis orci, ac cursus diam metus vitae libero. Aliquam mattis ac purus vel vulputate. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque hendrerit elit at rutrum sodales. Cras quis eleifend arcu. Nunc turpis ligula, placerat ac bibendum in, euismod a purus. Vestibulum est dui, finibus at ex vitae, euismod blandit mauris. </p>
			</div>
		</div>
	</section>
	<section id="portfolio" class="panel apage" data-selection-name="portfolio" >

	</section>
	<section id="video" class="panel apage" data-selection-name="video">
		<div id="tutvideo">
			<iframe src="https://www.youtube.com/embed/DHFokrRiHus" frameborder="0" allowfullscreen></iframe>
		</div>

	</section>
	</div>
</body>

CSS

html, body {
  font-family: sans-serif;
  height: 100%;
  padding: 0 auto;
  margin:0 auto;
  overflow: auto;

  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

.apage{
	background-color: #E23838;
	height: 100%;
	width: 100%;
	margin: 0 auto;
}
#profile{
	background-image: url(http://freephotos.atguru.in/hdphotos/hd-wallpapers/spectrum-of-the-sky-hdtv-1080p-hd.jpg);
	background-repeat: no-repeat;

	background-size: auto auto;

}
#profile > #profinf{
	width: 100%;
	height: 30%;
	margin: 0;
	bottom: 0;
	position: absolute;

} #profinf > #propic{
	height: 90%;
	width: auto;
	background-color: black;
	position: relative;
	float: left;
	margin-left: 5%;
	margin-bottom: 5%;
}
#profinf > #aboutinfo{
	width: 80%;
	height: 90%;
	background-color: #D3BE2F;
	position: relative;
	float: left;
	margin-left: 1%;
}
#video{
	background-color: #60C560;
}
#portfolio{
	background-color: #6781D5;
}
body{
 overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  -webkit-scroll-behavior: smooth;
  scroll-behavior: smooth;
  -webkit-scroll-snap-type: mandatory;
  scroll-snap-type: mandatory;
  -webkit-scroll-snap-points-y: repeat(100vh);
  scroll-snap-points-y: repeat(100vh); }

}
@font-face{

}
#tutvideo{
	position: relative;
	height: 100%;
	overflow: hidden;
}
#tutvideo iframe {
	position: absolute;
	width: 100%;
	height: 100%;
}

JavaScript

(function ($,window,document,undefined) {
	"use strict";
	var heights = [],
		names = [],
		elements = [],
		index = 0,
		currentHash = window.location.hash,
		hasLocation = false,
		timeoutId,
		timeoutId2,
		top = $(window).scrollTop(),
		scrollable = false,
		settings = {
			//section should be an identifier that is the same for each section
			section: "section",
			sectionName: "section-name",
			easing: "easeOutExpo",
			scrollSpeed: 1100,
			offset : 0,
			scrollbars: true,
			axis:"y",
			target:"html,body",
			//touchExceptions:"a",
			before:function() {},
			after:function() {}
		};
    	$.scrollify = function(options) {

			function animateScroll(index) {

				if(names[index]) {
					settings.before(index,elements);
					if(settings.sectionName) {
						window.location.hash = names[index];
					}

					$(settings.target).stop().animate({
						scrollTop: heights[index]
					}, settings.scrollSpeed,settings.easing);

					$(settings.target).promise().done(function(){settings.after(index,elements);});
				}
			}
			var manualScroll = {
				handleMousedown:function() {
					scrollable = false;
				},
				handleMouseup:function() {
					scrollable = true;
				},
				handleScroll:function() {

					if(timeoutId){
						clearTimeout(timeoutId);
					}
					timeoutId = setTimeout(function(){
							top = $(window).scrollTop();
							if(scrollable===false) {
								return false;
							}
							scrollable = false;

							var i =1,
								max = heights.length,
								closest = 0,
								prev = Math.abs(heights[0] - top),
								diff;
							for(;i<max;i++) {
								diff = Math.abs(heights[i] - top);

								if(diff < prev) {
									prev = diff;
									closest = i;
								}
							}
							index = closest;
							animateScroll(closest);
					}, 200);
				},
				wheelHandler:function(e,delta) {

					e.preventDefault();

					delta = delta || -e.originalEvent.detail / 3 || e.originalEvent.wheelDelta /...