Muritadhor new

packages/nextjs/app/builders/0x74370B567f5c65bef0428B9c78df5C691B632Cf7/components/BuilderProfile.tsx

@@ -0,0 +1,79 @@
+import Image from "next/image";
+import SkillBadge from "./SkillBadge";
+import SocialLinks from "./SocialLinks";
+import { Award, FileText, Heart } from "lucide-react";
+import { Address } from "~~/components/scaffold-eth/Address/Address";
+
+interface BuilderProfileProps {
+  name: string;
+  avatarUrl: string;
+  bio: string;
+  ethAddress: string;
+  skills: Array<{ name: string; proficiency: number }>;
+  hobbies: string[];
+}
+
+const BuilderProfile = ({ name, avatarUrl, bio, ethAddress, skills, hobbies }: BuilderProfileProps) => {
+  return (
+    <div className="container mx-auto px-4 py-8 max-w-4xl shadow-2xl rounded-lg bg-base-300 relative">
+      <div className="card bg-primary-content backdrop-blur-sm border border-purple-100/20 shadow-lg"></div>
+      <div className="absolute inset-0 bg-gradient-to-br from-purple-50/50 to-purple-100/30 -z-10" />
+
+      <div className="flex flex-col items-center space-y-4 pt-8 pb-6">
+        <div className="avatar">
+          <div className="w-32 rounded-full ring ring-primary-content ring-offset-base-100 ring-offset-2 shadow-lg">
+            <Image src={avatarUrl} alt={name} className="object-cover" width={128} height={128} />
+          </div>
+        </div>
+        <div className="text-center items-center">
+          <h1 className="text-3xl font-bold text-primary-content">{name}</h1>
+          <div className="flex justify-center text-primary-content">
+            <Address address={ethAddress} />
+          </div>
+        </div>
+      </div>
+
+      <div className="card-body pb-8 space-y-8">
+        <div className="space-y-4">
+          <div className="flex items-center gap-2">
+            <FileText className="h-5 w-5 text-primary-content" />
+            <h2 className="text-xl font-semibold text-primary-content">Bio</h2>
+          </div>
+          <p className="text-primary-content leading-relaxed pl-7">{bio}</p>
+        </div>
+
+        <div className="space-y-4">
+          <div className="flex items-center gap-2">
+            <Award className="h-5 w-5 text-primary-content" />
+            <h2 className="text-xl font-semibold text-primary-content">Skills</h2>
+          </div>
+          <div className="flex flex-wrap gap-3 pl-7">
+            {skills.map(skill => (
+              <SkillBadge key={skill.name} name={skill.name} proficiency={skill.proficiency} />
+            ))}
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <div className="flex items-center gap-2">
+            <Heart className="h-5 w-5 text-primary-content" />
+            <h2 className="text-xl font-semibold text-primary-content">Hobbies & Interests</h2>
+          </div>
+          <div className="flex flex-wrap gap-2 pl-7">
+            {hobbies.map(hobby => (
+              <div key={hobby} className="badge badge-outline bg-white/80 text-gray-700 p-2">
+                {hobby}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="pt-4">
+          <SocialLinks />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BuilderProfile;

packages/nextjs/app/builders/0x74370B567f5c65bef0428B9c78df5C691B632Cf7/components/SkillBadge.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+interface SkillBadgeProps {
+  name: string;
+  proficiency: number; // 1-5
+}
+
+const SkillBadge = ({ name, proficiency }: SkillBadgeProps) => {
+  // Ensure proficiency is within bounds
+  const level = Math.min(Math.max(proficiency, 1), 5);
+
+  return (
+    <div className="flex flex-col items-center bg-white/80 rounded-lg p-2 shadow-sm border border-purple-100">
+      <span className="text-sm font-medium text-gray-700">{name}</span>
+      <div className="flex mt-1 gap-1">
+        {[...Array(5)].map((_, i) => (
+          <div key={i} className={`h-1.5 w-4 rounded-full ${i < level ? "bg-[#385184]" : "bg-white"}`} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default SkillBadge;

packages/nextjs/app/builders/0x74370B567f5c65bef0428B9c78df5C691B632Cf7/components/SocialLinks.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Github, Link, Linkedin, Twitter } from "lucide-react";
+
+const socialIcons = [
+  { name: "Twitter", url: "https://twitter.com/armolas_06", icon: Twitter },
+  { name: "GitHub", url: "https://github.com/armolas", icon: Github },
+  { name: "LinkedIn", url: "https://linkedin.com/in/arowolomuritadhor", icon: Linkedin },
+  { name: "Website", url: "https://armolasportfolio.netlify.app", icon: Link },
+];
+
+const SocialLinks = () => {
+  return (
+    <div className="flex justify-center gap-4 ">
+      {socialIcons.map(
+        social =>
+          social.url && (
+            <a
+              key={social.name}
+              href={social.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="btn btn-circle btn-outline bg-primary hover:bg-purple-50 text-primary-content hover:text-[#385184] border-purple-100 tooltip tooltip-top"
+              data-tip={social.name}
+            >
+              <social.icon size={18} />
+              <span className="sr-only">{social.name}</span>
+            </a>
+          ),
+      )}
+    </div>
+  );
+};
+
+export default SocialLinks;

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

@@ -0,0 +1,28 @@
+import React from "react";
+import BuilderProfile from "./components/BuilderProfile";
+
+const Index = () => {
+  return (
+    <div className="min-h-screen bg-primary flex items-center justify-center p-4 text-black dark:text-white/80">
+      <BuilderProfile
+        name="Muritadhor Arowolo"
+        avatarUrl="https://images.unsplash.com/photo-1531297484001-80022131f5a1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80"
+        bio="Passionate web3 builder and developer focused on creating decentralized applications. Contributing to buildguild and exploring the intersection of blockchain technology, user experience, and community building. Always learning and sharing knowledge with fellow builders."
+        ethAddress="0x74370B567f5c65bef0428B9c78df5C691B632Cf7"
+        skills={[
+          { name: "React", proficiency: 4 },
+          { name: "Solidity", proficiency: 5 },
+          { name: "TypeScript", proficiency: 4 },
+          { name: "Blockchain", proficiency: 4 },
+          { name: "Next.js", proficiency: 4 },
+          { name: "Python", proficiency: 5 },
+          { name: "Clarity", proficiency: 4 },
+          { name: "Smart Contracts", proficiency: 4 },
+        ]}
+        hobbies={["Open Source", "Hackathons", "Debugging", "DeFi", "Painting", "Music", "Coooking"]}
+      />
+    </div>
+  );
+};
+
+export default Index;

packages/nextjs/next.config.ts

@@ -26,6 +26,10 @@ const nextConfig: NextConfig = {
         protocol: "https",
         hostname: "res.cloudinary.com",
       },
+      {
+        protocol: "https",
+        hostname: "images.unsplash.com",
+      },
     ],
   },
   webpack: config => {

packages/nextjs/package.json

@@ -25,7 +25,7 @@
     "burner-connector": "0.0.12",
     "daisyui": "^5.0.9",
     "kubo-rpc-client": "^5.0.2",
-    "lucide-react": "^0.510.0",
+    "lucide-react": "^0.511.0",
     "next": "^15.2.3",
     "next-nprogress-bar": "^2.3.13",
 "next-themes": "^0.3.0",

yarn.lock

@@ -4023,7 +4023,7 @@ __metadata:
     eslint-config-prettier: ^10.1.1
     eslint-plugin-prettier: ^5.2.4
     kubo-rpc-client: ^5.0.2
-    lucide-react: ^0.510.0
+    lucide-react: ^0.511.0
     next: ^15.2.3
     next-nprogress-bar: ^2.3.13
     next-themes: ^0.3.0
@@ -13415,12 +13415,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lucide-react@npm:^0.510.0":
-  version: 0.510.0
-  resolution: "lucide-react@npm:0.510.0"
+"lucide-react@npm:^0.511.0":
+  version: 0.511.0
+  resolution: "lucide-react@npm:0.511.0"
   peerDependencies:
     react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
-  checksum: bc823d2a69255738558fe1ddff18fa9b1f602539928ff4c766a790b190bfc14140061df9cd4fab1680c523053e823668fdc4d726f82f4141f53ee9c58b6916a0
+  checksum: b347d276c1a8cdc51f6ca44ef09d51a3a916bfb58ef0a0d55c729b1afb54877c1bbad981313984751ea13e4cc9903bfeae346f112184c94158a5a39274daea65
   languageName: node
   linkType: hard