From 9fe14efc17b0954c1e318f44fff1711b41a90bf8 Mon Sep 17 00:00:00 2001
From: Vedant Joshi <vedantjoshi@192.168.1.11>
Date: Sun, 24 Nov 2024 01:22:54 +0530
Subject: [PATCH 1/2] 2. Personal Page

---
 .../page.tsx                                  | 118 ++++++++++++++++++
 1 file changed, 118 insertions(+)
 create mode 100644 packages/nextjs/app/builders/0xc4Ad6218B68514161fFeC5dA54E1D30462C27CCD/page.tsx

diff --git a/packages/nextjs/app/builders/0xc4Ad6218B68514161fFeC5dA54E1D30462C27CCD/page.tsx b/packages/nextjs/app/builders/0xc4Ad6218B68514161fFeC5dA54E1D30462C27CCD/page.tsx
new file mode 100644
index 0000000..36c737b
--- /dev/null
+++ b/packages/nextjs/app/builders/0xc4Ad6218B68514161fFeC5dA54E1D30462C27CCD/page.tsx
@@ -0,0 +1,118 @@
+import { IconType } from "react-icons";
+import { FaEnvelope, FaGithub, FaLinkedin, FaTwitter } from "react-icons/fa";
+
+const ProfilePage = () => {
+  interface StyledIconProps extends React.HTMLAttributes<HTMLSpanElement> {
+    icon: IconType;
+    size?: number;
+    color?: string;
+  }
+
+  interface SocialLink {
+    href: string;
+    icon: IconType;
+    lightHoverColor: string;
+    darkHoverColor: string;
+    isEmail?: boolean;
+  }
+
+  const socialLinks: SocialLink[] = [
+    {
+      href: "https://github.com/Vedant-05",
+      icon: FaGithub,
+      lightHoverColor: "hover:text-gray-900",
+      darkHoverColor: "dark:hover:text-gray-200",
+    },
+    {
+      href: "https://x.com/DecodingDegen",
+      icon: FaTwitter,
+      lightHoverColor: "hover:text-blue-400",
+      darkHoverColor: "dark:hover:text-blue-300",
+    },
+    {
+      href: "https://www.linkedin.com/in/vedant-joshi-962a23191",
+      icon: FaLinkedin,
+      lightHoverColor: "hover:text-blue-600",
+      darkHoverColor: "dark:hover:text-blue-400",
+    },
+    {
+      href: "mailto:itsmevedantjoshi@gmail.com",
+      icon: FaEnvelope,
+      lightHoverColor: "hover:text-red-500",
+      darkHoverColor: "dark:hover:text-red-400",
+      isEmail: true,
+    },
+  ];
+
+  const StyledIcon: React.FC<StyledIconProps> = ({ icon: Icon, className, size, color, ...props }) => {
+    return (
+      <span className={`inline-block ${className}`} {...props}>
+        <Icon size={size} color={color} />
+      </span>
+    );
+  };
+
+  return (
+    <div className="min-h-screen bg-slate-900 text-white py-16 px-4">
+      <div className="max-w-3xl mx-auto">
+        {/* Hero Section */}
+        <div className="text-center mb-16">
+          <div className="relative inline-block mb-8">
+            <img
+              src="https://avatars.githubusercontent.com/u/71647648?v=4"
+              alt="Profile"
+              className="rounded-full w-40 h-40 border-4 border-purple-500"
+            />
+          </div>
+
+          <h1 className="text-5xl font-bold mb-4">Hi, I&apos;m Vedant!</h1>
+          <div className="bg-gradient-to-r from-purple-500 to-pink-500 h-1 w-24 mx-auto mb-6"></div>
+          <p className="text-xl text-gray-300 max-w-3xl mx-auto">
+            Finding my way back to Web3. Rooted in competitive programming (C++), growing in blockchain (Solidity).
+            Learning, building, and sharing the journey 🛠️
+          </p>
+        </div>
+
+        {/* Main Content */}
+        <div className="space-y-16">
+          {/* About Section */}
+          <section className="space-y-6">
+            <h2 className="text-3xl font-bold text-purple-400">About Me</h2>
+            <p className="text-gray-300 leading-relaxed">
+              A Full Stack Engineer with a deep fascination for DeFi and blockchain technology. Having contributed to
+              notable DeFi protocols like Instadapp and Router Protocol, I&apos;ve gained hands-on experience in
+              building decentralized solutions. While my journey includes significant web2 development, my passion lies
+              in web3 security and community engagement. Currently focused on bridging traditional finance with DeFi
+              innovations, while pursuing my path toward becoming a smart contract auditor and developer advocate. I
+              believe in making blockchain technology more accessible and secure for everyone.
+            </p>
+          </section>
+
+          {/* Connect Section */}
+          <section className="text-center space-y-6">
+            <h2 className="text-3xl font-bold text-purple-400">Let&apos;s Connect</h2>
+            <div className="flex justify-center gap-6">
+              {socialLinks.map(({ href, icon: Icon, lightHoverColor, darkHoverColor }, index) => (
+                <a
+                  key={index}
+                  href={href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={`text-gray-300 hover:text-purple-400 transition-colors cursor-pointer`}
+                >
+                  <StyledIcon
+                    icon={Icon}
+                    size={24}
+                    className={`text-gray-600 dark:text-gray-400 ${lightHoverColor} ${darkHoverColor}`}
+                  />
+                </a>
+              ))}
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProfilePage;

From e41d5074657e85a740e3ac854ceb94385501be0d Mon Sep 17 00:00:00 2001
From: Vedant Joshi <vedantjoshi@192.168.1.11>
Date: Sun, 24 Nov 2024 09:26:37 +0530
Subject: [PATCH 2/2] Adviced Reviews Implemented

---
 .../page.tsx                                  | 152 ++++++++++--------
 1 file changed, 82 insertions(+), 70 deletions(-)

diff --git a/packages/nextjs/app/builders/0xc4Ad6218B68514161fFeC5dA54E1D30462C27CCD/page.tsx b/packages/nextjs/app/builders/0xc4Ad6218B68514161fFeC5dA54E1D30462C27CCD/page.tsx
index 36c737b..2bc49a9 100644
--- a/packages/nextjs/app/builders/0xc4Ad6218B68514161fFeC5dA54E1D30462C27CCD/page.tsx
+++ b/packages/nextjs/app/builders/0xc4Ad6218B68514161fFeC5dA54E1D30462C27CCD/page.tsx
@@ -1,59 +1,61 @@
+import { type NextPage } from "next";
 import { IconType } from "react-icons";
 import { FaEnvelope, FaGithub, FaLinkedin, FaTwitter } from "react-icons/fa";
 
-const ProfilePage = () => {
-  interface StyledIconProps extends React.HTMLAttributes<HTMLSpanElement> {
-    icon: IconType;
-    size?: number;
-    color?: string;
-  }
+// Interfaces moved outside the component
+interface StyledIconProps extends React.HTMLAttributes<HTMLSpanElement> {
+  icon: IconType;
+  size?: number;
+  color?: string;
+}
 
-  interface SocialLink {
-    href: string;
-    icon: IconType;
-    lightHoverColor: string;
-    darkHoverColor: string;
-    isEmail?: boolean;
-  }
+interface SocialLink {
+  href: string;
+  icon: IconType;
+  lightHoverColor: string;
+  darkHoverColor: string;
+  isEmail?: boolean;
+}
 
-  const socialLinks: SocialLink[] = [
-    {
-      href: "https://github.com/Vedant-05",
-      icon: FaGithub,
-      lightHoverColor: "hover:text-gray-900",
-      darkHoverColor: "dark:hover:text-gray-200",
-    },
-    {
-      href: "https://x.com/DecodingDegen",
-      icon: FaTwitter,
-      lightHoverColor: "hover:text-blue-400",
-      darkHoverColor: "dark:hover:text-blue-300",
-    },
-    {
-      href: "https://www.linkedin.com/in/vedant-joshi-962a23191",
-      icon: FaLinkedin,
-      lightHoverColor: "hover:text-blue-600",
-      darkHoverColor: "dark:hover:text-blue-400",
-    },
-    {
-      href: "mailto:itsmevedantjoshi@gmail.com",
-      icon: FaEnvelope,
-      lightHoverColor: "hover:text-red-500",
-      darkHoverColor: "dark:hover:text-red-400",
-      isEmail: true,
-    },
-  ];
+// Reusable styled icon component
+const StyledIcon: React.FC<StyledIconProps> = ({ icon: Icon, className, size, color, ...props }) => (
+  <span className={`inline-block ${className}`} {...props}>
+    <Icon size={size} color={color} />
+  </span>
+);
 
-  const StyledIcon: React.FC<StyledIconProps> = ({ icon: Icon, className, size, color, ...props }) => {
-    return (
-      <span className={`inline-block ${className}`} {...props}>
-        <Icon size={size} color={color} />
-      </span>
-    );
-  };
+// Social links data
+const socialLinks: SocialLink[] = [
+  {
+    href: "https://github.com/Vedant-05",
+    icon: FaGithub,
+    lightHoverColor: "hover:text-gray-900",
+    darkHoverColor: "dark:hover:text-gray-200",
+  },
+  {
+    href: "https://x.com/DecodingDegen",
+    icon: FaTwitter,
+    lightHoverColor: "hover:text-blue-400",
+    darkHoverColor: "dark:hover:text-blue-300",
+  },
+  {
+    href: "https://www.linkedin.com/in/vedant-joshi-962a23191",
+    icon: FaLinkedin,
+    lightHoverColor: "hover:text-blue-600",
+    darkHoverColor: "dark:hover:text-blue-400",
+  },
+  {
+    href: "mailto:itsmevedantjoshi@gmail.com",
+    icon: FaEnvelope,
+    lightHoverColor: "hover:text-red-500",
+    darkHoverColor: "dark:hover:text-red-400",
+    isEmail: true,
+  },
+];
 
+const DeveloperProfilePage: NextPage = () => {
   return (
-    <div className="min-h-screen bg-slate-900 text-white py-16 px-4">
+    <div className="min-h-screen bg-gradient-to-b from-white to-gray-100 dark:from-gray-900 dark:to-gray-800 text-gray-900 dark:text-white py-16 px-4">
       <div className="max-w-3xl mx-auto">
         {/* Hero Section */}
         <div className="text-center mb-16">
@@ -61,13 +63,15 @@ const ProfilePage = () => {
             <img
               src="https://avatars.githubusercontent.com/u/71647648?v=4"
               alt="Profile"
-              className="rounded-full w-40 h-40 border-4 border-purple-500"
+              className="rounded-full w-40 h-40 border-4 border-purple-500 shadow-xl"
             />
           </div>
 
-          <h1 className="text-5xl font-bold mb-4">Hi, I&apos;m Vedant!</h1>
+          <h1 className="text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600 dark:from-purple-400 dark:to-pink-400">
+            Hi, I&apos;m Vedant!
+          </h1>
           <div className="bg-gradient-to-r from-purple-500 to-pink-500 h-1 w-24 mx-auto mb-6"></div>
-          <p className="text-xl text-gray-300 max-w-3xl mx-auto">
+          <p className="text-xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
             Finding my way back to Web3. Rooted in competitive programming (C++), growing in blockchain (Solidity).
             Learning, building, and sharing the journey 🛠️
           </p>
@@ -76,21 +80,33 @@ const ProfilePage = () => {
         {/* Main Content */}
         <div className="space-y-16">
           {/* About Section */}
-          <section className="space-y-6">
-            <h2 className="text-3xl font-bold text-purple-400">About Me</h2>
-            <p className="text-gray-300 leading-relaxed">
-              A Full Stack Engineer with a deep fascination for DeFi and blockchain technology. Having contributed to
-              notable DeFi protocols like Instadapp and Router Protocol, I&apos;ve gained hands-on experience in
-              building decentralized solutions. While my journey includes significant web2 development, my passion lies
-              in web3 security and community engagement. Currently focused on bridging traditional finance with DeFi
-              innovations, while pursuing my path toward becoming a smart contract auditor and developer advocate. I
-              believe in making blockchain technology more accessible and secure for everyone.
-            </p>
+          <section className="space-y-6 bg-white dark:bg-gray-800/50 rounded-xl p-8 shadow-lg">
+            <h2 className="text-3xl font-bold text-purple-600 dark:text-purple-400">About Me</h2>
+            <div className="space-y-4 text-gray-700 dark:text-gray-300 leading-relaxed">
+              <p className="border-l-4 border-purple-500 pl-4 bg-purple-50 dark:bg-purple-900/20 py-2">
+                A Full Stack Engineer with a deep fascination for DeFi and blockchain technology.
+              </p>
+              <p>
+                Having contributed to notable DeFi protocols like{" "}
+                <span className="font-semibold text-purple-600 dark:text-purple-400">Instadapp</span> and
+                <span className="font-semibold text-purple-600 dark:text-purple-400"> Router Protocol</span>, I&apos;ve
+                gained hands-on experience in building decentralized solutions.
+              </p>
+              <p className="border-l-4 border-pink-500 pl-4 bg-pink-50 dark:bg-pink-900/20 py-2">
+                While my journey includes significant web2 development, my passion lies in web3 security and community
+                engagement.
+              </p>
+              <p>
+                Currently focused on bridging traditional finance with DeFi innovations, while pursuing my path toward
+                becoming a smart contract auditor and developer advocate. I believe in making blockchain technology more
+                accessible and secure for everyone.
+              </p>
+            </div>
           </section>
 
           {/* Connect Section */}
-          <section className="text-center space-y-6">
-            <h2 className="text-3xl font-bold text-purple-400">Let&apos;s Connect</h2>
+          <section className="text-center space-y-6 bg-white dark:bg-gray-800/50 rounded-xl p-8 shadow-lg">
+            <h2 className="text-3xl font-bold text-purple-600 dark:text-purple-400">Let&apos;s Connect</h2>
             <div className="flex justify-center gap-6">
               {socialLinks.map(({ href, icon: Icon, lightHoverColor, darkHoverColor }, index) => (
                 <a
@@ -98,13 +114,9 @@ const ProfilePage = () => {
                   href={href}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className={`text-gray-300 hover:text-purple-400 transition-colors cursor-pointer`}
+                  className={`text-gray-600 dark:text-gray-400 transition-all duration-300 transform hover:scale-110 ${lightHoverColor} ${darkHoverColor}`}
                 >
-                  <StyledIcon
-                    icon={Icon}
-                    size={24}
-                    className={`text-gray-600 dark:text-gray-400 ${lightHoverColor} ${darkHoverColor}`}
-                  />
+                  <StyledIcon icon={Icon} size={24} className="transition-colors" />
                 </a>
               ))}
             </div>
@@ -115,4 +127,4 @@ const ProfilePage = () => {
   );
 };
 
-export default ProfilePage;
+export default DeveloperProfilePage;