fix: skill icon size

accodes21 · Aug 24, 2024 · ce6c737 · ce6c737
1 parent c08c39e
commit ce6c737
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 35 deletions.
diff --git a/src/components/SkillBadge.jsx b/src/components/SkillBadge.jsx
@@ -1,31 +1,34 @@
-import React from 'react'
-import { motion, AnimatePresence } from 'framer-motion'
-import { slideAnimation } from '@/app/framer'
-import skills from '@/data/skills'
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { slideAnimation } from "@/app/framer";
+import skills from "@/data/skills";
 
 const SkillBadge = () => {
   return (
     <AnimatePresence>
-      <motion.div {...slideAnimation('up')} className='skill-container flex pl-20 pr-20 pb-20 justify-center'>
-        <h2 className='heading2 text-[#f1cf29] font-bold text-3xl'>Tech Stack  |</h2>
-        <ul className='skill-list flex'>
-          {
-            skills?.map((skill, index) => (
-              <li 
-                key={index}
-                className={`ml-4 transition-colors`}
-                style={{ '--tw-text-hover': skill.hoverColor }}
-              >
-                <span className="hover:text-[var(--tw-text-hover)]">
-                  {skill.icon}
-                </span>
-              </li>
-            ))
-          }
+      <motion.div
+        {...slideAnimation("up")}
+        className="skill-container flex pl-20 pr-20 pb-20 justify-center"
+      >
+        <h2 className="heading2 text-[#f1cf29] font-bold text-3xl">
+          Tech Stack |
+        </h2>
+        <ul className="skill-list flex items-center">
+          {skills?.map((skill, index) => (
+            <li
+              key={index}
+              className={`ml-4 transition-colors`}
+              style={{ "--tw-text-hover": skill.hoverColor }}
+            >
+              <span className="hover:text-[var(--tw-text-hover)]">
+                {skill.icon}
+              </span>
+            </li>
+          ))}
         </ul>
       </motion.div>
     </AnimatePresence>
-  )
-}
+  );
+};
 
-export default SkillBadge
+export default SkillBadge;
diff --git a/src/data/skills.js b/src/data/skills.js
@@ -14,51 +14,51 @@ import {
 const skills = [
   {
     hoverColor: "#f16529",
-    icon: <ImHtmlFive className="text-4xl" />,
+    icon: <ImHtmlFive className="text-3xl" />,
   },
   {
     hoverColor: "#2994f1",
-    icon: <SiCss3 className="text-4xl" />,
+    icon: <SiCss3 className="text-3xl" />,
   },
   {
     hoverColor: "#f1cf29",
-    icon: <SiJavascript className="text-4xl" />,
+    icon: <SiJavascript className="text-3xl" />,
   },
   {
     hoverColor: "#29c6f1",
-    icon: <FaReact className="text-4xl" />,
+    icon: <FaReact className="text-3xl" />,
   },
   {
     hoverColor: "#29f1e0",
-    icon: <SiTailwindcss className="text-4xl" />,
+    icon: <SiTailwindcss className="text-3xl" />,
   },
   {
     hoverColor: "#dbdad6",
-    icon: <SiNextdotjs className="text-4xl" />,
+    icon: <SiNextdotjs className="text-3xl" />,
   },
   {
     hoverColor: "#16a394",
-    icon: <SiPrisma className="text-4xl" />,
+    icon: <SiPrisma className="text-3xl" />,
   },
   {
     hoverColor: "#ffa611",
-    icon: <SiFirebase className="text-4xl" />,
+    icon: <SiFirebase className="text-3xl" />,
   },
   {
     hoverColor: "#30f129",
-    icon: <FaNodeJs className="text-4xl" />,
+    icon: <FaNodeJs className="text-3xl" />,
   },
   {
     hoverColor: "#f18329",
-    icon: <FaJava className="text-4xl" />,
+    icon: <FaJava className="text-3xl" />,
   },
   {
     hoverColor: "#f1cf29",
-    icon: <SiPython className="text-4xl" />,
+    icon: <SiPython className="text-3xl" />,
   },
   {
     hoverColor: "#A020F0",
-    icon: <SiCplusplus className="text-4xl" />,
+    icon: <SiCplusplus className="text-3xl" />,
   },
 ];