rikkrome/index.html

## index.html
<body>
	<!--Font-awsome-->
	<!-- 	<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> -->
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
	<div class="grid">
		<div class="header">
			<div class="header-top">
				<div class="header-top-nav">
					<div class="container">
						<div class="row">
							<div class="col-xs-2">
								<a class="header-top-nav-logo" href="https://romeroricky.com/">
									<img src="https://firebasestorage.googleapis.com/v0/b/romerorickyio-87910.appspot.com/o/RomeroRicky-site%2Flogo-default.png?alt=media&token=e9ef8264-2d2a-4148-bb9c-e4768a7bd788" alt="Superawesome">
								</a>
							</div>

							<nav class="col-xs-10">
<!-- 								<div class="header-top-nav-menu">
									<a class="menu-cta" href="">Contact me</a>
								</div> -->
							</nav>
						</div>
					</div>
				</div>
			</div>
			<div class="header-body">

				<div class="header-wrapper">
					<div class="header-title">Hello, my name is Ricky</div>
					<!-- 						<div class="header-subTitle">
							(214)-763-7039 | <a href="mailto:ricky@romeroricky.com" target="_top">ricky@romeroricky.com</a>
						</div> -->
					<div class="header-bio os-animation" data-os-animation="fadeIn" data-os-animation-delay="0.4s">
						I enjoy turning complex problems into intuitive software. I believe in collaboration, not competition, because in the end, it’s all about our users.
					</div>
					<div class="social-links os-animation" data-os-animation="fadeIn" data-os-animation-delay="0.6s">
						<a href="https://www.instagram.com/romerorickyio/" target="_blank"><i class="fab fa-instagram fa-2x"></i></a>
						<a href="https://twitter.com/romerorickyio" target="_blank"><i class="fab fa-twitter fa-2x"></i></a>
						<a href="https://github.com/romeroricky" target="_blank"><i class="fab fa-github-alt fa-2x"></i></a>
						<a href="https://www.linkedin.com/in/romeroricky/" target="_blank"><i class="fab fa-linkedin fa-2x"></i></a>
						<a href="https://medium.com/@romeroricky" target="_blank"><i class="fab fa-medium fa-2x"></i></a>
					</div>

				</div>

			</div>
			<!-- 		testing	 -->
			<div class="header-footer">
				<div class="header-footer-wrapper">
				</div>
			</div>
		</div>
		<!-- 	Project Section		 -->
		<div class="content">
			<!-- 	ROW 1			 -->
			<!-- 		title	 -->
			<div id="content-one-one" class="projectBox">
				<h2 class="projectBox-title ">FEATURED PROJECTS</h2>
			</div>
			<!-- 	image			 -->
			<figure id="content-one-two" class="projectBox">
				<div class="content-figure-image nmt-lg"></div>
				<img src="https://firebasestorage.googleapis.com/v0/b/romerorickyio-87910.appspot.com/o/RomeroRicky-site%2Fsneakpeek-ios-single-phone.png?alt=media&token=790cea99-3654-4bc4-b9f5-375d65a4d8ee">
			</figure>
			<!-- description -->
			<div id="content-two" class="projectBox projectBox-description-wrapper">
				<p class="projectBox-description">In the past I've helped people think up and launch their new ideas, as well as improve their existing products through redesign of their user interfaces, or completely rethinking entire products or websites.</p>
			</div>

			<!-- 	ROW 2		 -->
			<!-- 		image	 -->
			<figure id="content-three-one" class="projectBox os-animation" data-os-animation="fadeIn" data-os-animation-delay="0.4s">
				<div class="content-figure-image"></div>
				<img class="moveRt" src="https://firebasestorage.googleapis.com/v0/b/romerorickyio-87910.appspot.com/o/RomeroRicky-site%2Falmobile-single-phone.png?alt=media&token=07459fc1-6080-4263-af74-8640cc191cf5">
			</figure>
			<!-- 	Title			 -->
			<div id="content-three-two" class="projectBox">
				<h2 class="projectBox-title os-animation" data-os-animation="fadeInRight" data-os-animation-delay="0.2s">ALMobile (PWA)</h2>
			</div>
			<!-- description -->
			<div id="content-four" class="projectBox projectBox-description-wrapper os-animation" data-os-animation="fadeInRight" data-os-animation-delay="0.2s">
				<div class="projectBox-description">
				<p>Mobile web application (PWA) lead developer at Austin Lane Technologies from May 2017 - June 2018.
					</br>
					Primarily utilized <b>HTML 5</b>, <b>CSS / LESS</b>, <b>JavaScript</b>, <b>SQLite</b>, and <b>AJAX</b> on the mobile web application, and <b>C# / .net</b>, and <b>SQL</b> on the backend.</p>
				</br>
				<p style="margin-left: 30px"><a class="link-learnMore" target="_blank" href="http://www.austinlane.com/almobile/products">Learn More<span style="margin-left: 9px !important;">→</span></a></p>
		</div>
			</div>

			<!-- 	ROW 3			 -->
			<!-- Title -->
			<div id="content-five-one" class="projectBox  os-animation" data-os-animation="fadeIn" data-os-animation-delay="0.4s">
				<h2 class="projectBox-title">SneakPeek For Instagram</br> React Native</h2>
			</div>
			<!-- 	Image			 -->
			<figure id="content-five-two" class="projectBox os-animation" data-os-animation="fadeIn" data-os-animation-delay="0.4s">
				<div class="content-figure-image"></div>
				<img src="https://firebasestorage.googleapis.com/v0/b/romerorickyio-87910.appspot.com/o/RomeroRicky-site%2Fsneakpeek-single-phone.png?alt=media&token=824257a9-0702-46a2-b4c8-156d5f2b9a42">
			</figure>
			<!-- description -->
			<div id="content-six" class="projectBox projectBox-description-wrapper os-animation" data-os-animation="fadeIn" data-os-animation-delay="0.4s">
								<div class="projectBox-description">
				<p >
					SneakPeek allows the user to preview their next post using Instagram's API.
				</p>
				<p style="margin-left: 30px"><a class="link-learnMore" target="_blank" href="https://github.com/romeroricky/SneakPeek">GitHub - React Native<span style="margin-left: 9px !important;">→</span></a></p>
				</div>
			</div>
			<!-- 	ROW 4			 -->
			<figure id="content-7-1" class="projectBox os-animation" data-os-animation="fadeIn" data-os-animation-delay="0.4s">
				<div class="content-figure-image"></div>
				<img class="moveRt" src="https://firebasestorage.googleapis.com/v0/b/romerorickyio-87910.appspot.com/o/RomeroRicky-site%2Fsneakpeek-ios-single-phone.png?alt=media&token=790cea99-3654-4bc4-b9f5-375d65a4d8ee">
			</figure>
			<!-- title -->
			<div id="content-7-2" class="projectBox os-animation" data-os-animation="fadeIn" data-os-animation-delay="0.4s">
				<h2 class="projectBox-title">SneakPeek for Instagram iOS Swift</h2>
			</div>
			<!-- description -->
			<div id="content-8" class="projectBox projectBox-description-wrapper os-animation" data-os-animation="fadeIn" data-os-animation-delay="0.4s">
								<div class="projectBox-description">

				<p>
					SneakPeek allows the user to preview their next post using Instagram's API.
				</p>
				<p style="margin-left: 30px"><a class="link-learnMore" target="_blank" href="https://apple.co/2dQnNRH">itunes Link<span style="margin-left: 9px !important;">→</span></a></p>
				<p style="margin-left: 30px"><a class="link-learnMore" target="_blank" href="https://github.com/romeroricky/SneakPeek-Swift">GitHub - Swift<span style="margin-left: 9px !important;">→</span></a></p>
				</div>
			</div>
<!-- row 5 -->
		<div id="content-9" class="banner-section">
			<a href="https://medium.com/@romeroricky">
				<img src="https://firebasestorage.googleapis.com/v0/b/romerorickyio-87910.appspot.com/o/RomeroRicky-site%2FWordmark_White.png?alt=media&token=091d9660-13bd-4cbf-b1c3-7b72080dc650">
			</a>
		</div>
<!-- row 6 -->
<div id="content-10" class="featured-post">
	<div class="featured-post-user">
		<img alt="Ricky Romero" src="https://miro.medium.com/fit/c/80/80/1*qjEGKny3ZzC0Jqrzdo1g6Q.jpeg" width="40" height="40">
		<div class="username">
			<p>Ricky Romero</p>
			<p>Jul 6 · 3 min</p>
		</div>
	</div>
	<a href="https://medium.com/@romeroricky">
		<figure class="featured-post-image">
				<img alt="" src="https://miro.medium.com/fit/c/1400/420/1*KvnaMSnrbZm0F4CnrQ6-Iw.jpeg" width="700" height="210">
		</figure>
		<h1 class="featured-post-title">How to setup Express.js &amp; MongoDB</h1>
		<p class="featured-post-description">This is how I setup a Express.js with MongoDB project. This will be a fresh start.</p>
		</a>
</div>
<!-- row 7 -->
<div id="content-11" class="featured-post">
	<div class="featured-post-user">
		<img alt="Ricky Romero" src="https://miro.medium.com/fit/c/80/80/1*qjEGKny3ZzC0Jqrzdo1g6Q.jpeg" width="40" height="40">
		<div class="username">
			<p>Ricky Romero</p>
			<p>Jul 5 · 1 min</p>
		</div>
	</div>
	<a href="https://medium.com/@romeroricky">
		<figure class="featured-post-image">
				<img alt="" src="https://miro.medium.com/fit/c/1400/420/1*wYDi7xcqe_5chGzFSiUr9g.png" width="700" height="210">
		</figure>
		<h1 class="featured-post-title">File Uploads with Express.js 4.0+</h1>
		<p class="featured-post-description">This is how I uploaded a CSV file using <b>node.js</b>, <b>express.js</b>, and <b>Postman</b>.</p>
		</a>
</div>
		</div>
		<div class="footer-l"></div>
		<div class="footer">
			<div class="footer-logo">
				<a class="" href="/">
					<img src="https://firebasestorage.googleapis.com/v0/b/romerorickyio-87910.appspot.com/o/RomeroRicky-site%2Flogo-invert.png?alt=media&token=ec37aca1-49a4-4e09-9703-77b7c1209493" alt="">
				</a>
			</div>
			<div class="social-links">
				<a href="https://www.instagram.com/romerorickyio/" target="_blank"><i class="fab fa-instagram fa-2x"></i></a>
				<a href="https://twitter.com/romerorickyio" target="_blank"><i class="fab fa-twitter fa-2x"></i></a>
				<a href="https://github.com/romeroricky" target="_blank"><i class="fab fa-github-alt fa-2x"></i></a>
				<a href="https://www.linkedin.com/in/romeroricky/" target="_blank"><i class="fab fa-linkedin fa-2x"></i></a>
				<a href="https://medium.com/@romeroricky" target="_blank"><i class="fab fa-medium fa-2x"></i></a>
			</div>
		</div>
		<div class="footer-r"></div>

	</div>
	<!-- Scripts -->
	<script src="scripts/index.js"></script>
</body>

## romeroricky-io-home.markdown

      
    Raw
  

              romeroricky-io-home.markdown
            
          
    romeroricky.io - home

A Pen by Ricky Romero on CodePen.
License.

  
## romeroricky-io.markdown

      
    Raw
  

              romeroricky-io.markdown
            
          
    romeroricky.io

A Pen by Ricky Romero on CodePen.
License.

  
## script.js
function onScrollInit( items, trigger ) {
  items.each( function() {
    var osElement = $(this),
        osAnimationClass = osElement.attr('data-os-animation'),
        osAnimationDelay = osElement.attr('data-os-animation-delay');

        osElement.css({
          '-webkit-animation-delay':  osAnimationDelay,
          '-moz-animation-delay':     osAnimationDelay,
          'animation-delay':          osAnimationDelay
        });

        var osTrigger = ( trigger ) ? trigger : osElement;

        osTrigger.waypoint(function() {
          osElement.addClass('animated').toggleClass(osAnimationClass);
          },{
              triggerOnce: false,
              offset: '90%'
        });
  });
}

 onScrollInit( $('.os-animation') );
 onScrollInit( $('.staggered-animation'), $('.staggered-animation-container') );

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.js"></script>

## style.scss
* {
	margin: 0;
	padding: 0;
	font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body {
	background-color: #ffffff;
}
a {
	text-decoration: none;
	color: #000;
	padding-bottom: 1px;
}
.container {
	margin-right: auto;
	margin-left: auto;
	max-width: 1100px;
	padding-right: 18px;
	padding-left: 18px;
}
.col-xs,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-offset-0,
.col-xs-offset-1,
.col-xs-offset-2,
.col-xs-offset-3,
.col-xs-offset-4,
.col-xs-offset-5,
.col-xs-offset-6,
.col-xs-offset-7,
.col-xs-offset-8,
.col-xs-offset-9,
.col-xs-offset-10,
.col-xs-offset-11,
.col-xs-offset-12 {
	box-sizing: border-box;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	padding-right: 18px;
	padding-left: 18px;
}
.col-xs-2 {
	-ms-flex-preferred-size: 16.666%;
	flex-basis: 16.666%;
	max-width: 16.666%;
}
.col-xs-10 {
	-ms-flex-preferred-size: 83.333%;
	flex-basis: 83.333%;
	max-width: 83.333%;
}
.nmt-lg {
	margin-top: -15vh;
}
.moveRt {
	float: right;
}
.moveLt {
		float: left;

}
.grid {
	display: grid;
	background-color: #ffffff;
	/* 1fr == one colunm. add 1fr to add more
    colunm lines = 1-2,2-3,3-4
    */
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(100vh, 100vh) minmax(100px, auto) minmax(
			100px,
			auto
		);
	// grid-auto-rows: minmax(100px, auto);
	grid-template-areas:
		"header header"
		"content content"
		"footer footer";
}

.header {
	display: grid;
	background-size: cover;
	color: #fff;
	grid-area: header;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 0.5fr 3fr 0.5fr;
	grid-template-areas:
		"header-top header-top"
		"header-body header-body"
		"header-footer header-footer";
	// background: url(https://source.unsplash.com/OqtafYT5kTw/1920x1080) no-repeat
	// 	center center;
	// background: url(https://firebasestorage.googleapis.com/v0/b/romerorickyio-87910.appspot.com/o/RomeroRicky-site%2F_04A9327.JPG?alt=media&token=ec321596-f850-4f65-94c7-09258ad0bcf1) no-repeat center center;
	background-size: cover;
	.header-top {
		grid-area: header-top;
		background-color: #e6e6eb;
		// display: flex;
		align-items: center;
		justify-content: center;
		.header-top-nav {
			padding-top: 10vh;
			width: 100%;
			.header-top-nav-logo {
				float: left;
				img {
					width: 80px;
					min-height: 44px;
				}
			}
			.header-top-nav-menu {
				.menu-cta {
					display: inline-block;
					padding: 1em 5vh;
					margin: 0;
					font-size: 16px;
					font-family: inherit;
					font-weight: 900;
					text-align: center;
					vertical-align: middle;
					-ms-touch-action: manipulation;
					touch-action: manipulation;
					cursor: pointer;
					background-image: none;
					background-color: transparent;
					text-decoration: none !important;
					line-height: 1;
					border-width: 2px;
					border-style: solid;
					border-color: transparent;
					white-space: nowrap;
					transition: all 0.15s ease;
					-webkit-user-select: none;
					-moz-user-select: none;
					-ms-user-select: none;
					user-select: none;
					color: #000;
					border-color: #6f06ff;
					float: right;
				}
			}
		}
	}
	.header-body {
		grid-area: header-body;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #e6e6eb;

		.header-wrapper {
			color: #000000;
			.header-title {
				font-size: 24px;
				font-weight: 900;
				margin: 25px 20px 25px 20px;
				// text-align: center;
			}
			.header-subTitle {
				font-size: 15pxs;
				text-align: center;
			}
			.header-bio {
				margin: 25px 20px 25px 20px;
				font-size: 16px;
				text-align: left;
			}
			.social-links {
				margin-left: 20px;
				display: flex;
				i {
					padding: 5px;
				}
				a {
					text-decoration: none;
					color: #000;
					padding-bottom: 1px;
				}
				a:hover {
					color: #fff;
					background-color: #6f06ff;
				}
			}
		}
	}
	.header-footer {
		grid-area: header-footer;
		background-color: #e6e6eb;
		display: flex;
		align-items: center;
		justify-content: start;

		.header-footer-wrapper {
		}
	}
}
.content {
	// 	remove
	// border-style: solid;
	// border-width: 1px;
	// border-color: #fff;
	// border-style: dotted;
	//
	grid-area: content;
	background-color: #ffffff;
	color: #000000;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(100px, auto) minmax(100px, auto) minmax(100px, auto) minmax(
			100px,
			auto
		);
	grid-template-areas:
		"content-one-one content-one-two"
		"content-two content-two"
		"content-three-one content-three-two"
		"content-four content-four"
		"content-five-one content-five-two"
		"content-six content-six"
		"content-7-1 content-7-2"
		"content-8 content-8"
		"content-9 content-9"
		"content-10 content-10"
		"content-11 content-11";

	#content-one-one {
		grid-area: content-one-one;
	}
	#content-one-two {
		grid-area: content-one-two;
	}
	#content-two {
		grid-area: content-two;
	}
	#content-three-one {
		grid-area: content-three-one;
	}
	#content-three-two {
		grid-area: content-three-two;
	}
	#content-four {
		grid-area: content-four;
	}
	#content-five-one {
		grid-area: content-five-one;
	}
	#content-five-two {
		grid-area: content-five-two;
	}
	#content-six {
		grid-area: content-six;
	}
	#content-7-1 {
		grid-area: content-7-1;
	}
	#content-7-2 {
		grid-area: content-7-2;
	}
	#content-8 {
		grid-area: content-8;
	}
	#content-9 {
		grid-area: content-9;
	}
	#content-10 {
		grid-area: content-10;
	}
	#content-11 {
		grid-area: content-11;
	}
	#content-one-two:before {
		content: "";
		display: block;
		position: absolute;
		top: 70vh;
		// right: 25%;
		width: 129px;
		height: 111px;
		background: url(https://firebasestorage.googleapis.com/v0/b/romerorickyio-87910.appspot.com/o/RomeroRicky-site%2Fwork-hint.png?alt=media&token=c7f448b7-1792-409e-a1cc-4b4b5fdf3c4f)
			0 0 no-repeat;
	}
	.content-header {
		stroke: #fff;
	}
	.projectBox {
		height: auto;
		.projectBox-description-wrapper {
			padding: 20px;
		}

		.projectBox-title {
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			margin-left: 30px;
			margin-right: 30px;
			font-size: 24px;
			font-weight: 900;
		}
		a {
			text-decoration: none;
			color: #6f06ff;
		}
		img {
			// border-radius: 4px;
			max-width: 100%;
			height: auto;
			img:hover {
				box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
				-ms-transform: translateY(-8px);
				transform: translateY(-8px);
			}
		}
		.projectBox-description {
			margin: 10px 30px 10px 30px;
		}
	}
	.banner-section {
		height: 100px;
		color: #fff;
		background-color: #000000;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.featured-post {
		background-color: rgba(255, 255, 255, 1);
		padding: 23px 0;
		margin: 10px 10px 24px 10px;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 5px;
		a {
			text-decoration: none;
		}
		.featured-post-image {
			margin-top: 38px;
			padding-left: 20px;
			padding-right: 20px;

			img {
				height: 100%;
				width: 100%;
				left: 0;
				top: 0;
			}
		}
		.featured-post-user {
			flex-direction: row;
			display: flex;
			padding-right: 20px;
			padding-left: 20px;
			.username {
				display: flex;
				flex-direction: column;
				justify-content: center;
				p {
					margin-left: 15px;
					margin-bottom: 0px;
					letter-spacing: 0px;
					font-size: 15.8px;
					line-height: 20px;
					color: rgba(0, 0, 0, 0.54);
				}
			}
			img {
				width: 40px;
				height: 40px;
				border-radius: 50%;
				vertical-align: middle;
			}
		}
		.featured-post-title {
			margin-top: 0.86em;
			margin-bottom: -0.28em;
			padding-left: 20px;
			padding-right: 20px;
			letter-spacing: -0.022em;
			line-height: 1.12;
			font-size: 30px;
			font-weight: 600;
			color: rgba(0, 0, 0, 0.84);
		}
		.featured-post-description {
			margin-top: 1em;
			margin-bottom: -0.46em;
			padding-left: 20px;
			padding-right: 20px;
			color: rgba(0, 0, 0, 0.84);
			line-height: 1.58;
			font-size: 18px;
			font-style: normal;
			font-weight: 300;
			letter-spacing: -0.004em;
			font-family: Georgia, Cambria, "Times New Roman", Times, serif;
		}
	}
}
.footer {
	grid-area: footer;
	background-color: #000000;
	color: #fff;
	padding-top: 20vh;
	padding-bottom: 20vh;
	display: flex;
	align-items: center;
	.footer-logo {
		float: left;
		margin-left: 10px;
		img {
			width: 80px;
			min-height: 44px;
		}
	}
	.social-links {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		a {
			padding: 5px;
			color: #fff;
		}
		a:hover {
			color: #000;
			background-color: #6f06ff;
		}
	}
}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
	.grid {
		display: grid;
		/* 1fr == one colunm. add 1fr to add more
      colunm lines = 1-2,2-3,3-4
      */
		grid-template-columns: 1fr 3fr 3fr 1fr;
		// grid-template-columns: repeat(4, 1fr);
		// grid-template-rows: repeat(4, 1fr);
		grid-template-rows: minmax(100vh, 100vh) minmax(100vh, auto) minmax(
				200px,
				auto
			);
		// grid-auto-rows: minmax(100px, auto);
		grid-template-areas:
			"header header header header"
			". content content ."
			"footer-l footer footer footer-r";
		.footer-l {
			grid-area: footer-l;
			background-color: #000;
		}
		.footer-r {
			grid-area: footer-r;
			background-color: #000;
		}
		.header {
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 0.5fr 3fr 0.5fr;
			grid-template-areas:
				"header-top"
				"header-body"
				"header-footer";
			// background: url(https://source.unsplash.com/OqtafYT5kTw/1920x1080)
			// no-repeat center center;
			background-size: cover;
			grid-area: header;
			.header-top {
				// background-color: rgba(0, 0, 0, 0.8);
				grid-area: header-top;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.header-body {
				grid-area: header-body;
				// grid-column: 2/4;
				display: flex;
				align-items: center;
				justify-content: center;
				// background-color: rgba(0, 0, 0, 0.8);

				.header-wrapper {
					width: 100%;
					min-width: 500px;
					max-width: 800px;
					.header-title {
						font-size: 50px;
						text-align: center;
					}
					.header-subTitle {
						font-size: 15px;
						text-align: center;
					}
					.header-bio {
						margin: 25px 20px 25px 20px;
						font-size: 20px;
						text-align: left;
					}
					.social-links {
						margin-left: 20px;

						i {
							padding: 5px;
						}
					}
				}
			}
			.header-footer {
				// background-color: rgba(0, 0, 0, 0.8);
				grid-area: header-footer;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	.content {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: minmax(200px, auto) minmax(200px, auto) minmax(
				200px,
				auto
			) minmax(200px, auto);
		grid-template-areas:
			"content-one-one content-one-two"
			"content-three-one content-three-two"
			"content-five-one content-five-two"
			"content-7-1 content-7-2"
			"content-9 content-9"
			"content-10 content-11";

		#content-two {
			grid-area: content-one-one;
		}
		#content-four {
			grid-area: content-three-two;
		}
		#content-six {
			grid-area: content-five-one;
		}
		#content-8 {
			grid-area: content-7-2;
		}
		.projectBox {

			.projectBox-title{
				align-items: start;
				padding-top: 2rem;
			}

		}
			.projectBox-description-wrapper {
		 		display: flex;
    		align-items: center;
				padding-top: 2rem;
		 }
		.banner-section {
			background: url(https://source.unsplash.com/2xEQDxB0ss4/1600x900) no-repeat center center/cover;
    	background-attachment: fixed;
	}
	}
	.sidebar {
		grid-area: sidebar;
		display: block;
	}
}

// laptop size
@media (min-width: 1200px) {

	.content {
				.projectBox {

			.projectBox-title{
				align-items: start;
				padding-top: 10rem;
			}

		}
		.projectBox-description {
				font-size: 18px;
		}
	}
}
// animation

.os-animation{
  opacity: 0;
}

.os-animation.animated{
    opacity: 1;
}

/**
 * index.scss
 * - Add any styles you want here!
 */

/* https://www.youtube.com/watch?v=HgwCeNVPlo0&t=490s */
/*
1fr = one colunm. 3 lines. exp:{ 1-2, 2-3 } colunm 1 = 1-2, colunm 2 = 2-3.

    grid-template-areas: makes the grid. must have 'grid-area: title;' in the class syle
    use . for white space replace name with .

     grid-column-start: 1;
        grid-column-end: 4;
        grid-column: 1/3; is the same as above.
        ----
        grid-column-end: span 2; will use two colunms
        ----
        grid-row-end: span 2; will span by rows


*/

## styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
	<body>
	<!--Font-awsome-->
	<!-- <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> -->
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
	<div class="grid">
	<div class="header">
	<div class="header-top">
	<div class="header-top-nav">
	<div class="container">
	<div class="row">
	<div class="col-xs-2">
	<a class="header-top-nav-logo" href="https://romeroricky.com/">
	<img src="https://firebasestorage.googleapis.com/v0/b/romerorickyio-87910.appspot.com/o/RomeroRicky-site%2Flogo-default.png?alt=media&token=e9ef8264-2d2a-4148-bb9c-e4768a7bd788" alt="Superawesome">
	</a>
	</div>

	<nav class="col-xs-10">
	<!-- <div class="header-top-nav-menu">
	<a class="menu-cta" href="">Contact me</a>
	</div> -->
	</nav>
	</div>
	</div>
	</div>
	</div>
	<div class="header-body">

	<div class="header-wrapper">
	<div class="header-title">Hello, my name is Ricky</div>
	<!-- <div class="header-subTitle">
	(214)-763-7039 \| <a href="mailto:ricky@romeroricky.com" target="_top">ricky@romeroricky.com</a>
	</div> -->
	<div class="header-bio os-animation" data-os-animation="fadeIn" data-os-animation-delay="0.4s">
	I enjoy turning complex problems into intuitive software. I believe in collaboration, not competition, because in the end, it’s all about our users.
	</div>
	<div class="social-links os-animation" data-os-animation="fadeIn" data-os-animation-delay="0.6s">
	<a href="https://www.instagram.com/romerorickyio/" target="_blank"><i class="fab fa-instagram fa-2x"></i></a>
	<a href="https://twitter.com/romerorickyio" target="_blank"><i class="fab fa-twitter fa-2x"></i></a>
	<a href="https://github.com/romeroricky" target="_blank"><i class="fab fa-github-alt fa-2x"></i></a>
	<a href="https://www.linkedin.com/in/romeroricky/" target="_blank"><i class="fab fa-linkedin fa-2x"></i></a>
	<a href="https://medium.com/@romeroricky" target="_blank"><i class="fab fa-medium fa-2x"></i></a>
	</div>

	</div>

	</div>
	<!-- testing -->
	<div class="header-footer">
	<div class="header-footer-wrapper">
	</div>
	</div>
	</div>
	<!-- Project Section -->
	<div class="content">
	<!-- ROW 1 -->
	<!-- title -->
	<div id="content-one-one" class="projectBox">
	<h2 class="projectBox-title ">FEATURED PROJECTS</h2>
	</div>
	<!-- image -->
	<figure id="content-one-two" class="projectBox">
	<div class="content-figure-image nmt-lg"></div>
	<img src="https://firebasestorage.googleapis.com/v0/b/romerorickyio-87910.appspot.com/o/RomeroRicky-site%2Fsneakpeek-ios-single-phone.png?alt=media&token=790cea99-3654-4bc4-b9f5-375d65a4d8ee">
	</figure>
	<!-- description -->
	<div id="content-two" class="projectBox projectBox-description-wrapper">
	<p class="projectBox-description">In the past I've helped people think up and launch their new ideas, as well as improve their existing products through redesign of their user interfaces, or completely rethinking entire products or websites.</p>
	</div>

	<!-- ROW 2 -->
	<!-- image -->
	<figure id="content-three-one" class="projectBox os-animation" data-os-animation="fadeIn" data-os-animation-delay="0.4s">
	<div class="content-figure-image"></div>
	<img class="moveRt" src="https://firebasestorage.googleapis.com/v0/b/romerorickyio-87910.appspot.com/o/RomeroRicky-site%2Falmobile-single-phone.png?alt=media&token=07459fc1-6080-4263-af74-8640cc191cf5">
	</figure>
	<!-- Title -->
	<div id="content-three-two" class="projectBox">
	<h2 class="projectBox-title os-animation" data-os-animation="fadeInRight" data-os-animation-delay="0.2s">ALMobile (PWA)</h2>
	</div>
	<!-- description -->
	<div id="content-four" class="projectBox projectBox-description-wrapper os-animation" data-os-animation="fadeInRight" data-os-animation-delay="0.2s">
	<div class="projectBox-description">
	<p>Mobile web application (PWA) lead developer at Austin Lane Technologies from May 2017 - June 2018.
	</br>
	Primarily utilized <b>HTML 5</b>, <b>CSS / LESS</b>, <b>JavaScript</b>, <b>SQLite</b>, and <b>AJAX</b> on the mobile web application, and <b>C# / .net</b>, and <b>SQL</b> on the backend.</p>
	</br>
	<p style="margin-left: 30px"><a class="link-learnMore" target="_blank" href="http://www.austinlane.com/almobile/products">Learn More<span style="margin-left: 9px !important;">→</span></a></p>
	</div>
	</div>

	<!-- ROW 3 -->
	<!-- Title -->
	<div id="content-five-one" class="projectBox os-animation" data-os-animation="fadeIn" data-os-animation-delay="0.4s">
	<h2 class="projectBox-title">SneakPeek For Instagram</br> React Native</h2>
	</div>
	<!-- Image -->
	<figure id="content-five-two" class="projectBox os-animation" data-os-animation="fadeIn" data-os-animation-delay="0.4s">
	<div class="content-figure-image"></div>
	<img src="https://firebasestorage.googleapis.com/v0/b/romerorickyio-87910.appspot.com/o/RomeroRicky-site%2Fsneakpeek-single-phone.png?alt=media&token=824257a9-0702-46a2-b4c8-156d5f2b9a42">
	</figure>
	<!-- description -->
	<div id="content-six" class="projectBox projectBox-description-wrapper os-animation" data-os-animation="fadeIn" data-os-animation-delay="0.4s">
	<div class="projectBox-description">
	<p >
	SneakPeek allows the user to preview their next post using Instagram's API.
	</p>
	<p style="margin-left: 30px"><a class="link-learnMore" target="_blank" href="https://github.com/romeroricky/SneakPeek">GitHub - React Native<span style="margin-left: 9px !important;">→</span></a></p>
	</div>
	</div>
	<!-- ROW 4 -->
	<figure id="content-7-1" class="projectBox os-animation" data-os-animation="fadeIn" data-os-animation-delay="0.4s">
	<div class="content-figure-image"></div>
	<img class="moveRt" src="https://firebasestorage.googleapis.com/v0/b/romerorickyio-87910.appspot.com/o/RomeroRicky-site%2Fsneakpeek-ios-single-phone.png?alt=media&token=790cea99-3654-4bc4-b9f5-375d65a4d8ee">
	</figure>
	<!-- title -->
	<div id="content-7-2" class="projectBox os-animation" data-os-animation="fadeIn" data-os-animation-delay="0.4s">
	<h2 class="projectBox-title">SneakPeek for Instagram iOS Swift</h2>
	</div>
	<!-- description -->
	<div id="content-8" class="projectBox projectBox-description-wrapper os-animation" data-os-animation="fadeIn" data-os-animation-delay="0.4s">
	<div class="projectBox-description">

	<p>
	SneakPeek allows the user to preview their next post using Instagram's API.
	</p>
	<p style="margin-left: 30px"><a class="link-learnMore" target="_blank" href="https://apple.co/2dQnNRH">itunes Link<span style="margin-left: 9px !important;">→</span></a></p>
	<p style="margin-left: 30px"><a class="link-learnMore" target="_blank" href="https://github.com/romeroricky/SneakPeek-Swift">GitHub - Swift<span style="margin-left: 9px !important;">→</span></a></p>
	</div>
	</div>
	<!-- row 5 -->
	<div id="content-9" class="banner-section">
	<a href="https://medium.com/@romeroricky">
	<img src="https://firebasestorage.googleapis.com/v0/b/romerorickyio-87910.appspot.com/o/RomeroRicky-site%2FWordmark_White.png?alt=media&token=091d9660-13bd-4cbf-b1c3-7b72080dc650">
	</a>
	</div>
	<!-- row 6 -->
	<div id="content-10" class="featured-post">
	<div class="featured-post-user">
	<img alt="Ricky Romero" src="https://miro.medium.com/fit/c/80/80/1*qjEGKny3ZzC0Jqrzdo1g6Q.jpeg" width="40" height="40">
	<div class="username">
	<p>Ricky Romero</p>
	<p>Jul 6 · 3 min</p>
	</div>
	</div>
	<a href="https://medium.com/@romeroricky">
	<figure class="featured-post-image">
	<img alt="" src="https://miro.medium.com/fit/c/1400/420/1*KvnaMSnrbZm0F4CnrQ6-Iw.jpeg" width="700" height="210">
	</figure>
	<h1 class="featured-post-title">How to setup Express.js & MongoDB</h1>
	<p class="featured-post-description">This is how I setup a Express.js with MongoDB project. This will be a fresh start.</p>
	</a>
	</div>
	<!-- row 7 -->
	<div id="content-11" class="featured-post">
	<div class="featured-post-user">
	<img alt="Ricky Romero" src="https://miro.medium.com/fit/c/80/80/1*qjEGKny3ZzC0Jqrzdo1g6Q.jpeg" width="40" height="40">
	<div class="username">
	<p>Ricky Romero</p>
	<p>Jul 5 · 1 min</p>
	</div>
	</div>
	<a href="https://medium.com/@romeroricky">
	<figure class="featured-post-image">
	<img alt="" src="https://miro.medium.com/fit/c/1400/420/1*wYDi7xcqe_5chGzFSiUr9g.png" width="700" height="210">
	</figure>
	<h1 class="featured-post-title">File Uploads with Express.js 4.0+</h1>
	<p class="featured-post-description">This is how I uploaded a CSV file using <b>node.js</b>, <b>express.js</b>, and <b>Postman</b>.</p>
	</a>
	</div>
	</div>
	<div class="footer-l"></div>
	<div class="footer">
	<div class="footer-logo">
	<a class="" href="/">
	<img src="https://firebasestorage.googleapis.com/v0/b/romerorickyio-87910.appspot.com/o/RomeroRicky-site%2Flogo-invert.png?alt=media&token=ec37aca1-49a4-4e09-9703-77b7c1209493" alt="">
	</a>
	</div>
	<div class="social-links">
	<a href="https://www.instagram.com/romerorickyio/" target="_blank"><i class="fab fa-instagram fa-2x"></i></a>
	<a href="https://twitter.com/romerorickyio" target="_blank"><i class="fab fa-twitter fa-2x"></i></a>
	<a href="https://github.com/romeroricky" target="_blank"><i class="fab fa-github-alt fa-2x"></i></a>
	<a href="https://www.linkedin.com/in/romeroricky/" target="_blank"><i class="fab fa-linkedin fa-2x"></i></a>
	<a href="https://medium.com/@romeroricky" target="_blank"><i class="fab fa-medium fa-2x"></i></a>
	</div>
	</div>
	<div class="footer-r"></div>

	</div>
	<!-- Scripts -->
	<script src="scripts/index.js"></script>
	</body>
	function onScrollInit( items, trigger ) {
	items.each( function() {
	var osElement = $(this),
	osAnimationClass = osElement.attr('data-os-animation'),
	osAnimationDelay = osElement.attr('data-os-animation-delay');

	osElement.css({
	'-webkit-animation-delay': osAnimationDelay,
	'-moz-animation-delay': osAnimationDelay,
	'animation-delay': osAnimationDelay
	});

	var osTrigger = ( trigger ) ? trigger : osElement;

	osTrigger.waypoint(function() {
	osElement.addClass('animated').toggleClass(osAnimationClass);
	},{
	triggerOnce: false,
	offset: '90%'
	});
	});
	}

	onScrollInit( $('.os-animation') );
	onScrollInit( $('.staggered-animation'), $('.staggered-animation-container') );
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.js"></script>
	* {
	margin: 0;
	padding: 0;
	font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	}
	body {
	background-color: #ffffff;
	}
	a {
	text-decoration: none;
	color: #000;
	padding-bottom: 1px;
	}
	.container {
	margin-right: auto;
	margin-left: auto;
	max-width: 1100px;
	padding-right: 18px;
	padding-left: 18px;
	}
	.col-xs,
	.col-xs-1,
	.col-xs-2,
	.col-xs-3,
	.col-xs-4,
	.col-xs-5,
	.col-xs-6,
	.col-xs-7,
	.col-xs-8,
	.col-xs-9,
	.col-xs-10,
	.col-xs-11,
	.col-xs-12,
	.col-xs-offset-0,
	.col-xs-offset-1,
	.col-xs-offset-2,
	.col-xs-offset-3,
	.col-xs-offset-4,
	.col-xs-offset-5,
	.col-xs-offset-6,
	.col-xs-offset-7,
	.col-xs-offset-8,
	.col-xs-offset-9,
	.col-xs-offset-10,
	.col-xs-offset-11,
	.col-xs-offset-12 {
	box-sizing: border-box;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	padding-right: 18px;
	padding-left: 18px;
	}
	.col-xs-2 {
	-ms-flex-preferred-size: 16.666%;
	flex-basis: 16.666%;
	max-width: 16.666%;
	}
	.col-xs-10 {
	-ms-flex-preferred-size: 83.333%;
	flex-basis: 83.333%;
	max-width: 83.333%;
	}
	.nmt-lg {
	margin-top: -15vh;
	}
	.moveRt {
	float: right;
	}
	.moveLt {
	float: left;

	}
	.grid {
	display: grid;
	background-color: #ffffff;
	/* 1fr == one colunm. add 1fr to add more
	colunm lines = 1-2,2-3,3-4
	*/
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(100vh, 100vh) minmax(100px, auto) minmax(
	100px,
	auto
	);
	// grid-auto-rows: minmax(100px, auto);
	grid-template-areas:
	"header header"
	"content content"
	"footer footer";
	}

	.header {
	display: grid;
	background-size: cover;
	color: #fff;
	grid-area: header;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 0.5fr 3fr 0.5fr;
	grid-template-areas:
	"header-top header-top"
	"header-body header-body"
	"header-footer header-footer";
	// background: url(https://source.unsplash.com/OqtafYT5kTw/1920x1080) no-repeat
	// center center;
	// background: url(https://firebasestorage.googleapis.com/v0/b/romerorickyio-87910.appspot.com/o/RomeroRicky-site%2F_04A9327.JPG?alt=media&token=ec321596-f850-4f65-94c7-09258ad0bcf1) no-repeat center center;
	background-size: cover;
	.header-top {
	grid-area: header-top;
	background-color: #e6e6eb;
	// display: flex;
	align-items: center;
	justify-content: center;
	.header-top-nav {
	padding-top: 10vh;
	width: 100%;
	.header-top-nav-logo {
	float: left;
	img {
	width: 80px;
	min-height: 44px;
	}
	}
	.header-top-nav-menu {
	.menu-cta {
	display: inline-block;
	padding: 1em 5vh;
	margin: 0;
	font-size: 16px;
	font-family: inherit;
	font-weight: 900;
	text-align: center;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	background-image: none;
	background-color: transparent;
	text-decoration: none !important;
	line-height: 1;
	border-width: 2px;
	border-style: solid;
	border-color: transparent;
	white-space: nowrap;
	transition: all 0.15s ease;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	color: #000;
	border-color: #6f06ff;
	float: right;
	}
	}
	}
	}
	.header-body {
	grid-area: header-body;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #e6e6eb;

	.header-wrapper {
	color: #000000;
	.header-title {
	font-size: 24px;
	font-weight: 900;
	margin: 25px 20px 25px 20px;
	// text-align: center;
	}
	.header-subTitle {
	font-size: 15pxs;
	text-align: center;
	}
	.header-bio {
	margin: 25px 20px 25px 20px;
	font-size: 16px;
	text-align: left;
	}
	.social-links {
	margin-left: 20px;
	display: flex;
	i {
	padding: 5px;
	}
	a {
	text-decoration: none;
	color: #000;
	padding-bottom: 1px;
	}
	a:hover {
	color: #fff;
	background-color: #6f06ff;
	}
	}
	}
	}
	.header-footer {
	grid-area: header-footer;
	background-color: #e6e6eb;
	display: flex;
	align-items: center;
	justify-content: start;

	.header-footer-wrapper {
	}
	}
	}
	.content {
	// remove
	// border-style: solid;
	// border-width: 1px;
	// border-color: #fff;
	// border-style: dotted;
	//
	grid-area: content;
	background-color: #ffffff;
	color: #000000;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(100px, auto) minmax(100px, auto) minmax(100px, auto) minmax(
	100px,
	auto
	);
	grid-template-areas:
	"content-one-one content-one-two"
	"content-two content-two"
	"content-three-one content-three-two"
	"content-four content-four"
	"content-five-one content-five-two"
	"content-six content-six"
	"content-7-1 content-7-2"
	"content-8 content-8"
	"content-9 content-9"
	"content-10 content-10"
	"content-11 content-11";

	#content-one-one {
	grid-area: content-one-one;
	}
	#content-one-two {
	grid-area: content-one-two;
	}
	#content-two {
	grid-area: content-two;
	}
	#content-three-one {
	grid-area: content-three-one;
	}
	#content-three-two {
	grid-area: content-three-two;
	}
	#content-four {
	grid-area: content-four;
	}
	#content-five-one {
	grid-area: content-five-one;
	}
	#content-five-two {
	grid-area: content-five-two;
	}
	#content-six {
	grid-area: content-six;
	}
	#content-7-1 {
	grid-area: content-7-1;
	}
	#content-7-2 {
	grid-area: content-7-2;
	}
	#content-8 {
	grid-area: content-8;
	}
	#content-9 {
	grid-area: content-9;
	}
	#content-10 {
	grid-area: content-10;
	}
	#content-11 {
	grid-area: content-11;
	}
	#content-one-two:before {
	content: "";
	display: block;
	position: absolute;
	top: 70vh;
	// right: 25%;
	width: 129px;
	height: 111px;
	background: url(https://firebasestorage.googleapis.com/v0/b/romerorickyio-87910.appspot.com/o/RomeroRicky-site%2Fwork-hint.png?alt=media&token=c7f448b7-1792-409e-a1cc-4b4b5fdf3c4f)
	0 0 no-repeat;
	}
	.content-header {
	stroke: #fff;
	}
	.projectBox {
	height: auto;
	.projectBox-description-wrapper {
	padding: 20px;
	}

	.projectBox-title {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	margin-left: 30px;
	margin-right: 30px;
	font-size: 24px;
	font-weight: 900;
	}
	a {
	text-decoration: none;
	color: #6f06ff;
	}
	img {
	// border-radius: 4px;
	max-width: 100%;
	height: auto;
	img:hover {
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
	-ms-transform: translateY(-8px);
	transform: translateY(-8px);
	}
	}
	.projectBox-description {
	margin: 10px 30px 10px 30px;
	}
	}
	.banner-section {
	height: 100px;
	color: #fff;
	background-color: #000000;
	display: flex;
	align-items: center;
	justify-content: center;
	}
	.featured-post {
	background-color: rgba(255, 255, 255, 1);
	padding: 23px 0;
	margin: 10px 10px 24px 10px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 5px;
	a {
	text-decoration: none;
	}
	.featured-post-image {
	margin-top: 38px;
	padding-left: 20px;
	padding-right: 20px;

	img {
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	}
	}
	.featured-post-user {
	flex-direction: row;
	display: flex;
	padding-right: 20px;
	padding-left: 20px;
	.username {
	display: flex;
	flex-direction: column;
	justify-content: center;
	p {
	margin-left: 15px;
	margin-bottom: 0px;
	letter-spacing: 0px;
	font-size: 15.8px;
	line-height: 20px;
	color: rgba(0, 0, 0, 0.54);
	}
	}
	img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	vertical-align: middle;
	}
	}
	.featured-post-title {
	margin-top: 0.86em;
	margin-bottom: -0.28em;
	padding-left: 20px;
	padding-right: 20px;
	letter-spacing: -0.022em;
	line-height: 1.12;
	font-size: 30px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.84);
	}
	.featured-post-description {
	margin-top: 1em;
	margin-bottom: -0.46em;
	padding-left: 20px;
	padding-right: 20px;
	color: rgba(0, 0, 0, 0.84);
	line-height: 1.58;
	font-size: 18px;
	font-style: normal;
	font-weight: 300;
	letter-spacing: -0.004em;
	font-family: Georgia, Cambria, "Times New Roman", Times, serif;
	}
	}
	}
	.footer {
	grid-area: footer;
	background-color: #000000;
	color: #fff;
	padding-top: 20vh;
	padding-bottom: 20vh;
	display: flex;
	align-items: center;
	.footer-logo {
	float: left;
	margin-left: 10px;
	img {
	width: 80px;
	min-height: 44px;
	}
	}
	.social-links {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	a {
	padding: 5px;
	color: #fff;
	}
	a:hover {
	color: #000;
	background-color: #6f06ff;
	}
	}
	}

	// Medium devices (tablets, 768px and up)
	@media (min-width: 768px) {
	.grid {
	display: grid;
	/* 1fr == one colunm. add 1fr to add more
	colunm lines = 1-2,2-3,3-4
	*/
	grid-template-columns: 1fr 3fr 3fr 1fr;
	// grid-template-columns: repeat(4, 1fr);
	// grid-template-rows: repeat(4, 1fr);
	grid-template-rows: minmax(100vh, 100vh) minmax(100vh, auto) minmax(
	200px,
	auto
	);
	// grid-auto-rows: minmax(100px, auto);
	grid-template-areas:
	"header header header header"
	". content content ."
	"footer-l footer footer footer-r";
	.footer-l {
	grid-area: footer-l;
	background-color: #000;
	}
	.footer-r {
	grid-area: footer-r;
	background-color: #000;
	}
	.header {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 0.5fr 3fr 0.5fr;
	grid-template-areas:
	"header-top"
	"header-body"
	"header-footer";
	// background: url(https://source.unsplash.com/OqtafYT5kTw/1920x1080)
	// no-repeat center center;
	background-size: cover;
	grid-area: header;
	.header-top {
	// background-color: rgba(0, 0, 0, 0.8);
	grid-area: header-top;
	display: flex;
	align-items: center;
	justify-content: center;
	}
	.header-body {
	grid-area: header-body;
	// grid-column: 2/4;
	display: flex;
	align-items: center;
	justify-content: center;
	// background-color: rgba(0, 0, 0, 0.8);

	.header-wrapper {
	width: 100%;
	min-width: 500px;
	max-width: 800px;
	.header-title {
	font-size: 50px;
	text-align: center;
	}
	.header-subTitle {
	font-size: 15px;
	text-align: center;
	}
	.header-bio {
	margin: 25px 20px 25px 20px;
	font-size: 20px;
	text-align: left;
	}
	.social-links {
	margin-left: 20px;

	i {
	padding: 5px;
	}
	}
	}
	}
	.header-footer {
	// background-color: rgba(0, 0, 0, 0.8);
	grid-area: header-footer;
	display: flex;
	align-items: center;
	justify-content: center;
	}
	}
	}
	.content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(200px, auto) minmax(200px, auto) minmax(
	200px,
	auto
	) minmax(200px, auto);
	grid-template-areas:
	"content-one-one content-one-two"
	"content-three-one content-three-two"
	"content-five-one content-five-two"
	"content-7-1 content-7-2"
	"content-9 content-9"
	"content-10 content-11";

	#content-two {
	grid-area: content-one-one;
	}
	#content-four {
	grid-area: content-three-two;
	}
	#content-six {
	grid-area: content-five-one;
	}
	#content-8 {
	grid-area: content-7-2;
	}
	.projectBox {

	.projectBox-title{
	align-items: start;
	padding-top: 2rem;
	}

	}
	.projectBox-description-wrapper {
	display: flex;
	align-items: center;
	padding-top: 2rem;
	}
	.banner-section {
	background: url(https://source.unsplash.com/2xEQDxB0ss4/1600x900) no-repeat center center/cover;
	background-attachment: fixed;
	}
	}
	.sidebar {
	grid-area: sidebar;
	display: block;
	}
	}

	// laptop size
	@media (min-width: 1200px) {

	.content {
	.projectBox {

	.projectBox-title{
	align-items: start;
	padding-top: 10rem;
	}

	}
	.projectBox-description {
	font-size: 18px;
	}
	}
	}
	// animation

	.os-animation{
	opacity: 0;
	}

	.os-animation.animated{
	opacity: 1;
	}

	/**
	* index.scss
	* - Add any styles you want here!
	*/

	/* https://www.youtube.com/watch?v=HgwCeNVPlo0&t=490s */
	/*
	1fr = one colunm. 3 lines. exp:{ 1-2, 2-3 } colunm 1 = 1-2, colunm 2 = 2-3.

	grid-template-areas: makes the grid. must have 'grid-area: title;' in the class syle
	use . for white space replace name with .

	grid-column-start: 1;
	grid-column-end: 4;
	grid-column: 1/3; is the same as above.
	----
	grid-column-end: span 2; will use two colunms
	----
	grid-row-end: span 2; will span by rows


	*/
	<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />