Add personal builder page

packages/nextjs/app/builders/0xe9Ad7D1C2069E0Fa9b5852Adc77C9196651BB8b8/components/Socials.tsx

@@ -0,0 +1,21 @@
+import Link from "next/link";
+import { FaGithub, FaXTwitter } from "react-icons/fa6";
+
+const Socials: React.FC = () => {
+  const socialPlatforms = [
+    { name: "github", url: "https://github.com/krvvs", icon: <FaGithub size={24} /> },
+    { name: "twitter", url: "https://x.com/xkrvsx", icon: <FaXTwitter size={24} /> },
+  ];
+
+  return (
+    <div className="flex flex-row gap-4">
+      {socialPlatforms.map(social => (
+        <Link key={social.name} href={social.url} target="_blank">
+          {social.icon}
+        </Link>
+      ))}
+    </div>
+  );
+};
+
+export default Socials;

packages/nextjs/app/builders/0xe9Ad7D1C2069E0Fa9b5852Adc77C9196651BB8b8/page.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Image from "next/image";
+import Socials from "./components/Socials";
+import type { NextPage } from "next";
+import { useEnsAvatar, useEnsName } from "wagmi";
+import { Address } from "~~/components/scaffold-eth";
+
+const builderAddress = "0xe9Ad7D1C2069E0Fa9b5852Adc77C9196651BB8b8";
+
+const KrvvsProfile: NextPage = () => {
+  const [ensAvatar, setEnsAvatar] = useState<string | null>();
+
+  const { data: fetchedEns } = useEnsName({
+    address: builderAddress,
+    chainId: 1,
+  });
+
+  const { data: fetchedEnsAvatar } = useEnsAvatar({
+    name: fetchedEns ? fetchedEns : "",
+    chainId: 1,
+  });
+
+  useEffect(() => {
+    setEnsAvatar(fetchedEnsAvatar);
+  }, [fetchedEnsAvatar]);
+
+  return (
+    <div className="flex justify-center">
+      <div className="w-[800px] min-w-[200px] max-w-[800px] p-[30px] m-[50px] bg-base-200 shadow-2xl rounded-2xl flex flex-col gap-6 items-center">
+        <div className="avatar">
+          <div className="w-40 rounded-full">
+            <Image
+              src={ensAvatar || "https://avatars.githubusercontent.com/u/141290516?v=4"}
+              alt="Builder's Avatar"
+              height={100}
+              width={100}
+              objectFit="cover"
+            />
+          </div>
+        </div>
+        <div className="flex flex-col items-center gap-4">
+          <div className="card-title">{fetchedEns}</div>
+          <Socials />
+        </div>
+
+        <div className="text-center max-w-[400px] mt-[8px]">
+          <p>Hello World!</p>
+          <p>
+            I am a builder who enjoys learning and creating value, with a strong interest in bringing blockchain
+            technologies to life.
+          </p>
+        </div>
+        <div className="flex items-center mt-8">
+          <Address address={builderAddress} format="short" size="xs" onlyEnsOrAddress={true} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default KrvvsProfile;

packages/nextjs/next.config.js

@@ -14,6 +14,16 @@ const nextConfig = {
     config.externals.push("pino-pretty", "lokijs", "encoding");
     return config;
   },
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "avatars.githubusercontent.com",
+        port: "",
+        pathname: "/u/**",
+      },
+    ],
+  },
 };
 
 module.exports = nextConfig;