Skip to content

Commit 2ba6124

Browse files
phipsaephipsae
authored
Merge pull request #30 from web-ghost-dotcom/leo
Add lucide-react dependency and create Joe Leo's Web3 profile page
2 parents a078e8e + 47a07dc commit 2ba6124

File tree

4 files changed

+132
-0
lines changed

4 files changed

+132
-0
lines changed

‎packages/nextjs/app/builders/0xE00E720798803B8B83379720c42f7A9bE1cCd281/page.tsx‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
import Image from "next/image";
2+
import { ExternalLink } from "lucide-react";
3+
import type { NextPage } from "next";
4+
import { FaGithub, FaTwitter } from "react-icons/fa";
5+
import { Address } from "~~/components/scaffold-eth";
6+
7+
const name = "Joe Leo";
8+
const nickname = "TheCoderJoe";
9+
const description =
10+
"Web3 builder, Solidity developer, and AI explorer. I love creating decentralized solutions, collaborating with innovative minds, and pushing the boundaries of blockchain technology. Let's connect and build the future together!";
11+
const walletAddress = "0xE00E720798803B8B83379720c42f7A9bE1cCd281";
12+
const avatarUrl =
13+
"https://res.cloudinary.com/dig0e9lmr/image/upload/v1747066063/anime-style-character-space_nm3mi9.jpg";
14+
15+
const socialLinks = [
16+
{
17+
platform: "github",
18+
url: "https://github.com/web-ghost-dotcom",
19+
icon: <FaGithub size={20} />,
20+
color: "hover:text-purple-500",
21+
},
22+
{
23+
platform: "BuidlGuidl",
24+
url: "https://app.buidlguidl.com/builders/0xE00E720798803B8B83379720c42f7A9bE1cCd281",
25+
icon: <FaTwitter size={20} />,
26+
color: "hover:text-blue-400",
27+
},
28+
];
29+
30+
const JoeLeoWeb3Profile: NextPage = () => {
31+
return (
32+
<div className="w-full max-w-2xl mx-auto bg-white text-gray-900 dark:bg-gradient-to-br dark:from-gray-900 dark:to-gray-800 dark:text-gray-100 rounded-2xl shadow-xl overflow-hidden transition-colors duration-200 border border-gray-200 dark:border-gray-700">
33+
{/* Background pattern */}
34+
<div className="absolute inset-0 opacity-10 pointer-events-none">
35+
<div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')]"></div>
36+
</div>
37+
38+
{/* Main content */}
39+
<div className="relative z-10 p-8">
40+
{/* Avatar and Name Section */}
41+
<div className="flex flex-col items-center gap-6">
42+
{/* Avatar with glow effect */}
43+
<div className="relative">
44+
<div className="absolute -inset-1 bg-blue-400 dark:bg-blue-500 rounded-full blur opacity-75 animate-pulse"></div>
45+
<div className="relative w-32 h-32 rounded-full border-2 border-blue-300 dark:border-blue-400 overflow-hidden">
46+
<Image
47+
src={avatarUrl}
48+
width={500}
49+
height={500}
50+
alt={name}
51+
className="w-full h-full object-cover"
52+
priority
53+
/>
54+
</div>
55+
</div>
56+
57+
{/* Name and Wallet Address */}
58+
<div className="text-center">
59+
<h1 className="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-400 dark:to-purple-500">
60+
{name}
61+
</h1>
62+
<p className="text-lg text-gray-500 dark:text-gray-400 mt-1">{nickname}</p>
63+
64+
<div className="mt-4 flex items-center justify-center gap-2">
65+
<div className="px-3 py-1.5 bg-gray-100 dark:bg-gray-800 rounded-full text-xs font-medium flex items-center border border-gray-300 dark:border-gray-700 text-blue-700 dark:text-gray-100">
66+
<Address address={walletAddress} />
67+
</div>
68+
<a
69+
href={`https://etherscan.io/address/${walletAddress}`}
70+
target="_blank"
71+
rel="noopener noreferrer"
72+
className="text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors"
73+
>
74+
<ExternalLink size={16} />
75+
</a>
76+
</div>
77+
</div>
78+
</div>
79+
80+
{/* Bio Section */}
81+
<div className="mt-8">
82+
<div className="bg-gray-50 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-200 dark:border-gray-700">
83+
<h2 className="text-xl font-semibold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-400 dark:to-purple-500">
84+
About
85+
</h2>
86+
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">{description}</p>
87+
</div>
88+
</div>
89+
90+
{/* Socials Section */}
91+
<div className="mt-6">
92+
<div className="bg-gray-50 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-200 dark:border-gray-700">
93+
<h2 className="text-xl font-semibold mb-4 text-center text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-400 dark:to-purple-500">
94+
Connect With Me
95+
</h2>
96+
<div className="flex justify-center gap-6">
97+
{socialLinks.map((link, index) => (
98+
<a
99+
key={index}
100+
href={link.url}
101+
className={`w-12 h-12 flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 ${link.color} transition-all duration-300 hover:bg-gray-300 dark:hover:bg-gray-600 hover:scale-110 border border-gray-300 dark:border-gray-600`}
102+
target="_blank"
103+
rel="noopener noreferrer"
104+
aria-label={`${link.platform} profile`}
105+
>
106+
{link.icon}
107+
</a>
108+
))}
109+
</div>
110+
</div>
111+
</div>
112+
</div>
113+
</div>
114+
);
115+
};
116+
117+
export default JoeLeoWeb3Profile;

‎packages/nextjs/next.config.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@ const nextConfig: NextConfig = {
2121
port: "",
2222
pathname: "/dxswouxj5/**",
2323
},
24+
{
25+
protocol: "https",
26+
hostname: "res.cloudinary.com",
27+
},
2428
],
2529
},
2630
webpack: config => {

‎packages/nextjs/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"burner-connector": "0.0.12",
2626
"daisyui": "^5.0.9",
2727
"kubo-rpc-client": "^5.0.2",
28+
"lucide-react": "^0.510.0",
2829
"next": "^15.2.3",
2930
"next-nprogress-bar": "^2.3.13",
3031
"next-themes": "^0.3.0",

‎yarn.lock‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4023,6 +4023,7 @@ __metadata:
40234023
eslint-config-prettier: ^10.1.1
40244024
eslint-plugin-prettier: ^5.2.4
40254025
kubo-rpc-client: ^5.0.2
4026+
lucide-react: ^0.510.0
40264027
next: ^15.2.3
40274028
next-nprogress-bar: ^2.3.13
40284029
next-themes: ^0.3.0
@@ -13414,6 +13415,15 @@ __metadata:
1341413415
languageName: node
1341513416
linkType: hard
1341613417

13418+
"lucide-react@npm:^0.510.0":
13419+
version: 0.510.0
13420+
resolution: "lucide-react@npm:0.510.0"
13421+
peerDependencies:
13422+
react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
13423+
checksum: bc823d2a69255738558fe1ddff18fa9b1f602539928ff4c766a790b190bfc14140061df9cd4fab1680c523053e823668fdc4d726f82f4141f53ee9c58b6916a0
13424+
languageName: node
13425+
linkType: hard
13426+
1341713427
"make-dir@npm:^3.1.0":
1341813428
version: 3.1.0
1341913429
resolution: "make-dir@npm:3.1.0"

0 commit comments

Comments
 (0)