Repository: BuidlGuidl/batch15.buidlguidl.com
Pull request #19: feature/ayush_profile_page
Author: login: Ayush-Dutt-Sharma
Created: 2025-04-17T04:11:58Z | Merged: 2025-04-21T14:41:00Z

Adds my personal builder profile page to the BuidlGuidl.
Includes:

My basic information
Social media links
Added [motion](https://www.npmjs.com/package/motion) for the animations.


##ScreenShots/Videos

https://github.com/user-attachments/assets/4dad14bd-bc0a-40d0-b8bb-a54dfcf02236


## Issues
[x] Resolves Issue #8 
## Additional Information

- [x] I have read the [contributing docs](/scaffold-eth/scaffold-eth-2/blob/main/CONTRIBUTING.md) (if this is your first contribution)
- [x] This is not a duplicate of any [existing pull request](https://github.com/scaffold-eth/scaffold-eth-2/pulls)


Your ENS/address:
0xB032Af0F37E29a7b4C1FcBA7051A322460931dD8


Diff:
diff --git a/packages/nextjs/app/builders/0xB032Af0F37E29a7b4C1FcBA7051A322460931dD8/page.tsx b/packages/nextjs/app/builders/0xB032Af0F37E29a7b4C1FcBA7051A322460931dD8/page.tsx
new file mode 100644
index 0000000..1178dce
--- /dev/null
+++ b/packages/nextjs/app/builders/0xB032Af0F37E29a7b4C1FcBA7051A322460931dD8/page.tsx
@@ -0,0 +1,232 @@
+import Image from "next/image";
+import { ClassValue, clsx } from "clsx";
+import { NextPage } from "next";
+import { FaGithub, FaTelegram, FaTwitter } from "react-icons/fa";
+import { twMerge } from "tailwind-merge";
+import { ChatBubbleLeftRightIcon, CodeBracketIcon, GlobeAltIcon } from "@heroicons/react/24/outline";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
+import { MotionA, MotionDiv, MotionH1, MotionMain, MotionP } from "~~/components/MotionElements";
+import { Address } from "~~/components/scaffold-eth";
+
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.2,
+    },
+  },
+};
+
+const itemVariants = {
+  hidden: { y: 20, opacity: 0 },
+  visible: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      duration: 0.5,
+    },
+  },
+};
+const variants = {
+  initial: {
+    backgroundPosition: "0 50%",
+  },
+  animate: {
+    backgroundPosition: ["0, 50%", "100% 50%", "0 50%"],
+  },
+};
+const skills = [
+  { name: "Ethereum", level: 90 },
+  { name: "Solidity", level: 85 },
+  { name: "Typescript", level: 95 },
+  { name: "Smart Contracts", level: 88 },
+];
+
+const AyushDuttSharmaProfilePage: NextPage = () => {
+  return (
+    <div className="flex justify-center items-center min-h-screen px-4 py-12 bg-gray-50 dark:bg-gray-900">
+      <MotionMain initial="hidden" animate="visible" variants={containerVariants} className="w-full max-w-4xl">
+        <BackgroundGradient
+          containerClassName="w-full mb-8"
+          className="rounded-3xl p-1 sm:p-2 bg-white dark:bg-zinc-900/80 backdrop-blur-sm"
+        >
+          <div className="px-6 py-8 sm:p-10 rounded-2xl bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm">
+            <MotionDiv variants={itemVariants} className="flex flex-col sm:flex-row items-center sm:items-start gap-8">
+              <MotionDiv whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className="relative flex-shrink-0">
+                <Image
+                  src={`/ayush_dutt_sharma_profile.jpeg`}
+                  alt="Profile Avatar"
+                  width={160}
+                  height={160}
+                  priority
+                  className="object-cover rounded-full border-2 border-transparent shadow-xl hover:shadow-blue-300/30 dark:hover:shadow-blue-400/20 transition-all duration-300"
+                />
+              </MotionDiv>
+
+              <div className="text-center sm:text-left space-y-4 flex-1">
+                <MotionH1
+                  variants={itemVariants}
+                  className="text-4xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400 bg-clip-text text-transparent"
+                >
+                  Ayush Dutt Sharma
+                </MotionH1>
+
+                <MotionDiv variants={itemVariants} className="flex flex-wrap gap-2 justify-center sm:justify-start">
+                  <span className="px-3 py-1 bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full text-xs font-medium flex items-center">
+                    <CodeBracketIcon className="w-3 h-3 mr-1" /> Builder
+                  </span>
+                  <span className="px-3 py-1 bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 rounded-full text-xs font-medium flex items-center">
+                    <GlobeAltIcon className="w-3 h-3 mr-1" /> Smart Contract Wizard
+                  </span>
+                  <span className="px-3 py-1 bg-orange-50 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 rounded-full text-xs font-medium flex items-center">
+                    <ChatBubbleLeftRightIcon className="w-3 h-3 mr-1" /> Typescript
+                  </span>
+                </MotionDiv>
+                <Address address="0xB032Af0F37E29a7b4C1FcBA7051A322460931dD8" />
+              </div>
+            </MotionDiv>
+          </div>
+        </BackgroundGradient>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <MotionDiv
+            variants={itemVariants}
+            className="md:col-span-2 space-y-4 bg-white dark:bg-zinc-900/80 p-8 rounded-2xl shadow-sm"
+          >
+            <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">About</h2>
+            <MotionP variants={itemVariants} className="leading-relaxed text-gray-700 dark:text-gray-300">
+              I&apos;m a Web2 developer with 5 years of experience building sleek, scalable digital experiences.
+              Recently, my curiosity and passion for decentralization have pulled me into the Web3 world.
+            </MotionP>
+            <MotionP variants={itemVariants} className="leading-relaxed text-gray-700 dark:text-gray-300">
+              I&apos;m diving deep into blockchain, smart contracts, and creating open, user-friendly systems. I&apos;m
+              thrilled to connect, collaborate, and help shape the future of the web!
+            </MotionP>
+          </MotionDiv>
+
+          <MotionDiv
+            variants={itemVariants}
+            className="space-y-6 bg-white dark:bg-zinc-900/80 p-8 rounded-2xl shadow-sm"
+          >
+            <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200">Connect</h2>
+            <div className="flex flex-col gap-4">
+              {[
+                { name: "GitHub", url: "https://github.com/Ayush-Dutt-Sharma", icon: <FaGithub className="w-5 h-5" /> },
+                { name: "Twitter", url: "https://x.com/Ayush_Dutt_", icon: <FaTwitter className="w-5 h-5" /> },
+                { name: "Telegram", url: "https://t.me/ayush_dutt_sharma", icon: <FaTelegram className="w-5 h-5" /> },
+              ].map(social => (
+                <MotionA
+                  key={social.name}
+                  href={social.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-3 px-4 py-3 bg-gray-50 dark:bg-zinc-800/50 text-gray-800 dark:text-gray-200 rounded-xl hover:bg-gray-100 dark:hover:bg-zinc-800 transition-all duration-300"
+                  whileHover={{ x: 3 }}
+                  whileTap={{ scale: 0.98 }}
+                >
+                  <span className="text-blue-600 dark:text-blue-400">{social.icon}</span>
+                  <span>{social.name}</span>
+                  <ArrowTopRightOnSquareIcon className="w-4 h-4 ml-auto" />
+                </MotionA>
+              ))}
+            </div>
+          </MotionDiv>
+        </div>
+
+        <MotionDiv variants={itemVariants} className="mt-6 bg-white dark:bg-zinc-900/80 p-8 rounded-2xl shadow-sm">
+          <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Skills</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+            {skills.map((skill, index) => (
+              <div key={skill.name} className="space-y-2">
+                <div className="flex justify-between text-sm">
+                  <span className="font-medium text-gray-700 dark:text-gray-300">{skill.name}</span>
+                  <span className="text-gray-500 dark:text-gray-400">{skill.level}%</span>
+                </div>
+                <MotionDiv
+                  className="h-1.5 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ delay: 0.7 + index * 0.1 }}
+                >
+                  <MotionDiv
+                    className="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full"
+                    initial={{ width: 0 }}
+                    animate={{ width: `${skill.level}%` }}
+                    transition={{ delay: 0.8 + index * 0.1, duration: 1, ease: "easeOut" }}
+                  />
+                </MotionDiv>
+              </div>
+            ))}
+          </div>
+        </MotionDiv>
+      </MotionMain>
+    </div>
+  );
+};
+
+function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+function BackgroundGradient({
+  children,
+  className,
+  containerClassName,
+  animate = true,
+}: {
+  children?: React.ReactNode;
+  className?: string;
+  containerClassName?: string;
+  animate?: boolean;
+}) {
+  return (
+    <div className={cn("relative p-[4px] group", containerClassName)}>
+      <MotionDiv
+        variants={animate ? variants : undefined}
+        initial={animate ? "initial" : undefined}
+        animate={animate ? "animate" : undefined}
+        transition={
+          animate
+            ? {
+                duration: 5,
+                repeat: Infinity,
+                repeatType: "reverse",
+              }
+            : undefined
+        }
+        style={{
+          backgroundSize: animate ? "400% 400%" : undefined,
+        }}
+        className={cn(
+          "absolute inset-0 rounded-3xl z-[1] opacity-60 group-hover:opacity-100 blur-xl transition duration-500 will-change-transform",
+          " bg-[radial-gradient(circle_farthest-side_at_0_100%,#00ccb1,transparent),radial-gradient(circle_farthest-side_at_100%_0,#7b61ff,transparent),radial-gradient(circle_farthest-side_at_100%_100%,#ffc414,transparent),radial-gradient(circle_farthest-side_at_0_0,#1ca0fb,#141316)]",
+        )}
+      />
+      <MotionDiv
+        variants={animate ? variants : undefined}
+        initial={animate ? "initial" : undefined}
+        animate={animate ? "animate" : undefined}
+        transition={
+          animate
+            ? {
+                duration: 5,
+                repeat: Infinity,
+                repeatType: "reverse",
+              }
+            : undefined
+        }
+        style={{
+          backgroundSize: animate ? "400% 400%" : undefined,
+        }}
+        className={cn(
+          "absolute inset-0 rounded-3xl z-[1] will-change-transform",
+          "bg-[radial-gradient(circle_farthest-side_at_0_100%,#00ccb1,transparent),radial-gradient(circle_farthest-side_at_100%_0,#7b61ff,transparent),radial-gradient(circle_farthest-side_at_100%_100%,#ffc414,transparent),radial-gradient(circle_farthest-side_at_0_0,#1ca0fb,#141316)]",
+        )}
+      />
+      <div className={cn("relative z-10", className)}>{children}</div>
+    </div>
+  );
+}
+
+export default AyushDuttSharmaProfilePage;
diff --git a/packages/nextjs/components/MotionElements.tsx b/packages/nextjs/components/MotionElements.tsx
new file mode 100644
index 0000000..2616a3a
--- /dev/null
+++ b/packages/nextjs/components/MotionElements.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+const MotionDiv = motion.div;
+const MotionMain = motion.main;
+const MotionH1 = motion.h1;
+const MotionP = motion.p;
+const MotionA = motion.a;
+
+export { MotionA, MotionDiv, MotionH1, MotionMain, MotionP };
diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
index b8b1862..20b708f 100644
--- a/packages/nextjs/package.json
+++ b/packages/nextjs/package.json
@@ -23,8 +23,10 @@
     "@uniswap/v2-sdk": "^4.6.1",
     "blo": "^1.2.0",
     "burner-connector": "0.0.12",
+    "clsx": "^2.1.1",
     "daisyui": "4.12.10",
     "kubo-rpc-client": "^5.0.2",
+    "motion": "^12.7.4",
     "next": "^15.2.3",
     "next-nprogress-bar": "^2.3.13",
     "next-themes": "^0.3.0",
@@ -33,6 +35,7 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^19.0.0",
     "react-hot-toast": "^2.4.0",
+    "tailwind-merge": "^3.2.0",
     "react-icons": "^5.5.0",
     "usehooks-ts": "^3.1.0",
     "viem": "2.23.0",
@@ -52,7 +55,6 @@
     "eslint-plugin-prettier": "^5.2.4",
     "postcss": "^8.4.45",
     "prettier": "^3.5.3",
-    "react-icons": "^5.5.0",
     "tailwindcss": "^3.4.11",
     "type-fest": "^4.26.1",
     "typescript": "^5.8.2",
diff --git a/packages/nextjs/public/ayush_dutt_sharma_profile.jpeg b/packages/nextjs/public/ayush_dutt_sharma_profile.jpeg
new file mode 100644
index 0000000..cbe831e
Binary files /dev/null and b/packages/nextjs/public/ayush_dutt_sharma_profile.jpeg differ
diff --git a/yarn.lock b/yarn.lock
index 51309b0..6e0c7a4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4045,12 +4045,14 @@ __metadata:
     bgipfs: ^0.0.12
     blo: ^1.2.0
     burner-connector: 0.0.12
+    clsx: ^2.1.1
     daisyui: 4.12.10
     eslint: ^9.23.0
     eslint-config-next: ^15.2.3
     eslint-config-prettier: ^10.1.1
     eslint-plugin-prettier: ^5.2.4
     kubo-rpc-client: ^5.0.2
+    motion: ^12.7.4
     next: ^15.2.3
     next-nprogress-bar: ^2.3.13
     next-themes: ^0.3.0
@@ -4062,6 +4064,7 @@ __metadata:
     react-dom: ^19.0.0
     react-hot-toast: ^2.4.0
     react-icons: ^5.5.0
+    tailwind-merge: ^3.2.0
     tailwindcss: ^3.4.11
     type-fest: ^4.26.1
     typescript: ^5.8.2
@@ -7921,7 +7924,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clsx@npm:2.1.1":
+"clsx@npm:2.1.1, clsx@npm:^2.1.1":
   version: 2.1.1
   resolution: "clsx@npm:2.1.1"
   checksum: acd3e1ab9d8a433ecb3cc2f6a05ab95fe50b4a3cfc5ba47abb6cbf3754585fcb87b84e90c822a1f256c4198e3b41c7f6c391577ffc8678ad587fc0976b24fd57
@@ -10448,6 +10451,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"framer-motion@npm:^12.7.4":
+  version: 12.7.4
+  resolution: "framer-motion@npm:12.7.4"
+  dependencies:
+    motion-dom: ^12.7.4
+    motion-utils: ^12.7.2
+    tslib: ^2.4.0
+  peerDependencies:
+    "@emotion/is-prop-valid": "*"
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@emotion/is-prop-valid":
+      optional: true
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  checksum: 8fce21facbd124fe578b97eca51045b20ab975270eb266799602b494709b97d55906938a45e6c61b138d2f8d2e142c640aea199a9941f46b5a618b1a2cec8492
+  languageName: node
+  linkType: hard
+
 "fs-extra@npm:11.1.0":
   version: 11.1.0
   resolution: "fs-extra@npm:11.1.0"
@@ -13897,6 +13922,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"motion-dom@npm:^12.7.4":
+  version: 12.7.4
+  resolution: "motion-dom@npm:12.7.4"
+  dependencies:
+    motion-utils: ^12.7.2
+  checksum: 3d43d338bd188fb9144bd8f8e45fb7d8b935e38d3d7595f5cd2e7d960b3758f86f2777a31eb1bafd9a8c98b85c512cc19490e43fafbda715eda3ef0e9cfa4668
+  languageName: node
+  linkType: hard
+
+"motion-utils@npm:^12.7.2":
+  version: 12.7.2
+  resolution: "motion-utils@npm:12.7.2"
+  checksum: 212b6d6ef8c396deb4a0ec21ae499866d571abfeef3c73db2a4b549b178b7a6f790d721c6724af2d9547a3b9c325e0c24173117e6a1c346d8026dfb42893b460
+  languageName: node
+  linkType: hard
+
 "motion@npm:10.16.2":
   version: 10.16.2
   resolution: "motion@npm:10.16.2"
@@ -13911,6 +13952,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"motion@npm:^12.7.4":
+  version: 12.7.4
+  resolution: "motion@npm:12.7.4"
+  dependencies:
+    framer-motion: ^12.7.4
+    tslib: ^2.4.0
+  peerDependencies:
+    "@emotion/is-prop-valid": "*"
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@emotion/is-prop-valid":
+      optional: true
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  checksum: f1eff363fedae36b7f737a175c7fee19842cd9798147dc803c2a0d659fecec79faba729025a48a91967c48a832197c009a02cef9a532abcab06a51145f4d0d61
+  languageName: node
+  linkType: hard
+
 "mri@npm:1.2.0, mri@npm:^1.1.0, mri@npm:^1.2.0":
   version: 1.2.0
   resolution: "mri@npm:1.2.0"
@@ -17822,6 +17884,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tailwind-merge@npm:^3.2.0":
+  version: 3.2.0
+  resolution: "tailwind-merge@npm:3.2.0"
+  checksum: 942e86ef6fffd9b9bdb6ab41626ef013ebebca001e1b7c183a2c426ea7169a915d47485c2c4d73a91f4ff390df99645c262e47b8f0be8a7e18837b512f196068
+  languageName: node
+  linkType: hard
+
 "tailwindcss@npm:^3.4.11":
   version: 3.4.11
   resolution: "tailwindcss@npm:3.4.11"


Reviews:
user: login: melanke
body: Hey Ayush! Thank you for this beautiful profile page!

Please don’t forget to add the issue number to your PR description.

Here’s my review:
state: CHANGES_REQUESTED
author_association: COLLABORATOR
submitted_at: 2025-04-17T14:13:25Z
user: login: Ayush-Dutt-Sharma
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-18T03:16:34Z
user: login: Ayush-Dutt-Sharma
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-18T03:17:00Z
user: login: Ayush-Dutt-Sharma
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-18T03:17:25Z
user: login: Ayush-Dutt-Sharma
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-18T03:18:10Z
user: login: melanke
body: I think that's only it from my side:
state: CHANGES_REQUESTED
author_association: COLLABORATOR
submitted_at: 2025-04-18T13:34:48Z
user: login: Ayush-Dutt-Sharma
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-18T13:38:47Z
user: login: Ayush-Dutt-Sharma
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-18T13:46:05Z
user: login: phipsae
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-19T18:12:41Z
user: login: phipsae
body: Thanks for your really nice page! I like it a lot :) 

I left you a little comment below. 
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-19T18:15:35Z
user: login: Ayush-Dutt-Sharma
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-20T15:54:58Z
user: login: Ayush-Dutt-Sharma
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-20T15:55:36Z
user: login: melanke
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-04-21T10:54:45Z

Review comments:
diff_hunk: @@ -0,0 +1,249 @@
+"use client";
+
+import Image from "next/image";
+import { ClassValue, clsx } from "clsx";
+import { motion } from "framer-motion";
+import { NextPage } from "next";
+import { toast } from "react-hot-toast";
+import { FaGithub, FaTelegram, FaTwitter } from "react-icons/fa";
+import { twMerge } from "tailwind-merge";
+import { ChatBubbleLeftRightIcon, CodeBracketIcon, GlobeAltIcon } from "@heroicons/react/24/outline";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
+import { Address } from "~~/components/scaffold-eth";
+
+const AyushDuttSharmaProfilePage: NextPage = () => {
+  const copyAddress = () => {
+    navigator.clipboard.writeText("0xB032Af0F37E29a7b4C1FcBA7051A322460931dD8");
+    toast.success("Address copied to clipboard!", {
+      icon: "📋",
+    });
+  };
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: 0.5,
+      },
+    },
+  };
+
+  const skills = [
+    { name: "Ethereum", level: 90 },
+    { name: "Solidity", level: 85 },
+    { name: "Typescript", level: 95 },
+    { name: "Smart Contracts", level: 88 },
+  ];
+
+  return (
+    <div className="flex justify-center items-center min-h-screen px-4 py-12 bg-gray-50 dark:bg-gray-900">
+      <motion.main initial="hidden" animate="visible" variants={containerVariants} className="w-full max-w-4xl">
+        <BackgroundGradient
+          containerClassName="w-full mb-8"
+          className="rounded-3xl p-1 sm:p-2 bg-white dark:bg-zinc-900/80 backdrop-blur-sm"
+        >
+          <div className="px-6 py-8 sm:p-10 rounded-2xl bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm">
+            <motion.div variants={itemVariants} className="flex flex-col sm:flex-row items-center sm:items-start gap-8">
+              <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className="relative flex-shrink-0">
+                <Image
+                  src={`/ayush_dutt_sharma_profile.jpeg`}
+                  alt="Profile Avatar"
+                  width={160}
+                  height={160}
+                  className="object-cover rounded-full border-2 border-transparent shadow-xl hover:shadow-blue-300/30 dark:hover:shadow-blue-400/20 transition-all duration-300"
+                />
+              </motion.div>
+
+              <div className="text-center sm:text-left space-y-4 flex-1">
+                <motion.h1
+                  variants={itemVariants}
+                  className="text-4xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400 bg-clip-text text-transparent"
+                >
+                  Ayush Dutt Sharma
+                </motion.h1>
+
+                <motion.div variants={itemVariants} className="flex flex-wrap gap-2 justify-center sm:justify-start">
+                  <span className="px-3 py-1 bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full text-xs font-medium flex items-center">
+                    <CodeBracketIcon className="w-3 h-3 mr-1" /> Builder
+                  </span>
+                  <span className="px-3 py-1 bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 rounded-full text-xs font-medium flex items-center">
+                    <GlobeAltIcon className="w-3 h-3 mr-1" /> Smart Contract Wizard
+                  </span>
+                  <span className="px-3 py-1 bg-orange-50 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 rounded-full text-xs font-medium flex items-center">
+                    <ChatBubbleLeftRightIcon className="w-3 h-3 mr-1" /> Typescript
+                  </span>
+                </motion.div>
+
+                <motion.div
+                  variants={itemVariants}
+                  onClick={copyAddress}
path: packages/nextjs/app/builders/0xB032Af0F37E29a7b4C1FcBA7051A322460931dD8/page.tsx
user: login: melanke
body: The Address component already have a built-in copy-to-clipboard mechanism.
created_at: 2025-04-17T13:48:07Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,249 @@
+"use client";
+
+import Image from "next/image";
+import { ClassValue, clsx } from "clsx";
+import { motion } from "framer-motion";
+import { NextPage } from "next";
+import { toast } from "react-hot-toast";
+import { FaGithub, FaTelegram, FaTwitter } from "react-icons/fa";
+import { twMerge } from "tailwind-merge";
+import { ChatBubbleLeftRightIcon, CodeBracketIcon, GlobeAltIcon } from "@heroicons/react/24/outline";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
+import { Address } from "~~/components/scaffold-eth";
+
+const AyushDuttSharmaProfilePage: NextPage = () => {
+  const copyAddress = () => {
+    navigator.clipboard.writeText("0xB032Af0F37E29a7b4C1FcBA7051A322460931dD8");
+    toast.success("Address copied to clipboard!", {
+      icon: "📋",
+    });
+  };
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: 0.5,
+      },
+    },
+  };
+
+  const skills = [
+    { name: "Ethereum", level: 90 },
+    { name: "Solidity", level: 85 },
+    { name: "Typescript", level: 95 },
+    { name: "Smart Contracts", level: 88 },
+  ];
path: packages/nextjs/app/builders/0xB032Af0F37E29a7b4C1FcBA7051A322460931dD8/page.tsx
user: login: melanke
body: Since these are all constant, it makes sense to place them outside of the component. So they're created only once at module initialization, rather than every render.
created_at: 2025-04-17T14:02:17Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,249 @@
+"use client";
+
+import Image from "next/image";
+import { ClassValue, clsx } from "clsx";
+import { motion } from "framer-motion";
+import { NextPage } from "next";
+import { toast } from "react-hot-toast";
+import { FaGithub, FaTelegram, FaTwitter } from "react-icons/fa";
+import { twMerge } from "tailwind-merge";
+import { ChatBubbleLeftRightIcon, CodeBracketIcon, GlobeAltIcon } from "@heroicons/react/24/outline";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
+import { Address } from "~~/components/scaffold-eth";
+
+const AyushDuttSharmaProfilePage: NextPage = () => {
+  const copyAddress = () => {
+    navigator.clipboard.writeText("0xB032Af0F37E29a7b4C1FcBA7051A322460931dD8");
+    toast.success("Address copied to clipboard!", {
+      icon: "📋",
+    });
+  };
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: 0.5,
+      },
+    },
+  };
+
+  const skills = [
+    { name: "Ethereum", level: 90 },
+    { name: "Solidity", level: 85 },
+    { name: "Typescript", level: 95 },
+    { name: "Smart Contracts", level: 88 },
+  ];
+
+  return (
+    <div className="flex justify-center items-center min-h-screen px-4 py-12 bg-gray-50 dark:bg-gray-900">
+      <motion.main initial="hidden" animate="visible" variants={containerVariants} className="w-full max-w-4xl">
+        <BackgroundGradient
+          containerClassName="w-full mb-8"
+          className="rounded-3xl p-1 sm:p-2 bg-white dark:bg-zinc-900/80 backdrop-blur-sm"
+        >
+          <div className="px-6 py-8 sm:p-10 rounded-2xl bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm">
+            <motion.div variants={itemVariants} className="flex flex-col sm:flex-row items-center sm:items-start gap-8">
+              <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className="relative flex-shrink-0">
+                <Image
+                  src={`/ayush_dutt_sharma_profile.jpeg`}
+                  alt="Profile Avatar"
+                  width={160}
+                  height={160}
+                  className="object-cover rounded-full border-2 border-transparent shadow-xl hover:shadow-blue-300/30 dark:hover:shadow-blue-400/20 transition-all duration-300"
+                />
+              </motion.div>
+
+              <div className="text-center sm:text-left space-y-4 flex-1">
+                <motion.h1
+                  variants={itemVariants}
+                  className="text-4xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400 bg-clip-text text-transparent"
+                >
+                  Ayush Dutt Sharma
+                </motion.h1>
+
+                <motion.div variants={itemVariants} className="flex flex-wrap gap-2 justify-center sm:justify-start">
+                  <span className="px-3 py-1 bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full text-xs font-medium flex items-center">
+                    <CodeBracketIcon className="w-3 h-3 mr-1" /> Builder
+                  </span>
+                  <span className="px-3 py-1 bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 rounded-full text-xs font-medium flex items-center">
+                    <GlobeAltIcon className="w-3 h-3 mr-1" /> Smart Contract Wizard
+                  </span>
+                  <span className="px-3 py-1 bg-orange-50 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 rounded-full text-xs font-medium flex items-center">
+                    <ChatBubbleLeftRightIcon className="w-3 h-3 mr-1" /> Typescript
+                  </span>
+                </motion.div>
+
+                <motion.div
+                  variants={itemVariants}
+                  onClick={copyAddress}
+                  className="inline-flex items-center space-x-2 mt-2 text-sm text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 px-3 py-1 rounded-full cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-300"
+                >
+                  <Address address="0xB032Af0F37E29a7b4C1FcBA7051A322460931dD8" />
+                </motion.div>
+              </div>
+            </motion.div>
+          </div>
+        </BackgroundGradient>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <motion.div
+            variants={itemVariants}
+            className="md:col-span-2 space-y-4 bg-white dark:bg-zinc-900/80 p-8 rounded-2xl shadow-sm"
+          >
+            <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">About</h2>
+            <motion.p variants={itemVariants} className="leading-relaxed text-gray-700 dark:text-gray-300">
+              I&apos;m a Web2 developer with 5 years of experience building sleek, scalable digital experiences.
+              Recently, my curiosity and passion for decentralization have pulled me into the Web3 world.
+            </motion.p>
+            <motion.p variants={itemVariants} className="leading-relaxed text-gray-700 dark:text-gray-300">
+              I&apos;m diving deep into blockchain, smart contracts, and creating open, user-friendly systems. I&apos;m
+              thrilled to connect, collaborate, and help shape the future of the web!
+            </motion.p>
+          </motion.div>
+
+          <motion.div
+            variants={itemVariants}
+            className="space-y-6 bg-white dark:bg-zinc-900/80 p-8 rounded-2xl shadow-sm"
+          >
+            <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200">Connect</h2>
+            <div className="flex flex-col gap-4">
+              {[
+                { name: "GitHub", url: "https://github.com/Ayush-Dutt-Sharma", icon: <FaGithub className="w-5 h-5" /> },
+                { name: "Twitter", url: "https://x.com/Ayush_Dutt_", icon: <FaTwitter className="w-5 h-5" /> },
+                { name: "Telegram", url: "https://t.me/ayush_dutt_sharma", icon: <FaTelegram className="w-5 h-5" /> },
+              ].map(social => (
+                <motion.a
+                  key={social.name}
+                  href={social.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-3 px-4 py-3 bg-gray-50 dark:bg-zinc-800/50 text-gray-800 dark:text-gray-200 rounded-xl hover:bg-gray-100 dark:hover:bg-zinc-800 transition-all duration-300"
+                  whileHover={{ x: 3 }}
+                  whileTap={{ scale: 0.98 }}
+                >
+                  <span className="text-blue-600 dark:text-blue-400">{social.icon}</span>
+                  <span>{social.name}</span>
+                  <ArrowTopRightOnSquareIcon className="w-4 h-4 ml-auto" />
+                </motion.a>
+              ))}
+            </div>
+          </motion.div>
+        </div>
+
+        <motion.div variants={itemVariants} className="mt-6 bg-white dark:bg-zinc-900/80 p-8 rounded-2xl shadow-sm">
+          <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Skills</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+            {skills.map((skill, index) => (
+              <div key={skill.name} className="space-y-2">
+                <div className="flex justify-between text-sm">
+                  <span className="font-medium text-gray-700 dark:text-gray-300">{skill.name}</span>
+                  <span className="text-gray-500 dark:text-gray-400">{skill.level}%</span>
+                </div>
+                <motion.div
+                  className="h-1.5 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ delay: 0.7 + index * 0.1 }}
+                >
+                  <motion.div
+                    className="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full"
+                    initial={{ width: 0 }}
+                    animate={{ width: `${skill.level}%` }}
+                    transition={{ delay: 0.8 + index * 0.1, duration: 1, ease: "easeOut" }}
+                  />
+                </motion.div>
+              </div>
+            ))}
+          </div>
+        </motion.div>
+      </motion.main>
+    </div>
+  );
+};
+
+function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
path: packages/nextjs/app/builders/0xB032Af0F37E29a7b4C1FcBA7051A322460931dD8/page.tsx
user: login: melanke
body: I miss shadcn too 😅
created_at: 2025-04-17T14:04:35Z
author_association: COLLABORATOR
path: yarn.lock
user: login: melanke
body: There are a lot of changes here unrelated to the dependencies you’ve added. Please try resetting this file to its state before your changes and installing the dependencies again.
created_at: 2025-04-17T14:08:32Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,249 @@
+"use client";
+
+import Image from "next/image";
+import { ClassValue, clsx } from "clsx";
+import { motion } from "framer-motion";
+import { NextPage } from "next";
+import { toast } from "react-hot-toast";
+import { FaGithub, FaTelegram, FaTwitter } from "react-icons/fa";
+import { twMerge } from "tailwind-merge";
+import { ChatBubbleLeftRightIcon, CodeBracketIcon, GlobeAltIcon } from "@heroicons/react/24/outline";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
+import { Address } from "~~/components/scaffold-eth";
+
+const AyushDuttSharmaProfilePage: NextPage = () => {
+  const copyAddress = () => {
+    navigator.clipboard.writeText("0xB032Af0F37E29a7b4C1FcBA7051A322460931dD8");
+    toast.success("Address copied to clipboard!", {
+      icon: "📋",
+    });
+  };
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: 0.5,
+      },
+    },
+  };
+
+  const skills = [
+    { name: "Ethereum", level: 90 },
+    { name: "Solidity", level: 85 },
+    { name: "Typescript", level: 95 },
+    { name: "Smart Contracts", level: 88 },
+  ];
+
+  return (
+    <div className="flex justify-center items-center min-h-screen px-4 py-12 bg-gray-50 dark:bg-gray-900">
+      <motion.main initial="hidden" animate="visible" variants={containerVariants} className="w-full max-w-4xl">
+        <BackgroundGradient
+          containerClassName="w-full mb-8"
+          className="rounded-3xl p-1 sm:p-2 bg-white dark:bg-zinc-900/80 backdrop-blur-sm"
+        >
+          <div className="px-6 py-8 sm:p-10 rounded-2xl bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm">
+            <motion.div variants={itemVariants} className="flex flex-col sm:flex-row items-center sm:items-start gap-8">
+              <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className="relative flex-shrink-0">
+                <Image
+                  src={`/ayush_dutt_sharma_profile.jpeg`}
+                  alt="Profile Avatar"
+                  width={160}
+                  height={160}
+                  className="object-cover rounded-full border-2 border-transparent shadow-xl hover:shadow-blue-300/30 dark:hover:shadow-blue-400/20 transition-all duration-300"
+                />
+              </motion.div>
+
+              <div className="text-center sm:text-left space-y-4 flex-1">
+                <motion.h1
+                  variants={itemVariants}
+                  className="text-4xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400 bg-clip-text text-transparent"
+                >
+                  Ayush Dutt Sharma
+                </motion.h1>
+
+                <motion.div variants={itemVariants} className="flex flex-wrap gap-2 justify-center sm:justify-start">
+                  <span className="px-3 py-1 bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full text-xs font-medium flex items-center">
+                    <CodeBracketIcon className="w-3 h-3 mr-1" /> Builder
+                  </span>
+                  <span className="px-3 py-1 bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 rounded-full text-xs font-medium flex items-center">
+                    <GlobeAltIcon className="w-3 h-3 mr-1" /> Smart Contract Wizard
+                  </span>
+                  <span className="px-3 py-1 bg-orange-50 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 rounded-full text-xs font-medium flex items-center">
+                    <ChatBubbleLeftRightIcon className="w-3 h-3 mr-1" /> Typescript
+                  </span>
+                </motion.div>
+
+                <motion.div
+                  variants={itemVariants}
+                  onClick={copyAddress}
+                  className="inline-flex items-center space-x-2 mt-2 text-sm text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 px-3 py-1 rounded-full cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-300"
+                >
+                  <Address address="0xB032Af0F37E29a7b4C1FcBA7051A322460931dD8" />
+                </motion.div>
+              </div>
+            </motion.div>
+          </div>
+        </BackgroundGradient>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <motion.div
+            variants={itemVariants}
+            className="md:col-span-2 space-y-4 bg-white dark:bg-zinc-900/80 p-8 rounded-2xl shadow-sm"
+          >
+            <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">About</h2>
+            <motion.p variants={itemVariants} className="leading-relaxed text-gray-700 dark:text-gray-300">
+              I&apos;m a Web2 developer with 5 years of experience building sleek, scalable digital experiences.
+              Recently, my curiosity and passion for decentralization have pulled me into the Web3 world.
+            </motion.p>
+            <motion.p variants={itemVariants} className="leading-relaxed text-gray-700 dark:text-gray-300">
+              I&apos;m diving deep into blockchain, smart contracts, and creating open, user-friendly systems. I&apos;m
+              thrilled to connect, collaborate, and help shape the future of the web!
+            </motion.p>
+          </motion.div>
+
+          <motion.div
+            variants={itemVariants}
+            className="space-y-6 bg-white dark:bg-zinc-900/80 p-8 rounded-2xl shadow-sm"
+          >
+            <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200">Connect</h2>
+            <div className="flex flex-col gap-4">
+              {[
+                { name: "GitHub", url: "https://github.com/Ayush-Dutt-Sharma", icon: <FaGithub className="w-5 h-5" /> },
+                { name: "Twitter", url: "https://x.com/Ayush_Dutt_", icon: <FaTwitter className="w-5 h-5" /> },
+                { name: "Telegram", url: "https://t.me/ayush_dutt_sharma", icon: <FaTelegram className="w-5 h-5" /> },
+              ].map(social => (
+                <motion.a
+                  key={social.name}
+                  href={social.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-3 px-4 py-3 bg-gray-50 dark:bg-zinc-800/50 text-gray-800 dark:text-gray-200 rounded-xl hover:bg-gray-100 dark:hover:bg-zinc-800 transition-all duration-300"
+                  whileHover={{ x: 3 }}
+                  whileTap={{ scale: 0.98 }}
+                >
+                  <span className="text-blue-600 dark:text-blue-400">{social.icon}</span>
+                  <span>{social.name}</span>
+                  <ArrowTopRightOnSquareIcon className="w-4 h-4 ml-auto" />
+                </motion.a>
+              ))}
+            </div>
+          </motion.div>
+        </div>
+
+        <motion.div variants={itemVariants} className="mt-6 bg-white dark:bg-zinc-900/80 p-8 rounded-2xl shadow-sm">
+          <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Skills</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+            {skills.map((skill, index) => (
+              <div key={skill.name} className="space-y-2">
+                <div className="flex justify-between text-sm">
+                  <span className="font-medium text-gray-700 dark:text-gray-300">{skill.name}</span>
+                  <span className="text-gray-500 dark:text-gray-400">{skill.level}%</span>
+                </div>
+                <motion.div
+                  className="h-1.5 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ delay: 0.7 + index * 0.1 }}
+                >
+                  <motion.div
+                    className="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full"
+                    initial={{ width: 0 }}
+                    animate={{ width: `${skill.level}%` }}
+                    transition={{ delay: 0.8 + index * 0.1, duration: 1, ease: "easeOut" }}
+                  />
+                </motion.div>
+              </div>
+            ))}
+          </div>
+        </motion.div>
+      </motion.main>
+    </div>
+  );
+};
+
+function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
path: packages/nextjs/app/builders/0xB032Af0F37E29a7b4C1FcBA7051A322460931dD8/page.tsx
user: login: Ayush-Dutt-Sharma
body: The pain is real 😂
created_at: 2025-04-18T03:16:34Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,249 @@
+"use client";
+
+import Image from "next/image";
+import { ClassValue, clsx } from "clsx";
+import { motion } from "framer-motion";
+import { NextPage } from "next";
+import { toast } from "react-hot-toast";
+import { FaGithub, FaTelegram, FaTwitter } from "react-icons/fa";
+import { twMerge } from "tailwind-merge";
+import { ChatBubbleLeftRightIcon, CodeBracketIcon, GlobeAltIcon } from "@heroicons/react/24/outline";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
+import { Address } from "~~/components/scaffold-eth";
+
+const AyushDuttSharmaProfilePage: NextPage = () => {
+  const copyAddress = () => {
+    navigator.clipboard.writeText("0xB032Af0F37E29a7b4C1FcBA7051A322460931dD8");
+    toast.success("Address copied to clipboard!", {
+      icon: "📋",
+    });
+  };
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: 0.5,
+      },
+    },
+  };
+
+  const skills = [
+    { name: "Ethereum", level: 90 },
+    { name: "Solidity", level: 85 },
+    { name: "Typescript", level: 95 },
+    { name: "Smart Contracts", level: 88 },
+  ];
+
+  return (
+    <div className="flex justify-center items-center min-h-screen px-4 py-12 bg-gray-50 dark:bg-gray-900">
+      <motion.main initial="hidden" animate="visible" variants={containerVariants} className="w-full max-w-4xl">
+        <BackgroundGradient
+          containerClassName="w-full mb-8"
+          className="rounded-3xl p-1 sm:p-2 bg-white dark:bg-zinc-900/80 backdrop-blur-sm"
+        >
+          <div className="px-6 py-8 sm:p-10 rounded-2xl bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm">
+            <motion.div variants={itemVariants} className="flex flex-col sm:flex-row items-center sm:items-start gap-8">
+              <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className="relative flex-shrink-0">
+                <Image
+                  src={`/ayush_dutt_sharma_profile.jpeg`}
+                  alt="Profile Avatar"
+                  width={160}
+                  height={160}
+                  className="object-cover rounded-full border-2 border-transparent shadow-xl hover:shadow-blue-300/30 dark:hover:shadow-blue-400/20 transition-all duration-300"
+                />
+              </motion.div>
+
+              <div className="text-center sm:text-left space-y-4 flex-1">
+                <motion.h1
+                  variants={itemVariants}
+                  className="text-4xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400 bg-clip-text text-transparent"
+                >
+                  Ayush Dutt Sharma
+                </motion.h1>
+
+                <motion.div variants={itemVariants} className="flex flex-wrap gap-2 justify-center sm:justify-start">
+                  <span className="px-3 py-1 bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full text-xs font-medium flex items-center">
+                    <CodeBracketIcon className="w-3 h-3 mr-1" /> Builder
+                  </span>
+                  <span className="px-3 py-1 bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 rounded-full text-xs font-medium flex items-center">
+                    <GlobeAltIcon className="w-3 h-3 mr-1" /> Smart Contract Wizard
+                  </span>
+                  <span className="px-3 py-1 bg-orange-50 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 rounded-full text-xs font-medium flex items-center">
+                    <ChatBubbleLeftRightIcon className="w-3 h-3 mr-1" /> Typescript
+                  </span>
+                </motion.div>
+
+                <motion.div
+                  variants={itemVariants}
+                  onClick={copyAddress}
path: packages/nextjs/app/builders/0xB032Af0F37E29a7b4C1FcBA7051A322460931dD8/page.tsx
user: login: Ayush-Dutt-Sharma
body: Done ser 
created_at: 2025-04-18T03:17:00Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,249 @@
+"use client";
+
+import Image from "next/image";
+import { ClassValue, clsx } from "clsx";
+import { motion } from "framer-motion";
+import { NextPage } from "next";
+import { toast } from "react-hot-toast";
+import { FaGithub, FaTelegram, FaTwitter } from "react-icons/fa";
+import { twMerge } from "tailwind-merge";
+import { ChatBubbleLeftRightIcon, CodeBracketIcon, GlobeAltIcon } from "@heroicons/react/24/outline";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
+import { Address } from "~~/components/scaffold-eth";
+
+const AyushDuttSharmaProfilePage: NextPage = () => {
+  const copyAddress = () => {
+    navigator.clipboard.writeText("0xB032Af0F37E29a7b4C1FcBA7051A322460931dD8");
+    toast.success("Address copied to clipboard!", {
+      icon: "📋",
+    });
+  };
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: 0.5,
+      },
+    },
+  };
+
+  const skills = [
+    { name: "Ethereum", level: 90 },
+    { name: "Solidity", level: 85 },
+    { name: "Typescript", level: 95 },
+    { name: "Smart Contracts", level: 88 },
+  ];
path: packages/nextjs/app/builders/0xB032Af0F37E29a7b4C1FcBA7051A322460931dD8/page.tsx
user: login: Ayush-Dutt-Sharma
body: Fixed ser
created_at: 2025-04-18T03:17:25Z
author_association: CONTRIBUTOR
path: yarn.lock
user: login: Ayush-Dutt-Sharma
body: My fault, sorry missed that part.
Fixed now
created_at: 2025-04-18T03:18:10Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,233 @@
+"use client";
path: packages/nextjs/app/builders/0xB032Af0F37E29a7b4C1FcBA7051A322460931dD8/page.tsx
user: login: melanke
body: We don't need this restriction since your page doesn't use any client-only mechanism.
Please remove this line so we can improve the app's performance by pre-rendering the page during the compile process.
created_at: 2025-04-18T13:20:45Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,233 @@
+"use client";
path: packages/nextjs/app/builders/0xB032Af0F37E29a7b4C1FcBA7051A322460931dD8/page.tsx
user: login: Ayush-Dutt-Sharma
body: framer-motion needs it, I tried this without it but it breaks 
![Screenshot 2025-04-18 at 7 08 21 PM](https://github.com/user-attachments/assets/2f3dc9b3-a54e-4212-80e5-69b8acd5a2cf)

created_at: 2025-04-18T13:38:47Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,233 @@
+"use client";
path: packages/nextjs/app/builders/0xB032Af0F37E29a7b4C1FcBA7051A322460931dD8/page.tsx
user: login: Ayush-Dutt-Sharma
body: i can make a component for framer-motion part. Should i do that?
created_at: 2025-04-18T13:46:05Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,233 @@
+"use client";
path: packages/nextjs/app/builders/0xB032Af0F37E29a7b4C1FcBA7051A322460931dD8/page.tsx
user: login: phipsae
body: Indeed you need it, no worries about creating a component. 
created_at: 2025-04-19T18:12:41Z
author_association: CONTRIBUTOR
path: packages/nextjs/app/builders/0xB032Af0F37E29a7b4C1FcBA7051A322460931dD8/page.tsx
user: login: phipsae
body: It shows me the following warning in the console, pls fix it. 
<img width="427" alt="Screenshot 2025-04-19 at 14 14 11" src="https://github.com/user-attachments/assets/788c0d9b-586c-4f6f-a8bd-a5dd9399855e" />

created_at: 2025-04-19T18:14:38Z
author_association: CONTRIBUTOR
path: packages/nextjs/app/builders/0xB032Af0F37E29a7b4C1FcBA7051A322460931dD8/page.tsx
user: login: Ayush-Dutt-Sharma
body: Done sir, added "priority" in Image element.
created_at: 2025-04-20T15:54:58Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,233 @@
+"use client";
path: packages/nextjs/app/builders/0xB032Af0F37E29a7b4C1FcBA7051A322460931dD8/page.tsx
user: login: Ayush-Dutt-Sharma
body: @phipsae Moved Framer Motion in new file "MotionElements".
created_at: 2025-04-20T15:55:36Z
author_association: CONTRIBUTOR

PR comments:
user: login: vercel[bot]
created_at: 2025-04-17T04:12:02Z
body: [vc]: #iZr3wHG4o109zUgc2jW0zOiyiQeGXKyS8R4nyBEJtM0=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJiYXRjaDE1LmJ1aWRsZ3VpZGwuY29tIiwicm9vdERpcmVjdG9yeSI6InBhY2thZ2VzL25leHRqcyIsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9idWlkbGd1aWRsZGFvL2JhdGNoMTUuYnVpZGxndWlkbC5jb20vcHZBQXZ2VEI2RlcxY3lRNlFKdFByR2k0bUV1RyIsInByZXZpZXdVcmwiOiJiYXRjaDE1YnVpZGxndWlkbGNvbS1naXQtZm9yay1heXVzaC1kdXR0LXMtNDAzZjczLWJ1aWRsZ3VpZGxkYW8udmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJiYXRjaDE1YnVpZGxndWlkbGNvbS1naXQtZm9yay1heXVzaC1kdXR0LXMtNDAzZjczLWJ1aWRsZ3VpZGxkYW8udmVyY2VsLmFwcCJ9fV19
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **batch15.buidlguidl.com** | ✅ Ready ([Inspect](https://vercel.com/buidlguidldao/batch15.buidlguidl.com/pvAAvvTB6FW1cyQ6QJtPrGi4mEuG)) | [Visit Preview](https://batch15buidlguidlcom-git-fork-ayush-dutt-s-403f73-buidlguidldao.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/batch15buidlguidlcom-git-fork-ayush-dutt-s-403f73-buidlguidldao.vercel.app?via=pr-comment-feedback-link) | Apr 21, 2025 2:39pm |


author_association: NONE
user: login: phipsae
created_at: 2025-04-21T14:15:37Z
body: Thanks a lot! Very nice page :) Lets merge
author_association: CONTRIBUTOR