BuidlGuidl · phipsae · May 14, 2025 · May 8, 2025 · May 9, 2025 · May 13, 2025
diff --git a/packages/nextjs/app/builders/0xb216270aFB9DfcD611AFAf785cEB38250863F2C9/icons.tsx b/packages/nextjs/app/builders/0xb216270aFB9DfcD611AFAf785cEB38250863F2C9/icons.tsx
@@ -0,0 +1,11 @@
+export const GitHubIcon = () => (
+  <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+  </svg>
+);
+
+export const TwitterIcon = () => (
+  <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
+  </svg>
+);
diff --git a/packages/nextjs/app/builders/0xb216270aFB9DfcD611AFAf785cEB38250863F2C9/page.tsx b/packages/nextjs/app/builders/0xb216270aFB9DfcD611AFAf785cEB38250863F2C9/page.tsx
@@ -0,0 +1,80 @@
+import Image from "next/image";
+import { GitHubIcon, TwitterIcon } from "./icons";
+import type { NextPage } from "next";
+import { Address } from "~~/components/scaffold-eth";
+
+const socialLinks = [
+  {
+    href: "https://github.com/Rampop01",
+    label: "GitHub",
+    icon: <GitHubIcon />,
+  },
+  {
+    href: "https://twitter.com/OmowumiRahmat",
+    label: "Twitter",
+    icon: <TwitterIcon />,
+  },
+];
+
+const RampopProfilePage: NextPage = () => {
+  return (
+    <div className="flex flex-col items-center min-h-screen bg-gradient-to-b from-base-200 to-base-300 px-4 sm:px-8 py-4 sm:py-8">
+      <div className="max-w-3xl w-full bg-gradient-to-r from-gray-200 via-white to-gray-200 dark:from-base-100 dark:via-base-200 dark:to-base-300 shadow-md rounded-2xl p-4 sm:p-10 border border-gray-100 dark:border-accent hover:shadow-gray-200/20 transition-all duration-300">
+        <div className="flex flex-col items-center gap-4 sm:gap-6">
+          {/* Avatar */}
+          <div className="relative group">
+            <div className="absolute -inset-0.5 rounded-full opacity-60"></div>
+            <div className="relative w-24 h-24 sm:w-36 sm:h-36 rounded-full ring-2 ring-white dark:ring-accent ring-offset-4 ring-offset-pink-50 dark:ring-offset-base-300 shadow-md overflow-hidden">
+              <Image
+                src="https://res.cloudinary.com/dxswouxj5/image/upload/v1703872336/headshotblue_cxelyl.jpg"
+                alt="my picture"
+                fill
+                sizes="(max-width: 640px) 96px, 144px"
+                priority
+                className="w-full h-full object-cover"
+              />
+            </div>
+          </div>
+
+          {/* Name */}
+          <div className="space-y-2 sm:space-y-3 text-center">
+            <h1 className="text-3xl sm:text-5xl font-extrabold bg-gradient-to-r from-blue-600 to-blue-300 text-transparent bg-clip-text cursor-default">
+              Rampop
+            </h1>
+            <p className="text-sm sm:text-lg text-black bg-clip-text font-medium max-w-md dark:text-white px-2">
+              ✨ Web3 Fullstack Developer | BuidlGuidl Builder | Technical Writer | DeFi Enthusiast ✨
+            </p>
+          </div>
+
+          {/* Address container */}
+          <div className="w-full sm:w-auto bg-base-200 dark:bg-base-300 px-2 sm:px-4 py-2 rounded-xl border border-base-300 dark:border-accent text-xs sm:text-base">
+            <div className="sm:hidden flex justify-center">
+              <Address address="0xb216270aFB9DfcD611AFAf785cEB38250863F2C9" format="short" />
+            </div>
+            <div className="hidden sm:flex justify-center">
+              <Address address="0xb216270aFB9DfcD611AFAf785cEB38250863F2C9" format="long" />
+            </div>
+          </div>
+
+          {/* Social links */}
+          <div className="flex flex-col sm:flex-row gap-2 sm:gap-4 w-full sm:w-auto">
+            {socialLinks.map(({ href, label, icon }) => (
+              <a
+                key={href}
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="btn btn-md normal-case hover:scale-105 hover:-translate-y-1 transition-all duration-300 shadow-lg dark:bg-accent dark:hover:bg-accent/90 dark:text-accent-content w-full sm:w-auto"
+              >
+                {icon}
+                <span>{label}</span>
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RampopProfilePage;
diff --git a/packages/nextjs/next.config.ts b/packages/nextjs/next.config.ts
@@ -15,6 +15,12 @@ const nextConfig: NextConfig = {
         protocol: "https",
         hostname: "avatars.githubusercontent.com",
       },
+      {
+        protocol: "https",
+        hostname: "res.cloudinary.com",
+        port: "",
+        pathname: "/dxswouxj5/**",
+      },
     ],
   },
   webpack: config => {