diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 00000000..26d33521
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,3 @@
+# Default ignored files
+/shelf/
+/workspace.xml
diff --git a/.idea/lerko96.github.io.iml b/.idea/lerko96.github.io.iml
new file mode 100644
index 00000000..d6ebd480
--- /dev/null
+++ b/.idea/lerko96.github.io.iml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/misc.xml b/.idea/misc.xml
new file mode 100644
index 00000000..40674af8
--- /dev/null
+++ b/.idea/misc.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_15" project-jdk-name="15" project-jdk-type="JavaSDK">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 00000000..6e636ebb
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/lerko96.github.io.iml" filepath="$PROJECT_DIR$/.idea/lerko96.github.io.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 00000000..35eb1ddf
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/app/js/script.js b/app/js/script.js
new file mode 100644
index 00000000..3d4db9c9
--- /dev/null
+++ b/app/js/script.js
@@ -0,0 +1 @@
+console.log('hello nurse');
\ No newline at end of file
diff --git a/app/scss/_globals.scss b/app/scss/_globals.scss
new file mode 100644
index 00000000..d5dc5bae
--- /dev/null
+++ b/app/scss/_globals.scss
@@ -0,0 +1,773 @@
+html {
+    font-size: 100%;
+    box-sizing: border-box;
+}
+
+
+*, *::before, *::after {
+    box-sizing: inherit;
+}
+
+body {
+	font-family: 'Source Code Pro', monospace, Arial, Helvetica, sans-serif;
+    line-height: 1.3;
+    margin: 0px;
+    padding: 0px;
+    background-color: #212121;
+    color: #ffffff;
+}
+
+* {
+	padding: 0;
+	margin: 0;
+	box-sizing: border-box;
+}
+
+html, body {
+	width: 100%;
+	height: 100%;
+	scroll-behavior: smooth;
+}
+
+body {
+	box-sizing: border-box;
+	color: #c9cacc;
+	background-color: #110f16;
+	/* background-color: #272727;  */
+	font-size: 16px;
+	font-family: 'Source Code Pro', monospace, Arial, Helvetica, sans-serif;
+	font-weight: 400;
+	/* line-height: 1.725; */
+	text-rendering: geometricPrecision;
+	min-height: 100vh;
+	/* margin: 0 auto; */
+}
+
+#wrapper {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	/* max-width: 560px; */
+	margin: 0 auto;
+}
+
+nav {
+    
+}
+
+nav ul {
+	list-style-type: none;
+	margin: auto;
+	padding: 0em;
+}
+
+nav a {
+	text-decoration: none;
+	border-radius: 500px;
+	padding: 0.2rem;
+	font-weight: 600;
+	display: flex;
+	justify-content: center;
+	color: #c9cacc;
+	letter-spacing: 0.09rem;
+}
+
+nav a:hover {
+	background-color: #29f3c3;
+	color: #1b1b1b;
+	transition: 150ms ease;
+}
+
+/* header {
+	color: #c9cacc;
+	margin: 0 auto;
+	text-align: center;
+	padding: 2rem;
+	line-height: 1.75rem;
+	border-top: 1.5px solid #666;
+	border-bottom: 1.5px solid #666;
+} */
+
+/* header img {
+	width: 100px;
+	border: 5px solid #666;
+	border-radius: 165px;
+} */
+
+.card {
+	background-color: #151515;
+	margin: 2rem;
+	text-align: center;
+	border-radius: 10px;
+	box-shadow: 0 10px 25px 5px rgba(0, 0, 0, 0.2);
+}
+
+.card-top {
+	margin: auto;
+	height: 80px;
+	background: #29f3c3;
+	border-start-end-radius: 10px;
+	border-start-start-radius: 10px;
+}
+
+.card img {
+	margin: 40px auto 10px;
+	width: 100px;
+	border-radius: 50%;
+}
+
+h1 {
+	/* font-family: 'Source Sans Pro', sans-serif; */
+	/* font-weight: 700; */
+	/* line-height: 2rem; */
+	/* letter-spacing: 0.05rem; */
+}
+
+h1 a {
+	font-size: .8em;
+	color: #c9cacc;
+	text-decoration: none;
+	letter-spacing: -.05em;
+	word-spacing: -.05em;
+
+}
+
+h1 a:hover {
+	color: #29f3c3;
+}
+
+header h2 {
+	/* font-weight: 200; */
+	font-size: 1.2rem;
+	letter-spacing: 0.01rem;
+}
+
+h2,
+h3,
+h4 {
+	/* letter-spacing: 0.01rem; */
+}
+
+#aboutMe {
+	letter-spacing: 0.01rem;
+}
+
+#bio,
+#skills {
+	padding: 1.5rem;
+	text-align: start;
+}
+
+#bio h2 {
+	font-size: 2.2rem;
+}
+
+#skills h4 {
+	padding: 1.5rem;
+	color: #666;
+	font-size: 1.5rem;
+	margin: 0 auto 20px;
+}
+#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;
+}
+
+#contact h3 {
+	font-size: 1.5rem;
+}
+
+#contact ul {
+	display: flex;
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+	text-align: center;
+}
+
+.contactLinks li {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+}
+
+.contactLinks a {
+	display: flex;
+	flex-direction: column;
+	color: #c9cacc;
+	text-decoration: none;
+}
+
+.contactLinks a:hover {
+	font-weight: 600;
+}
+
+#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 {
+	display: flex;
+	flex-direction: column;
+	margin: 1.5rem 0;
+	text-align: center;
+	font-weight: 200;
+	letter-spacing: 0.01rem;
+}
+
+.project-item a {
+	color: #c9cacc;
+	text-decoration: none;
+}
+
+.project-item a:hover {
+	color: #29f3c3;
+}
+
+.project-desc {
+	margin: 0;
+	padding: 0 0.8rem;
+}
+
+.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);
+}
+
+footer {
+	color: #666;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-around;
+	align-items: center;
+	margin: 0 auto;
+	padding: 1rem;
+}
+
+#copyright {
+	margin: 0.4rem;
+	letter-spacing: 0.1rem;
+}
+
+#footLinks {
+	margin: 0.4rem;
+	letter-spacing: 0.8rem;
+}
+
+#footLinks a {
+	color: #666;
+}
+
+#footLinks a:hover {
+	color: #c9cacc;
+	transition: 160ms ease-in;
+}
+
+code pen begin
+
+/* This pen */
+
+.dark {
+	background: #110f16;
+}
+.light {
+	background: #f3f5f7;
+}
+a,
+a:hover {
+	text-decoration: none;
+	transition: color 0.3s ease-in-out;
+}
+
+/* Cards */
+.postcard {
+	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;
+}
+.postcard.dark {
+	background-color: #18151f;
+}
+.postcard.light {
+	background-color: #e1e5ea;
+}
+.postcard .t-dark {
+	color: #18151f;
+}
+.postcard a {
+	color: inherit;
+}
+.postcard h1,
+.postcard .h1 {
+	margin-bottom: 0.5rem;
+	font-weight: 500;
+	line-height: 1.2;
+}
+.postcard .small {
+	font-size: 80%;
+}
+.postcard .postcard__title {
+	font-size: 1.75rem;
+}
+.postcard .postcard__img {
+	max-height: 180px;
+	width: 100%;
+	object-fit: cover;
+	position: relative;
+}
+.postcard .postcard__img_link {
+	display: contents;
+}
+.postcard .postcard__bar {
+	width: 50px;
+	height: 10px;
+	margin: 10px 0;
+	border-radius: 5px;
+	background-color: #424242;
+	transition: width 0.2s ease;
+}
+.postcard .postcard__text {
+	padding: 1.5rem;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+}
+.postcard .postcard__preview-txt {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	text-align: justify;
+	height: 100%;
+}
+.postcard .postcard__tagbox {
+	display: flex;
+	flex-flow: row wrap;
+	font-size: 14px;
+	margin: 20px 0 0 0;
+	padding: 0;
+	justify-content: center;
+}
+.postcard .postcard__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;
+}
+.postcard .postcard__tagbox .tag__item:hover {
+	background: rgba(83, 83, 83, 0.8);
+}
+.postcard:before {
+	content: '';
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background-image: linear-gradient(-70deg, #424242, transparent 50%);
+	opacity: 1;
+	border-radius: 10px;
+}
+.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 */
+
+/* color: #1b1b1b; */
+/* color: #2a9d8f */
+/* @media (min-width: 768px) {
+	#wrapper {
+		max-width: 992px;
+	}
+
+	nav {
+		display: flex;
+	}
+
+	nav a {
+		margin: auto;
+		padding: 0.5rem;
+		flex: 4;
+		justify-content: flex-start;
+	}
+
+	nav li {
+		display: inline-block;
+	}
+
+	nav ul {
+		display: flex;
+	}
+
+	#aboutMe {
+		display: flex;
+	}
+
+	#bio {
+		flex: 2;
+	}
+
+	#contact {
+		flex: 1;
+		text-align: end;
+	}
+
+	.contactLinks {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.contactLinks li {
+		align-items: flex-end;
+	}
+	.contactLinks a {
+		flex-direction: row;
+	}
+
+	.contactLinks i {
+		margin: auto 5px;
+	}
+
+	#skills {
+		padding: 0;
+	}
+
+	#project-container {
+		display: flex;
+		flex-direction: row-reverse;
+	}
+
+	.project-item img {
+		flex: 2;
+	}
+
+	.project-skills {
+		flex: 1;
+		margin: 0;
+		padding: 0;
+		text-align: end;
+		flex-direction: column;
+		align-items: flex-end;
+	}
+
+	.project-skills h4 {
+		margin: 1.5rem;
+		align-self: flex-start;
+	}
+
+	.project-skills ul {
+		margin: 1.5rem;
+		padding: 0;
+	}
+
+	.project-item a {
+		align-self: start;
+	}
+
+	footer {
+		margin: 0 auto;
+		width: 87%;
+		padding: 2rem;
+		flex-direction: row;
+		justify-content: space-between;
+	}
+} */
+
+
diff --git a/app/scss/style.css b/app/scss/style.css
new file mode 100644
index 00000000..a44ac628
--- /dev/null
+++ b/app/scss/style.css
@@ -0,0 +1,821 @@
+html {
+  font-size: 100%;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+}
+
+body {
+  font-family: 'Source Code Pro', monospace, Arial, Helvetica, sans-serif;
+  line-height: 1.3;
+  margin: 0px;
+  padding: 0px;
+  background-color: #212121;
+  color: #ffffff;
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+  scroll-behavior: smooth;
+}
+
+body {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  color: #c9cacc;
+  background-color: #110f16;
+  /* background-color: #272727;  */
+  font-size: 16px;
+  font-family: 'Source Code Pro', monospace, Arial, Helvetica, sans-serif;
+  font-weight: 400;
+  /* line-height: 1.725; */
+  text-rendering: geometricPrecision;
+  min-height: 100vh;
+  /* margin: 0 auto; */
+}
+
+#wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  width: 100%;
+  /* max-width: 560px; */
+  margin: 0 auto;
+}
+
+nav ul {
+  list-style-type: none;
+  margin: auto;
+  padding: 0em;
+}
+
+nav a {
+  text-decoration: none;
+  border-radius: 500px;
+  padding: 0.2rem;
+  font-weight: 600;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  color: #c9cacc;
+  letter-spacing: 0.09rem;
+}
+
+nav a:hover {
+  background-color: #29f3c3;
+  color: #1b1b1b;
+  -webkit-transition: 150ms ease;
+  transition: 150ms ease;
+}
+
+/* header {
+	color: #c9cacc;
+	margin: 0 auto;
+	text-align: center;
+	padding: 2rem;
+	line-height: 1.75rem;
+	border-top: 1.5px solid #666;
+	border-bottom: 1.5px solid #666;
+} */
+/* header img {
+	width: 100px;
+	border: 5px solid #666;
+	border-radius: 165px;
+} */
+.card {
+  background-color: #151515;
+  margin: 2rem;
+  text-align: center;
+  border-radius: 10px;
+  -webkit-box-shadow: 0 10px 25px 5px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 10px 25px 5px rgba(0, 0, 0, 0.2);
+}
+
+.card-top {
+  margin: auto;
+  height: 80px;
+  background: #29f3c3;
+  border-start-end-radius: 10px;
+  border-start-start-radius: 10px;
+}
+
+.card img {
+  margin: 40px auto 10px;
+  width: 100px;
+  border-radius: 50%;
+}
+
+h1 {
+  /* font-family: 'Source Sans Pro', sans-serif; */
+  /* font-weight: 700; */
+  /* line-height: 2rem; */
+  /* letter-spacing: 0.05rem; */
+}
+
+h1 a {
+  font-size: .8em;
+  color: #c9cacc;
+  text-decoration: none;
+  letter-spacing: -.05em;
+  word-spacing: -.05em;
+}
+
+h1 a:hover {
+  color: #29f3c3;
+}
+
+header h2 {
+  /* font-weight: 200; */
+  font-size: 1.2rem;
+  letter-spacing: 0.01rem;
+}
+
+h2,
+h3,
+h4 {
+  /* letter-spacing: 0.01rem; */
+}
+
+#aboutMe {
+  letter-spacing: 0.01rem;
+}
+
+#bio,
+#skills {
+  padding: 1.5rem;
+  text-align: start;
+}
+
+#bio h2 {
+  font-size: 2.2rem;
+}
+
+#skills h4 {
+  padding: 1.5rem;
+  color: #666;
+  font-size: 1.5rem;
+  margin: 0 auto 20px;
+}
+
+#skills ul {
+  line-height: 1.35rem;
+  font-weight: 200;
+  text-align: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.skills {
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: 1fr 1fr;
+      grid-template-columns: 1fr 1fr;
+  -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr 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;
+}
+
+#contact h3 {
+  font-size: 1.5rem;
+}
+
+#contact ul {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+}
+
+.contactLinks li {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+
+.contactLinks a {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  color: #c9cacc;
+  text-decoration: none;
+}
+
+.contactLinks a:hover {
+  font-weight: 600;
+}
+
+#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 {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  margin: 1.5rem 0;
+  text-align: center;
+  font-weight: 200;
+  letter-spacing: 0.01rem;
+}
+
+.project-item a {
+  color: #c9cacc;
+  text-decoration: none;
+}
+
+.project-item a:hover {
+  color: #29f3c3;
+}
+
+.project-desc {
+  margin: 0;
+  padding: 0 0.8rem;
+}
+
+.project-skills {
+  color: #666;
+  list-style: none;
+  margin: 0 auto;
+  line-height: 1.25rem;
+  text-align: start;
+  padding: 0 1.5rem;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: baseline;
+      -ms-flex-align: baseline;
+          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);
+}
+
+footer {
+  color: #666;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+#copyright {
+  margin: 0.4rem;
+  letter-spacing: 0.1rem;
+}
+
+#footLinks {
+  margin: 0.4rem;
+  letter-spacing: 0.8rem;
+}
+
+#footLinks a {
+  color: #666;
+}
+
+#footLinks a:hover {
+  color: #c9cacc;
+  -webkit-transition: 160ms ease-in;
+  transition: 160ms ease-in;
+}
+
+code pen begin
+.dark {
+  background: #110f16;
+}
+
+.light {
+  background: #f3f5f7;
+}
+
+a,
+a:hover {
+  text-decoration: none;
+  -webkit-transition: color 0.3s ease-in-out;
+  transition: color 0.3s ease-in-out;
+}
+
+/* Cards */
+.postcard {
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66);
+          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;
+}
+
+.postcard.dark {
+  background-color: #18151f;
+}
+
+.postcard.light {
+  background-color: #e1e5ea;
+}
+
+.postcard .t-dark {
+  color: #18151f;
+}
+
+.postcard a {
+  color: inherit;
+}
+
+.postcard h1,
+.postcard .h1 {
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.postcard .small {
+  font-size: 80%;
+}
+
+.postcard .postcard__title {
+  font-size: 1.75rem;
+}
+
+.postcard .postcard__img {
+  max-height: 180px;
+  width: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  position: relative;
+}
+
+.postcard .postcard__img_link {
+  display: contents;
+}
+
+.postcard .postcard__bar {
+  width: 50px;
+  height: 10px;
+  margin: 10px 0;
+  border-radius: 5px;
+  background-color: #424242;
+  -webkit-transition: width 0.2s ease;
+  transition: width 0.2s ease;
+}
+
+.postcard .postcard__text {
+  padding: 1.5rem;
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+.postcard .postcard__preview-txt {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: justify;
+  height: 100%;
+}
+
+.postcard .postcard__tagbox {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-flow: row wrap;
+          flex-flow: row wrap;
+  font-size: 14px;
+  margin: 20px 0 0 0;
+  padding: 0;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+
+.postcard .postcard__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;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  -webkit-transition: background-color 0.3s;
+  transition: background-color 0.3s;
+}
+
+.postcard .postcard__tagbox .tag__item:hover {
+  background: rgba(83, 83, 83, 0.8);
+}
+
+.postcard:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-image: linear-gradient(-70deg, #424242, transparent 50%);
+  opacity: 1;
+  border-radius: 10px;
+}
+
+.postcard:hover .postcard__bar {
+  width: 100px;
+}
+
+@media screen and (min-width: 769px) {
+  .postcard {
+    -ms-flex-wrap: inherit;
+        flex-wrap: inherit;
+  }
+  .postcard .postcard__title {
+    font-size: 2rem;
+  }
+  .postcard .postcard__tagbox {
+    -webkit-box-pack: start;
+        -ms-flex-pack: start;
+            justify-content: start;
+  }
+  .postcard .postcard__img {
+    max-width: 300px;
+    max-height: 100%;
+    -webkit-transition: -webkit-transform 0.3s ease;
+    transition: -webkit-transform 0.3s ease;
+    transition: transform 0.3s ease;
+    transition: transform 0.3s ease, -webkit-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 {
+    -webkit-transform: scale(1.1);
+            transform: scale(1.1);
+  }
+  .postcard:nth-child(2n + 1) {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+  }
+  .postcard:nth-child(2n + 0) {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: reverse;
+        -ms-flex-direction: row-reverse;
+            flex-direction: row-reverse;
+  }
+  .postcard:nth-child(2n + 1) .postcard__text::before {
+    left: -12px !important;
+    -webkit-transform: rotate(4deg);
+            transform: rotate(4deg);
+  }
+  .postcard:nth-child(2n + 0) .postcard__text::before {
+    right: -12px !important;
+    -webkit-transform: rotate(-4deg);
+            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 */
+/* color: #1b1b1b; */
+/* color: #2a9d8f */
+/* @media (min-width: 768px) {
+	#wrapper {
+		max-width: 992px;
+	}
+
+	nav {
+		display: flex;
+	}
+
+	nav a {
+		margin: auto;
+		padding: 0.5rem;
+		flex: 4;
+		justify-content: flex-start;
+	}
+
+	nav li {
+		display: inline-block;
+	}
+
+	nav ul {
+		display: flex;
+	}
+
+	#aboutMe {
+		display: flex;
+	}
+
+	#bio {
+		flex: 2;
+	}
+
+	#contact {
+		flex: 1;
+		text-align: end;
+	}
+
+	.contactLinks {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.contactLinks li {
+		align-items: flex-end;
+	}
+	.contactLinks a {
+		flex-direction: row;
+	}
+
+	.contactLinks i {
+		margin: auto 5px;
+	}
+
+	#skills {
+		padding: 0;
+	}
+
+	#project-container {
+		display: flex;
+		flex-direction: row-reverse;
+	}
+
+	.project-item img {
+		flex: 2;
+	}
+
+	.project-skills {
+		flex: 1;
+		margin: 0;
+		padding: 0;
+		text-align: end;
+		flex-direction: column;
+		align-items: flex-end;
+	}
+
+	.project-skills h4 {
+		margin: 1.5rem;
+		align-self: flex-start;
+	}
+
+	.project-skills ul {
+		margin: 1.5rem;
+		padding: 0;
+	}
+
+	.project-item a {
+		align-self: start;
+	}
+
+	footer {
+		margin: 0 auto;
+		width: 87%;
+		padding: 2rem;
+		flex-direction: row;
+		justify-content: space-between;
+	}
+} */
+/*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/app/scss/style.css.map b/app/scss/style.css.map
new file mode 100644
index 00000000..c1458690
--- /dev/null
+++ b/app/scss/style.css.map
@@ -0,0 +1,10 @@
+{
+    "version": 3,
+    "mappings": "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",
+    "sources": [
+        "style.scss",
+        "_globals.scss"
+    ],
+    "names": [],
+    "file": "style.css"
+}
\ No newline at end of file
diff --git a/app/scss/style.scss b/app/scss/style.scss
new file mode 100644
index 00000000..995faf56
--- /dev/null
+++ b/app/scss/style.scss
@@ -0,0 +1 @@
+@import "globals";
\ No newline at end of file
diff --git a/images/were-hooked.png b/images/were-hooked.png
new file mode 100644
index 00000000..5e6a9122
Binary files /dev/null and b/images/were-hooked.png differ
diff --git a/index.html b/index.html
index e16c3d21..d5f4952b 100644
--- a/index.html
+++ b/index.html
@@ -10,419 +10,437 @@
 			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=Source+Sans+Pro:wght@300;600;700&display=swap');
+		</style>
 		<style>
 			@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap');
-			</style> 
+		</style>
 		<script src="https://use.fontawesome.com/e427b1b41a.js"></script>
-		<link rel="stylesheet" type="text/css" href="style.css" />
+		<!-- <link rel="stylesheet" type="text/css" href="style.css" /> -->
+		<link rel="stylesheet" href="style.css" />
 		<title>Tyler Koenig</title>
 	</head>
 	<body>
-		<div id="wrapper">
+		<header>
 			<nav>
 				<a href="index.html">TYLER KOENIG</a>
 				<ul>
-					<li><a href="#bio" target="_self">ABOUT</a></li>
-					<li><a href="#contact" target="_self">CONTACT</a></li>
+					<li><a href="#about" target="_self">ABOUT</a></li>
+					<li id="nav__contact">
+						<a href="#contact" target="_self">CONTACT</a>
+					</li>
 					<li>
-						<a href="#project-wrapper" target="_self">PROJECTS</a>
+						<a href="#projects" target="_self">PROJECTS</a>
 					</li>
 					<li><a href="#skills" target="_self">SKILLS</a></li>
 				</ul>
 			</nav>
-			<header>
-				<img src="/images/headshot-tyler_koenig.png" alt="tyler" />
-				<h1>
-					<a href="index.html">Tyler Koenig</a>
-				</h1>
-				<h2>
-					Warehouse Associate at Amazon
-					<br />
-					Student at We Can Code IT, Web Developer in the making!
-				</h2>
-			</header>
-			<main>
-				<section id="aboutMe">
-					<div id="bio">
-						<h2>about me</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>
-					</div>
-					<div id="contact">
-						<h3>contact</h3>
-						<ul class="contactLinks">
-							<li>
-								<a
-									href="https://github.com/lerko96"
-									target="_blank"
-									title="github"
-								>
-									github
-									<i
-										class="fa fa-github fa-lg"
-										aria-hidden="true"
-									></i>
-								</a>
-							</li>
-							<li>
+		</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">
+						<article class="card" id="profile">
+							<div class="card_top">
+								<div class="avatar-holder">
+									<img
+										id="headshot"
+										src="/images/headshot-tyler_koenig.png"
+										alt="tyler"
+									/>
+								</div>
+							</div>
+							<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://www.linkedin.com/in/tyler-koenig-72607a18b/"
 									target="_blank"
 									title="LinkedIn"
-								>
-									linkedin
-									<i
-										class="fa fa-linkedin-square fa-lg"
+									><i
+										class="fa fa-linkedin-square fa-2x"
 										aria-hidden="true"
-									></i>
-								</a>
-							</li>
-							<li>
+									></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="tylerkng96@icloud.com"
-									>email
-									<i
-										class="fa fa-envelope-o fa-lg"
+									title="email"
+									><i
+										class="fa fa-envelope-o fa-2x"
 										aria-hidden="true"
-									></i>
-								</a>
-							</li>
+									></i
+								></a>
+							</div>
+						</article>
+						<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>
+					<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>
-					</div>
+					</article>
 				</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">
+				<section class="card" id="projects">
 					<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>
+					<article class="project">
+						<a
+							class="project__img_link"
+							href="https://github.com/lerko96/were-hooked-repo"
+							target="_blank"
+						>
+							<img
+								class="project__img"
+								src="/images/were-hooked.png"
+								alt="were-hooked-img"
+						/></a>
+						<div class="project__text">
+							<h3 class="project__title">
+								<a
+									href="https://github.com/lerko96/were-hooked-repo"
+									target="_blank"
+									>We're Hooked</a
+								>
+							</h3>
+							<div class="project__subtitle_small">
+								<time datetime="2021-08-20 12:00:00">
+									<i class="fa fa-calendar mr-2"></i>Fri,
+									August 20th 2021
+								</time>
 							</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 class="project__bar"></div>
+							<div class="project__info">
+								<p>
+									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>
-						</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>
+							<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/lerko96/mystery-educator"
+							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/lerko96/mystery-educator"
+									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 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 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>
-						</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>
+							<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/lerko96/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/lerko96/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 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 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>
-						</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>
+							<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/lerko96/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/lerko96/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 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 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>
-						</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
-									>
-								</h3>
+							<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/lerko96/reviews-mvc"
+							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/lerko96/reviews-mvc"
+									target="_blank"
+									>Movie Reviews</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 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 class="project__bar"></div>
+							<div class="project__info">
+								<p>
+									Designed, built and tested a Java
+									application for movie reviews.
+								</p>
 							</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>
+							<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>
-			</main>
-			<footer>
-				<span id="copyright">&copy; 2021 Tyler Koenig</span>
-				<div id="footLinks">
-					<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>
-			</footer>
-		</div>
-		<script src="index.js" type="text/java"></script>
+			</div>
+		</main>
+		<footer>
+			<span id="copyright">&copy; 2021 Tyler Koenig</span>
+			<div id="footLinks">
+				<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>
+		</footer>
+		<script src="app/js/script.js"></script>
 	</body>
 </html>
diff --git a/style.css b/style.css
index 05b327c9..51a5ff79 100644
--- a/style.css
+++ b/style.css
@@ -1,26 +1,38 @@
-html {
+* {
+	padding: 0;
+	margin: 0;
+	box-sizing: border-box;
+}
+
+html,
+body {
+	width: 100%;
+	height: 100%;
 	scroll-behavior: smooth;
 }
 
 body {
 	box-sizing: border-box;
-	color: #c9cacc;
-	background-color: #272727;
-	font-size: 16px;
+	color: #fff;
+	/* color: #c9cacc; */
+	background-color: #110f16;
+	/* background-color: #1C1924; */
+	/* background-color: #272727;  */
 	font-family: 'Source Code Pro', monospace, Arial, Helvetica, sans-serif;
+	font-size: 16px;
 	font-weight: 400;
-	line-height: 1.725;
-	text-rendering: geometricPrecision;
+	/* line-height: 1.725; */
+	text-rendering: optimizeLegibility;
 	min-height: 100vh;
-	margin: 0 auto;
+	/* margin: 0 auto; */
 }
 
 #wrapper {
-	display: flex;
+	/* display: flex;
 	flex-direction: column;
-	width: 100%;
-	max-width: 560px;
-	margin: 0 auto;
+	width: 100%; */
+	/* max-width: 560px; */
+	margin: 0 1rem;
 }
 
 nav ul {
@@ -30,6 +42,7 @@ nav ul {
 }
 
 nav a {
+	margin: 0 1rem;
 	text-decoration: none;
 	border-radius: 500px;
 	padding: 0.2rem;
@@ -41,12 +54,20 @@ nav a {
 }
 
 nav a:hover {
-	background-color: #29f3c3;
+	background-color: #2bf3c4;
 	color: #1b1b1b;
 	transition: 150ms ease;
 }
 
+.side__nav {
+	display: none;
+}
+
 header {
+	display: block;
+}
+
+/* header {
 	color: #c9cacc;
 	margin: 0 auto;
 	text-align: center;
@@ -54,196 +75,252 @@ header {
 	line-height: 1.75rem;
 	border-top: 1.5px solid #666;
 	border-bottom: 1.5px solid #666;
-}
+} */
 
-header img {
+/* header img {
 	width: 100px;
 	border: 5px solid #666;
 	border-radius: 165px;
+} */
+
+.card {
+	/* display: flex; */
+	flex-wrap: wrap;
+	/* position: relative; */
+	background-color: #151515;
+	margin: 2rem auto;
+	/* height: 400px; */
+	min-width: 320px;
+	/* max-width: 500px; */
+	text-align: center;
+	border-radius: 10px;
+	box-shadow: 0 10px 25px 5px rgba(0, 0, 0, 0.2);
+	overflow: hidden;
 }
 
-h1 {
-	line-height: 2rem;
-	letter-spacing: 0.01rem;
+.card_top {
+	position: relative;
+	margin: auto;
+	height: 80px;
+	/* og */
+	/* background: #29f3c3; */
+	/* new */
+	background: #0bc196;
 }
 
-h1 a {
-	font-size: 3rem;
-	color: #c9cacc;
+#headshot {
+	margin: 40px auto 10px;
+	width: 100px;
+	height: 100px;
+	border: 3px solid #151515;
+	border-radius: 50%;
+}
+
+.name {
+	height: 40px;
+	margin-top: 70px;
+}
+
+.name a {
+	color: inherit;
 	text-decoration: none;
+	font-weight: 700;
+	font-size: 1.6em;
 }
 
-h1 a:hover {
+.name a:hover {
+	text-decoration: underline;
 	color: #29f3c3;
 }
 
-header h2 {
-	font-weight: 200;
-	font-size: 1.2rem;
-	letter-spacing: 0.01rem;
+.intro_bio {
+	/* height: 175px; */
+	margin: 20px 1.5rem 40px;
 }
 
-h2,
-h3,
-h4 {
-	letter-spacing: 0.01rem;
+.contact-links {
+	font-size: 110%;
+	margin-bottom: 40px;
 }
 
-#aboutMe {
-	letter-spacing: 0.01rem;
+.contact-links a {
+	margin: 0 10px;
+	padding: 0;
+	color: #666;
 }
 
-#bio,
+.contact-links a:hover {
+	transition: color 0.3s ease-in-out;
+	color: #c9cacc;
+}
+
+.card h2 {
+	font-size: 2.2rem;
+	text-align: start;
+	/* padding: 1.5rem; */
+	margin: 16px auto 8px;
+}
+
+#about,
 #skills {
 	padding: 1.5rem;
 	text-align: start;
 }
 
-#bio h2 {
-	font-size: 2.2rem;
+#about {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	text-align: justify;
+	height: 100%;
 }
 
-#skills h4 {
-	padding: 1.5rem;
-	color: #666;
-	font-size: 1.5rem;
-	margin: 0 auto 20px;
+#projects {
+	background: linear-gradient(
+		180deg,
+		hsla(0, 0%, 8%, 1) 0%,
+		hsla(257, 19%, 7%, 1) 100%
+	);
 }
+
+#projects h2 {
+	text-align: start;
+	padding: 1.5rem;
+}
+
 #skills ul {
-	line-height: 1.35rem;
-	font-weight: 200;
-	text-align: center;
-	align-items: center;
-	margin: 0;
-	padding: 0;
+	display: flex;
+	flex-flow: row wrap;
 	list-style-type: none;
+	overflow-x: visible;
 }
 
-.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:
-		'. .'
-		'. .'
-		'. .'
-		'. .'
-		'. .'
-		'. .'
-		'. .'
-		'. .';
+#skills li {
+	margin: 5px auto;
+	padding: 5px 10px;
+	border: 1px solid #fff;
 }
 
-#contact {
-	margin-top: 1rem;
-	padding: 1.5rem;
+.project {
+	/* display: flex; */
+	/* flex-direction: column; */
+	/* 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;
+	/* change gradient start */
+	background-color: #18151f;
 }
 
-#contact h3 {
-	font-size: 1.5rem;
-}
-
-#contact ul {
-	display: flex;
-	list-style-type: none;
-	margin: 0;
-	padding: 0;
-	text-align: center;
-}
-
-.contactLinks li {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-}
-
-.contactLinks a {
-	display: flex;
-	flex-direction: column;
-	color: #c9cacc;
+.project a,
+.project a:hover {
 	text-decoration: none;
+	transition: color 0.3s ease-in-out;
+	color: inherit;
 }
 
-.contactLinks a:hover {
-	font-weight: 600;
+.project h3 {
+	margin-bottom: 0.5rem;
+	font-weight: 500;
+	line-height: 1.2;
 }
 
-#project-wrapper {
-	margin-top: 2.5rem;
+.project__subtitle_small {
+	font-size: 80%;
 }
 
-#project-wrapper h2 {
-	margin: 0;
-	padding: 1.5rem 1.5rem 0 1.5rem;
-	font-size: 2rem;
+.project__subtitle_small i {
+	margin-right: 5px;
 }
 
-#project-wrapper h3 {
-	font-size: 1.5rem;
-	text-align: left;
-	margin: 0 auto;
+.project__title {
+	font-size: 1.75rem;
+}
+
+.project__title:hover {
+	color: #00d7a5;
+}
+
+.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;
+	transition: width 0.2s ease;
+	background-color: #00d7a5;
+}
+
+.project__text {
 	padding: 1.5rem;
-	letter-spacing: 0.01rem;
-}
-
-.project-item {
+	position: relative;
 	display: flex;
 	flex-direction: column;
-	margin: 1.5rem 0;
-	text-align: center;
-	font-weight: 200;
-	letter-spacing: 0.01rem;
 }
 
-.project-item a {
-	color: #c9cacc;
-	text-decoration: none;
+.project__info {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	text-align: justify;
+	height: 100%;
 }
 
-.project-item a:hover {
-	color: #29f3c3;
-}
-
-.project-desc {
-	margin: 0;
-	padding: 0 0.8rem;
-}
-
-.project-skills {
-	color: #666;
-	list-style: none;
-	margin: 0 auto;
-	line-height: 1.25rem;
-	text-align: start;
-	padding: 0 1.5rem;
+.project .project__tagbox {
 	display: flex;
-	align-items: baseline;
+	flex-flow: row wrap;
+	font-size: 14px;
+	margin: 20px 0 0 0;
+	padding: 0;
+	justify-content: center;
 }
 
-.project-skills h4 {
-	font-size: 1.5rem;
-	/* flex: 1; */
+.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-skills li {
-	list-style-type: none;
-	color: #c9cacc;
+.project .project__tagbox .tag__item:hover {
+	background: rgba(83, 83, 83, 0.8);
 }
 
-.project-skills ul {
-	/* flex: 9; */
-	line-height: 2rem;
-	text-align: start;
+.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(-30deg, #110f16, transparent 50%); */
+	opacity: 1;
+	border-radius: 10px;
 }
 
-.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 {
@@ -275,11 +352,128 @@ footer {
 	transition: 160ms ease-in;
 }
 
+@import url('https://fonts.googleapis.com/css2?family=Baloo+2&display=swap');
+/* This pen */
+
+.dark {
+	background: #110f16;
+}
+.light {
+	background: #f3f5f7;
+}
+/* a,
+a:hover {
+	text-decoration: none;
+	transition: color 0.3s ease-in-out;
+} */
+
+/* Cards */
+.postcard {
+	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;
+}
+.postcard.dark {
+	background-color: #18151f;
+}
+.postcard.light {
+	background-color: #e1e5ea;
+}
+.postcard .t-dark {
+	color: #18151f;
+}
+.postcard a {
+	color: inherit;
+}
+.postcard h1,
+.postcard .h1 {
+	margin-bottom: 0.5rem;
+	font-weight: 500;
+	line-height: 1.2;
+}
+.postcard .small {
+	font-size: 80%;
+}
+.postcard .postcard__title {
+	font-size: 1.75rem;
+}
+.postcard .postcard__img {
+	max-height: 180px;
+	width: 100%;
+	object-fit: cover;
+	position: relative;
+}
+.postcard .postcard__img_link {
+	display: contents;
+}
+.postcard .postcard__bar {
+	width: 50px;
+	height: 10px;
+	margin: 10px 0;
+	border-radius: 5px;
+	background-color: #424242;
+	transition: width 0.2s ease;
+}
+.postcard .postcard__text {
+	padding: 1.5rem;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+}
+.postcard .postcard__preview-txt {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	text-align: justify;
+	height: 100%;
+}
+.postcard .postcard__tagbox {
+	display: flex;
+	flex-flow: row wrap;
+	font-size: 14px;
+	margin: 20px 0 0 0;
+	padding: 0;
+	justify-content: center;
+}
+.postcard .postcard__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;
+}
+.postcard .postcard__tagbox .tag__item:hover {
+	background: rgba(83, 83, 83, 0.8);
+}
+.postcard:before {
+	content: '';
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background-image: linear-gradient(-70deg, #424242, transparent 50%);
+	opacity: 1;
+	border-radius: 10px;
+}
+.postcard:hover .postcard__bar {
+	width: 100px;
+}
+
+/* code pen finish */
+
 /* color: #1b1b1b; */
 /* color: #2a9d8f */
-@media (min-width: 576px) {
+/* @media (min-width: 768px) {
 	#wrapper {
-		width: 560px;
+		max-width: 992px;
 	}
 
 	nav {
@@ -373,4 +567,198 @@ footer {
 		flex-direction: row;
 		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;
+	}
 }