feat: add profile page for 0xF25f95C59f4f1C4010527DAa26e7974cB37c2Ae1 (…

…#23)

Co-authored-by: Derrek <[email protected]>

packages/nextjs/app/builders/0xF25f95C59f4f1C4010527DAa26e7974cB37c2Ae1/_components/AboutMe.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import Image from "next/image";
+import myPhoto from "../_assets/photo_400x400.jpg";
+
+export const AboutMe = () => {
+  return (
+    <section className="container mx-auto pt-8">
+      <div className="flex flex-col md:flex-row justify-center items-center">
+        <div className="md:flex-shrink-0">
+          <Image src={myPhoto} alt="My Photo" className="h-48 w-48 object-cover md:w-48 rounded-full" />
+        </div>
+        <div className="p-8 pb-0 md:pb-8 space-y-4 max-w-2xl md:ml-8">
+          <h2 className="text-3xl font-bold text-center">About Me</h2>
+          <p>{`I'm a full-stack engineer 🧑‍💻 and love a good game/puzzle 🧩.`}</p>
+          <p>{`My coding expertise spans everything from Front-End dev work (Angular, React, Vue, etc.) to C# to Big Data to Security to DevOps and (most recently) Web 3.`}</p>
+          <p>{`Current focus is on ZKsync, but I'm excited to learn anything/everything about the Ethereum ecosystem 🙌!`}</p>
+        </div>
+      </div>
+    </section>
+  );
+};

packages/nextjs/app/builders/0xF25f95C59f4f1C4010527DAa26e7974cB37c2Ae1/_components/CardHover.tsx

@@ -0,0 +1,63 @@
+import { type IndraIconSkill } from "~~/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_data/indra-skills";
+
+type CardProps = {
+  Icon: IndraIconSkill;
+  name: string;
+  description: string;
+  time: string;
+};
+
+const CardContent = ({ Icon, description, name, time }: CardProps) => {
+  return (
+    <div className="grid grid-rows-[auto_1fr_auto] gap-y-2 rounded-lg relative h-full w-full py-6 px-8 z-10">
+      <div className="flex items-center text-sm">
+        <Icon className="h-5 w-5" />
+        <h3 className="ml-2 text-lg font-semibold">{name}</h3>
+      </div>
+      <p className="text-sm">{description}</p>
+      <div className="flex justify-end">
+        <span>{time}</span>
+      </div>
+    </div>
+  );
+};
+
+export const CardHoverEffect1 = (props: CardProps) => {
+  return (
+    <div className="h-full w-full group relative inline-flex items-center justify-center overflow-hidden rounded-md bg-blue-500  font-medium">
+      <span className="absolute h-full w-full  bg-secondary  transition-all duration-300 group-hover:h-0 group-hover:w-0"></span>
+      <CardContent {...props} />
+    </div>
+  );
+};
+
+export const CardHoverEffect2 = (props: CardProps) => {
+  return (
+    <div className="group relative inline-flex h-full w-full items-center justify-center overflow-hidden rounded-md bg-secondary  font-medium text-primary-content">
+      <span className="absolute h-0 w-0 bg-blue-500 transition-all duration-300 group-hover:h-full group-hover:w-full"></span>
+      <CardContent {...props} />
+    </div>
+  );
+};
+
+export const CardHoverEffect3 = (props: CardProps) => {
+  return (
+    <div className="group relative h-full w-full overflow-hidden overflow-x-hidden rounded-md bg-secondary">
+      <span className="absolute inset-0 overflow-hidden rounded-md">
+        <span className="absolute left-0 aspect-square w-full origin-center -translate-x-full rounded-full bg-blue-500 transition-all duration-500 group-hover:-translate-x-0 group-hover:scale-150"></span>
+      </span>
+      <CardContent {...props} />
+    </div>
+  );
+};
+
+export const CardHoverEffect4 = (props: CardProps) => {
+  return (
+    <div className="group relative z-0 h-full w-full overflow-hidden overflow-x-hidden rounded-md bg-secondary">
+      <span className="absolute inset-0 overflow-hidden rounded-md">
+        <span className="absolute left-0 aspect-square w-full origin-center translate-x-full rounded-full bg-blue-500 transition-all duration-500 group-hover:-translate-x-0 group-hover:scale-150"></span>
+      </span>
+      <CardContent {...props} />
+    </div>
+  );
+};

packages/nextjs/app/builders/0xF25f95C59f4f1C4010527DAa26e7974cB37c2Ae1/_components/SocialsSection.tsx

@@ -0,0 +1,41 @@
+import Link from "next/link";
+import { IconSocials, socials } from "../_data/socials";
+
+type HoverRevealButtonProps = {
+  Icon: IconSocials;
+  label: string;
+};
+
+const HoverRevealButton = ({ Icon, label }: HoverRevealButtonProps) => {
+  return (
+    <div className="flex items-center gap-2 min-w-full md:min-w-32 text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">
+      <Icon className="h-5 w-5" />
+      {label}
+    </div>
+  );
+};
+
+const SocialsSection = () => {
+  return (
+    <section>
+      <h2 className="text-2xl font-semibold mb-2 sr-only">Socials</h2>
+      <ul className="flex gap-4 items-center justify-center flex-col md:flex-row">
+        {socials.map(social => (
+          <li key={social.name} className="w-full md:w-min">
+            <Link
+              aria-label={social.name}
+              className="flex items-center gap-2 opacity-85 hover:opacity-100 w-full px-8 md:px-0"
+              href={social.url}
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <HoverRevealButton Icon={social.icon} label={social.username} />
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+};
+
+export default SocialsSection;

packages/nextjs/app/builders/0xF25f95C59f4f1C4010527DAa26e7974cB37c2Ae1/_data/socials.tsx

@@ -0,0 +1,38 @@
+import { SiGithub, SiTwitter } from "react-icons/si";
+import { SlGlobe } from "react-icons/sl";
+import { BuidlGuidlLogo } from "~~/components/assets/BuidlGuidlLogo";
+
+export const ETH_ADDRESS = "0xF25f95C59f4f1C4010527DAa26e7974cB37c2Ae1";
+
+export const socials = [
+  {
+    icon: SlGlobe,
+    name: "Website",
+    label: "Website",
+    url: "https://nvillanueva.com",
+    username: "nvillanueva.com",
+  },
+  {
+    icon: SiGithub,
+    label: "GitHub",
+    name: "GitHub",
+    url: "https://github.com/mexicanace",
+    username: "mexicanace",
+  },
+  {
+    icon: SiTwitter,
+    label: "Twitter",
+    name: "Twitter",
+    url: "twitter.com/mexicanace",
+    username: "@mexicanace",
+  },
+  {
+    name: "BuidlGuidl",
+    url: `https://app.buidlguidl.com/builders/${ETH_ADDRESS}`,
+    label: "BuidlGuidl",
+    icon: BuidlGuidlLogo,
+    username: "BuidlGuidl",
+  },
+] as const;
+
+export type IconSocials = (typeof socials)[number]["icon"];

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

@@ -0,0 +1,22 @@
+import { AboutMe } from "./_components/AboutMe";
+import SocialsSection from "./_components/SocialsSection";
+import { ETH_ADDRESS } from "./_data/socials";
+import type { NextPage } from "next";
+import { Address } from "~~/components/scaffold-eth";
+
+const BuilderPage: NextPage = () => {
+  return (
+    <main className="container mx-auto px-4 py-8 space-y-8 max-w-5xl">
+      <div className="flex flex-col md:flex-row items-center justify-between">
+        <h1 className="text-4xl font-bold">Nicolas Villanueva</h1>
+        <Address address={ETH_ADDRESS} format="short" />
+      </div>
+
+      <AboutMe />
+
+      <SocialsSection />
+    </main>
+  );
+};
+
+export default BuilderPage;