JSFiddle - React, Tailwind, and code Playground

by Kyle Vassella

HTML

<body ng-app="singlePage">
		<div class="wrap">

			<section class="parallax">
							<header class="group">


				<h1 id="home" class="mainHeader"><a class="fw300" href="https://kylevassella.github.io">KYLE<span class="fw700">V</span>ASSELLA</a></h1>
				<div class ="headerMenu">
					<div class='nav'>
						<nav>
							<ul>
								<li class="index selectedIndex"><a class="smoothScroll animatedLine fw300" href="#home">HOME</a></li>
								<li class="portfolio"><a class="smoothScroll animatedLine fw300" href="#portfolio">PORTFOLIO</a></li>
								<li class="contact"><a class="smoothScroll animatedLine fw300" href="#contact">CONTACT</a></li>
							</ul>
						</nav>
					</div>
					<div class="socialDiv">
						<a href="https://github.com/kylevassella" class="socialGithub" alt="Github logo" target="_blank"></a>
						<a href="http://teamtreehouse.com/kylevassella/" class="socialTreehouse" alt="TeamTreehouse logo" target="_blank"></a>
						<a href="https://www.linkedin.com/in/kyle-vassella-64619371" class="socialLinkedin" alt="Linkedin logo" target="_blank"></a>
						<a href="http://stackoverflow.com/users/6647188/kyle-vassella?tab=profile" class="socialStackoverflow" alt="Stackoverflow logo" target="_blank"></a>
					</div>
				</div>
			</header>
							<div class="mobileNav isHidden">
							<nav>
								<ul>
									<li class="indexMobile selectedIndexMobile"><a class="smoothScroll animatedLine fw300" href="#index">HOME</a></li>
									<li class="portfolioMobile"><a class="smoothScroll animatedLine fw300" href="#portfolio">PORTFOLIO</a></li>
									<li class="contactMobile"><a class="smoothScroll animatedLine fw300" href="#contact">CONTACT</a></li>
								</ul>
							</nav>
						</div>
			
			</section>
			



<!-- MOBILE PARALLAXED HERO AND HEADER -->
			
			<!-- <section class="parallaxMobile isHidden">
				<header>
					<h1 class="mainHeader"><a class="fw300" href="https://kylevassella.github.io">KYLE<span...

CSS

/*IMPROVEMENTS:
• Why not just change the background-image property on .parallax on the media query? Why the need to change the script so much? Whoops
- project tiles anchor tag height needs to be adjusted somehow on browser widths < 600px wide!
- optimize headshot sticky footer height for ios safari (back button toolbar blocks pic) 
- optimize sticky footer for Firefox desktop (gap) */
* {
  font-family: 'Open Sans', sans-serif;     /* raleway was original font */
      font-weight: 400;
}

html,body        /*fix whitespace on right side*/
{
  width: 100%;		/* fix Safari viewport ineptitude */
  height: 100%;		/* fix Safari viewport ineptitude */
  overflow-x: hidden; 
}

.fw300 {
	font-weight: 300;
}

.fw700 {
	font-weight: 700;
}

.whiteBG {
	background-color: rgb(249, 249, 249);
}

/*.underline {
    display: block;
    width: 100px;
    height: 2px;
    background: #000000;
    margin: 10px auto 45px auto;
}

.underlineWhite {
    display: block;
    width: 100px;
    height: 2px;
    background: rgb(249, 249, 249);
    margin: 10px auto 45px auto;
}*/

body {
	background-color: rgb(249, 249, 249);
	font-family: 'Hind', sans-serif;
	padding: 0;
	margin: 0;
}

body:after {		/* pre-load hover images to avoid first time load delay when hovering over social icons & project tiles */
 display:none;
 content: url(../media/socialGithubHOVERWeb.gif) url(../media/socialTreehouseHOVERWeb.gif) url(../media/socialLinkedinHOVERWeb.gif) url(../media/socialStackoverflowHOVERWeb.gif) url(../media/tileJCRealtyHOVERWeb.gif) url(../media/tileProject1HOVERWeb.gif) url(../media/tileProject2HOVERWeb.gif) url(../media/tileProject3HOVERWeb.gif);
}

.wrap {
	min-height: calc(100vh - 70px);
	/*background-color: black;*/
}

.wrapContact {
	min-height: calc(100vh - 520px);
}

/*?????*/
/*.group:after {
	content: “ “;
	display: table;
	clear: both;
}*/

h2 {
	text-align: center;
	font-size: 22px;
}



/******************************
        	Heading
******************************/
header...

JavaScript

$(document).on('click', 'a.smoothScroll', function(event){
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
});