_about.html.erb

<div class="about-container" id="about-one">

	<div class="nav-container">
		<a class="nav-link"><%= image_tag "jclogo.png", class: "jclogo"%></a>

			<nav>
				<ul>		
					<li><a href="#web-apps">Web Apps</a></li>
					<li><a href="#blog">Blog</a></li>
					<li><a href="#tools">Tools</a></li>
					<li><a href="#contact">Contact</a></li>
				</ul>	
			</nav>	
	</div>		

	<br class="clear" />
	<div class="about-top">
		<h3>Hi, my name is</h3>
		<div class="name">
			<h1>Justin</h1>
		</div>
	</div>

	<div class="typebox" style="min-height: 119px;">
	  <div id="typed-strings">
	  <h3 class="type-active"><strong style="font-size: 20px; line-height: 1.5em;">...and I'm a Full Stack Web Developer.<br>Have a look around!&nbsp; <br><br><a href="#web-apps"><%= image_tag "down-arrow.png", class: "down-arrow"%></a></strong></h3>
	 </div> 
	 <span id="typed"></span>	
	 <br />
	</div>

<div class="footer">
  <div class="social-links1">
		<ul>
				<li><a href="https://github.com/cefaijustin"><i class="fab fa-github-square links"></a></i></li>

				<li><a href="https://www.linkedin.com/in/justin-cefai/"><i class="fab fa-linkedin links"></i></a></li>

				<li><a href="https://medium.com/@cefaijustin"><i class="fab fa-medium links"></i></a></li>

				<li><a href="https://www.instagram.com/justincefai/?hl=en"><i class="fab fa-instagram links"></i></a></li>
			</ul>	
			<div class="made-by">
		<p>© justin cefai | 2018</p>
	</div>
</div>	

	</div>


</div>	

<script>

	var typed = new Typed('#typed', {
		stringsElement: '#typed-strings',
		startDelay: 1000,
		typeSpeed: 30,
		backSpeed: 20,
		onComplete: function(self) {  
  		$('a[href="#web-apps"]').click(scrollToHash) 
		};
	});																							 
	document.querySelectorAll(".typed-cursor")[0].style.display = "none";
	
</script>