Updated layout and background

src/components/Skill.tsx

@@ -4,16 +4,27 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 export default function Skill({
   skill,
   icon,
-  mt,
+  classInsert,
 }: {
   skill: string;
   icon: IconProp;
-  mt?: string;
+  classInsert?: string;
 }) {
   return (
-    <div className="skill">
-      <FontAwesomeIcon icon={icon} width={40} className={`text-red ${mt}`} />
-      <span className="tooltip absolute bg-transparent-ish">{skill}</span>
+    <div className="relative flex items-center justify-center group">
+      <span
+        className="absolute bottom-full mb-2 left-1/2 -translate-x-1/2
+                   bg-black text-white text-sm px-2 py-1 rounded
+                   opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap"
+      >
+        Skilled in {" "} {skill}
+      </span>
+
+      <FontAwesomeIcon
+        icon={icon}
+        width={40}
+        className={`text-red ${classInsert} cursor-pointer`}
+      />
     </div>
   );
 }