Skip to content

Commit c65396d

Browse files
phipsaephipsae
authored
Merge pull request #21 from Lynndabel/lynn
Implemented my builder's profile
2 parents 513c718 + b855277 commit c65396d

File tree

4 files changed

+133
-0
lines changed

4 files changed

+133
-0
lines changed

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

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
"use client";
2+
3+
import { useEffect, useState } from "react";
4+
import Image from "next/image";
5+
import { NextPage } from "next";
6+
import { useTheme } from "next-themes";
7+
import { FaGithub, FaTwitter } from "react-icons/fa";
8+
import { Address } from "~~/components/scaffold-eth";
9+
10+
const BUILDER_ADDRESS = "0x3BFbE4E3dCC472E9B1bdFC0c177dE3459Cf769bf";
11+
12+
const LynndabelProfile: NextPage = () => {
13+
const [isVisible, setIsVisible] = useState(false);
14+
const [mounted, setMounted] = useState(false);
15+
const { resolvedTheme } = useTheme();
16+
const isDarkMode = resolvedTheme === "dark";
17+
18+
useEffect(() => {
19+
setIsVisible(true);
20+
setMounted(true);
21+
}, []);
22+
23+
if (!mounted) {
24+
return null;
25+
}
26+
return (
27+
<div className="min-h-screen flex items-center justify-center p-4 font-sans">
28+
<div
29+
className={`w-full max-w-md mx-auto overflow-hidden rounded-3xl shadow-md shadow-secondary ${isDarkMode ? "bg-base-100" : "bg-white"} transform ${isVisible ? "translate-y-0 opacity-100" : "translate-y-8 opacity-0"} transition-all duration-700`}
30+
>
31+
<div className="relative">
32+
<div className="h-36 bg-secondary overflow-hidden relative">
33+
<div className="absolute inset-0 opacity-20">
34+
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_120%,white_1px,transparent_1px)] bg-[size:16px_16px]"></div>
35+
</div>
36+
</div>
37+
38+
<div className="absolute left-0 right-0 -bottom-16 flex justify-center">
39+
<div className="p-1 bg-secondary rounded-full shadow-md shadow-secondary group">
40+
<div className="p-1 bg-base-100 rounded-full overflow-hidden transform transition-all duration-300 group-hover:scale-105">
41+
<Image
42+
src="/lynnavatar.jpg"
43+
alt="Lynndabel's Avatar"
44+
width={128}
45+
height={128}
46+
priority
47+
className="rounded-full object-cover"
48+
/>
49+
</div>
50+
</div>
51+
</div>
52+
</div>
53+
54+
<div className="pt-20 px-8 pb-8">
55+
<div className="text-center mb-8">
56+
<h1 className="text-3xl font-bold mb-2">Lynndabel</h1>
57+
<div className="flex justify-center">
58+
<span className="px-3 py-1 text-sm rounded-full bg-secondary inline-block mb-4 text-white">
59+
Blockchain Developer
60+
</span>
61+
</div>
62+
<p className="text-lg text-gray-800 dark:text-gray-200 mb-6 max-w-xs mx-auto">
63+
Creating digital experiences & exploring blockchain innovations
64+
</p>
65+
66+
<div className="bg-base-200 rounded-lg p-3 mb-6 shadow-md shadow-secondary break-all relative">
67+
<div className="flex items-center justify-between">
68+
<div>
69+
<span className="text-xs text-accent block text-left mb-1">Ethereum Address</span>
70+
<Address address={BUILDER_ADDRESS} format="short" />
71+
</div>
72+
</div>
73+
</div>
74+
</div>
75+
76+
<div className="divider before:bg-secondary after:bg-secondary">Connect</div>
77+
78+
<div className="grid grid-cols-2 gap-4 mb-8">
79+
<a
80+
href="http://x.com/Lynndabel"
81+
target="_blank"
82+
rel="noopener noreferrer"
83+
className="flex items-center px-4 py-3 rounded-lg bg-base-200 hover:bg-secondary hover:text-white transition-all duration-300 transform hover:scale-105 group"
84+
>
85+
<FaTwitter className="mr-3" size={20} />
86+
<span className="font-medium">Twitter</span>
87+
<svg
88+
xmlns="http://www.w3.org/2000/svg"
89+
viewBox="0 0 24 24"
90+
width="14"
91+
height="14"
92+
className="ml-auto opacity-0 group-hover:opacity-100 transition-opacity fill-current"
93+
>
94+
<path d="M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19V6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z" />
95+
</svg>
96+
</a>
97+
<a
98+
href="https://github.com/Lynndabel"
99+
target="_blank"
100+
rel="noopener noreferrer"
101+
className="flex items-center px-4 py-3 rounded-lg bg-base-200 hover:bg-secondary hover:text-white transition-all duration-300 transform hover:scale-105 group"
102+
>
103+
<FaGithub className="mr-3" size={20} />
104+
<span className="font-medium">GitHub</span>
105+
<svg
106+
xmlns="http://www.w3.org/2000/svg"
107+
viewBox="0 0 24 24"
108+
width="14"
109+
height="14"
110+
className="ml-auto opacity-0 group-hover:opacity-100 transition-opacity fill-current"
111+
>
112+
<path d="M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19V6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z" />
113+
</svg>
114+
</a>
115+
</div>
116+
</div>
117+
</div>
118+
</div>
119+
);
120+
};
121+
122+
export default LynndabelProfile;

‎packages/nextjs/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
"react": "^19.0.0",
3333
"react-dom": "^19.0.0",
3434
"react-hot-toast": "^2.4.0",
35+
"react-icons": "^5.5.0",
3536
"usehooks-ts": "^3.1.0",
3637
"viem": "2.23.0",
3738
"wagmi": "2.14.11",

‎packages/nextjs/public/lynnavatar.jpg‎

34.9 KB
Loading

‎yarn.lock‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4032,6 +4032,7 @@ __metadata:
40324032
react: ^19.0.0
40334033
react-dom: ^19.0.0
40344034
react-hot-toast: ^2.4.0
4035+
react-icons: ^5.5.0
40354036
tailwindcss: ^4.1.3
40364037
type-fest: ^4.26.1
40374038
typescript: ^5.8.2
@@ -15969,6 +15970,15 @@ __metadata:
1596915970
languageName: node
1597015971
linkType: hard
1597115972

15973+
"react-icons@npm:^5.5.0":
15974+
version: 5.5.0
15975+
resolution: "react-icons@npm:5.5.0"
15976+
peerDependencies:
15977+
react: "*"
15978+
checksum: cbd74f4b7982e6e18d59798a6b578268c8eb0909d78d87bcf9b25f99b3e544fd189a76551cb5e770d17f154a60b668551aee108aaf8471309b23f7af3b2c5b07
15979+
languageName: node
15980+
linkType: hard
15981+
1597215982
"react-is@npm:^16.13.1":
1597315983
version: 16.13.1
1597415984
resolution: "react-is@npm:16.13.1"

0 commit comments

Comments
 (0)