updated portfolio

src/components/Navbar.tsx

@@ -1,20 +1,12 @@
 const Navbar = () => {
   return (
-    <nav className="p-4 flex items-center justify-center">
-      <div className="max-w-7xl mx-auto flex items-center justify-between">
-        <div
-          className="space-x-4 text-white block font-bold"
-        >
+    <nav className="py-4 flex">
+      <div className="mx-auto flex">
+        <div className="space-x-4 text-white block font-bold">
           <a href="/" className="hover:text-red transition-colors duration-300">
             Home
           </a>
-          <a href="/about" className="hover:text-red transition-colors duration-300">
-            About
-          </a>
-          <a href="/contact" className="hover:text-red transition-colors duration-300">
-            Contact
-          </a>
-          <a href="/services" className="hover:text-red transition-colors duration-300">
+          <a href="/pricing" className="hover:text-red transition-colors duration-300">
             Pricing
           </a>
           <a href="/blog" className="hover:text-red transition-colors duration-300">

src/components/PinnedRepos.tsx

@@ -18,7 +18,8 @@ export function Repo({name, description: desc, language: lang, stars, forks, hre
         size-full
         overflow-hidden
         rounded-xl
-        h-full border
+        h-full
+        border
         border-red
         hover:shadow-md
         transition-shadow

src/components/Skill.tsx

@@ -0,0 +1,13 @@
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+export default function Skill({skill, icon, mt}: {skill: string, icon: IconProp, mt?: string}) {
+  return (
+    <div className="skill">
+      <FontAwesomeIcon icon={icon} width={40} className={`text-red ${mt}`} />
+      <span className="tooltip absolute bg-transparent-ish">
+        {skill}
+      </span>
+    </div>
+  );
+}