JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">

	<div id="count">
		<p>1/3</p>
	</div>
			
	<div id="about">
		Wassup everyone
	</div>

		<div class="project">
		<div class="content__container">
			<img src="https://www.what-dog.net/Images/faces2/scroll001.jpg">
		</div>
	</div>
  
  	<div class="project">
		<div class="content__container">
			<img src="https://static.boredpanda.com/blog/wp-content/uploads/2017/09/funny-dog-thoughts-tweets-1.jpg">
		</div>
	</div>
  
  	<div class="project">
		<div class="content__container">
			<img src="https://ksrpetcare.com/wp-content/uploads/2017/04/41059-Cute-Yellow-Labrador-puppy-in-play-bow-white-background.jpg">
		</div>
	</div>

</div>

CSS

body {
	background-color: #797979;
	color: black;
	font-family: serif;
	font-size: 2vw;
	line-height: 1.1em;
}

#about {
  padding-bottom: 1em;
}

#wrapper {
	max-width: 100vw;
	max-height: 100vh;
	overflow: scroll;
	padding-top: 1em;
	padding-bottom: 1em;
}

.project {
	background-color: transparent;
	width: 100vw;
	height: 100vh;
	position: sticky;
	top: 0;
	padding: 0 2em;
	overflow: scroll;
}

.content__container {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#count {
	color: black;
	width: 20%;
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	padding: 1em 2em 2em 0;
	z-index: 99999999999;
}

img {
  max-width: 100%;
}