You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<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, "");
`
The text was updated successfully, but these errors were encountered:
If you want to add a Carousel in the works sections with differents categories of works:
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'
>
);
};
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>
);
};
export default SectionWrapper(Works, "");
`
The text was updated successfully, but these errors were encountered: