feat: create a dynamic Skill Bar component to showcase each skill with icon and customisable progress bar

Author: thekiranmahajan

src/components/SkillBar.jsx

@@ -0,0 +1,27 @@
+import { motion } from "motion/react";
+
+const SkillBar = ({ logoName, icon: Icon, percentage = 100 }) => {
+  return (
+    <div className="mt-2 flex w-64 flex-col gap-2 text-dark-blue dark:text-custom-yellow">
+      <div className="flex items-center justify-between">
+        <Icon className="text text-4xl" />
+        <span className="select-none font-semibold">{logoName}</span>
+      </div>
+      <div className="h-1 w-full overflow-hidden rounded-full bg-white">
+        <motion.div
+          className="h-1 rounded-full bg-light-blue dark:bg-custom-violet"
+          initial={{ width: 0 }}
+          animate={{ width: `${percentage}%` }}
+          transition={{
+            type: "spring",
+            stiffness: 120,
+            damping: 10,
+            duration: 1,
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default SkillBar;

src/components/index.js

@@ -14,3 +14,4 @@ export { default as ScrollDown } from "./ScrollDown";
 export { default as Rocket } from "./Rocket";
 export { default as SocialCard } from "./SocialCard";
 export { default as TerminalContactForm } from "./TerminalContactForm";
+export { default as SkillBar } from "./SkillBar";

src/sections/Skills.jsx

@@ -3,6 +3,7 @@ import {
   LogoItemsFlipper,
   SectionHeading,
   SectionSubHeading,
+  SkillBar,
 } from "../components";
 import { LOGO_ITEM_STYLES } from "../utils/constants";
 
@@ -26,6 +27,32 @@ const Skills = () => {
           ))}
         />
       </div>
+      <div>
+        <SkillBar
+          icon={LOGO_ITEM_STYLES[4].icon}
+          logoName={LOGO_ITEM_STYLES[4].logoName}
+        />
+        <SkillBar
+         percentage={40}
+          icon={LOGO_ITEM_STYLES[2].icon}
+          logoName={LOGO_ITEM_STYLES[2].logoName}
+        />
+        <SkillBar
+          icon={LOGO_ITEM_STYLES[1].icon}
+          logoName={LOGO_ITEM_STYLES[1].logoName}
+          percentage={10}
+        />
+        <SkillBar
+          icon={LOGO_ITEM_STYLES[5].icon}
+          logoName={LOGO_ITEM_STYLES[5].logoName}
+          percentage={80}
+        />
+        <SkillBar
+          icon={LOGO_ITEM_STYLES[8].icon}
+          logoName={LOGO_ITEM_STYLES[8].logoName}
+          percentage={70}
+        />
+      </div>
     </section>
   );
 };