implementing suggestions from user.

src/Projects.jsx

@@ -28,15 +28,15 @@ export default function Projects({ cardData }) {
           <div id="projects-header-row">
             <h1>Projects</h1>
             <div id="projects-nav-buttons">
-              <div className="slider-nav-button shadow tooltip" onClick={prevSlide}>
+              <div className="slider-nav-button tooltip" onClick={prevSlide}>
-                <span className="material-icons">
+                <span className="material-icons project-nav-icon">
                   chevron_left
                 </span>
                 <span className="tooltip-text">Previous Project</span>
               </div>
 
-              <div className="slider-nav-button shadow tooltip" onClick={nextSlide}>
+              <div className="slider-nav-button tooltip" onClick={nextSlide}>
-                <span className="material-icons">
+                <span className="material-icons project-nav-icon">
                   chevron_right
                 </span>
                 <span className="tooltip-text">Next Project</span>
@@ -46,7 +46,7 @@ export default function Projects({ cardData }) {
           <Swiper
             modules={[Navigation, Scrollbar]}
             navigation
-            slidesPerView={1.2}
+            slidesPerView={1}
             loop={false}
             id="project-cards-section"
             className="mySwiper"

src/main.css

@@ -321,19 +321,21 @@ p {
 
 #projects-header-row {
   display: flex;
+  align-items: top;
 }
 
 #projects-nav-buttons {
+  margin-top: 1.5vw;
   display: flex;
   flex-direction: row;
-  align-items: center;
+  align-items: bottom;
-  justify-content: right;
+  justify-content: left;
   width: 100%;
-  margin-right: 5vw;
 }
 
 .slider-nav-button {
-  margin: 2vw;
+  margin-left: 2vw;
+  margin-right: 2vw;
   transition-duration: 500ms;
 }
 
@@ -873,8 +875,20 @@ p {
     border-radius: 10px;
   }
 
+  #projects-header-row h1 {
+    margin-top: .2vw;
+  }
+
   #projects-nav-buttons {
-    visibility: hidden;
+    margin-top: 0;
+  }
+
+  .slider-nav-button {
+    height: max-content;
+  }
+
+  .project-nav-icon {
+    font-size: clamp(2rem, 3rem, 4rem);
   }
 }