Skip to content

Updated List View #57

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Updated List View #57

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 71 additions & 36 deletions app/components/homepage/experience/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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
Expand All @@ -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;
export default Experience;