Merge pull request #17 from arjanjohan/arjanjohan

Issue 2: arjanjohan personal page

packages/nextjs/app/builders/0xD0CA897A8A50502802Df62A712Da92FA26Be9bD5/_components/Bio.tsx

@@ -0,0 +1,55 @@
+import { FaGithub, FaTelegramPlane } from "react-icons/fa";
+import { FaXTwitter } from "react-icons/fa6";
+import { TbBuildingCastle } from "react-icons/tb";
+import { Address, Balance } from "~~/components/scaffold-eth";
+
+export const Bio = ({ address }: { address: string }) => {
+  return (
+    <div className="flex flex-col space-y-4">
+      <div className="flex justify-between items-start">
+        <div>
+          <Address address={address} format="long" />
+          <Balance address={address} className="text" />
+        </div>
+
+        <div className="flex space-x-4">
+          <a href="https://twitter.com/arjanjohan" target="_blank" rel="noopener noreferrer" aria-label="Twitter">
+            <FaXTwitter size={24} />
+          </a>
+          <a href="https://github.com/arjanjohan" target="_blank" rel="noopener noreferrer" aria-label="GitHub">
+            <FaGithub size={24} />
+          </a>
+          <a href="https://t.me/arjanjohan" target="_blank" rel="noopener noreferrer" aria-label="Telegram">
+            <FaTelegramPlane size={24} />
+          </a>
+          <a
+            href="https://app.buidlguidl.com/builders/0xD0CA897A8A50502802Df62A712Da92FA26Be9bD5"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="BuidlGuidl"
+          >
+            <TbBuildingCastle size={24} />
+          </a>
+        </div>
+      </div>
+
+      <div>
+        <p>gm</p>
+        <p className="mt-4">
+          i&apos;m arjanjohan, a web3 developer and builder. i&apos;m always doing some hackathon, and love to team up
+          with new people and build cool things.
+        </p>
+        <p className="mt-4">
+          currently i&apos;m participating in buidlguild batch #9, and i look forward to meeting everyone of you and
+          seeing what we can build together.
+        </p>
+        <b>my next hackathons:</b>
+        <ul className="list-disc list-inside">
+          <li>Aptos Code Collision</li>
+          <li>Solana Radar Hackathon</li>
+          <li>ETHGlobal Bangkok</li>
+        </ul>
+      </div>
+    </div>
+  );
+};

packages/nextjs/app/builders/0xD0CA897A8A50502802Df62A712Da92FA26Be9bD5/_components/Buidls.tsx

@@ -0,0 +1,51 @@
+// Buidl data array
+const buidlsData = [
+  {
+    name: "Scroll Fighter",
+    image: "https://github.com/arjanjohan/scroll-fighter/raw/main/logo.png",
+    url: "https://app.buidlguidl.com/build/14yLHhMarnyyIDiayAKo",
+  },
+  {
+    name: "Scaffold Move",
+    image: "https://github.com/arjanjohan/scaffold-move/raw/main/assets/logo_small.png",
+    url: "https://app.buidlguidl.com/build/9uXW8LEWrWXzXajz84PD",
+  },
+  {
+    name: "Oh Snap!",
+    image: "https://github.com/chain-notes-brussels/chain-notes-snap/raw/main/assets/logo.png",
+    url: "https://app.buidlguidl.com/build/yHt0IhqXVk6Gff4jM3aO",
+  },
+  {
+    name: "Roman Receipts",
+    image:
+      "https://storage.googleapis.com/download/storage/v1/b/buidlguidl-v3.appspot.com/o/builds%2F459399612eaf4d2f489e3ce00.png?generation=1722954568641273&alt=media",
+    url: "https://app.buidlguidl.com/build/uafgHz8XYs3WJy7ZZoLP",
+  },
+  {
+    name: "SE2 Chainlink ",
+    image: "https://ethglobal.b-cdn.net/projects/pwkxb/screenshots/iej95/default.jpg",
+    url: "https://app.buidlguidl.com/build/Qb3o6WxbazdZthI8iEHO",
+  },
+  {
+    name: "🦥 Sloth Shaming",
+    image: "https://github.com/warsaw-hackers/Sloth-Shaming/raw/main/assets/ui.png",
+    url: "https://github.com/warsaw-hackers/Sloth-Shaming",
+  },
+];
+
+// Buidls Component
+export const Buidls = () => {
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+      {buidlsData.map((buidl, index) => (
+        <div key={index} className="bg-gray-200/50 rounded-lg p-4">
+          <a href={buidl.url} target="_blank" rel="noopener noreferrer">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img src={buidl.image} alt={buidl.name} className="rounded-lg" />
+            <p className="text-center mb-0 mt-2">{buidl.name}</p>
+          </a>
+        </div>
+      ))}
+    </div>
+  );
+};

packages/nextjs/app/builders/0xD0CA897A8A50502802Df62A712Da92FA26Be9bD5/_components/index.tsx

@@ -0,0 +1,2 @@
+export * from "./Buidls";
+export * from "./Bio";

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

@@ -0,0 +1,37 @@
+import { Bio, Buidls } from "./_components";
+import { NextPage } from "next";
+
+const myAddress = "0xD0CA897A8A50502802Df62A712Da92FA26Be9bD5";
+
+const ArjanJohanPage: NextPage = () => {
+  return (
+    <div
+      style={{
+        backgroundImage: "url('https://www.miladymaker.net/milady/2208.png')",
+      }}
+      className="flex flex-grow justify-center items-center bg-cover bg-center"
+    >
+      <div className="flex justify-center pt-10">
+        <div className="w-full max-w-screen-lg p-10">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            <div className="col-span-1 h-full">
+              <div className="bg-base-100/60 p-6 rounded-3xl shadow-lg h-full">
+                <Bio address={myAddress} />
+              </div>
+            </div>
+            <div className="col-span-1 h-full">
+              <div className="bg-base-100/50 p-6 rounded-3xl shadow-lg h-full">
+                <p>
+                  <b>some of my buidls</b>
+                </p>
+                <Buidls />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ArjanJohanPage;

packages/nextjs/package.json

@@ -30,6 +30,7 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.0",
+    "react-icons": "^5.3.0",
     "use-debounce": "^8.0.4",
     "usehooks-ts": "^2.13.0",
     "viem": "2.17.4",

yarn.lock

@@ -2282,6 +2282,7 @@ __metadata:
     react-copy-to-clipboard: ^5.1.0
     react-dom: ^18.2.0
     react-hot-toast: ^2.4.0
+    react-icons: ^5.3.0
     tailwindcss: ^3.4.3
     type-fest: ^4.6.0
     typescript: 5.5.3
@@ -12097,6 +12098,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-icons@npm:^5.3.0":
+  version: 5.3.0
+  resolution: "react-icons@npm:5.3.0"
+  peerDependencies:
+    react: "*"
+  checksum: 3aa5f50e05aafc6d31e0d995fe0d98560069aa88717b24ce8aaa082a7e7b20ca95e1e19d847ed6e52d658a5a30e15826af20d7554bf993a743edd55586db62e3
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.13.1":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"