src/components/LeftNav.jsx

@@ -1,20 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

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

src/pages/Experience.jsx

@@ -53,12 +53,10 @@ 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">
-        <h2 className=" text-subTPhone md:text-subT font-headline">
+        Experience<span className=" text-highlight">.</span>
-          Experience<span className=" text-highlight">.</span>
+      </h2>
-        </h2>
+      <div className="py-4">{experianceListUI}</div>
-        <div className="py-4">{experianceListUI}</div>
-      </div>
     </div>
   );
 }

src/pages/ExperienceDetail.jsx

@@ -4,8 +4,6 @@ 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();
@@ -50,13 +48,13 @@ function ExperianceDetail() {
       </button>
       <div className="flex flex-col">
         <div className="flex-1">
-          <h1 className=" text-subTPhone md:text-subT font-headline">
+          <h1 className=" text-subTPhone md:text-subT">
             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">
@@ -67,12 +65,6 @@ 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 className=" h-screen">
+      <div>
         <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>