From ea8242ff02e68248b735602bca6409699f7d15bf Mon Sep 17 00:00:00 2001 From: ANIRUDDHA ADAK Date: Sat, 9 Nov 2024 16:10:33 +0530 Subject: [PATCH] Update Projects.tsx Enhancements: Shake Range Increased: The shake range has been increased to x: ["0%", "-15%", "15%", "0%"] for a more pronounced effect. Smooth Easing with easeInOut: The transition now uses easeInOut, making the shake start and end gently. Scale Up on Hover: Added a subtle scale: 1.05 to the card during hover, making the effect a bit more dynamic and visually engaging. Longer Shake Duration: The duration of the shake has been increased to 0.6 seconds for a more graceful animation. Soft Rounded Corners: The design of the cards is kept smooth and polished with rounded corners and a box-shadow effect to enhance visual appeal. --- src/components/Projects.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx index b4a4d1b..1fb9248 100644 --- a/src/components/Projects.tsx +++ b/src/components/Projects.tsx @@ -51,8 +51,15 @@ const Projects: React.FC = () => { className="bg-gray-100 rounded-lg overflow-hidden shadow-lg transition-transform duration-300 hover:scale-105" onClick={() => setSelectedProject(project.id)} whileHover={{ - x: ["0%", "-10%", "10%", "0%"], // Shaking effect on X axis - transition: { type: "spring", stiffness: 100, damping: 10 } + x: ["0%", "-15%", "15%", "0%"], // Increased shake range + scale: 1.05, // Slight scale up for emphasis + transition: { + type: "spring", + stiffness: 100, + damping: 20, + duration: 0.6, // Smoother and longer shake + ease: "easeInOut" // Smooth easing for better effect + } }} whileTap={{ scale: 0.95 }} >