<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Jake Zhao</title>
	<style>
		html {
			font-family: Arial, system-ui, monospace;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	
		body {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	
		nav {
			position: fixed;
			left: 0;
			top: 0;
			display: flex;
			width: 100%;
			height: 60px;
			background-color: rgb(22, 18, 71);
		}
	
		#links {
			display: flex;
			width: 300px;
			justify-content: space-between;
			align-items: center;
			margin: 0 30px 0 auto;
		}
	
		.nav-link {
			font-family: Arial, Helvetica, sans-serif;
			font-size: 16px;
			letter-spacing: 0px;
			word-spacing: 0px;
			color: #ffffff;
			font-weight: 700;
			text-decoration: none solid rgb(68, 68, 68);
			font-style: normal;
			text-transform: none;
		}
	
		#welcome-section {
			width: 100%;
			height: 100vh;
			background-color: rgb(198, 253, 219);
			display: flex;
			justify-content: center;
			align-items: center;
		}
	
		#proj-links {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			width: 80vw;
			flex-wrap: wrap;
			overflow: hidden;
		}

		#projects{
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	
		.project-tile {
			width: 200px;
			height: 200px;
			background-size: 100% 100%;
			margin: 0 10px 20px 10px;
		}
	
		#project-1 {
			background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/1f/Square_diffraction.jpg');
		}
	
		#project-2 {
			background-image: url('./images/marinus_non-uni_both-ends-min.jpg');
		}
	
		#project-3 {
			background-image: url('https://user-images.githubusercontent.com/50648015/150681683-d010961b-fbc9-4360-b000-05a66104ac5a.png');
		}
	
		section {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	
		@media (max-width: 375px) {
			#links {
				flex-direction: column;
				justify-content: space-around;
			}
	
			.nav-link {
				font-size: 12px;
			}
	
		}
	</style>

	</head>
	<body>
		<nav id="navbar">
			<div id="links">
				<a href="#welcome-section" class="nav-link">Welcome</a>
				<a href="#projects" class="nav-link">Projects</a>
				<a href="#personal-links" class="nav-link">Personal links</a>
			</div>
		</nav>
	
		<section id="welcome-section">
			<h1>Welcome to my portfolio</h1>
			<h2>This page will always be a work in progress &#128187 &#128736</h2>
		</section>
	
		<section id="projects">
			<h2>Here are some of my projects!</h2>
			<div id="proj-links">
				<a href="https://github.com/jakeinater/spectralILU" id="project-1" class="project-tile" target="_blank">
				</a>
				<a href="https://github.com/jakeinater/bacteria_simulation" id="project-2" class="project-tile" target="_blank">
				</a>
				<a href="https://github.com/bryanhyang/McHacks9" id="project-3" class="project-tile" target="_blank">
				</a>
			</div>
		</section>
	
		<section id="personal-links">
			<a id="profile-link" href="https://github.com/jakeinater" target="_blank">Github</a>
			<a id="profile-link" href="https://www.linkedin.com/in/jake-zhao/" target="_blank">LinkedIn</a>
		</section>

	</body>
</html>