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/About.jsx

@@ -7,31 +7,33 @@ function About() {
   console.log(skills);
   return (
     <div className="relative">
-      <div id="about" className=" absolute -top-16 "></div>
-      <h2 className="mb-2 text-subTPhone md:text-subT font-headline">
-        About<span className=" text-highlight">.</span>
-      </h2>
-      <div className="flex flex-col md:flex-row">
-        <div className="basis-2/3 text-base">
-          <p>
-            As a prospective Frontend Developer, I seek a challenging career
-            opportunity in the IT industry, where I can collaborate with a
-            dynamic team, continually learn, and foster innovation. My
-            dedication lies in transforming design concepts into user-friendly
-            experiences and achieving organizational goals through creativity
-            and teamwork. I aspire to engage in work that allows the utilization
-            of technical and creative skills to contribute effectively to the
-            growth of an organization. If you think you've got an opening that I
-            might like, let's connect 🔗
-          </p>
-        </div>
-        <div className=" basis-1/3">
-          <h4 className="mb-2 text-subTMini">Languages:</h4>
-          <Tags listOfTags={skills.languages} />
-          <h4 className="my-2 text-subTMini">Frameworks:</h4>{" "}
-          <Tags listOfTags={skills.frameworks} />
-          <h4 className="my-2 text-subTMini">Tools I use:</h4>{" "}
-          <Tags listOfTags={skills.tools} />
+      <div id="about" className=" absolute -top-16   "></div>
+      <div className=" h-screen">
+        <h2 className="mb-2 text-subTPhone md:text-subT font-headline">
+          About<span className=" text-highlight">.</span>
+        </h2>
+        <div className="flex flex-col md:flex-row">
+          <div className="basis-2/3 text-base">
+            <p>
+              As a prospective Frontend Developer, I seek a challenging career
+              opportunity in the IT industry, where I can collaborate with a
+              dynamic team, continually learn, and foster innovation. My
+              dedication lies in transforming design concepts into user-friendly
+              experiences and achieving organizational goals through creativity
+              and teamwork. I aspire to engage in work that allows the
+              utilization of technical and creative skills to contribute
+              effectively to the growth of an organization. If you think you've
+              got an opening that I might like, let's connect 🔗
+            </p>
+          </div>
+          <div className=" basis-1/3">
+            <h4 className="mb-2 text-subTMini">Languages:</h4>
+            <Tags listOfTags={skills.languages} />
+            <h4 className="my-2 text-subTMini">Frameworks:</h4>{" "}
+            <Tags listOfTags={skills.frameworks} />
+            <h4 className="my-2 text-subTMini">Tools I use:</h4>{" "}
+            <Tags listOfTags={skills.tools} />
+          </div>
         </div>
       </div>
     </div>

src/pages/Experience.jsx

@@ -53,10 +53,12 @@ function Experiance() {
   return (
     <div className="relative">
       <div id="experience" className=" absolute -top-16 "></div>
-      <h2 className=" text-subTPhone md:text-subT font-headline">
-        Experience<span className=" text-highlight">.</span>
-      </h2>
-      <div className="py-4">{experianceListUI}</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>