JSFiddle - React, Tailwind, and code Playground

by jcoc611

HTML

<body>
	<section class="full-page" id="about-me">
		<h1 id="information">About Me</h1>
		
	</section>
	<section class="full-page" id="introduction">
		<h1 id="intro">Hello, my name is<br/><span class="big">Michael!</span></h1>
		<a href="#" id="port">Portfolio</a>
		<a href="#about-me" id="about">About Me</a>
	</section>
</body>

CSS

* {
	margin: 0px 0px;
	padding: 0px 0px;
	font-family: "Open Sans";
}

.full-page {
	width: 100vw;
	height: 100vh;
	background-color: #5085aa;
	position: absolute;
	float: left;
}

#introduction {
	z-index: 1;
}

#about-me {

	z-index: 0;
}

#information {
	text-align: center;
}

#intro {
	font-size: 4vw;
	color: white;
	text-align: center;
	padding-top: 30vh;
	
}

#port{
	position: absolute;
	right: 3vw;
	bottom: 5vh;
	color: white;
	font-size: 1.5vw;
	text-decoration: none;
	font-weight: bold;
}

#about{
	position: absolute;
	left: 3vw;
	bottom: 5vh;
	color: white;
	font-size: 1.5vw;
	text-decoration: none;
	font-weight: bold;
}

#about:active  #about-me {
	width: 100vw;
}

.big {
	font-size: 8vw;
	color: lightblue;
}

JavaScript

$(document).ready(function(){
	$("#about").click(function(){
		if(parseInt($("#about-me").css("width")) <= 0) {
			$("#introduction").animate({width:0}, 500);
			/*$("#intro").css("display","none");
			$("#port").css("display","none");
			$("#about").css("display","none"); */
		}
		else {
			$("#introduction").animate({width:0}, 500);
		}
	});
});

/* This is supposed to be with JQuery */