From ae8775a9022a294d20e00984d62abfbcf67d8d47 Mon Sep 17 00:00:00 2001
From: Tyler Koenig <tylerkng96@icloud.com>
Date: Mon, 13 Sep 2021 12:39:39 -0400
Subject: [PATCH] project mobile layout

---
 index.html | 641 +++++++++++++++++++++++++++++++++--------------------
 style.css  | 202 +++++++++--------
 2 files changed, 511 insertions(+), 332 deletions(-)

diff --git a/index.html b/index.html
index 939a6d21..5143d7c5 100644
--- a/index.html
+++ b/index.html
@@ -27,7 +27,7 @@
 				<nav>
 					<a href="index.html">TYLER KOENIG</a>
 					<ul>
-						<li><a href="#bio" target="_self">ABOUT</a></li>
+						<li><a href="#about" target="_self">ABOUT</a></li>
 						<li><a href="#contact" target="_self">CONTACT</a></li>
 						<li>
 							<a href="#projects" target="_self">PROJECTS</a>
@@ -37,58 +37,58 @@
 				</nav>
 			</header>
 			<main>
-				<div class="card">
-					<div class="card-top">
-						<div class="avatar-holder">
-							<img
-								id="headshot"
-								src="/images/headshot-tyler_koenig.png"
-								alt="tyler"
-							/>
+				<section id="intro">
+					<article class="card">
+						<div class="card_top">
+							<div class="avatar-holder">
+								<img
+									id="headshot"
+									src="/images/headshot-tyler_koenig.png"
+									alt="tyler"
+								/>
+							</div>
 						</div>
-					</div>
-					<div class="name">
-						<a href="index.html">Tyler Koenig</a>
-					</div>
-					<div class="short-bio">
-						<p>
-							Passionate Software Developer
-							<br />
-							Recent Graduate of We Can Code IT
-						</p>
-					</div>
-					<div class="contact-links" id="contact">
-						<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
-						></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>
-				<div class="card">
-					<section id="bio">
+						<div class="name">
+							<a href="index.html">Tyler Koenig</a>
+						</div>
+						<div class="intro_bio">
+							<p>
+								Passionate Software Developer
+								<br />
+								Recent Graduate of We Can Code IT
+							</p>
+						</div>
+						<div class="contact-links" id="contact">
+							<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
+							></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>
+					</article>
+					<article class="card" id="about">
 						<h2>about</h2>
 						<p>
 							I'm Tyler Koenig, a lifelong student. Graduated with
@@ -98,11 +98,8 @@
 							front-end web development through We Can Code IT
 							Bootcamp. Always interested in a challenge!
 						</p>
-					</section>
-				</div>
-
-				<div class="card">
-					<section id="skills">
+					</article>
+					<article class="card" id="skills">
 						<h2>skills</h2>
 						<ul>
 							<li>Java</li>
@@ -122,51 +119,362 @@
 							<li>Relational Databases</li>
 							<li>Source Control/ Github</li>
 						</ul>
-					</section>
-				</div>
+					</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>
 
-				<div class="card">
-					<section id="projects">
-						<h2>projects</h2>
-
-						<article class="project">
-							<div class="project_img">
+					<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">
+						<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/headshot-tyler_koenig.png"
+								alt="were-hooked-img"
+						/></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"
+									>We're Hooked</a
 								>
-									<img
-										src="/images/mystery-educator.png"
-										alt=""
-								/></a>
+							</h3>
+							<div class="project__subtitle_small">
+								<time datetime="2021-08-20 12:00:00">
+									<i class="fas fa-calendar-alt mr-2"></i>Fri,
+									August 20th 2021
+								</time>
 							</div>
-							<div class="project_name">
-								<h3>mystery educator</h3>
-							</div>
-							<div class="project_date">
-								<p>mon, may 25th 2021</p>
-							</div>
-							<div class="project_bar"></div>
-							<div class="project_about">
+							<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?
+									Designed, built and tested an MVC
+									application that allows users to discover
+									fishing locations in Ohio, as well as teach
+									beginners how to get started fishing and the
+									current regulations that are needed to
+									follow. This project was built between a
+									team of five in a completely remote
+									environment with the help of Github, Zoom
+									and Slack.
 								</p>
 							</div>
-							<ul class="project_tagbox">
-								<li class="tag__item">
-									java
-								</li>
+							<ul class="project__tagbox">
+								<li class="tag__item">JavaScript</li>
+								<li class="tag__item">RESTful APIs</li>
+								<li class="tag__item">Java</li>
+								<li class="tag__item">OOP</li>
+								<li class="tag__item">Thymeleaf</li>
+								<li class="tag__item">HTML</li>
+								<li class="tag__item">CSS</li>
+								<li class="tag__item">Responsive Design</li>
+								<li class="tag__item">TDD</li>
+								<li class="tag__item">VS Code</li>
+								<li class="tag__item">Github</li>
+								<li class="tag__item">Agile</li>
+								<li class="tag__item">Scrum</li>
+								<li class="tag__item">Zoom</li>
+								<li class="tag__item">Slack</li>
 							</ul>
+						</div>
+					</article>
+					<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="2021-07-23 12:00:00">
+									<i class="fas fa-calendar-alt mr-2"></i>Fri,
+									July 23rd 2021
+								</time>
+							</div>
+							<div class="project__bar"></div>
+							<div class="project__info">
+								<p>
+									Designed, built and tested a single page
+									application that renders unique data from
+									the MET Museum and NASA APIs each time you
+									visit. We also built a local backend
+									database to store historical information.
+									This project was built between a team of
+									four in a completely remote environemnt with
+									the help of Github, Zoom, and Slack.
+								</p>
+							</div>
+							<ul class="project__tagbox">
+								<li class="tag__item">JavaScript</li>
+								<li class="tag__item">Node.js</li>
+								<li class="tag__item">RESTful APIs</li>
+								<li class="tag__item">Java</li>
+								<li class="tag__item">HTML</li>
+								<li class="tag__item">CSS</li>
+								<li class="tag__item">Responsive Design</li>
+								<li class="tag__item">TDD</li>
+								<li class="tag__item">VS Code</li>
+								<li class="tag__item">Github</li>
+								<li class="tag__item">Agile</li>
+								<li class="tag__item">Scrum</li>
+								<li class="tag__item">Zoom</li>
+								<li class="tag__item">Slack</li>
+							</ul>
+						</div>
+					</article>
+					<article class="project">
+						<a
+							class="project__img_link"
+							href="https://github.com/2021-Spring-Part-Time/donut-clicker-lerko96"
+							target="_blank"
+						>
+							<img
+								class="project__img"
+								src="/images/donut-clicker.png"
+								alt="donut-clicker-img"
+						/></a>
+						<div class="project__text">
+							<h3 class="project__title">
+								<a
+									href="https://github.com/2021-Spring-Part-Time/donut-clicker-lerko96"
+									target="_blank"
+									>Donut Clicker</a
+								>
+							</h3>
+							<div class="project__subtitle_small">
+								<time datetime="2021-07-09 12:00:00">
+									<i class="fas fa-calendar-alt mr-2"></i>Fri,
+									July 9th 2021
+								</time>
+							</div>
+							<div class="project__bar"></div>
+							<div class="project__info">
+								<p>
+									Designed, built and tested a single page
+									application that lets users make virtual
+									donuts via clicking. Once enough donuts are
+									made you have the ability to purchase
+									upgrades such as auto-clickers and
+									clicking-multipliers.
+								</p>
+							</div>
+							<ul class="project__tagbox">
+								<li class="tag__item">JavaScript</li>
+								<li class="tag__item">Node.js</li>
+								<li class="tag__item">HTML</li>
+								<li class="tag__item">CSS</li>
+								<li class="tag__item">Responsive Design</li>
+								<li class="tag__item">TDD</li>
+								<li class="tag__item">VS Code</li>
+								<li class="tag__item">Github</li>
+							</ul>
+						</div>
+					</article>
+					<article class="project">
+						<a
+							class="project__img_link"
+							href="https://github.com/pt-spring-2021-team-project-fullstack/team-4-trek"
+							target="_blank"
+						>
+							<img
+								class="project__img"
+								src="/images/trek.png"
+								alt="trekking-img"
+						/></a>
+						<div class="project__text">
+							<h3 class="project__title">
+								<a
+									href="https://github.com/pt-spring-2021-team-project-fullstack/team-4-trek"
+									target="_blank"
+									>Trekking Site</a
+								>
+							</h3>
+							<div class="project__subtitle_small">
+								<time datetime="2021-06-18 12:00:00">
+									<i class="fas fa-calendar-alt mr-2"></i>Fri,
+									June 18th 2021
+								</time>
+							</div>
+							<div class="project__bar"></div>
+							<div class="project__info">
+								<p>
+									Designed, built and tested an MVC
+									application that lets users discover treks
+									located by continent, region and type. This
+									project was built between a team of four in
+									a completely remote environemnt with the
+									help of Github, Zoom and Slack.
+								</p>
+							</div>
+							<ul class="project__tagbox">
+								<li class="tag__item">Java</li>
+								<li class="tag__item">SpringJPA</li>
+								<li class="tag__item">OOP</li>
+								<li class="tag__item">HTML</li>
+								<li class="tag__item">CSS</li>
+								<li class="tag__item">Responsive Design</li>
+								<li class="tag__item">TDD</li>
+								<li class="tag__item">IntelliJ</li>
+								<li class="tag__item">Github</li>
+								<li class="tag__item">Agile</li>
+								<li class="tag__item">Scrum</li>
+								<li class="tag__item">Zoom</li>
+								<li class="tag__item">Slack</li>
+							</ul>
+						</div>
+					</article>
+					<article class="project">
+						<a
+							class="project__img_link"
+							href="https://github.com/2021-Spring-Part-Time/reviews-mvc-lerko96"
+							target="_blank"
+						>
+							<img
+								class="project__img"
+								src="/images/review-site.png"
+								alt="review-site-img"
+						/></a>
+						<div class="project__text">
+							<h3 class="project__title">
+								<a
+									href="https://github.com/2021-Spring-Part-Time/reviews-mvc-lerko96"
+									target="_blank"
+									>Review Site</a
+								>
+							</h3>
+							<div class="project__subtitle_small">
+								<time datetime="2021-06-04 12:00:00">
+									<i class="fas fa-calendar-alt mr-2"></i>Fri,
+									June 4th 2021
+								</time>
+							</div>
+							<div class="project__bar"></div>
+							<div class="project__info">
+								<p>
+									Designed, built and tested a Java
+									application for movie reviews.
+								</p>
+							</div>
+							<ul class="project__tagbox">
+								<li class="tag__item">Java</li>
+								<li class="tag__item">SpringJPA</li>
+								<li class="tag__item">OOP</li>
+								<li class="tag__item">Thymeleaf</li>
+								<li class="tag__item">HTML</li>
+								<li class="tag__item">CSS</li>
+								<li class="tag__item">Responsive Design</li>
+								<li class="tag__item">TDD</li>
+								<li class="tag__item">IntelliJ</li>
+								<li class="tag__item">Github</li>
+							</ul>
+						</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="https://picsum.photos/1000/1000"
+									src="/images/mystery-educator.png"
 									alt="Image Title"
 								/>
 							</a>
@@ -174,7 +482,7 @@
 								<h1 class="postcard__title blue">
 									<a href="#">Podcast Title</a>
 								</h1>
-								<div class="postcard__subtitle small">
+								<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
@@ -212,161 +520,10 @@
 					</section>
 				</div>
 
-				<section id="project-wrapper">
+				<!-- WCCI Early Projects -->
+				<!-- <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>
@@ -483,7 +640,7 @@
 							</div>
 						</article>
 					</div>
-				</section>
+				</section> -->
 			</main>
 			<footer>
 				<span id="copyright">&copy; 2021 Tyler Koenig</span>
diff --git a/style.css b/style.css
index 01cfd20e..b51da780 100644
--- a/style.css
+++ b/style.css
@@ -4,7 +4,8 @@
 	box-sizing: border-box;
 }
 
-html, body {
+html,
+body {
 	width: 100%;
 	height: 100%;
 	scroll-behavior: smooth;
@@ -84,7 +85,7 @@ nav a:hover {
 	overflow: hidden;
 }
 
-.card-top {
+.card_top {
 	position: relative;
 	margin: auto;
 	height: 80px;
@@ -115,7 +116,7 @@ nav a:hover {
 	color: #29f3c3;
 }
 
-.short-bio {
+.intro_bio {
 	height: 175px;
 	margin: 20px;
 }
@@ -142,23 +143,29 @@ nav a:hover {
 	margin: 16px auto 8px;
 }
 
-#bio,
+#about,
 #skills {
 	padding: 1.5rem;
 	text-align: start;
 }
 
+#about {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	text-align: justify;
+	height: 100%;
+}
+
 #projects h2 {
 	text-align: start;
 	padding: 1.5rem;
-	
 }
 
 #skills ul {
 	display: flex;
 	flex-flow: row wrap;
 	list-style-type: none;
-	overflow-x:visible;
+	overflow-x: visible;
 }
 
 #skills li {
@@ -167,96 +174,115 @@ nav a:hover {
 	border: 1px solid #fff;
 }
 
-.project_img {
-	max-height: 50px;
-	min-width: 300px;
-	background-position-x: center;
-	background-position-y:center ;
+.project {
+	flex-wrap: wrap;
+	display: flex;
+	box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66);
+	border-radius: 10px;
+	margin: 0 0 2rem 0;
 	overflow: hidden;
+	position: relative;
+	color: #ffffff;
 }
 
-.project_img img {
+.project a,
+.project a:hover {
+	text-decoration: none;
+	transition: color 0.3s ease-in-out;
+	color: inherit;
+}
+
+.project h3 {
+	margin-bottom: 0.5rem;
+	font-weight: 500;
+	line-height: 1.2;
+}
+
+.project__subtitle_small {
+	font-size: 80%;
+}
+
+.project__title {
+	font-size: 1.75rem;
+}
+
+.project__img {
+	max-height: 180px;
 	width: 100%;
+	object-fit: cover;
+	position: relative;
+}
+
+.project__img_link {
+	display: contents;
+}
+
+.project__bar {
+	width: 50px;
+	height: 10px;
+	margin: 10px 0;
+	border-radius: 5px;
+	background-color: #424242;
+	transition: width 0.2s ease;
+}
+
+.project__text {
+	padding: 1.5rem;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+}
+
+.project__info {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	text-align: justify;
 	height: 100%;
 }
 
-/* end new  */
-
-
-#project-wrapper {
-	margin-top: 2.5rem;
-}
-
-#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 {
+.project .project__tagbox {
 	display: flex;
-	flex-direction: column;
-	margin: 1.5rem 0;
-	text-align: center;
-	font-weight: 200;
-	letter-spacing: 0.01rem;
+	flex-flow: row wrap;
+	font-size: 14px;
+	margin: 20px 0 0 0;
+	padding: 0;
+	justify-content: center;
 }
 
-.project-item a {
-	color: #c9cacc;
-	text-decoration: none;
+.project .project__tagbox .tag__item {
+	display: inline-block;
+	background: rgba(83, 83, 83, 0.4);
+	border-radius: 3px;
+	padding: 2.5px 10px;
+	margin: 0 5px 5px 0;
+	cursor: default;
+	user-select: none;
+	transition: background-color 0.3s;
 }
 
-.project-item a:hover {
-	color: #29f3c3;
+.project .project__tagbox .tag__item:hover {
+	background: rgba(83, 83, 83, 0.8);
 }
 
-.project-desc {
-	margin: 0;
-	padding: 0 0.8rem;
+.project:before {
+	content: '';
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	/* background-image: linear-gradient(
+		-30deg,
+		rgba(0, 118, 189, 0.1),
+		transparent 50%
+	); */
+	background-image: linear-gradient(-70deg, #424242, transparent 30%);
+	opacity: 1;
+	border-radius: 10px;
 }
 
-.project-skills {
-	color: #666;
-	list-style: none;
-	margin: 0 auto;
-	line-height: 1.25rem;
-	text-align: start;
-	padding: 0 1.5rem;
-	display: flex;
-	align-items: baseline;
-}
-
-.project-skills h4 {
-	font-size: 1.5rem;
-	/* flex: 1; */
-}
-
-.project-skills li {
-	list-style-type: none;
-	color: #c9cacc;
-}
-
-.project-skills ul {
-	/* flex: 9; */
-	line-height: 2rem;
-	text-align: start;
-}
-
-.project-item img {
-	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);
+.project:hover .project__bar {
+	width: 100px;
 }
 
 footer {
@@ -288,8 +314,6 @@ footer {
 	transition: 160ms ease-in;
 }
 
-
-
 @import url('https://fonts.googleapis.com/css2?family=Baloo+2&display=swap');
 /* This pen */
 
@@ -404,7 +428,7 @@ a:hover {
 .postcard:hover .postcard__bar {
 	width: 100px;
 }
-@media screen and (min-width: 769px) {
+/* @media screen and (min-width: 769px) {
 	.postcard {
 		flex-wrap: inherit;
 	}
@@ -449,8 +473,8 @@ a:hover {
 		right: -12px !important;
 		transform: rotate(-4deg);
 	}
-}
-@media screen and (min-width: 1024px) {
+} */
+/* @media screen and (min-width: 1024px) {
 	.postcard__text {
 		padding: 2rem 3.5rem;
 	}
@@ -468,7 +492,7 @@ a:hover {
 	.postcard.light .postcard__text:before {
 		background: #e1e5ea;
 	}
-}
+} */
 /* COLORS */
 .postcard .postcard__tagbox .green.play:hover {
 	background: #79dd09;
@@ -564,7 +588,7 @@ a:hover {
 		transparent 50%
 	);
 }
-@media screen and (min-width: 769px) {
+/* @media screen and (min-width: 769px) {
 	.green::before {
 		background-image: linear-gradient(
 			-80deg,
@@ -621,7 +645,7 @@ a:hover {
 			transparent 50%
 		);
 	}
-}
+} */
 
 /* code pen finish */
 
@@ -724,5 +748,3 @@ a:hover {
 		justify-content: space-between;
 	}
 } */
-
-