Skip to content

Commit

Permalink
feat: add profile page for 0xF25f95C59f4f1C4010527DAa26e7974cB37c2Ae1 (
Browse files Browse the repository at this point in the history
…#23)

Co-authored-by: Derrek <[email protected]>
  • Loading branch information
MexicanAce and derrekcoleman authored Aug 21, 2024
1 parent d907403 commit f3cff61
Show file tree
Hide file tree
Showing 6 changed files with 185 additions and 0 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -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>
);
};
Original file line number Diff line number Diff line change
@@ -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>
);
};
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -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"];
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit f3cff61

Please sign in to comment.