organized and refactored CSS for clarity and future edits. tweaked styling, production ready.

src/Projects.jsx

@@ -4,7 +4,7 @@ import ProjectCard from "./components/ProjectCard";
 export default function Projects({ cardData }) {
   return (
     <>
-      <div id="project-container">
+      <div id="project-section">
         <div id="project-grid-container">
           <h1>Projects</h1>
           <div id="project-cards-section">

src/components/ProjectCard.jsx

@@ -13,23 +13,24 @@ export default function ProjectCard({
   return (
     <div className="project-card">
       <div className="img-container">
-        <img src={image} />
+        <img src={image} className="shadow" />
       </div>
-      <div className="project-text-column">
+      <div className="project-text-column shadow">
         <div className="project-text">
-          <h3 className="project-header">{title}</h3>
+          <h3>{title}</h3>
           <p>{descriptionA}</p>
           <ul className="feature-list">
             {featureList.map((item) => (
               <li>{item}</li>
             ))}
           </ul>
-          <a className="view-button-link button" href={url} target="_blank">
+          <div className="row">
-            View on GitHub
+            <a className="button" href={url} target="_blank">
-            <FontAwesomeIcon icon={faGithub} />
+              <div className="button-grid">View on GitHub</div>
             </a>
           </div>
         </div>
       </div>
+    </div>
   );
 }

src/components/SkillCard.jsx

@@ -10,7 +10,7 @@ export default function SkillCard({ header, symbol, list, initState }) {
   };
 
   return (
-    <div className="card">
+    <div className="card shadow">
       <div className="skill-section-header" onClick={toggleExpansion}>
         <span className="material-icons skill-symbol">{symbol}</span>
         <h3>{header}</h3>

src/main.css

@@ -7,6 +7,7 @@
 #4a245e
 */
 
+/**GLOBAL**/
 :root {
   --width: 480px;
 }
@@ -20,31 +21,68 @@
   font-family: "Lato", sans-serif;
 }
 
-html,
-body {
-  position: relative;
-  height: 100%;
-  background: #222;
-}
-
 body {
   margin: 0;
-  height: 100vh;
+  position: relative;
+  height: 100%;
   background: linear-gradient(
     135deg,
     #84509f 0%,
     #5e3276 39%,
-    hsl(279deg 62% 19%) 61%,
+    #39124e 61%,
-    hsl(279deg 94% 7%) 100%
+    #170123 100%
   );
-  background-size:
-    300% 100%,
-    cover;
   animation: background-fade 4s linear infinite;
   animation-direction: alternate;
   background-attachment: fixed;
 }
 
+h1 {
+  font-size: clamp(4.25rem, 5.5vw, 10rem);
+  font-weight: 600;
+  letter-spacing: 2px;
+  width: max-content;
+  color: #ebd2ff;
+}
+
+h3,
+h4 {
+  color: #ebd2ff;
+  font-weight: 300;
+  line-height: 1.5;
+}
+
+h3 {
+  font-size: clamp(1.5rem, 2vw, 3rem);
+}
+
+h4 {
+  font-size: clamp(1rem, 1.5vw, 1.25rem);
+}
+
+.material-icons {
+  font-variation-settings:
+    "FILL" 0,
+    "wght" 200,
+    "GRAD" 0,
+    "opsz" 24;
+  font-size: 5vw;
+  color: #ebd2ff;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.shadow {
+  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);
+}
+
+/**SWIPER PAGES**/
 .swiper {
   width: 100%;
   height: 100vh;
@@ -57,6 +95,32 @@ body {
   justify-content: center;
 }
 
+/**ACTIVE PAGE ANIMATIONS**/
+.swiper-slide-active #header,
+.swiper-slide-active #skills-section,
+.swiper-slide-active #project-section,
+.swiper-slide-active #project-cards-section {
+  opacity: 0;
+}
+
+.swiper-slide-active #header,
+.swiper-slide-active #skills-section,
+.swiper-slide-active #project-section,
+.swiper-slide-active #project-cards-section {
+  animation: moveDown 0.8s ease-in forwards;
+}
+
+.swiper-slide-active #header,
+.swiper-slide-active #project-section {
+  animation-delay: 0.2s;
+}
+
+.swiper-slide-active #skills-section,
+.swiper-slide-active #project-cards-section {
+  animation-delay: 0.8s;
+}
+
+/**SWIPER BULLETS**/
 .swiper-pagination-bullet {
   width: 18px;
   height: 18px;
@@ -71,6 +135,7 @@ body {
   border-radius: 14px;
 }
 
+/**PRIMARY PAGE**/
 #primary {
   display: grid;
   height: 100vh;
@@ -79,108 +144,6 @@ body {
   column-gap: 1vh;
 }
 
-#project-container {
-  height: 100vh;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  margin: 5vw;
-}
-
-#project-grid-container {
-  display: grid;
-  grid-template-columns: 100%;
-  grid-template-rows: 10% 80%;
-}
-
-.project-card {
-  display: grid;
-  grid-template-columns: 40% 60%;
-  grid-template-rows: 100%;
-  overflow: hidden;
-  height: 90%;
-  width: 100%;
-  opacity: 0;
-}
-
-.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: 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),
-    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: 15% 35% 40% 15%;
-}
-
-.project-text h3 {
-  font-size: clamp(3rem, 3.5rem, 4rem);
-  color: #ebd2ff;
-}
-
-.project-text p {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  font-size: clamp(1rem, 1.5rem, 2rem);
-  color: #ebd2ff;
-}
-
-.row {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 1vw;
-}
-
-#project-cards-section {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.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%;
   overflow: hidden;
@@ -199,64 +162,6 @@ body {
   justify-content: center;
   padding-left: 120px;
   text-align: center;
-  opacity: 0;
-}
-
-h1 {
-  font-size: clamp(4.25rem, 5.5vw, 10rem);
-  font-weight: 600;
-  letter-spacing: 2px;
-  width: max-content;
-  margin-bottom: 32px;
-  opacity: 0;
-  color: #ebd2ff;
-}
-
-#header-text h3,
-#header-text h4 {
-  color: #ebd2ff;
-  font-weight: 300;
-  line-height: 1.5;
-  opacity: 0;
-}
-
-#header-text h3 {
-  font-size: clamp(1.5rem, 3vw, 3rem);
-}
-#header-text h4 {
-  font-size: clamp(1rem, 1.5vw, 1.25rem);
-}
-
-.swiper-slide-active #header-text {
-  opacity: 1;
-}
-
-.swiper-slide-active #header-text h1,
-.swiper-slide-active #header-text h3,
-.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;
-}
-
-.swiper-slide-active #header-text h1 {
-  animation-delay: 0.2s;
-}
-
-.swiper-slide-active #header-text h3 {
-  animation-delay: 0.8s;
-}
-
-.swiper-slide-active #header-text h4 {
-  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 {
@@ -276,7 +181,6 @@ h1 {
   width: calc(var(--width) / 2);
   filter: drop-shadow(5px 6px 5px rgba(36, 36, 42, 0.5));
   user-select: none;
-  opacity: 0;
   z-index: 1;
   border-radius: 50%;
 }
@@ -285,21 +189,6 @@ h1 {
   animation: imgMoveDown 0.8s ease-in forwards 0.2s;
 }
 
-.material-icons {
-  font-variation-settings:
-    "FILL" 0,
-    "wght" 200,
-    "GRAD" 0,
-    "opsz" 24;
-  font-size: 5vw;
-  color: #ebd2ff;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
 #skills-section {
   width: 100%;
   display: flex;
@@ -309,13 +198,6 @@ h1 {
   text-align: center;
 }
 
-#skills-section h2 {
-  font-size: clamp(3.25rem, 4.5vw, 8rem);
-  color: #ebd2ff;
-  opacity: 0;
-  padding-bottom: 36px;
-}
-
 .cards {
   display: grid;
   grid-template-columns: 30% 30% 30%;
@@ -324,6 +206,12 @@ h1 {
   justify-content: center;
 }
 
+.down-indicator {
+  animation: moveDown 0.8s ease-in forwards;
+  animation-delay: 0.2s;
+}
+
+/**SKILL CARDS**/
 .card {
   align-items: center;
   justify-content: center;
@@ -331,22 +219,18 @@ h1 {
   background-color: #ebd2ff;
   border-radius: 20px;
   width: 20vw;
-  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);
 }
 
 .card .skill-section-header {
   display: grid;
   grid-template-columns: 20% 60%;
   grid-template-rows: 100%;
-  column-gap: 1vw;
+  column-gap: 20%;
   align-items: center;
   justify-content: center;
   text-align: center;
 
-  padding: 2vw;
+  padding: 1vw 2vw 1vw 2vw;
   margin: 0;
   background-color: #4a245e;
   border-radius: 18px 18px 0 0;
@@ -361,39 +245,9 @@ h1 {
     "GRAD" 0,
     "opsz" 24;
   font-size: 5vw;
-  height: 5vh;
   text-align: left;
 }
 
-.card .skill-section-header h3 {
-  font-size: clamp(1rem, 2vw, 3rem);
-}
-
-.card .skill-section-header h3 {
-  color: #ebd2ff;
-}
-
-.socials {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-
-.button {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  background-color: #ebd2ff;
-}
-
-.view-button-link {
-  font-size: clamp(1rem, 1.5vw, 2rem);
-  color: #4a245e;
-  text-decoration: none;
-}
-
 .card ul {
   padding: 1vw;
 }
@@ -404,23 +258,113 @@ h1 {
   color: #4a245e;
 }
 
-.swiper-slide-active #skills-section .cards .card {
+/**PROJECTS PAGE**/
-  opacity: 0;
+#project-section {
+  height: 90vh;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin: 5vw;
 }
 
-.swiper-slide-active #skills-section h2,
+#project-grid-container {
-.swiper-slide-active #skills-section .card {
+  display: grid;
-  animation: moveCardsDown 0.8s ease-in forwards;
+  grid-template-columns: 100%;
+  grid-template-rows: 20% 80%;
 }
 
-.swiper-slide-active #skills-section .card {
+#project-cards-section {
-  animation-delay: 1.2s;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
-.down-indicator {
+/**PROJECT CARDS**/
-  opacity: 0;
+.project-card {
-  animation: moveDown 0.8s ease-in forwards;
+  display: grid;
-  animation-delay: 0.2s;
+  grid-template-columns: 40% 60%;
+  grid-template-rows: 100%;
+  overflow: hidden;
+  height: 90%;
+  width: 100%;
+}
+
+.project-card .img-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.project-card img {
+  height: 100%;
+}
+
+.project-text-column {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 2vw;
+  background-color: #4a245e;
+  border-radius: 18px;
+}
+
+.project-text {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  grid-template-columns: 100%;
+  grid-template-rows: 10% 30% 45% 15%;
+}
+
+.project-text h3 {
+  font-weight: 600;
+}
+
+.project-text p {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: clamp(1rem, 1.5rem, 2rem);
+  color: #ebd2ff;
+}
+
+.row {
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.feature-list {
+  display: flex;
+  flex-direction: column;
+  color: #ebd2ff;
+  height: 100%;
+  padding-left: 4vw;
+}
+
+.feature-list li {
+  font-size: clamp(1rem, 1.5rem, 2rem);
+  color: #ebd2ff;
+}
+
+.button {
+  height: 100%;
+  width: 50%;
+  color: #4a245e;
+  background-color: #ebd2ff;
+  border-radius: 18px;
+  font-size: clamp(1rem, 1.5vw, 2rem);
+
+  text-decoration: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
 }
 
 /**Animations**/