From 5829e0ef7a902c14b8c9844a9780e64512c17c0c Mon Sep 17 00:00:00 2001
From: Tyler Koenig <tylerkng96@icloud.com>
Date: Wed, 25 Aug 2021 17:10:09 -0400
Subject: [PATCH] updated skills

---
 index.html | 42 ++++++++++++++++++++++++++++--------------
 style.css  | 35 +++++++++++++++++++++++++++++------
 2 files changed, 57 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index 96b75c8a..e16c3d21 100644
--- a/index.html
+++ b/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>
@@ -24,6 +27,7 @@
 					<li>
 						<a href="#project-wrapper" target="_self">PROJECTS</a>
 					</li>
+					<li><a href="#skills" target="_self">SKILLS</a></li>
 				</ul>
 			</nav>
 			<header>
@@ -49,18 +53,6 @@
 							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>
@@ -106,8 +98,30 @@
 						</ul>
 					</div>
 				</section>
+				<section id="skills">
+					<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>
+					<h2>projects</h2>
 					<div>
 						<article class="project-item">
 							<div>
@@ -238,7 +252,7 @@
 							</div>
 							<div id="project-container">
 								<div class="container-right">
-									<img src="/images/review-site.png" alt="">
+									<img src="/images/review-site.png" alt="" />
 									<div class="project-desc">
 										<p>
 											Designed a movie reviews website
diff --git a/style.css b/style.css
index 8713fd4d..0c165777 100644
--- a/style.css
+++ b/style.css
@@ -93,7 +93,8 @@ h4 {
 	letter-spacing: 0.01rem;
 }
 
-#bio {
+#bio,
+#skills {
 	padding: 1.5rem;
 	text-align: start;
 }
@@ -102,20 +103,38 @@ h4 {
 	font-size: 2.2rem;
 }
 
-#bio h4 {
+#skills h4 {
 	color: #666;
 	font-size: 1.5rem;
 	margin: 0 auto 20px;
 }
-
-#bio ul {
+#skills 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;
@@ -151,11 +170,11 @@ h4 {
 }
 
 #project-wrapper {
+	margin-top: 2.5rem;
 }
 
 #project-wrapper h2 {
 	margin: 0;
-	padding: 0;
 	padding: 1.5rem 1.5rem 0 1.5rem;
 	font-size: 2rem;
 }
@@ -188,7 +207,7 @@ h4 {
 
 .project-desc {
 	margin: 0;
-	padding: 0 .8rem;
+	padding: 0 0.8rem;
 }
 
 .project-skills {
@@ -310,6 +329,10 @@ footer {
 		margin: auto 5px;
 	}
 
+	#skills {
+		padding: 0;
+	}
+
 	#project-container {
 		display: flex;
 		flex-direction: row-reverse;