Add softskills components

src/components/SkillsPage/Skills.js

@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from "react";
 import TitleStyle from "../UI/TitleStyle";
 import SkillCard from "./SkillCard";
-import { fetchSkillsRecords } from "../../utils/firebase";
 import SlideAnimate from "../UI/SlideAnimate";
+import SoftSkills from "./SoftSkills";
+import { fetchSkillsRecords } from "../../utils/firebase";
 
 const Skills = () => {
   const [skillData, setSkillData] = useState([]);
@@ -18,8 +19,9 @@ const Skills = () => {
 
   return (
     <SlideAnimate>
+      <SoftSkills />
       <div>
-        <TitleStyle title={"Skills"} />
+        <TitleStyle title={"Technical Skills"} />
         <div className="mt-2 m-auto flex flex-col justify-center items-center text-center md:mt-8 md:grid md:grid-cols-2 md:place-items-center">
           {skillData.map((data) => {
             return (

src/components/SkillsPage/SoftSkillCard.js

@@ -0,0 +1,21 @@
+import { softskills } from "../../data/softskills";
+
+const SoftSkillCard = () => {
+  return (
+    <div className="my-4 md:grid md:grid-cols-3 md:gap-3">
+      {softskills.map((skill) => {
+        return (
+          <div
+            key={skill.id}
+            className="py-2 flex justify-center items-center gap-3"
+          >
+            <div className={skill.css}>{skill.pic}</div>
+            <div>{skill.content}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default SoftSkillCard;

src/components/SkillsPage/SoftSkills.js

@@ -0,0 +1,14 @@
+import React from "react";
+import TitleStyle from "../UI/TitleStyle";
+import SoftSkillCard from "./SoftSkillCard";
+
+const SoftSkills = () => {
+  return (
+    <div>
+      <TitleStyle title="Soft Skills" />
+      <SoftSkillCard />
+    </div>
+  );
+};
+
+export default SoftSkills;

src/data/softskills.js

@@ -0,0 +1,57 @@
+import { GoOrganization } from "react-icons/go";
+import { HiQuestionMarkCircle } from "react-icons/hi2";
+import { FaLightbulb } from "react-icons/fa";
+import { TbListDetails } from "react-icons/tb";
+import { FaClock } from "react-icons/fa";
+import { SiMinds } from "react-icons/si";
+
+export const softskills = [
+  {
+    id: "comm",
+    content: "Communication",
+    pic: <GoOrganization />,
+    css: "text-lg text-green-300",
+  },
+  {
+    id: "problem_solving",
+    content: "Problem-Solving",
+    pic: <HiQuestionMarkCircle />,
+    css: "text-xl text-purple-300",
+  },
+  {
+    id: "creative",
+    content: "Creativity",
+    pic: <FaLightbulb />,
+    css: "text-lg text-amber-300",
+  },
+  {
+    id: "self_mot",
+    content: "Self Motivation",
+    pic: (
+      <img
+        alt="self_mot"
+        src="./self_motivation.png"
+        className="w-9 h-8 m-0 p-0"
+      />
+    ),
+    css: "text-2xl text-blue-200",
+  },
+  {
+    id: "attention",
+    content: "Attention to Detail",
+    pic: <TbListDetails />,
+    css: "text-lg text-blue-200",
+  },
+  {
+    id: "time",
+    content: "Time Management",
+    pic: <FaClock />,
+    css: "text-lg text-red-200",
+  },
+  {
+    id: "mind",
+    content: "Open Minded",
+    pic: <SiMinds />,
+    css: "text-2xl text-yellow-200",
+  },
+];