JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
	<head lang="en">

		<title>Kim Kohler's portfolio.</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta charset="utf-8">
		<meta name="viewport" content="user-scalable=yes, initial-scale=1, width=device-width">
		<link rel="stylesheet" href="assets/css/normalize.css">
		<link rel="stylesheet" href="assets/css/style.css">
		<link rel="shortcut icon" href="#" />

	</head>
	<body>
		<div class="all-content type">
			<!-- Gridsystem, data pulled from Json. -->
			<div class="grid page">
			<section class="clearfix">	
				<ul class="squares">
					<script id="projects-template" type="text/x-handlebars-template">
						{{#each this}}
							<li data-index="{{id}}" class="{{sqid}}">
								<img src="{{logo}}">
								<h3><mark style="background-color: #FFFFFF">{{year}}</mark><br/></h3>
								<h1><mark style="background-color: #FFFFFF">{{name}}</mark><br/></h1>
								<h2><mark style="background-color: #FFFFFF">{{type}}</mark></h2>
							</li>
						{{/each}}
					</script>
				</ul>
			</section>
			</div>
			<!-- Every project has its own page that is hidden, is made visible when clicked on in grid system. -->
			<div class="single-project page">
			<div class="overlay"></div>
			<div class="popup-detail">
				
				<h1><mark style="background-color: #FFFFFF">Single project view</mark></h1>
				<h4><mark style="background-color: #FFFFFF">Blurb placeholder</mark></h4>
				<span class="close">×</span>
			</div>
			</div>
			<div class="error page">
				<h3>Something went wrong and I'm not sure why.. :o</h3>
			</div>
		</div>

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
		<script src="assets/js/main.js"></script>

	</body>
</html>

CSS

*,
*:before,
*:after{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


/*----------------------------------
GRID
----------------------------------*/

.all-content{
	width: 100vw;
	height: 100vh;

}

ul{
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
	display: inline-block;
}

li {
	position: relative;

}

.squares {
	opacity: 0;

}

.grid.visible .squares {
	opacity: 1;

}

.squares > li.hidden{
	opacity: 0.2;

}


.sq {
	float: left;
	width: 100vw;
	height: 100vw;

}

/*THIS IS WHERE THE TRANSITIONS ARE APPLIED*/
.sq1 {
	
	background: #06465b;
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px transparent;
	position: relative;
	-webkit-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.sq1:before {
	background-size: auto 100%;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-image: url("../img/kim.jpg");
	content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.sq1:hover, .sq1:focus, .sq1:active {
  color: white;
}
.sq1:hover:before, .sq1:focus:before, .sq1:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

.sq2 {

	background: #7ABCC7;
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform:...

JavaScript

/*This SPA page is based on the template find here, the same
as Umi Syam used for the DT's Thesis show.
http://tutorialzine.com/2015/02/single-page-app-without-a-framework/
*/

var app = app || {};

app.main = (function(){

	var projects = [];

	function attachEvents(){
		console.log('attach events Works!');

		$('.close').click(function (e) {
			e.preventDefault();
			window.location.hash = '#';
		});
		

	};

	/*------------------------------------------------*/
	//	Load the JSON
	/*------------------------------------------------*/
	function loadData() {

		console.log('loadData works..');
		
		$.getJSON( "../../projects.json", function( data ) {
			// Write the data into our global variable.

			projects = data;

			generateAllProjectsHTML(projects);
			
			$(window).trigger('hashchange');
		});
	};

	function render(url) {

		var temp = url.split('/')[0];

		//Make sure all pages are hidden to start with.

		$('.all-content .page').removeClass('visible');

		var	map = {
			
			'': function() {
				renderStudentsPage(projects);
			},

			'#project': function() {
				
				var index = url.split('#project/')[1].trim();
				renderSingleProjectPage(index, projects);
			}

		};

		if(map[temp]){
			map[temp]();
		}
		else {
			renderErrorPage();
		}
	}

	function generateAllProjectsHTML(data) {
		console.log('generateProjects works..');

		var list = $('.squares');

		var source = $("#projects-template").html();

		var template = Handlebars.compile(source);
		list.append (template(data));

		list.find('li').on('click', function (e) {
			e.preventDefault();
			var studentIndex = $(this).data('index');
			console.log(studentIndex);
			if(studentIndex !== 1){
			window.location.hash = 'project/' + studentIndex;
			}
		});

	}

	function renderErrorPage(){
		var page = $('.error');
		page.addClass('visible');
	}

	/*------------------------------------------------*/
	// Iterate through the projects to make the clicked one...