From dc0dadb481a40ba5b8f1a1450ad94f9427e49ce8 Mon Sep 17 00:00:00 2001
From: TechWIthTy <37724661+TechWithTy@users.noreply.github.com>
Date: Mon, 17 Feb 2025 11:35:37 -0700
Subject: [PATCH] Updated List View

Only Show 3 experience cards max and have option to show more if available. Also scrolls back up to experience header.
---
 app/components/homepage/experience/index.jsx | 107 ++++++++++++-------
 1 file changed, 71 insertions(+), 36 deletions(-)

diff --git a/app/components/homepage/experience/index.jsx b/app/components/homepage/experience/index.jsx
index 398c2e67..b5908034 100644
--- a/app/components/homepage/experience/index.jsx
+++ b/app/components/homepage/experience/index.jsx
@@ -1,15 +1,37 @@
+"use client";
 // @flow strict
-
+import { useState, useRef } from "react";
 import { experiences } from "@/utils/data/experience";
 import Image from "next/image";
 import { BsPersonWorkspace } from "react-icons/bs";
-import experience from '../../../assets/lottie/code.json';
+import experience from "../../../assets/lottie/code.json";
 import AnimationLottie from "../../helper/animation-lottie";
 import GlowCard from "../../helper/glow-card";
 
 function Experience() {
+  const [showAll, setShowAll] = useState(false);
+  const experienceRef = useRef(null); // Reference to experience section
+
+  const toggleExperiences = () => {
+    setShowAll(!showAll);
+
+    // Wait for UI update, then scroll to experience section
+    setTimeout(() => {
+      experienceRef.current?.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+      });
+    }, 100); // Small delay ensures the UI updates before scrolling
+  };
+
+  const visibleExperiences = showAll ? experiences : experiences.slice(0, 3);
+
   return (
-    <div id="experience" className="relative z-50 border-t my-12 lg:my-24 border-[#25213b]">
+    <div
+      ref={experienceRef}
+      id="experience"
+      className="relative z-50 border-t my-12 lg:my-24 border-[#25213b]"
+    >
       <Image
         src="/section.svg"
         alt="Hero"
@@ -19,7 +41,7 @@ function Experience() {
       />
 
       <div className="flex justify-center my-5 lg:py-8">
-        <div className="flex  items-center">
+        <div className="flex items-center">
           <span className="w-24 h-[2px] bg-[#1a1443]"></span>
           <span className="bg-[#1a1443] w-fit text-white p-2 px-5 text-xl rounded-md">
             Experiences
@@ -38,45 +60,58 @@ function Experience() {
 
           <div>
             <div className="flex flex-col gap-6">
-              {
-                experiences.map(experience => (
-                  <GlowCard key={experience.id} identifier={`experience-${experience.id}`}>
-                    <div className="p-3 relative">
-                      <Image
-                        src="/blur-23.svg"
-                        alt="Hero"
-                        width={1080}
-                        height={200}
-                        className="absolute bottom-0 opacity-80"
-                      />
-                      <div className="flex justify-center">
-                        <p className="text-xs sm:text-sm text-[#16f2b3]">
-                          {experience.duration}
-                        </p>
+              {visibleExperiences.map((experience) => (
+                <GlowCard
+                  key={experience.id}
+                  identifier={`experience-${experience.id}`}
+                >
+                  <div className="p-3 relative">
+                    <Image
+                      src="/blur-23.svg"
+                      alt="Hero"
+                      width={1080}
+                      height={200}
+                      className="absolute bottom-0 opacity-80"
+                    />
+                    <div className="flex justify-center">
+                      <p className="text-xs sm:text-sm text-[#16f2b3]">
+                        {experience.duration}
+                      </p>
+                    </div>
+                    <div className="flex items-center gap-x-8 px-3 py-5">
+                      <div className="text-violet-500 transition-all duration-300 hover:scale-125">
+                        <BsPersonWorkspace size={36} />
                       </div>
-                      <div className="flex items-center gap-x-8 px-3 py-5">
-                        <div className="text-violet-500  transition-all duration-300 hover:scale-125">
-                          <BsPersonWorkspace size={36} />
-                        </div>
-                        <div>
-                          <p className="text-base sm:text-xl mb-2 font-medium uppercase">
-                            {experience.title}
-                          </p>
-                          <p className="text-sm sm:text-base">
-                            {experience.company}
-                          </p>
-                        </div>
+                      <div>
+                        <p className="text-base sm:text-xl mb-2 font-medium uppercase">
+                          {experience.title}
+                        </p>
+                        <p className="text-sm sm:text-base">
+                          {experience.company}
+                        </p>
                       </div>
                     </div>
-                  </GlowCard>
-                ))
-              }
+                  </div>
+                </GlowCard>
+              ))}
             </div>
+
+            {/* Show More / Show Less Button */}
+            {experiences.length > 3 && (
+              <div className="flex justify-center mt-6">
+                <button
+                  onClick={toggleExperiences}
+                  className="px-6 py-2 text-white bg-violet-500 rounded-md hover:bg-violet-600 transition-all duration-300"
+                >
+                  {showAll ? "Show Less" : "Show More"}
+                </button>
+              </div>
+            )}
           </div>
         </div>
       </div>
     </div>
   );
-};
+}
 
-export default Experience;
\ No newline at end of file
+export default Experience;