mostly implemented project card.

src/main.css

@@ -97,26 +97,57 @@ body {
 }
 
 .project-card {
-  background-color: #ebd2ff;
   height: 70%;
   display: grid;
-  grid-template-columns: 40% 40%;
+  grid-template-columns: 50% 50%;
   grid-template-rows: 100%;
-  column-gap: 20vw;
+  overflow: hidden;
+  width: 100%;
+}
+
+.project-card .img-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
 }
 
 .project-card img {
   height: 100%;
+  box-shadow:
+    0 13px 27px -5px hsla(240, 30.1%, 28%, 0.25),
+    0 8px 16px -8px hsla(0, 0%, 0%, 0.3),
+    0 -6px 16px -6px hsla(0, 0%, 0%, 0.03);
+}
+
+.project-text-column {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 5vw;
+  background-color: #4A245E;
+  box-shadow:
+    0 13px 27px -5px hsla(240, 30.1%, 28%, 0.25),
+    0 8px 16px -8px hsla(0, 0%, 0%, 0.3),
+    0 -6px 16px -6px hsla(0, 0%, 0%, 0.03);
 }
 
 .project-text {
   display: grid;
+  width: 100%;
+  height: 100%;
   grid-template-columns: 100%;
-  grid-template-rows: 20% 70%;
+  grid-template-rows: 20% 35% 40% 10%;
 }
 
 .project-text h3 {
-  font-size: clamp(2rem, 2.5vw, 3rem);
+  font-size: clamp(3rem, 3.5vw, 4rem);
+  color: #eBD2FF;
+}
+
+.project-text p {
+  font-size: clamp(1rem, 1.5vw, 2rem);
+  color: #eBD2FF;
 }
 
 .row {
@@ -125,12 +156,23 @@ body {
   justify-content: center;
 }
 
+.row {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
 #project-cards-section {
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
 
+.feature-list {
+}
+
+
 #header {
   width: 100%;
   overflow: hidden;
@@ -305,11 +347,45 @@ body {
   text-align: left;
 }
 
-.card .skill-section-header h3 {
+.card .skill-section-header h3,
+.project-header {
   font-size: clamp(1rem, 2vw, 3rem);
+}
+
+.card .skill-section-header h3 {
   color: #ebd2ff;
 }
 
+.project-header {
+  color: #4A245E;
+}
+
+.socials {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1vw;
+  background-color: #ebd2ff;
+}
+
+.view-button-link {
+  display: grid;
+  grid-template-rows: 100%;
+  grid-template-columns: 60% 30%;
+  column-gap: 10vw;
+  font-size: clamp(1.5rem, 2vw, 3rem);
+  color: #4A245E;
+  text-decoration: none;
+}
+
 .card ul {
   padding: 1vw;
 }
@@ -406,7 +482,7 @@ body {
   }
 
   #header-text {
-    padding-left: 0px;
+    padding-left: 60px;
   }
 }