Carousel in the Works section
tutecode opened this issue · 4 comments
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, "");
`
Can you provide your project's live link?
Can you provide your project's live link?
Can you provide your project's live link?
Your site is looking awesome man 🤩🤩
Can you provide your project's live link?
This is cool, man. I'm going to give your project a star.