From b1faab1f4ebd9d90d4f97b5f1950192ad7fb3828 Mon Sep 17 00:00:00 2001
From: Tyler Koenig <tylerkng96@icloud.com>
Date: Mon, 13 Sep 2021 17:01:07 -0400
Subject: [PATCH] mobile styling

---
 index.html | 283 +++-------------------------
 style.css  | 537 +++++++++++++++++++++--------------------------------
 2 files changed, 239 insertions(+), 581 deletions(-)

diff --git a/index.html b/index.html
index ab2f6ca7..d5f4952b 100644
--- a/index.html
+++ b/index.html
@@ -27,7 +27,9 @@
 				<a href="index.html">TYLER KOENIG</a>
 				<ul>
 					<li><a href="#about" target="_self">ABOUT</a></li>
-					<li><a href="#contact" target="_self">CONTACT</a></li>
+					<li id="nav__contact">
+						<a href="#contact" target="_self">CONTACT</a>
+					</li>
 					<li>
 						<a href="#projects" target="_self">PROJECTS</a>
 					</li>
@@ -36,6 +38,29 @@
 			</nav>
 		</header>
 		<main>
+			<div class="side__nav">
+				<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
+				></a>
+				<a
+					href="https://github.com/lerko96"
+					target="_blank"
+					title="github"
+					><i class="fa fa-github fa-2x" aria-hidden="true"></i
+				></a>
+				<a
+					href="mailto:tylerkng96@icloud.com"
+					target="_blank"
+					title="email"
+					><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i
+				></a>
+			</div>
 			<div id="wrapper">
 				<section id="intro">
 					<div class="top__wrap">
@@ -124,41 +149,6 @@
 						</ul>
 					</article>
 				</section>
-				<!-- <section>
-					<article class="card" id="about">
-						<h2>about</h2>
-						<p>
-							I'm Tyler Koenig, a lifelong student. Graduated with
-							an Associate of Arts from Lorain County Community
-							College in 2018. Inbound associate at Amazon CLE-3
-							since December 2019. Currently learning Java and
-							front-end web development through We Can Code IT
-							Bootcamp. Always interested in a challenge!
-						</p>
-					</article>
-
-					<article class="card" id="skills">
-						<h2>skills</h2>
-						<ul>
-							<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>
-					</article>
-				</section> -->
 				<section class="card" id="projects">
 					<h2>projects</h2>
 					<article class="project">
@@ -423,227 +413,6 @@
 						</div>
 					</article>
 				</section>
-
-				<div class="card">
-					<section id="projects">
-						<h2>old project style</h2>
-
-						<article class="project">
-							<a
-								class="project__img_link"
-								href="https://github.com/pt-spring-2021-team-project-spa/team-2-spa-repo"
-								target="_blank"
-							>
-								<img
-									class="project__img"
-									src="/images/mystery-educator.png"
-									alt=""
-							/></a>
-							<div class="project__text">
-								<h3 class="project__title">
-									<a
-										href="https://github.com/pt-spring-2021-team-project-spa/team-2-spa-repo"
-										target="_blank"
-										>Mystery Educator</a
-									>
-								</h3>
-								<div class="project__subtitle_small">
-									<time datetime="2020-05-25 12:00:00">
-										<i class="fas fa-calendar-alt mr-2"></i
-										>Mon, May 25th 2020
-									</time>
-								</div>
-								<div class="project__bar"></div>
-								<div class="project__info">
-									<p>
-										Lorem ipsum dolor sit amet consectetur
-										adipisicing elit. Et a maiores laborum
-										quo animi, unde repellat. Libero ab
-										sequi vel beatae natus numquam
-										consequuntur molestias ducimus. Ad
-										laudantium neque nobis?
-									</p>
-								</div>
-								<ul class="project__tagbox">
-									<li class="tag__item">java</li>
-									<li class="tag__item">java</li>
-									<li class="tag__item">java</li>
-									<li class="tag__item">java</li>
-									<li class="tag__item">java</li>
-								</ul>
-							</div>
-						</article>
-						<article class="postcard dark blue">
-							<a class="postcard__img_link" href="#">
-								<img
-									class="postcard__img"
-									src="/images/mystery-educator.png"
-									alt="Image Title"
-								/>
-							</a>
-							<div class="postcard__text">
-								<h1 class="postcard__title blue">
-									<a href="#">Podcast Title</a>
-								</h1>
-								<div class="postcard__subtitle_small">
-									<time datetime="2020-05-25 12:00:00">
-										<i class="fas fa-calendar-alt mr-2"></i
-										>Mon, May 25th 2020
-									</time>
-								</div>
-								<div class="postcard__bar"></div>
-								<div class="postcard__preview-txt">
-									Lorem ipsum dolor sit amet consectetur
-									adipisicing elit. Eligendi, fugiat
-									asperiores inventore beatae accusamus odit
-									minima enim, commodi quia, doloribus eius!
-									Ducimus nemo accusantium maiores velit
-									corrupti tempora reiciendis molestiae
-									repellat vero. Eveniet ipsam adipisci illo
-									iusto quibusdam, sunt neque nulla unde ipsum
-									dolores nobis enim quidem excepturi, illum
-									quos!
-								</div>
-								<ul class="postcard__tagbox">
-									<li class="tag__item">
-										<i class="fa fa-tag mr-2"></i>Podcast
-									</li>
-									<li class="tag__item">
-										<i class="fa fa-clock mr-2"></i>55 mins.
-									</li>
-									<li class="tag__item play blue">
-										<a href="#"
-											><i class="fa fa-play mr-2"></i>Play
-											Episode</a
-										>
-									</li>
-								</ul>
-							</div>
-						</article>
-					</section>
-				</div>
-
-				<!-- WCCI Early Projects -->
-				<!-- <section id="project-wrapper">
-					<h2>projects</h2>
-					<div>
-						<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
-									>
-								</h3>
-							</div>
-							<div id="project-container">
-								<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>
-										<li>TDD</li>
-										<li>polymorphism</li>
-										<li>encapsulation</li>
-										<li>interface (implements)</li>
-										<li>abstract class (extends)</li>
-									</ul>
-								</div>
-							</div>
-						</article>
-						<article class="project-item">
-							<div>
-								<h3>
-									<a
-										href="https://github.com/2021-Spring-Part-Time/virtual-pet-shelter-lerko96"
-										target="_blank"
-									>
-										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>
-										<li>TDD</li>
-										<li>constructor() {...}</li>
-										<li>getter() {...}</li>
-										<li>map<> = hashmap<>()></li>
-										<li>collections<></li>
-									</ul>
-								</div>
-							</div>
-						</article>
-						<article class="project-item">
-							<div>
-								<h3>
-									<a
-										href="https://github.com/2021-Spring-Part-Time/virtual-pet-lerko96"
-										target="_blank"
-									>
-										Virtual Pet</a
-									>
-								</h3>
-							</div>
-							<div id="project-container">
-								<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>
-										<li>game loop</li>
-										<li>user input</li>
-										<li>classes</li>
-										<li>instance variables</li>
-										<li>methods</li>
-										<li>clean code</li>
-									</ul>
-								</div>
-							</div>
-						</article>
-					</div>
-				</section> -->
 			</div>
 		</main>
 		<footer>
diff --git a/style.css b/style.css
index cf3c129f..51a5ff79 100644
--- a/style.css
+++ b/style.css
@@ -42,6 +42,7 @@ nav ul {
 }
 
 nav a {
+	margin: 0 1rem;
 	text-decoration: none;
 	border-radius: 500px;
 	padding: 0.2rem;
@@ -58,6 +59,14 @@ nav a:hover {
 	transition: 150ms ease;
 }
 
+.side__nav {
+	display: none;
+}
+
+header {
+	display: block;
+}
+
 /* header {
 	color: #c9cacc;
 	margin: 0 auto;
@@ -89,108 +98,6 @@ nav a:hover {
 	overflow: hidden;
 }
 
-@media screen and (min-width: 576px) {
-	.card {
-		max-width: 500px;
-	}
-}
-
-@media screen and (min-width: 769px) {
-	.card {
-		max-width: 720px;
-	}
-
-	.project {
-		display: flex;
-		flex-direction: row;
-		/* flex-wrap: nowrap; */
-		/* flex-direction: column; */
-	}
-
-	.project .project__title {
-		font-size: 2rem;
-	}
-
-	.project__tagbox {
-		justify-content: start;
-	}
-
-	.project .project__img {
-		max-width: 300px;
-		max-height: 100%;
-		transition: transform 0.3s ease;
-	}
-	.project .project__text {
-		padding: 3rem;
-		width: 100%;
-	}
-	.project .media.project__text:before {
-		content: '';
-		position: absolute;
-		display: block;
-		background: #18151f;
-		top: -20%;
-		height: 130%;
-		width: 55px;
-	}
-	.project:hover .project__img {
-		transform: scale(1.1);
-	}
-	.project:nth-child(2n + 1) {
-		flex-direction: row;
-	}
-	.project:nth-child(2n + 0) {
-		flex-direction: row-reverse;
-	}
-	.project:nth-child(2n + 1) .project__text::before {
-		left: -12px !important;
-		transform: rotate(4deg);
-	}
-	.project:nth-child(2n + 0) .project__text::before {
-		right: -12px !important;
-		transform: rotate(-4deg);
-	}
-}
-
-@media screen and (min-width: 992px) {
-	.top__wrap {
-		display: flex;
-		flex-direction: row;
-	}
-
-	#profile {
-		height: 400px;
-	}
-
-	#about p {
-		max-width: 300px;
-	}
-
-	#about {
-		right: 0;
-		/* max-width: 500px; */
-		height: 400px;
-	}
-
-	.card {
-		max-width: 960px;
-	}
-
-	.project {
-		max-width: 960px;
-	}
-}
-
-@media screen and (min-width: 1200px) {
-	.card {
-		max-width: 1140px;
-	}
-
-	.project {
-		max-width: 1140px;
-	}
-}
-
 .card_top {
 	position: relative;
 	margin: auto;
@@ -215,7 +122,8 @@ nav a:hover {
 }
 
 .name a {
-	color: #c9cacc;
+	color: inherit;
+	text-decoration: none;
 	font-weight: 700;
 	font-size: 1.6em;
 }
@@ -238,6 +146,11 @@ nav a:hover {
 .contact-links a {
 	margin: 0 10px;
 	padding: 0;
+	color: #666;
+}
+
+.contact-links a:hover {
+	transition: color 0.3s ease-in-out;
 	color: #c9cacc;
 }
 
@@ -391,7 +304,7 @@ nav a:hover {
 
 .project:before {
 	content: '';
-	position: absolute;
+	/* position: absolute; */
 	top: 0;
 	right: 0;
 	bottom: 0;
@@ -448,11 +361,11 @@ footer {
 .light {
 	background: #f3f5f7;
 }
-a,
+/* a,
 a:hover {
 	text-decoration: none;
 	transition: color 0.3s ease-in-out;
-}
+} */
 
 /* Cards */
 .postcard {
@@ -553,224 +466,6 @@ a:hover {
 .postcard:hover .postcard__bar {
 	width: 100px;
 }
-@media screen and (min-width: 769px) {
-	.postcard {
-		flex-wrap: inherit;
-	}
-	.postcard .postcard__title {
-		font-size: 2rem;
-	}
-	.postcard .postcard__tagbox {
-		justify-content: start;
-	}
-	.postcard .postcard__img {
-		max-width: 300px;
-		max-height: 100%;
-		transition: transform 0.3s ease;
-	}
-	.postcard .postcard__text {
-		padding: 3rem;
-		width: 100%;
-	}
-	.postcard .media.postcard__text:before {
-		content: '';
-		position: absolute;
-		display: block;
-		background: #18151f;
-		top: -20%;
-		height: 130%;
-		width: 55px;
-	}
-	.postcard:hover .postcard__img {
-		transform: scale(1.1);
-	}
-	.postcard:nth-child(2n + 1) {
-		flex-direction: row;
-	}
-	.postcard:nth-child(2n + 0) {
-		flex-direction: row-reverse;
-	}
-	.postcard:nth-child(2n + 1) .postcard__text::before {
-		left: -12px !important;
-		transform: rotate(4deg);
-	}
-	.postcard:nth-child(2n + 0) .postcard__text::before {
-		right: -12px !important;
-		transform: rotate(-4deg);
-	}
-}
-/* @media screen and (min-width: 1024px) {
-	.postcard__text {
-		padding: 2rem 3.5rem;
-	}
-	.postcard__text:before {
-		content: '';
-		position: absolute;
-		display: block;
-		top: -20%;
-		height: 130%;
-		width: 55px;
-	}
-	.postcard.dark .postcard__text:before {
-		background: #18151f;
-	}
-	.postcard.light .postcard__text:before {
-		background: #e1e5ea;
-	}
-} */
-/* COLORS */
-.postcard .postcard__tagbox .green.play:hover {
-	background: #79dd09;
-	color: black;
-}
-.green .postcard__title:hover {
-	color: #79dd09;
-}
-.green .postcard__bar {
-	background-color: #79dd09;
-}
-.green::before {
-	background-image: linear-gradient(
-		-30deg,
-		rgba(121, 221, 9, 0.1),
-		transparent 50%
-	);
-}
-.green:nth-child(2n)::before {
-	background-image: linear-gradient(
-		30deg,
-		rgba(121, 221, 9, 0.1),
-		transparent 50%
-	);
-}
-.postcard .postcard__tagbox .blue.play:hover {
-	background: #0076bd;
-}
-.blue .postcard__title:hover {
-	color: #0076bd;
-}
-.blue .postcard__bar {
-	background-color: #0076bd;
-}
-.blue::before {
-	background-image: linear-gradient(
-		-30deg,
-		rgba(0, 118, 189, 0.1),
-		transparent 50%
-	);
-}
-.blue:nth-child(2n)::before {
-	background-image: linear-gradient(
-		30deg,
-		rgba(0, 118, 189, 0.1),
-		transparent 50%
-	);
-}
-.postcard .postcard__tagbox .red.play:hover {
-	background: #bd150b;
-}
-.red .postcard__title:hover {
-	color: #bd150b;
-}
-.red .postcard__bar {
-	background-color: #bd150b;
-}
-.red::before {
-	background-image: linear-gradient(
-		-30deg,
-		rgba(189, 21, 11, 0.1),
-		transparent 50%
-	);
-}
-.red:nth-child(2n)::before {
-	background-image: linear-gradient(
-		30deg,
-		rgba(189, 21, 11, 0.1),
-		transparent 50%
-	);
-}
-.postcard .postcard__tagbox .yellow.play:hover {
-	background: #bdbb49;
-	color: black;
-}
-.yellow .postcard__title:hover {
-	color: #bdbb49;
-}
-.yellow .postcard__bar {
-	background-color: #bdbb49;
-}
-.yellow::before {
-	background-image: linear-gradient(
-		-30deg,
-		rgba(189, 187, 73, 0.1),
-		transparent 50%
-	);
-}
-.yellow:nth-child(2n)::before {
-	background-image: linear-gradient(
-		30deg,
-		rgba(189, 187, 73, 0.1),
-		transparent 50%
-	);
-}
-/* @media screen and (min-width: 769px) {
-	.green::before {
-		background-image: linear-gradient(
-			-80deg,
-			rgba(121, 221, 9, 0.1),
-			transparent 50%
-		);
-	}
-	.green:nth-child(2n)::before {
-		background-image: linear-gradient(
-			80deg,
-			rgba(121, 221, 9, 0.1),
-			transparent 50%
-		);
-	}
-	.blue::before {
-		background-image: linear-gradient(
-			-80deg,
-			rgba(0, 118, 189, 0.1),
-			transparent 50%
-		);
-	}
-	.blue:nth-child(2n)::before {
-		background-image: linear-gradient(
-			80deg,
-			rgba(0, 118, 189, 0.1),
-			transparent 50%
-		);
-	}
-	.red::before {
-		background-image: linear-gradient(
-			-80deg,
-			rgba(189, 21, 11, 0.1),
-			transparent 50%
-		);
-	}
-	.red:nth-child(2n)::before {
-		background-image: linear-gradient(
-			80deg,
-			rgba(189, 21, 11, 0.1),
-			transparent 50%
-		);
-	}
-	.yellow::before {
-		background-image: linear-gradient(
-			-80deg,
-			rgba(189, 187, 73, 0.1),
-			transparent 50%
-		);
-	}
-	.yellow:nth-child(2n)::before {
-		background-image: linear-gradient(
-			80deg,
-			rgba(189, 187, 73, 0.1),
-			transparent 50%
-		);
-	}
-} */
 
 /* code pen finish */
 
@@ -873,3 +568,197 @@ a:hover {
 		justify-content: space-between;
 	}
 } */
+
+@media screen and (min-width: 576px) {
+	.card {
+		max-width: 500px;
+	}
+}
+
+@media screen and (min-width: 769px) {
+	#nav__contact,
+	.contact-links {
+		display: none;
+	}
+
+	.side__nav {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		/* margin: 40px; */
+		height: 100%;
+		width: 80px;
+		position: fixed;
+		z-index: 1;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		font-size: 17px;
+		overflow: hidden;
+
+		/* border-right: 1px solid #666; */
+	}
+
+	.side__nav a {
+		padding: 8px;
+		text-decoration: none;
+		color: #666;
+		display: block;
+	}
+
+	.side__nav a:hover {
+		transition: color 0.3s ease-in-out;
+		color: #c9cacc;
+	}
+
+	#wrapper {
+		margin-left: 90px;
+	}
+
+	#skills {
+		margin-top: 0;
+	}
+
+	nav {
+		margin: auto 2rem auto 90px;
+		display: flex;
+	}
+
+	nav a {
+		margin: auto;
+		padding: 0.5rem;
+		flex: 4;
+		justify-content: flex-start;
+	}
+
+	nav li {
+		display: inline-block;
+	}
+
+	nav ul {
+		display: flex;
+	}
+
+	#top__wrap {
+		position: relative;
+	}
+
+	.card {
+		max-width: 720px;
+	}
+
+	.project {
+		display: flex;
+		flex-direction: row;
+		/* flex-wrap: nowrap; */
+		/* flex-direction: column; */
+	}
+
+	.project .project__title {
+		font-size: 2rem;
+	}
+
+	.project__tagbox {
+		justify-content: start;
+	}
+
+	.project .project__img {
+		max-width: 300px;
+		max-height: 100%;
+		transition: transform 0.3s ease;
+	}
+	.project .project__text {
+		padding: 3rem;
+		width: 100%;
+	}
+	.project .media.project__text:before {
+		content: '';
+		position: absolute;
+		display: block;
+		background: #18151f;
+		top: -20%;
+		height: 130%;
+		width: 55px;
+	}
+	.project:hover .project__img {
+		transform: scale(1.1);
+	}
+	.project:nth-child(2n + 1) {
+		flex-direction: row;
+	}
+	.project:nth-child(2n + 0) {
+		flex-direction: row-reverse;
+	}
+	.project:nth-child(2n + 1) .project__text::before {
+		left: -12px !important;
+		transform: rotate(4deg);
+	}
+	.project:nth-child(2n + 0) .project__text::before {
+		right: -12px !important;
+		transform: rotate(-4deg);
+	}
+
+	.project .project__tagbox {
+		justify-content: start;
+	}
+
+	footer {
+		margin: 0 auto;
+		width: 87%;
+		padding: 2rem;
+		flex-direction: row;
+		justify-content: space-between;
+	}
+}
+
+@media screen and (min-width: 992px) {
+	.top__wrap {
+		max-width: 960px;
+		/* text-align: center; */
+		display: flex;
+		margin: 0 auto;
+		flex-direction: row;
+	}
+
+	#profile {
+		margin-right: 1rem;
+		flex: 1;
+		height: 400px;
+	}
+
+	#about p {
+		/* max-width: 400px; */
+	}
+
+	#about {
+		flex: 2;
+		margin-left: 1rem;
+		right: 0;
+		/* max-width: 500px; */
+		height: 400px;
+	}
+
+	.card {
+		max-width: 960px;
+	}
+
+	.project {
+		max-width: 960px;
+	}
+}
+
+@media screen and (min-width: 1200px) {
+	.top__wrap {
+		max-width: 1140px;
+	}
+
+	.card {
+		max-width: 1140px;
+	}
+
+	.project {
+		max-width: 1140px;
+	}
+}