From 3e55bb0acd3f5a31bb38e6595a99a4d6a1e8301a Mon Sep 17 00:00:00 2001
From: Joshua Ashton <joshuatashton+dev@gmail.com>
Date: Sat, 28 Dec 2024 11:09:24 -0700
Subject: [PATCH] implemented mobile-responsive project card.

---
 src/Projects.jsx               |  12 +---
 src/components/ProjectCard.jsx |  22 +++---
 src/main.css                   | 123 ++++++++++++++++++++-------------
 3 files changed, 86 insertions(+), 71 deletions(-)

diff --git a/src/Projects.jsx b/src/Projects.jsx
index be507dbf..f9c26306 100644
--- a/src/Projects.jsx
+++ b/src/Projects.jsx
@@ -5,16 +5,8 @@ export default function Projects({ cardData }) {
   return (
     <>
       <div id="project-container">
-        <div className="project-grid-container">
-          <div id="project-header">
-            <h2 className="project-header">Projects</h2>
-
-            <p>
-              Here are some projects of mine. Lorem ipsum odor amet,
-              consectetuer adipiscing elit. Purus molestie vel ornare volutpat
-              elit et per montes. Lacus fames diam a non taciti sem.
-            </p>
-          </div>
+        <div id="project-grid-container">
+          <h1>Projects</h1>
           <div id="project-cards-section">
             {cardData.map((c) => (
               <ProjectCard
diff --git a/src/components/ProjectCard.jsx b/src/components/ProjectCard.jsx
index 5f772757..49ce038e 100644
--- a/src/components/ProjectCard.jsx
+++ b/src/components/ProjectCard.jsx
@@ -19,19 +19,15 @@ export default function ProjectCard({
         <div className="project-text">
           <h3 className="project-header">{title}</h3>
           <p>{descriptionA}</p>
-          <div className="row">
-            <ul className="feature-list">
-              {featureList.map((item) => (
-                <li>{item}</li>
-              ))}
-            </ul>
-          </div>
-          <div className="button">
-            <a className="view-button-link" href={url} target="_blank">
-              View on GitHub
-              <FontAwesomeIcon icon={faGithub} />
-            </a>
-          </div>
+          <ul className="feature-list">
+            {featureList.map((item) => (
+              <li>{item}</li>
+            ))}
+          </ul>
+          <a className="view-button-link button" href={url} target="_blank">
+            View on GitHub
+            <FontAwesomeIcon icon={faGithub} />
+          </a>
         </div>
       </div>
     </div>
diff --git a/src/main.css b/src/main.css
index fb9ad611..3b0e020b 100644
--- a/src/main.css
+++ b/src/main.css
@@ -88,21 +88,20 @@ body {
   margin: 5vw;
 }
 
-.project-grid-container {
-  margin: 2vw;
+#project-grid-container {
   display: grid;
   grid-template-columns: 100%;
-  grid-template-rows: 1% 90%;
-  row-gap: 2vh;
+  grid-template-rows: 10% 80%;
 }
 
 .project-card {
-  height: 70%;
   display: grid;
-  grid-template-columns: 50% 50%;
+  grid-template-columns: 40% 60%;
   grid-template-rows: 100%;
   overflow: hidden;
+  height: 90%;
   width: 100%;
+  opacity: 0;
 }
 
 .project-card .img-container {
@@ -124,8 +123,8 @@ body {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 5vw;
-  background-color: #4A245E;
+  padding: 3vw;
+  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),
@@ -137,23 +136,21 @@ body {
   width: 100%;
   height: 100%;
   grid-template-columns: 100%;
-  grid-template-rows: 20% 35% 40% 10%;
+  grid-template-rows: 15% 35% 40% 15%;
 }
 
 .project-text h3 {
-  font-size: clamp(3rem, 3.5vw, 4rem);
-  color: #eBD2FF;
+  font-size: clamp(3rem, 3.5rem, 4rem);
+  color: #ebd2ff;
 }
 
 .project-text p {
-  font-size: clamp(1rem, 1.5vw, 2rem);
-  color: #eBD2FF;
-}
-
-.row {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: center;
+  align-items: center;
+  font-size: clamp(1rem, 1.5rem, 2rem);
+  color: #ebd2ff;
 }
 
 .row {
@@ -161,6 +158,7 @@ body {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  padding: 1vw;
 }
 
 #project-cards-section {
@@ -170,8 +168,18 @@ body {
 }
 
 .feature-list {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: bottom;
+  align-items: bottom;
+  color: #ebd2ff;
 }
 
+.feature-list li {
+  font-size: clamp(1rem, 1.5rem, 2rem);
+  color: #ebd2ff;
+}
 
 #header {
   width: 100%;
@@ -194,7 +202,7 @@ body {
   opacity: 0;
 }
 
-#header-text h1 {
+h1 {
   font-size: clamp(4.25rem, 5.5vw, 10rem);
   font-weight: 600;
   letter-spacing: 2px;
@@ -225,7 +233,9 @@ body {
 
 .swiper-slide-active #header-text h1,
 .swiper-slide-active #header-text h3,
-.swiper-slide-active #header-text h4 {
+.swiper-slide-active #header-text h4,
+.swiper-slide-active #project-grid-container h1,
+.swiper-slide-active .project-card {
   animation: moveDown 0.8s ease-in forwards;
 }
 
@@ -241,6 +251,14 @@ body {
   animation-delay: 0.8s;
 }
 
+.swiper-slide-active #project-grid-container h1 {
+  animation-delay: 0.2s;
+}
+
+.swiper-slide-active .project-card {
+  animation-delay: 0.8s;
+}
+
 #header-image {
   height: 40vh;
   display: flex;
@@ -347,8 +365,7 @@ body {
   text-align: left;
 }
 
-.card .skill-section-header h3,
-.project-header {
+.card .skill-section-header h3 {
   font-size: clamp(1rem, 2vw, 3rem);
 }
 
@@ -356,10 +373,6 @@ body {
   color: #ebd2ff;
 }
 
-.project-header {
-  color: #4A245E;
-}
-
 .socials {
   display: flex;
   flex-direction: row;
@@ -369,20 +382,15 @@ body {
 
 .button {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   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;
+  font-size: clamp(1rem, 1.5vw, 2rem);
+  color: #4a245e;
   text-decoration: none;
 }
 
@@ -501,8 +509,24 @@ body {
     margin: 0;
   }
 
-  #header-text h1 {
+  h1 {
     font-size: clamp(2.5rem, 2.75vw, 3rem);
+    margin-bottom: 16px;
+    width: unset;
+    line-height: 1.1;
+  }
+
+  h2 {
+    padding-bottom: 0;
+  }
+
+  h3 {
+    font-size: clamp(1.5rem, 2vw, 2.5rem);
+  }
+
+  .project-text p,
+  .project-text ul li {
+    font-size: clamp(0.5rem, 0.8rem, 1rem);
   }
 
   #header-image {
@@ -516,10 +540,6 @@ body {
     border-radius: 18px 18px 18px 18px;
   }
 
-  #skills-section h2 {
-    padding-bottom: 0;
-  }
-
   .cards {
     grid-template-columns: 100%;
     grid-template-rows: 30% 30% 30%;
@@ -531,16 +551,6 @@ body {
     margin: 1vw;
   }
 
-  .card .skill-section-header h3 {
-    font-size: clamp(1.5rem, 2vw, 2.5rem);
-  }
-
-  #header-text h1 {
-    margin-bottom: 16px;
-    width: unset;
-    line-height: 1.1;
-  }
-
   .swiper-pagination-bullet {
     width: 14px;
     height: 14px;
@@ -553,6 +563,23 @@ body {
   .material-symbols-outlined {
     font-size: 10vw;
   }
+
+  .project-card {
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 40% 60%;
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+    padding: 2vw;
+  }
+
+  .project-text {
+    padding: 2vw;
+  }
+
+  .button {
+  }
 }
 
 @media (max-width: 485px) {