Carousel in the Works section

[tutecode]

If you want to add a Carousel in the works sections with differents categories of works:

• You need to add "category" in the "projects" > index.js.
• Install > npm install @itseasy21/react-elastic-carousel

Work.jsx:
`
import React from "react";
import { Tilt } from "react-tilt";
import Carousel from '@itseasy21/react-elastic-carousel';
import { motion } from "framer-motion";

import { styles } from "../styles";
import { github } from "../assets";
import { SectionWrapper } from "../hoc";
import { projects } from "../constants";
import { fadeIn, textVariant } from "../utils/motion";

const ProjectCard = ({
index,
name,
description,
tags,
image,
source_code_link,
}) => {
return (
<motion.div variants={fadeIn("up", "spring", index * 0.5, 0.75)}>
<Tilt
options={{
max: 45,
scale: 1,
speed: 450,
}}
className='bg-tertiary p-5 rounded-2xl sm:w-[360px] w-full'
>

      <div className='absolute inset-0 flex justify-end m-3 card-img_hover'>
        <div
          onClick={() => window.open(source_code_link, "_blank")}
          className='black-gradient w-10 h-10 rounded-full flex justify-center items-center cursor-pointer'
        >
          <img
            src={github}
            alt='source code'
            className='w-1/2 h-1/2 object-contain'
          />
        </div>
      </div>
    </div>

    <div className='mt-5'>
      <h3 className='text-white font-bold text-[24px]'>{name}</h3>
      <p className='mt-2 text-secondary text-[14px]'>{description}</p>
    </div>

    <div className='mt-4 flex flex-wrap gap-2'>
      {tags.map((tag) => (
        <p
          key={`${name}-${tag.name}`}
          className={`text-[14px] ${tag.color}`}
        >
          #{tag.name}
        </p>
      ))}
    </div>
  </Tilt>
</motion.div>

);
};

const Works = () => {
const aiProjects = projects.filter((project) => project.category === "AI");
const web3Projects = projects.filter((project) => project.category === "Web3");

const breakPoints = [
{ width: 1, itemsToShow: 1, itemsToScroll: 1 },
{ width: 720, itemsToShow: 2, itemsToScroll: 1 },
{ width: 1080, itemsToShow: 3, itemsToScroll: 1 },
];

return (
<>
<motion.div variants={textVariant()}>
<p className={${styles.sectionSubText} }>My work

<h2 className={${styles.sectionHeadText}}>Projects.
</motion.div>

  <div className="w-full flex">
    <motion.p
      variants={fadeIn("", "", 0.1, 1)}
      className="mt-3 text-secondary text-[17px] max-w-3xl leading-[30px]"
    >
      Following projects showcase my skills and experience through real-world examples of my work. Each project is briefly described with links to code repositories and live demos. It reflects my ability to solve complex problems, work with different technologies, and manage projects effectively.
    </motion.p>
  </div>

  {/* Subtitle for AI Projects */}
  <motion.div variants={textVariant()} className="mt-12">
    <h3 className={`${styles.sectionHeadText2}`}>AI projects:</h3>
  </motion.div>

  {/* Carousel for AI Projects */}
  <Carousel
    isRTL={false}
    pagination={true} // Show dots for paging
    transitionMs={8000} // Animation speed
    easing={"ease"} // transition easing pattern
    tiltEasing={"ease"} // transition easing pattern for the tilt
    enableTilt={false} // The “bump” animation when reaching the last item
    //itemsToShow={3}   // Number of visible items
    //itemsToScroll={1} // Number of items to scroll
    breakPoints={breakPoints} // Collection of objects with a width, itemsToShow and itemsToScroll
    initialActiveIndex={0} // The initial active index when the component mounts
    showArrows={false} // Show the arrow buttons
    focusOnSelect={false} // Go to item on click
    itemPadding={[0, 48]} // A padding for each element
    enableAutoPlay={true} // Enable or disable auto play
    autoPlaySpeed={8000} // Set auto play speed (ms)
    
  >
    {aiProjects.map((project, index) => (
      <div key={`ai-project-${index}`}>
        <ProjectCard index={index} {...project} />
      </div>
    ))}
  </Carousel>

  {/* Subtitle for Web3 Projects */}
  <motion.div variants={textVariant()} className="mt-12">
    <h3 className={`${styles.sectionHeadText2}`}>Web3 projects:</h3>
  </motion.div>

  {/* Carousel for Web3 Projects */}
  <Carousel
    isRTL={false}
    pagination={true} // Show dots for paging
    transitionMs={8000} // Animation speed
    easing={"ease"} // transition easing pattern
    tiltEasing={"ease"} // transition easing pattern for the tilt
    enableTilt={false} // The “bump” animation when reaching the last item
    //itemsToShow={3}   // Number of visible items
    //itemsToScroll={1} // Number of items to scroll
    breakPoints={breakPoints} // Collection of objects with a width, itemsToShow and itemsToScroll
    initialActiveIndex={0} // The initial active index when the component mounts
    showArrows={false} // Show the arrow buttons
    focusOnSelect={false} // Go to item on click
    itemPadding={[0, 48]} // A padding for each element
    enableAutoPlay={true} // Enable or disable auto play
    autoPlaySpeed={8000} // Set auto play speed (ms)
  >
    {web3Projects.map((project, index) => (
      <div key={`web3-project-${index}`}>
        <ProjectCard index={index} {...project} />
      </div>
    ))}
  </Carousel>
</>

);
};

export default SectionWrapper(Works, "");
`

[Sharif-Minhaz]

Can you provide your project's live link?

[tutecode]

Can you provide your project's live link?

https://matias-gomez-echevarrieta.vercel.app/

[Sharif-Minhaz]

Can you provide your project's live link?

https://matias-gomez-echevarrieta.vercel.app/

Your site is looking awesome man 🤩🤩

[uplz077]

Can you provide your project's live link?

https://matias-gomez-echevarrieta.vercel.app/

This is cool, man. I'm going to give your project a star.