added-skills-icon

code-walker-23 · Oct 24, 2024 · 9989b15 · 9989b15
1 parent 923bd25
commit 9989b15
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 24 deletions.
diff --git a/.hintrc b/.hintrc
@@ -4,6 +4,12 @@
   ],
   "hints": {
     "button-type": "off",
-    "axe/forms": "off"
+    "axe/forms": "off",
+    "axe/structure": [
+      "default",
+      {
+        "list": "off"
+      }
+    ]
   }
 }
diff --git a/components/Skills.tsx b/components/Skills.tsx
@@ -3,6 +3,7 @@ import { useSectionInView } from "@/hooks/useSectionInView";
 import SectionHeading from "./SectionHeading";
 import { skillsData } from "@/lib/data";
 import { motion } from "framer-motion";
+import React from "react";
 
 const fadeInAnimationsVariants = {
   initial: {
@@ -33,16 +34,15 @@ const Skills = () => {
         {skillsData.map((skill, index) => (
           <motion.li
             key={index}
-            className="bg-white border border-black/[0.1] rounded-xl px-5 py-3 font-semibold"
+            className="bg-white border border-black/[0.1] rounded-xl px-5 py-3 font-semibold flex items-center"
             variants={fadeInAnimationsVariants}
             initial="initial"
             whileInView="animate"
-            viewport={{
-              once: true,
-            }}
+            viewport={{ once: true }}
             custom={index}
           >
-            {skill}
+            {React.createElement(skill.icon, { className: "mr-2 text-2xl" })}
+            {skill.name}
           </motion.li>
         ))}
       </ul>

diff --git a/lib/data.ts b/lib/data.ts
@@ -4,7 +4,29 @@ import jobPortal from "../public/job-portal.png";
 import sortingVisualizer from "../public/sorting-visualizer.png";
 import React from "react";
 import { CgWorkAlt } from "react-icons/cg";
-import { FaGraduationCap, FaSchool } from "react-icons/fa";
+import {
+  FaCss3Alt,
+  FaGitAlt,
+  FaGraduationCap,
+  FaHtml5,
+  FaJsSquare,
+  FaNodeJs,
+  FaReact,
+  FaSchool,
+} from "react-icons/fa";
+import {
+  SiApollographql,
+  SiExpress,
+  SiFramer,
+  SiGraphql,
+  SiMongodb,
+  SiNextdotjs,
+  SiPostgresql,
+  SiPrisma,
+  SiRedux,
+  SiTailwindcss,
+  SiTypescript,
+} from "react-icons/si";
 
 export const links = [
   {
@@ -122,23 +144,23 @@ export const projectsData = [
 ] as const;
 
 export const skillsData = [
-  "HTML",
-  "CSS",
-  "JavaScript",
-  "TypeScript",
-  "React",
-  "Next.js",
-  "Node.js",
-  "Git",
-  "Tailwind",
-  "Prisma",
-  "MongoDB",
-  "Redux",
-  "GraphQL",
-  "Apollo",
-  "Express",
-  "PostgreSQL",
-  "Framer Motion",
+  { name: "HTML", icon: FaHtml5 },
+  { name: "CSS", icon: FaCss3Alt },
+  { name: "JavaScript", icon: FaJsSquare },
+  { name: "TypeScript", icon: SiTypescript },
+  { name: "React", icon: FaReact },
+  { name: "Next.js", icon: SiNextdotjs },
+  { name: "Node.js", icon: FaNodeJs },
+  { name: "Git", icon: FaGitAlt },
+  { name: "Tailwind", icon: SiTailwindcss },
+  { name: "Prisma", icon: SiPrisma },
+  { name: "MongoDB", icon: SiMongodb },
+  { name: "Redux", icon: SiRedux },
+  { name: "GraphQL", icon: SiGraphql },
+  { name: "Apollo", icon: SiApollographql },
+  { name: "Express", icon: SiExpress },
+  { name: "PostgreSQL", icon: SiPostgresql },
+  { name: "Framer Motion", icon: SiFramer },
 ] as const;
 
 export const educationData = [