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 ( <>

My work

Projects.

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.

{/* Subtitle for AI Projects */}

AI projects:

{/* Carousel for AI Projects */} {aiProjects.map((project, index) => (

))} {/* Subtitle for Web3 Projects */}

Web3 projects:

{/* Carousel for Web3 Projects */} {web3Projects.map((project, index) => (

))} ); }; 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.