added few animation for better interaction

package.json

@@ -17,15 +17,17 @@
         "clsx": "^1.2.1",
         "eslint": "8.44.0",
         "eslint-config-next": "13.4.9",
+        "framer-motion": "^11.0.8",
         "lucide-react": "^0.259.0",
-        "next": "13.4.9",
+        "next": "^13.4.9",
         "postcss": "8.4.25",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-hook-form": "^7.45.1",
         "react-hot-toast": "^2.4.1",
+        "react-spring": "^9.7.3",
         "resend": "^0.17.1",
-        "tailwind-merge": "^1.13.2",
+        "tailwind-merge": "^1.14.0",
         "tailwindcss": "3.3.2",
         "typescript": "5.1.6",
         "zod": "^3.21.4"

src/app/globals.css

@@ -90,3 +90,63 @@ body {
         0.5
     ); /* Background color of the thumb when hovered */
 }
+
+/* Scale Of Single Tech Item In What I Know */
+#singleTech
+{
+    transition: 0.2s ease-in-out;/* Transition For Smooth Effect*/
+}
+/* On Hover Tech Stack Item (i.e HTML, CSS, Tailwind)  Will Be Scale Up To 1.2  */
+#singleTech:hover
+{
+    scale: 1.2;
+}
+
+/* Effect On Instagram Link On Cover */
+#instagramCoverLink
+{
+    border: none;
+    background-color: black;
+    color: rgb(255, 255, 255);
+    overflow: hidden;
+    position: relative;
+    text-decoration: none;
+    transition: .2s transform ease-in-out;
+    will-change: transform;
+    z-index: 0;
+}
+#instagramCoverLink::after
+{
+    position: absolute;
+    top: 0;
+    transform: translate(-100%, 0) rotate(10deg);
+    transform-origin: top left;
+    transition: .2s transform ease-out;
+    will-change: transform;
+    z-index: -1;
+    left: 0;
+    background-color: rgb(255, 255, 255);
+    content: '';
+    display: block;
+    height: 100%;
+    width: 100%
+}
+#instagramCoverLink:hover::after{
+    transform: translate(0, 0);
+}
+#instagramCoverLink:hover
+{
+    border: none;
+    color: rgb(0, 0, 0);
+    transform: scale(1.05);
+    will-change: transform;
+}
+
+/*All Kind Card Will Scale To 1.05 On Hover*/
+#card{
+    transition: 0.3s ease-in-out;
+}
+#card:hover{
+    scale: 1.05;
+}
+

src/app/page.tsx

@@ -22,7 +22,6 @@ export default function Home() {
         {/* <Hero /> */}
         <ProjectCardSection title="Projects" data={projectCard} />
         <MoreProjects title="More projects" data={moreProjects} />
-
         <CardSection title="Web3" data={web3Cards} />
         <CardSection title="Others" data={otherCards} />
       </div>

src/components/Card/TechCard.tsx

@@ -17,7 +17,7 @@ const TechCard: FC<TechCardProps> = ({ title, classaName, tech }) => {
       </div>
       <div className="flex flex-wrap gap-2">
         {tech.map((item, i) => (
-          <div
+          <div id='singleTech' 
             key={i}
             className={cn(
               'rounded-md bg-body text-xs text-primary p-2',
@@ -39,7 +39,7 @@ const TechCard: FC<TechCardProps> = ({ title, classaName, tech }) => {
               item === 'AWS' && 'border border-yellow-500/60'
             )}
           >
-            {item}
+            <p className='singleTech'>{item}</p>
           </div>
         ))}
       </div>