chore: add socials everywhererequire

Signed-off-by: Ameya Shenoy <shenoy.ameya@gmail.com>

frontend/src/app/blog/page.tsx

@@ -1,5 +1,6 @@
 import { promises as fs } from "fs";
 import Link from "next/link";
+import Socials from "@/components/Socials";
 
 async function getFolders(dirPath: string) {
   try {
@@ -97,6 +98,10 @@ export default async function BlogList() {
           ))}
         </div>
       </div>
+
+      <div className="pt-20 text-2xl md:text-3xl">
+        <Socials />
+      </div>
     </main>
   );
 }

frontend/src/app/page.tsx

@@ -1,5 +1,6 @@
 import { NameComponent } from "@/components/NameComponent";
 import { World } from "@/components/PhysicsSimulation";
+import Socials from "@/components/Socials";
 
 export default function Home() {
   return (
@@ -8,6 +9,10 @@ export default function Home() {
         <World />
 
         <NameComponent />
+
+        <div className="pt-20 text-2xl md:text-3xl">
+          <Socials />
+        </div>
       </>
     </main>
   );

frontend/src/app/portfolio/page.tsx

@@ -1,12 +1,8 @@
 import { MapPin, Code, Briefcase, Download } from "lucide-react";
-import { headers } from "next/headers";
 import { Icon } from "@iconify/react";
 import Link from "next/link";
-import {
+
-  Tooltip,
+import Socials from "@/components/Socials";
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 
 export default async function Portfolio() {
   // const headersList = await headers();
@@ -228,24 +224,7 @@ export default async function Portfolio() {
               ai driven solutions while also maintaining the role of an
               individual contributor.
             </div>
-            <div className="flex text-red-500 gap-5">
+            <Socials />
-              {socials.map((social, _) => (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Link
-                      href={social.link}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      <Icon icon={social.icon} className="inline-block" />
-                    </Link>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p className="text-xl">{social.hoverText}</p>
-                  </TooltipContent>
-                </Tooltip>
-              ))}
-            </div>
           </div>
         </div>
         <div className="md:w-[40vw] w-[95vw] md:min-w-3xl">

frontend/src/components/Socials.tsx

@@ -0,0 +1,53 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+import { Icon } from "@iconify/react";
+import Link from "next/link";
+
+export default async function Portfolio() {
+  const socials = [
+    {
+      icon: "pajamas:mail",
+      link: "mailto:shenoy.ameya@gmail.com",
+      hoverText: "Shoot me an email!",
+    },
+
+    {
+      icon: "pajamas:linkedin",
+      link: "https://linkedin.com/in/codingcoffee",
+      hoverText: "Let's connect on LinkedIn",
+    },
+
+    {
+      icon: "pajamas:github",
+      link: "https://github.com/codingcoffee",
+      hoverText: "Checkout my opensource repos at GitHub",
+    },
+
+    {
+      icon: "pajamas:twitter",
+      link: "https://x.com/codingcoffeeX",
+      hoverText: "Follow me on X!",
+    },
+  ];
+
+  return (
+    <div className="flex text-red-500 gap-5">
+      {socials.map((social, _) => (
+        <Tooltip key={social.link}>
+          <TooltipTrigger asChild>
+            <Link href={social.link} target="_blank" rel="noopener noreferrer">
+              <Icon icon={social.icon} className="inline-block" />
+            </Link>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p className="text-xl">{social.hoverText}</p>
+          </TooltipContent>
+        </Tooltip>
+      ))}
+    </div>
+  );
+}