Add tech icons

src/Client/src/components/NavBar.tsx

@@ -59,7 +59,7 @@ export default function NavBar() {
             </button>
           </div>
           <div className="mt-6 flow-root">
-            <div className="-my-6 divide-y divide-gray-500/10">
+            <div className="-my-6 divide-y divide-gray-200/10">
               <div className="space-y-2 py-6">
                 <NavLink
                   to="/contact"

src/Client/src/components/TechIcons.tsx

@@ -0,0 +1,56 @@
+import { FaDatabase, FaDocker, FaReact } from "react-icons/fa6";
+import { SiBlazor, SiCsharp, SiMicrosoftazure } from "react-icons/si";
+import buildClassNames from "../helpers/cssClassFormatter";
+
+const iconSize = 34;
+const iconCss = "mx-auto";
+
+const techIcons = [
+  {
+    name: "C#/.NET",
+    icon: <SiCsharp size={iconSize} className={iconCss} />,
+  },
+  {
+    name: "Microsoft Azure",
+    icon: <SiMicrosoftazure size={iconSize} className={iconCss} />,
+  },
+  {
+    name: "Blazor",
+    icon: <SiBlazor size={iconSize} className={iconCss} />,
+  },
+  {
+    name: "React",
+    icon: <FaReact size={iconSize} className={iconCss} />,
+  },
+  {
+    name: "Databases",
+    icon: <FaDatabase size={iconSize} className={iconCss} />,
+  },
+  {
+    name: "Docker",
+    icon: <FaDocker size={iconSize} className={iconCss} />,
+  },
+];
+
+interface Props {
+  className?: string | null;
+}
+
+export default function TechIcons({ className }: Props) {
+  const defaultStyles = "mx-auto max-w-4xl";
+  const styles = buildClassNames(className ? className : "", defaultStyles);
+
+  return (
+    <div className={styles}>
+      <p className="text-xl text-center mb-10 font-bold">Tech</p>
+      <div className="flex flex-col md:flex-row md:justify-evenly space-y-10 md:space-y-0 text-center mx-auto mt-4">
+        {techIcons.map((techIcon, index) => (
+          <div key={index}>
+            {techIcon.icon}
+            <p className="mt-2 text-sm">{techIcon.name}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/Client/src/pages/HomePage.tsx

@@ -1,5 +1,6 @@
 import AnchorLink from "../components/AnchorLink";
 import Subtitle from "../components/Subtitle";
+import TechIcons from "../components/TechIcons";
 import Text from "../components/Text";
 import Title from "../components/Title";
 
@@ -21,6 +22,8 @@ export default function HomePage() {
         heading up the tech as CTO at a cool startup called{" "}
         <AnchorLink href="https://unhurdmusic.com">un:hurd music</AnchorLink>.
       </Text>
+
+      <TechIcons className="mt-20 mb-10" />
     </>
   );
 }