From cf0f31153b72c95844a538061629cebe87363c7b Mon Sep 17 00:00:00 2001
From: misanthropic-codes <misanthropic.codes@outlook.com>
Date: Sat, 19 Oct 2024 10:48:21 +0530
Subject: [PATCH] added animation to cards

---
 src/Components/Card.js | 66 +++++++++++++++++++++++++++++++++++-------
 1 file changed, 55 insertions(+), 11 deletions(-)

diff --git a/src/Components/Card.js b/src/Components/Card.js
index 8d95b9b..e58ed0b 100644
--- a/src/Components/Card.js
+++ b/src/Components/Card.js
@@ -1,10 +1,28 @@
 import React from "react";
 import { Github, Linkedin, Twitter } from "lucide-react";
+import { motion } from "framer-motion";
 
 function Card({ data }) {
   return (
-    <div className="card">
-      <img src={data.avatar} alt={`${data.name}'s avatar`} className="avatar" />
+    <motion.div
+      className="card"
+      whileHover={{
+        scale: 1.05,
+        boxShadow: "0 0 15px rgba(255, 255, 255, 0.4)" // Soft glow on hover
+      }}
+      whileTap={{ scale: 0.95 }}
+      transition={{ type: "spring", stiffness: 400, damping: 17 }} // Spring animation for card
+    >
+      <motion.img
+        src={data.avatar}
+        alt={`${data.name}'s avatar`}
+        className="avatar"
+        whileHover={{
+          scale: 1.1,
+          boxShadow: "0 0 10px rgba(255, 255, 255, 0.6)" // Soft glow on avatar hover
+        }}
+        transition={{ type: "spring", stiffness: 400, damping: 17 }} // Spring animation for avatar
+      />
 
       <div className="right">
         <div className="one">
@@ -13,15 +31,36 @@ function Card({ data }) {
         </div>
 
         <div className="social-links">
-          <a href={data.social.GitHub} target="_blank" className="social-item">
+          <motion.a
+            href={data.social.GitHub}
+            target="_blank"
+            className="social-item"
+            whileHover={{ scale: 1.1 }}
+            whileTap={{ scale: 0.9 }}
+            transition={{ type: "spring", stiffness: 400, damping: 17 }} // Spring animation for social icons
+          >
             <Github size={20} color="white" />
-          </a>
-          <a href={data.social.LinkedIn} target="_blank" className="social-item">
+          </motion.a>
+          <motion.a
+            href={data.social.LinkedIn}
+            target="_blank"
+            className="social-item"
+            whileHover={{ scale: 1.1 }}
+            whileTap={{ scale: 0.9 }}
+            transition={{ type: "spring", stiffness: 400, damping: 17 }} // Spring animation for social icons
+          >
             <Linkedin size={20} color="white" />
-          </a>
-          <a href={data.social.Twitter} target="_blank" className="social-item">
+          </motion.a>
+          <motion.a
+            href={data.social.Twitter}
+            target="_blank"
+            className="social-item"
+            whileHover={{ scale: 1.1 }}
+            whileTap={{ scale: 0.9 }}
+            transition={{ type: "spring", stiffness: 400, damping: 17 }} // Spring animation for social icons
+          >
             <Twitter size={20} color="white" />
-          </a>
+          </motion.a>
         </div>
 
         <p className="bio">{data.bio}</p>
@@ -29,14 +68,19 @@ function Card({ data }) {
         <div className="two">
           <ul className="skills">
             {data.skills.map((skill, index) => (
-              <li key={index} className="skill-item">
+              <motion.li
+                key={index}
+                className="skill-item"
+                whileHover={{ scale: 1.1 }}
+                transition={{ type: "spring", stiffness: 400, damping: 17 }} // Spring animation for skills
+              >
                 {skill}
-              </li>
+              </motion.li>
             ))}
           </ul>
         </div>
       </div>
-    </div>
+    </motion.div>
   );
 }