update

src/components/LeftNav.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { GoChevronLeft } from "react-icons/go";
+
+const LeftNav = React.memo(({ disabled, onClick }) => {
+  return (
+    <button
+      type="button"
+      className="image-gallery-icon image-gallery-left-nav text-2xl md:text-4xl text-highlight"
+      disabled={disabled}
+      onClick={onClick}
+      aria-label="Previous Slide"
+    >
+      <GoChevronLeft />
+    </button>
+  );
+});
+
+LeftNav.displayName = "LeftNav";
+
+export default LeftNav;

src/components/PlayPause.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+// import { bool, func } from "prop-types";
+// import SVG from "src/components/SVG";
+
+const PlayPause = React.memo(({ isPlaying, onClick }) => {
+  return (
+    <button
+      type="button"
+      className="image-gallery-icon image-gallery-play-button"
+      onClick={onClick}
+      aria-label="Play or Pause Slideshow"
+    >
+      <SVG strokeWidth={2} icon={isPlaying ? "pause" : "play"} />
+    </button>
+  );
+});
+
+PlayPause.displayName = "PlayPause";
+
+// PlayPause.propTypes = {
+//   isPlaying: bool.isRequired,
+//   onClick: func.isRequired,
+// };
+
+export default PlayPause;

src/components/RightNav.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { GoChevronRight } from "react-icons/go";
+const RightNav = React.memo(({ disabled, onClick }) => {
+  return (
+    <button
+      type="button"
+      className="image-gallery-icon image-gallery-right-nav text-2xl md:text-4xl text-highlight"
+      disabled={disabled}
+      onClick={onClick}
+      aria-label="Next Slide"
+    >
+      <GoChevronRight />
+    </button>
+  );
+});
+
+RightNav.displayName = "RightNav";
+
+export default RightNav;

src/pages/Experience.jsx

@@ -53,11 +53,13 @@ function Experiance() {
   return (
     <div className="relative">
       <div id="experience" className=" absolute -top-16 "></div>
+      <div className=" h-screen">
         <h2 className=" text-subTPhone md:text-subT font-headline">
           Experience<span className=" text-highlight">.</span>
         </h2>
         <div className="py-4">{experianceListUI}</div>
       </div>
+    </div>
   );
 }
 

src/pages/ExperienceDetail.jsx

@@ -4,6 +4,8 @@ import { projectsAtom } from "../store";
 import ImageGallery from "react-image-gallery";
 import Tags from "../components/Tags";
 import { IoChevronBackOutline as BackButton } from "react-icons/io5";
+import LeftNav from "../components/LeftNav";
+import RightNav from "../components/RightNav";
 
 function ExperianceDetail() {
   const { id } = useParams();
@@ -48,13 +50,13 @@ function ExperianceDetail() {
       </button>
       <div className="flex flex-col">
         <div className="flex-1">
-          <h1 className=" text-subTPhone md:text-subT">
+          <h1 className=" text-subTPhone md:text-subT font-headline">
             Project: {myProject.title}
           </h1>
         </div>
         <div className="flex-1 mt-2 mb-6">
           <Tags listOfTags={myProject.tags} />
-        </div>{" "}
+        </div>
       </div>
       <div className="flex flex-col md:flex-row gap-4">
         <div className="flex-1">
@@ -65,6 +67,12 @@ function ExperianceDetail() {
             slideDuration={1000}
             slideInterval={4000}
             items={projectImg}
+            renderLeftNav={(onClick, disabled) => (
+              <LeftNav onClick={onClick} disabled={disabled} />
+            )}
+            renderRightNav={(onClick, disabled) => (
+              <RightNav onClick={onClick} disabled={disabled} />
+            )}
           />
         </div>
         <div className="flex-1 text-base">

src/pages/Start.jsx

@@ -3,7 +3,7 @@ function Start() {
     <div className="relative">
       <div id="start" className="absolute  -top-16 "></div>
 
-      <div>
+      <div className=" h-screen">
         <h1 className="text-titlePhone md:text-title md:leading-tight mb-2 font-headline">
           Hello, my name is Maria<span className=" text-highlight">.</span>
         </h1>