millburn's profile page

packages/nextjs/app/api/builders/profiles/route.ts

@@ -10,6 +10,9 @@ const BUILDER_PROFILES = [
   "0x2E15bB8aDF3438F66A6F786679B0bBBBF02A75d5",
   "0x2d90C8bE0Df1BA58a66282bc4Ed03b330eBD7911",
   "0x3BFbE4E3dCC472E9B1bdFC0c177dE3459Cf769bf",
+  "0x74370B567f5c65bef0428B9c78df5C691B632Cf7",
+  "0x972d1be405DcFcD32DD95743934693B673e3F2B0",
+  "0x9f535319FF3c093F0841427FBC68f483952017BD",
   "0xB24023434c3670E100068C925A87fE8F500d909a",
   "0xE00E720798803B8B83379720c42f7A9bE1cCd281",
   "0xb216270aFB9DfcD611AFAf785cEB38250863F2C9",

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

@@ -0,0 +1,96 @@
+import Image from "next/image";
+import { NextPage } from "next";
+import { FaEnvelope, FaGithub, FaMapMarkerAlt } from "react-icons/fa";
+
+interface ProfileData {
+  name: string;
+  title: string;
+  bio: string;
+  avatar: string;
+  location: string;
+  email: string;
+  social: {
+    github: string;
+  };
+}
+
+const profile: ProfileData = {
+  name: "Developer Millburn",
+  title: "Smart Contract Developer",
+  bio: "I'm a blockchain developer, versitle in writing smart contract using Solidity, Hardhat, Foundry, Remix, EthersJs.",
+  avatar: "/millburnAvartar.jpg",
+  location: "Kogi State, Nigeria",
+  email: "millburncrack@gmail.com",
+  social: {
+    github: "https://github.com/MillburnCrackDev",
+  },
+};
+const socialLinks = [
+  {
+    href: profile.social.github,
+    icon: FaGithub,
+    lightHoverColor: "hover:text-gray-900",
+    darkHoverColor: "dark:hover:text-gray-200",
+  },
+  {
+    href: `mailto:${profile.email}`,
+    icon: FaEnvelope,
+    lightHoverColor: "hover:text-red-500",
+    darkHoverColor: "dark:hover:text-red-400",
+  },
+];
+
+const MillburnBuilderPage: NextPage = () => {
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4">
+      <div className="w-full max-w-md bg-white dark:bg-gray-800 shadow-lg rounded-xl overflow-hidden">
+        <div className="px-6 py-8">
+          <div className="flex flex-col items-center">
+            {/* Avatar */}
+            <Image
+              src={profile.avatar}
+              alt={profile.name}
+              width={128}
+              height={128}
+              className="w-32 h-32 rounded-full mb-4 border-4 border-gray-200 dark:border-gray-700 object-cover"
+            />
+
+            <h1 className="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-1">{profile.name}</h1>
+            <h2 className="text-lg text-gray-600 dark:text-gray-400 mb-3">{profile.title}</h2>
+
+            <div className="flex items-center text-gray-600 dark:text-gray-400 mb-4">
+              <span className="inline-block mr-2 text-gray-600 dark:text-gray-400">
+                <FaMapMarkerAlt size={16} />
+              </span>
+              <span className="text-sm">{profile.location}</span>
+            </div>
+
+            <p className="text-gray-600 dark:text-gray-400 text-center mb-6 px-4 text-sm leading-relaxed">
+              {profile.bio}
+            </p>
+
+            <div className="flex space-x-6 mb-6">
+              {socialLinks.map(({ href, icon: Icon, lightHoverColor, darkHoverColor }, index) => (
+                <a
+                  key={index}
+                  href={href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={`text-gray-600 dark:text-gray-400 ${lightHoverColor} ${darkHoverColor} transition-colors duration-300 ease-in-out`}
+                >
+                  <span
+                    className={`inline-block text-gray-600 dark:text-gray-400 ${lightHoverColor} ${darkHoverColor}`}
+                  >
+                    <Icon size={24} />
+                  </span>
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MillburnBuilderPage;