Skip to content

Commit ba49702

Browse files
melankemelanke
authored
Merge pull request #27 from zachyo/feat/zarcc-builder-page
feat: created a personal builders page
2 parents 247b10b + ae68b0d commit ba49702

File tree

5 files changed

+133
-0
lines changed

5 files changed

+133
-0
lines changed

‎packages/nextjs/app/builders/0x37cFF24EAe0629FE7060EB7D260Ab37492D22E1D/components/InfoCard.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export const InfoCard = ({ title, children }: { title: string; children: React.ReactNode }) => (
2+
<div className="bg-base-100 dark:bg-base-300 rounded-2xl p-8 border border-base-300 dark:border-base-100 shadow-lg dark:shadow-none">
3+
<h2 className="text-2xl font-semibold mb-4">{title}</h2>
4+
{children}
5+
</div>
6+
);

‎packages/nextjs/app/builders/0x37cFF24EAe0629FE7060EB7D260Ab37492D22E1D/constants.ts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { TwitterIcon } from "./icons/Twitter";
2+
import { CodeBracketIcon, DocumentTextIcon, EnvelopeIcon } from "@heroicons/react/24/outline";
3+
4+
export const PROFILE_DATA = {
5+
name: "Zarcc",
6+
tagline: "Building the decentralized future, one block at a time",
7+
address: "0x37cFF24EAe0629FE7060EB7D260Ab37492D22E1D" as `0x${string}`,
8+
bio: "Full-stack blockchain developer passionate about creating innovative dApps and smart contracts. Experienced with Solidity, TypeScript, and modern web3 tooling. Always learning, always building.",
9+
skills: ["Solidity", "TypeScript", "React", "Next.js", "Hardhat", "Foundry", "Web3.js", "Ethers.js"],
10+
currentFocus: "Learning Solidity while Exploring Uniswap v4 hooks and advanced DeFi protocols",
11+
};
12+
13+
export const SOCIAL_LINKS = [
14+
{
15+
name: "Twitter",
16+
url: "https://twitter.com/zachy_yo",
17+
icon: TwitterIcon,
18+
description: "Check out my code",
19+
},
20+
{
21+
name: "GitHub",
22+
url: "https://github.com/zachyo",
23+
icon: CodeBracketIcon,
24+
description: "Check out my code",
25+
},
26+
{
27+
name: "Blog",
28+
url: "https://zarcc.hashnode.dev/",
29+
icon: DocumentTextIcon,
30+
description: "Read my thoughts",
31+
},
32+
{
33+
name: "Email",
34+
url: "mailto:segunzacheusi@email.com",
35+
icon: EnvelopeIcon,
36+
description: "Get in touch",
37+
},
38+
];

‎packages/nextjs/app/builders/0x37cFF24EAe0629FE7060EB7D260Ab37492D22E1D/icons/Twitter.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export const TwitterIcon = ({ className }: { className?: string }) => (
2+
<svg className={className} viewBox="0 0 28 28" fill="currentColor">
3+
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231h0.001zm-1.161 17.52h1.833L7.084 4.126H5.117l11.966 15.644z" />
4+
</svg>
5+
);

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

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import Image from "next/image";
2+
import { InfoCard } from "./components/InfoCard";
3+
import { PROFILE_DATA, SOCIAL_LINKS } from "./constants";
4+
import { Address } from "@scaffold-ui/components";
5+
import type { NextPage } from "next";
6+
7+
const ZarccProfile: NextPage = () => {
8+
return (
9+
<div className="flex flex-col items-center justify-center min-h-screen px-4 py-12 bg-base-200 dark:bg-base-100">
10+
<div className="max-w-3xl w-full space-y-8">
11+
{/* Header Section */}
12+
<div className="text-center space-y-4">
13+
<div className="inline-flex items-center justify-center w-24 h-24 rounded-full bg-primary/10 dark:bg-secondary/20 border-4 border-primary/30 dark:border-secondary/40">
14+
<Image src={"/zarccAvatar.webp"} alt="Zarcc" width={100} height={100} className="rounded-full" />
15+
</div>
16+
<h1 className="text-4xl md:text-5xl font-bold tracking-tight">{PROFILE_DATA.name}</h1>
17+
<p className="text-lg text-base-content/70 dark:text-base-content/80 italic">{PROFILE_DATA.tagline}</p>
18+
</div>
19+
20+
{/* Address Section */}
21+
<div className="flex justify-center">
22+
<div className="bg-base-100 dark:bg-base-300 rounded-lg px-6 py-3 border border-base-300 dark:border-base-100 shadow-sm">
23+
<Address address={PROFILE_DATA.address} format="long" />
24+
</div>
25+
</div>
26+
27+
<InfoCard title="About Me">
28+
<p className="text-base-content/80 dark:text-base-content/90 leading-relaxed">{PROFILE_DATA.bio}</p>
29+
</InfoCard>
30+
31+
<InfoCard title="Current Focus">
32+
<p className="text-base-content/80 dark:text-base-content/90 leading-relaxed">
33+
🎯 {PROFILE_DATA.currentFocus}
34+
</p>
35+
</InfoCard>
36+
37+
<InfoCard title="Tech Stack">
38+
<div className="flex flex-wrap gap-3">
39+
{PROFILE_DATA.skills.map(skill => (
40+
<span
41+
key={skill}
42+
className="px-4 py-2 bg-primary/10 dark:bg-secondary/20 text-primary dark:text-white rounded-full text-sm font-medium border border-primary/20 dark:border-secondary/30"
43+
>
44+
{skill}
45+
</span>
46+
))}
47+
</div>
48+
</InfoCard>
49+
50+
<InfoCard title="Connect with Me">
51+
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
52+
{SOCIAL_LINKS.map(link => {
53+
const IconComponent = link.icon;
54+
return (
55+
<a
56+
key={link.name}
57+
href={link.url}
58+
target="_blank"
59+
rel="noopener noreferrer"
60+
className="flex flex-col items-center p-6 bg-base-200 dark:bg-base-200 rounded-xl border border-base-300 dark:border-base-200 transition-all hover:scale-105 hover:shadow-md hover:border-primary/50 dark:hover:border-secondary/40 group"
61+
>
62+
<IconComponent className="w-8 h-8 mb-3 text-primary dark:text-white/50 group-hover:text-primary-focus dark:group-hover:text-secondary-focus" />
63+
<span className="font-semibold text-base-content mb-1">{link.name}</span>
64+
<span className="text-sm text-center whitespace-nowrap text-base-content/60 dark:text-base-content/50">
65+
{link.description}
66+
</span>
67+
</a>
68+
);
69+
})}
70+
</div>
71+
</InfoCard>
72+
73+
<div className="text-center pt-8">
74+
<p className="text-sm text-base-content/50 dark:text-base-content/40 italic">
75+
&ldquo;The best time to plant a tree was 20 years ago. The second best time is now.&rdquo; - Building in
76+
Web3 since 2025
77+
</p>
78+
</div>
79+
</div>
80+
</div>
81+
);
82+
};
83+
84+
export default ZarccProfile;

‎packages/nextjs/public/zarccAvatar.webp‎

12.1 KB
Loading

0 commit comments

Comments
 (0)