Merge pull request #27 from emarc99/9-personal-page

9 personal page

packages/nextjs/app/builders/0x11Bc455A4f64F800f9Ceb37614f02b213f98591d/backgroundPattern.tsx

@@ -0,0 +1,5 @@
+export const backgroundPattern = {
+  backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ff4b81' fill-opacity='0.4'%3E%3Cpath d='M24.37 16c.2.65.39 1.32.54 2H21.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06A5 5 0 0 1-17.45 28v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H-20a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM-13.82 27l16.37 4.91L18.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H-13.1z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
+  backgroundSize: "277px",
+  backgroundRepeat: "round",
+};

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

@@ -0,0 +1,82 @@
+import Image from "next/image";
+import { backgroundPattern } from "./backgroundPattern";
+import { NextPage } from "next";
+import { FaDiscord, FaGithub, FaLinkedin, FaTelegram } from "react-icons/fa";
+import { FaXTwitter } from "react-icons/fa6";
+import { Address } from "~~/components/scaffold-eth";
+
+const socialLinks = [
+  {
+    href: "https://github.com/emarc99",
+    label: "Github",
+    icon: <FaGithub size={24} />,
+  },
+  {
+    href: "https://x.com/emmanex94",
+    label: "Twitter",
+    icon: <FaXTwitter size={24} />,
+  },
+  {
+    href: "https://www.linkedin.com/in/emmanuel-aroso-002783169/",
+    label: "LinkedIn",
+    icon: <FaLinkedin size={24} />,
+  },
+  {
+    href: "https://discordapp.com/users/emarc99", // Can be your Discord username or server invite
+    label: "Discord",
+    icon: <FaDiscord size={24} />,
+  },
+  {
+    href: "https://t.me/emarc99",
+    label: "Telegram",
+    icon: <FaTelegram size={24} />,
+  },
+];
+
+const EmarcProfile: NextPage = () => {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen w-full" style={backgroundPattern}>
+      <div className="card w-128 bg-[#EE1530]/80 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
+        <figure className="px-10 pt-10">
+          <div className="avatar">
+            <div className="w-24 rounded-full mb-5 transition-transform duration-300 hover:scale-105">
+              <Image
+                src="/emarc-pixels.jpg"
+                width={100}
+                height={100}
+                alt="emarc's avatar"
+                className="transition-transform duration-300"
+              />
+            </div>
+          </div>
+        </figure>
+        <div className="card-body items-center text-center">
+          <h2 className="card-title text-2xl font-bold  bg-clip-text ">Aroso Emmanuel</h2>
+          <p className="text-sm mt-2 leading-relaxed max-w-md opacity-90 hover:opacity-100 transition-opacity duration-300">
+            A researcher with computer engineering background, currently exploring the web3 space for new research
+            opportunities and contributing to interesting projects.
+          </p>
+          <h2 className="fmt-2 leading-relaxed max-w-md opacity-90 hover:opacity-100 transition-opacity duration-300">
+            <Address address="0x11Bc455A4f64F800f9Ceb37614f02b213f98591d" />
+          </h2>
+          <div className="card-actions justify-center mt-6 space-x-4">
+            {socialLinks.map(link => (
+              <a
+                key={link.label}
+                href={link.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="btn btn-ghost btn-square hover:scale-110 transition-all duration-300 hover:bg-base-200"
+                aria-label={link.label}
+              >
+                {link.icon}
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EmarcProfile;