Merge pull request #1 from lerko96/end-of-year

looks good

index.html

@@ -10,6 +10,9 @@
 			href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&display=swap"
 			rel="stylesheet"
 		/>
+		<style>
+			@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap');
+			</style> 
 		<script src="https://use.fontawesome.com/e427b1b41a.js"></script>
 		<link rel="stylesheet" type="text/css" href="style.css" />
 		<title>Tyler Koenig</title>
@@ -21,11 +24,14 @@
 				<ul>
 					<li><a href="#bio" target="_self">ABOUT</a></li>
 					<li><a href="#contact" target="_self">CONTACT</a></li>
-          <li><a href="#projects" target="_self">PROJECTS</a></li>
+					<li>
+						<a href="#project-wrapper" target="_self">PROJECTS</a>
+					</li>
+					<li><a href="#skills" target="_self">SKILLS</a></li>
 				</ul>
 			</nav>
 			<header>
-        <img src="/images/profile.png" alt="tyler" />
+				<img src="/images/headshot-tyler_koenig.png" alt="tyler" />
 				<h1>
 					<a href="index.html">Tyler Koenig</a>
 				</h1>
@@ -40,24 +46,13 @@
 					<div id="bio">
 						<h2>about me</h2>
 						<p>
-              I'm Tyler Koenig, a lifelong student. Graduated with an Associate
+							I'm Tyler Koenig, a lifelong student. Graduated with
-              of Arts from Lorain County Community College in 2018. Inbound
+							an Associate of Arts from Lorain County Community
-              associate at Amazon CLE-3 since December 2019. Currently learning
+							College in 2018. Inbound associate at Amazon CLE-3
-              Java and front-end web development through We Can Code IT
+							since December 2019. Currently learning Java and
+							front-end web development through We Can Code IT
 							Bootcamp. Always interested in a challenge!
 						</p>
-            <h4>skills</h4>
-            <ul>
-              <li>adaptability</li>
-              <li>attention to detail</li>
-              <li>html/css</li>
-              <li>github</li>
-              <li>java</li>
-              <li>microsoft office</li>
-              <li>remote teamwork</li>
-              <li>test-driven development</li>
-              <li>time management</li>
-            </ul>
 					</div>
 					<div id="contact">
 						<h3>contact</h3>
@@ -68,7 +63,11 @@
 									target="_blank"
 									title="github"
 								>
-                  github <i class="fa fa-github fa-lg" aria-hidden="true"></i>
+									github
+									<i
+										class="fa fa-github fa-lg"
+										aria-hidden="true"
+									></i>
 								</a>
 							</li>
 							<li>
@@ -78,7 +77,10 @@
 									title="LinkedIn"
 								>
 									linkedin
-                  <i class="fa fa-linkedin-square fa-lg" aria-hidden="true"></i>
+									<i
+										class="fa fa-linkedin-square fa-lg"
+										aria-hidden="true"
+									></i>
 								</a>
 							</li>
 							<li>
@@ -87,27 +89,217 @@
 									target="_blank"
 									title="tylerkng96@icloud.com"
 									>email
-                  <i class="fa fa-envelope-o fa-lg" aria-hidden="true"></i>
+									<i
+										class="fa fa-envelope-o fa-lg"
+										aria-hidden="true"
+									></i>
 								</a>
 							</li>
 						</ul>
 					</div>
 				</section>
-        <section id="projects">
+				<section id="skills">
-          <h2>projects.</h2>
+					<h4>skills</h4>
+					<ul class="skills">
+						<li>Java</li>
+						<li>Spring</li>
+						<li>Thymeleaf</li>
+						<li>JavaScript</li>
+						<li>MVC</li>
+						<li>HTML</li>
+						<li>CSS</li>
+						<li>Test Driven Development</li>
+						<li>Agile (Scrum)</li>
+						<li>Object Oriented Programming</li>
+						<li>JSON</li>
+						<li>React</li>
+						<li>REST APIs</li>
+						<li>Responsive Design</li>
+						<li>Relational Databases</li>
+						<li>Source Control/ Github</li>
+					</ul>
+
+				</section>
+				<section id="project-wrapper">
+					<h2>projects</h2>
 					<div>
+						<article class="project-item">
+							<div>
+								<h3>
+									<a
+										href="https://github.com/pt-spring-2021-team-project-spa/team-2-spa-repo"
+										target="_blank"
+										>Mystery Educator</a
+									>
+								</h3>
+							</div>
+							<div id="project-container">
+								<div class="container-right">
+									<img
+										src="/images/mystery-educator.png"
+										alt="virtual-pet-amok-console"
+									/>
+									<div class="project-desc">
+										<p>
+											Designed a single page application
+											that brings back unique data from
+											MET Museum and NASA APIs.
+										</p>
+									</div>
+								</div>
+								<div class="project-skills">
+									<h4>skills</h4>
+									<ul>
+										<li>Java</li>
+										<li>JavaScript</li>
+										<li>HTML</li>
+										<li>CSS</li>
+										<li>VS Code</li>
+										<li>Github</li>
+										<li>TDD</li>
+										<li>OOP</li>
+									</ul>
+								</div>
+							</div>
+						</article>
+						<article class="project-item">
+							<div>
+								<h3>
+									<a
+										href="https://github.com/2021-Spring-Part-Time/donut-clicker-lerko96"
+										target="_blank"
+										>Donut Clicker</a
+									>
+								</h3>
+							</div>
+							<div id="project-container">
+								<div class="container-right">
+									<img
+										src="/images/donut-clicker.png"
+										alt="virtual-pet-amok-console"
+									/>
+									<div class="project-desc">
+										<p>
+											Designed a single page application
+											that lets users make virtual donuts
+											and buy upgrades for the game.
+										</p>
+									</div>
+								</div>
+								<div class="project-skills">
+									<h4>skills</h4>
+									<ul>
+										<li>JavaScript</li>
+										<li>HTML</li>
+										<li>CSS</li>
+										<li>VS Code</li>
+										<li>Github</li>
+										<li>TDD</li>
+										<li>OOP</li>
+									</ul>
+								</div>
+							</div>
+						</article>
+						<article class="project-item">
+							<div>
+								<h3>
+									<a
+										href="https://github.com/pt-spring-2021-team-project-fullstack/team-4-trek"
+										target="_blank"
+										>Trekking Website</a
+									>
+								</h3>
+							</div>
+							<div id="project-container">
+								<div class="container-right">
+									<img
+										src="/images/trek.png"
+										alt="virtual-pet-amok-console"
+									/>
+									<div class="project-desc">
+										<p>
+											Designed an MVC website that lets
+											users find treks located by region
+											and continent.
+										</p>
+									</div>
+								</div>
+								<div class="project-skills">
+									<h4>skills</h4>
+									<ul>
+										<li>Java</li>
+										<li>SpringJPA</li>
+										<li>HTML</li>
+										<li>CSS</li>
+										<li>IntelliJ</li>
+										<li>VS Code</li>
+										<li>Github</li>
+										<li>TDD</li>
+										<li>OOP</li>
+									</ul>
+								</div>
+							</div>
+						</article>
+						<article class="project-item">
+							<div>
+								<h3>
+									<a
+										href="https://github.com/2021-Spring-Part-Time/reviews-mvc-lerko96"
+										target="_blank"
+										>Reviews Site</a
+									>
+								</h3>
+							</div>
+							<div id="project-container">
+								<div class="container-right">
+									<img src="/images/review-site.png" alt="" />
+									<div class="project-desc">
+										<p>
+											Designed a movie reviews website
+											using thymeleaf templates.
+										</p>
+									</div>
+								</div>
+								<div class="project-skills">
+									<h4>skills</h4>
+									<ul>
+										<li>Java</li>
+										<li>Thymeleaf</li>
+										<li>HTML</li>
+										<li>CSS</li>
+										<li>IntelliJ</li>
+										<li>Github</li>
+										<li>TDD</li>
+										<li>OOP</li>
+									</ul>
+								</div>
+							</div>
+						</article>
 						<article class="project-item">
 							<div>
 								<h3>
 									<a
 										href="https://github.com/2021-Spring-Part-Time/virtual-pets-amok-lerko96"
 										target="_blank"
-                    >virtual-pets-amok</a
+										>Virtual Pets Amok</a
 									>
 								</h3>
 							</div>
 							<div id="project-container">
-                <img src="/images/amok.png" alt="virtual-pet-amok-console" />
+								<div class="container-right">
+									<img
+										src="/images/amok.png"
+										alt="virtual-pet-amok-console"
+									/>
+									<div class="project-desc">
+										<p>
+											Console App that builds off of
+											virtual-pet-shelter. This add's
+											robotic pets to the shelter, with
+											their own robotic needs.
+										</p>
+									</div>
+								</div>
 								<div class="project-skills">
 									<h4>skills</h4>
 									<ul>
@@ -127,15 +319,25 @@
 										href="https://github.com/2021-Spring-Part-Time/virtual-pet-shelter-lerko96"
 										target="_blank"
 									>
-                    virtual-pet-shelter</a
+										Virtual Pet Shelter</a
 									>
 								</h3>
 							</div>
 							<div id="project-container">
+								<div class="container-right">
 									<img
 										src="/images/shelter.png"
 										alt="virtual-pet-shelter-console"
 									/>
+									<div class="project-desc">
+										<p>
+											Built a console application allowing
+											users to take care of multiple pets.
+											Added the ability to admit pets, or
+											adopt.
+										</p>
+									</div>
+								</div>
 								<div class="project-skills">
 									<h4>skills</h4>
 									<ul>
@@ -155,12 +357,26 @@
 										href="https://github.com/2021-Spring-Part-Time/virtual-pet-lerko96"
 										target="_blank"
 									>
-                    virtual-pet</a
+										Virtual Pet</a
 									>
 								</h3>
 							</div>
 							<div id="project-container">
-                <img src="/images/pet.png" alt="virtual-pet-console" />
+								<div class="container-right">
+									<img
+										src="/images/pet.png"
+										alt="virtual-pet-console"
+									/>
+									<div class="project-desc">
+										<p>
+											Built a console application in Java
+											that allows the user to take care of
+											one virtual pet. This includes
+											keeping track of the pets' hunger,
+											thirst and bordedom.
+										</p>
+									</div>
+								</div>
 								<div class="project-skills">
 									<h4>skills</h4>
 									<ul>
@@ -180,20 +396,33 @@
 			<footer>
 				<span id="copyright">&copy; 2021 Tyler Koenig</span>
 				<div id="footLinks">
-          <a href="https://github.com/lerko96" target="_blank" title="github"
+					<a
+						href="https://github.com/lerko96"
+						target="_blank"
+						title="github"
 						><i class="fa fa-github fa-2x" aria-hidden="true"></i
 					></a>
 					<a
 						href="https://www.linkedin.com/in/tyler-koenig-72607a18b/"
 						target="_blank"
 						title="LinkedIn"
-            ><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i
+						><i
+							class="fa fa-linkedin-square fa-2x"
+							aria-hidden="true"
+						></i
 					></a>
-          <a href="mailto:tylerkng96@icloud.com" target="_blank" title="email"
+					<a
-            ><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i
+						href="mailto:tylerkng96@icloud.com"
+						target="_blank"
+						title="email"
+						><i
+							class="fa fa-envelope-o fa-2x"
+							aria-hidden="true"
+						></i
 					></a>
 				</div>
 			</footer>
 		</div>
+		<script src="index.js" type="text/java"></script>
 	</body>
 </html>

index.js

@@ -0,0 +1,23 @@
+console.log('hello nurse');
+
+var slideIndex = 1;
+showDivs(slideIndex);
+
+function plusDivs(n) {
+	showDivs((slideIndex += n));
+}
+
+function showDivs(n) {
+	var i;
+	var x = document.getElementsByClassName('mySlides');
+	if (n > x.length) {
+		slideIndex = 1;
+	}
+	if (n < 1) {
+		slideIndex = x.length;
+	}
+	for (i = 0; i < x.length; i++) {
+		x[i].style.display = 'none';
+	}
+	x[slideIndex - 1].style.display = 'block';
+}

style.css

@@ -1,8 +1,12 @@
+html {
+	scroll-behavior: smooth;
+}
+
 body {
 	box-sizing: border-box;
 	color: #c9cacc;
 	background-color: #272727;
-	font-size: 15px;
+	font-size: 16px;
 	font-family: 'Source Code Pro', monospace, Arial, Helvetica, sans-serif;
 	font-weight: 400;
 	line-height: 1.725;
@@ -89,7 +93,8 @@ h4 {
 	letter-spacing: 0.01rem;
 }
 
-#bio {
+#bio,
+#skills {
 	padding: 1.5rem;
 	text-align: start;
 }
@@ -98,20 +103,38 @@ h4 {
 	font-size: 2.2rem;
 }
 
-#bio h4 {
+#skills h4 {
 	color: #666;
 	font-size: 1.5rem;
 	margin: 0 auto 20px;
 }
-
+#skills ul {
-#bio ul {
 	line-height: 1.35rem;
 	font-weight: 200;
+	text-align: center;
+	align-items: center;
 	margin: 0;
 	padding: 0;
 	list-style-type: none;
 }
 
+.skills {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+	gap: 10px 75px;
+	grid-auto-flow: row;
+	grid-template-areas:
+		'. .'
+		'. .'
+		'. .'
+		'. .'
+		'. .'
+		'. .'
+		'. .'
+		'. .';
+}
+
 #contact {
 	margin-top: 1rem;
 	padding: 1.5rem;
@@ -146,21 +169,28 @@ h4 {
 	font-weight: 600;
 }
 
-#projects {
+#project-wrapper {
-	display: flex;
+	margin-top: 2.5rem;
-	flex-direction: column;
 }
 
-#projects h2 {
+#project-wrapper h2 {
 	margin: 0;
 	padding: 1.5rem 1.5rem 0 1.5rem;
 	font-size: 2rem;
 }
 
+#project-wrapper h3 {
+	font-size: 1.5rem;
+	text-align: left;
+	margin: 0 auto;
+	padding: 1.5rem;
+	letter-spacing: 0.01rem;
+}
+
 .project-item {
 	display: flex;
 	flex-direction: column;
-	margin: 1rem auto;
+	margin: 1.5rem 0;
 	text-align: center;
 	font-weight: 200;
 	letter-spacing: 0.01rem;
@@ -175,12 +205,9 @@ h4 {
 	color: #29f3c3;
 }
 
-#projects h3 {
+.project-desc {
-	font-size: 1.5rem;
+	margin: 0;
-	text-align: left;
+	padding: 0 0.8rem;
-	margin: 0 auto;
-	padding: 1.5rem;
-	letter-spacing: 0.01rem;
 }
 
 .project-skills {
@@ -196,7 +223,7 @@ h4 {
 
 .project-skills h4 {
 	font-size: 1.5rem;
-	flex: 1;
+	/* flex: 1; */
 }
 
 .project-skills li {
@@ -205,13 +232,14 @@ h4 {
 }
 
 .project-skills ul {
-	flex: 2;
+	/* flex: 9; */
 	line-height: 2rem;
 	text-align: start;
 }
 
 .project-item img {
-	width: 90%;
+	max-width: 375px;
+	/* width: 90%; */
 	box-shadow: 10px 10px 11px 0px rgba(0, 0, 0, 0.75);
 	-webkit-box-shadow: 10px 10px 11px 0px rgba(0, 0, 0, 0.75);
 	-moz-box-shadow: 10px 10px 11px 0px rgba(0, 0, 0, 0.75);
@@ -301,6 +329,10 @@ footer {
 		margin: auto 5px;
 	}
 
+	#skills {
+		padding: 0;
+	}
+
 	#project-container {
 		display: flex;
 		flex-direction: row-reverse;