Skip to content

Commit 47a07dc

Browse files
phipsaephipsae
committed
merge latest main
2 parents b6ce7f5 + a078e8e commit 47a07dc

File tree

13 files changed

+971
-7
lines changed

13 files changed

+971
-7
lines changed

‎packages/nextjs/app/builders/0x119d9A1ef0D16361284a9661727b363B04B5B0c8/icons.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
export const GitHubIcon = () => (
2+
<svg
3+
xmlns="http://www.w3.org/2000/svg"
4+
width="24"
5+
height="24"
6+
viewBox="0 0 24 24"
7+
fill="none"
8+
stroke="currentColor"
9+
strokeWidth="2"
10+
strokeLinecap="round"
11+
strokeLinejoin="round"
12+
>
13+
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
14+
</svg>
15+
);
16+
17+
export const TwitterIcon = () => (
18+
<svg
19+
xmlns="http://www.w3.org/2000/svg"
20+
width="24"
21+
height="24"
22+
viewBox="0 0 24 24"
23+
fill="none"
24+
stroke="currentColor"
25+
strokeWidth="2"
26+
strokeLinecap="round"
27+
strokeLinejoin="round"
28+
>
29+
<path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" />
30+
</svg>
31+
);
32+
33+
export const LinkedInIcon = () => (
34+
<svg
35+
xmlns="http://www.w3.org/2000/svg"
36+
width="24"
37+
height="24"
38+
viewBox="0 0 24 24"
39+
fill="none"
40+
stroke="currentColor"
41+
strokeWidth="2"
42+
strokeLinecap="round"
43+
strokeLinejoin="round"
44+
>
45+
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
46+
<rect x="2" y="9" width="4" height="12" />
47+
<circle cx="4" cy="4" r="2" />
48+
</svg>
49+
);

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

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
import Image from "next/image";
2+
import { GitHubIcon, LinkedInIcon, TwitterIcon } from "./icons";
3+
import type { NextPage } from "next";
4+
import { Address } from "~~/components/scaffold-eth";
5+
6+
// Define skills in arrays for easier management
7+
const blockchainSkills = ["Solidity", "Foundry", "Hardhat", "Ethers"];
8+
const frontendSkills = ["React", "TypeScript", "NextJS", "TailwindCSS"];
9+
10+
// Define social links mapping
11+
const socialLinks = [
12+
{
13+
href: "https://github.com/dmystical-coder",
14+
label: "GitHub Profile",
15+
icon: <GitHubIcon />,
16+
},
17+
{
18+
href: "https://twitter.com/dmystical_coder",
19+
label: "Twitter Profile",
20+
icon: <TwitterIcon />,
21+
},
22+
{
23+
href: "https://linkedin.com/in/abdulsalam-baruwa",
24+
label: "LinkedIn Profile",
25+
icon: <LinkedInIcon />,
26+
},
27+
];
28+
29+
// Ethereum address
30+
const myAddress = "0x119d9A1ef0D16361284a9661727b363B04B5B0c8";
31+
32+
const DmysticalCoderProfile: NextPage = () => {
33+
return (
34+
<>
35+
{/* Main background - pure white in light mode, dark gray in dark mode */}
36+
<div className="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-mono pt-4 pb-8 transition-colors duration-300">
37+
<div className="max-w-5xl mx-auto px-4">
38+
{/* Profile Card - White with subtle shadow in light mode, dark in dark mode */}
39+
<div className="rounded-lg overflow-hidden shadow-md dark:shadow-lg bg-white dark:bg-gray-800 mb-8 border border-gray-200 dark:border-gray-700 transition-all duration-300">
40+
{/* Title bar - Vibrant blue in light mode, darker blue in dark mode */}
41+
<div className="bg-blue-500 dark:bg-blue-800 text-white p-4 uppercase font-bold transition-colors duration-300">
42+
<h1 className="text-2xl font-bold tracking-wider">BLOCKCHAIN DEVELOPER</h1>
43+
</div>
44+
45+
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 p-6">
46+
{/* Profile image in the first column */}
47+
<div className="flex justify-center flex-col items-center">
48+
<div className="relative mb-4">
49+
<div className="relative aspect-square w-48 rounded-lg overflow-hidden shadow-md border-2 border-blue-300 dark:border-blue-600">
50+
<Image
51+
src="https://avatars.githubusercontent.com/u/63591055?v=4"
52+
alt="Profile image"
53+
className="object-cover"
54+
fill
55+
sizes="(max-width: 768px) 100vw, 192px"
56+
/>
57+
</div>
58+
</div>
59+
60+
{/* Experience button moved beneath the profile image */}
61+
<div className="relative mt-2">
62+
<div className="relative rounded-full px-8 py-3 inline-block bg-white dark:bg-gray-800 shadow-md border-2 border-indigo-300 dark:border-indigo-600">
63+
<div className="text-md text-center text-gray-700 dark:text-gray-300">Experience</div>
64+
<div className="text-xl font-bold text-indigo-600 dark:text-indigo-400 text-center">+1 YEARS</div>
65+
</div>
66+
</div>
67+
</div>
68+
69+
{/* Bio content in the second and third columns */}
70+
<div className="col-span-2">
71+
<h2 className="text-4xl font-bold mb-4 uppercase text-blue-600 dark:text-blue-400">Dmystical-Coder</h2>
72+
73+
<div className="mb-6">
74+
<p className="mb-4 text-lg text-gray-800 dark:text-gray-200">
75+
Hey folks, I&apos;m a passionate blockchain developer who loves to learn, grow and create awesome
76+
dApps. Yes I do create!! :)
77+
</p>
78+
79+
<p className="mb-4 text-gray-700 dark:text-gray-300">
80+
A passionate blockchain developer with a deep fascination for decentralized technologies. I
81+
specialize in creating intuitive dApps that bridge the gap between complex blockchain architecture
82+
and seamless user experience.
83+
</p>
84+
</div>
85+
86+
<div className="flex flex-wrap gap-4">
87+
<div className="address-container rounded-lg p-4 bg-blue-50 dark:bg-gray-700 mb-6 text-sm break-all shadow-sm border border-blue-200 dark:border-blue-700">
88+
<div className="font-bold uppercase mb-1 text-blue-700 dark:text-blue-300">ETH Address:</div>
89+
<Address address={myAddress} format="long" />
90+
</div>
91+
</div>
92+
</div>
93+
</div>
94+
</div>
95+
96+
{/* Skills grid - White background in light mode */}
97+
<div className="rounded-lg overflow-hidden shadow-md dark:shadow-lg bg-white dark:bg-gray-800 mb-8 border border-gray-200 dark:border-gray-700">
98+
<div className="bg-blue-500 dark:bg-blue-800 text-white p-4">
99+
<h2 className="text-xl font-bold uppercase tracking-wider">SKILLS</h2>
100+
</div>
101+
102+
<div className="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-gray-200 dark:divide-gray-700">
103+
{/* Left column - Blockchain Skills */}
104+
<div className="p-6">
105+
<h3 className="text-lg font-bold mb-4 uppercase text-blue-600 dark:text-blue-400">Blockchain</h3>
106+
107+
<ul className="space-y-3">
108+
{blockchainSkills.map(skill => (
109+
<li
110+
key={skill}
111+
className="rounded-md p-3 bg-white dark:bg-gray-700 shadow-sm border border-blue-200 dark:border-blue-600"
112+
>
113+
<span className="font-bold text-blue-600 dark:text-blue-300">{skill}</span>
114+
</li>
115+
))}
116+
</ul>
117+
</div>
118+
119+
{/* Right column - Frontend Skills */}
120+
<div className="p-6">
121+
<h3 className="text-lg font-bold mb-4 uppercase text-blue-600 dark:text-blue-400">Frontend</h3>
122+
123+
<ul className="space-y-3">
124+
{frontendSkills.map(skill => (
125+
<li
126+
key={skill}
127+
className="rounded-md p-3 bg-white dark:bg-gray-700 shadow-sm border border-blue-200 dark:border-blue-600"
128+
>
129+
<span className="font-bold text-blue-600 dark:text-blue-300">{skill}</span>
130+
</li>
131+
))}
132+
</ul>
133+
</div>
134+
</div>
135+
</div>
136+
137+
{/* Footer with social links */}
138+
<div className="rounded-lg overflow-hidden shadow-md dark:shadow-lg bg-white dark:bg-gray-800 mb-8 border border-gray-200 dark:border-gray-700">
139+
<div className="p-4 border-b border-gray-200 dark:border-gray-700 uppercase font-bold text-blue-600 dark:text-blue-400">
140+
SOCIAL LINKS:
141+
</div>
142+
<div className="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-gray-200 dark:divide-gray-700">
143+
<div className="p-4 flex justify-center md:justify-start gap-4">
144+
{socialLinks.map(({ href, label, icon }) => (
145+
<a
146+
key={href}
147+
href={href}
148+
target="_blank"
149+
rel="noopener noreferrer"
150+
className="p-3 rounded-full bg-white hover:bg-blue-500 text-gray-700 hover:text-white focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-blue-600 shadow-sm hover:shadow-md border border-gray-200 dark:border-gray-600"
151+
aria-label={label}
152+
>
153+
{icon}
154+
</a>
155+
))}
156+
</div>
157+
<div className="p-4 flex flex-col md:flex-row items-center justify-end gap-4">
158+
<div className="flex items-center gap-2">
159+
<span className="uppercase font-bold text-gray-800 dark:text-gray-300">Nigeria</span>
160+
<span className="text-xl font-bold text-gray-400 dark:text-gray-500">|</span>
161+
</div>
162+
<div className="flex items-center">
163+
<span className="uppercase font-bold text-2xl">🇳🇬</span>
164+
</div>
165+
</div>
166+
</div>
167+
</div>
168+
169+
{/* Footer message */}
170+
<div className="text-center my-8">
171+
<p className="inline-block px-6 py-3 bg-white dark:bg-gray-800 font-bold text-blue-600 dark:text-blue-300 rounded-full shadow-sm border border-blue-200 dark:border-blue-700">
172+
Built with Scaffold-ETH 2 • Batch 16 • 2025
173+
</p>
174+
</div>
175+
</div>
176+
</div>
177+
</>
178+
);
179+
};
180+
181+
export default DmysticalCoderProfile;

‎packages/nextjs/app/builders/0x2E15bB8aDF3438F66A6F786679B0bBBBF02A75d5/_components/BuilderSocialLinks.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import Link from "next/link";
2+
import { GithubIcon, TelegramIcon, TwitterIcon } from "./Icons";
3+
4+
type SocialLinksProps = {
5+
twitter?: string;
6+
github?: string;
7+
telegram?: string;
8+
};
9+
10+
export const SocialLinks = ({ twitter, github, telegram }: SocialLinksProps) => (
11+
<div className="flex gap-4">
12+
{twitter && (
13+
<Link href={`https://twitter.com/${twitter}`} target="_blank">
14+
<span className="w-6 h-6 hover:text-blue-400">
15+
<TwitterIcon />
16+
</span>
17+
</Link>
18+
)}
19+
{github && (
20+
<Link href={`https://github.com/${github}`} target="_blank">
21+
<span className="w-6 h-6 hover:text-gray-600">
22+
<GithubIcon />
23+
</span>
24+
</Link>
25+
)}
26+
{telegram && (
27+
<Link href={`https://t.me/${telegram}`} target="_blank">
28+
<span className="w-6 h-6 hover:text-blue-500">
29+
<TelegramIcon />
30+
</span>
31+
</Link>
32+
)}
33+
</div>
34+
);

‎packages/nextjs/app/builders/0x2E15bB8aDF3438F66A6F786679B0bBBBF02A75d5/_components/Icons.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// components/Icons.tsx
2+
3+
export const TwitterIcon = () => (
4+
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
5+
<path d="M22.46 6c-.77.35-1.6.58-2.46.69a4.27 4.27 0 001.88-2.35 8.44 8.44 0 01-2.7 1.03 4.23 4.23 0 00-7.21 3.86 12 12 0 01-8.72-4.42 4.23 4.23 0 001.31 5.65 4.23 4.23 0 01-1.92-.53v.05a4.23 4.23 0 003.39 4.14 4.27 4.27 0 01-1.91.07 4.24 4.24 0 003.95 2.93A8.5 8.5 0 012 19.54 12 12 0 008.29 21c7.55 0 11.69-6.26 11.69-11.69l-.01-.53A8.36 8.36 0 0022.46 6z" />
6+
</svg>
7+
);
8+
9+
export const GithubIcon = () => (
10+
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
11+
<path d="M12 0a12 12 0 00-3.79 23.39c.6.11.82-.26.82-.58v-2c-3.34.73-4.04-1.61-4.04-1.61a3.18 3.18 0 00-1.34-1.76c-1.1-.76.08-.75.08-.75a2.5 2.5 0 011.84 1.24 2.54 2.54 0 003.48 1 2.54 2.54 0 01.76-1.6c-2.67-.3-5.48-1.34-5.48-5.95a4.64 4.64 0 011.24-3.21 4.3 4.3 0 01.12-3.17s1-.32 3.3 1.23a11.45 11.45 0 016 0c2.3-1.55 3.3-1.23 3.3-1.23a4.3 4.3 0 01.12 3.17 4.64 4.64 0 011.24 3.21c0 4.62-2.81 5.65-5.5 5.95a2.85 2.85 0 01.82 2.22v3.29c0 .32.22.7.83.58A12 12 0 0012 0z" />
12+
</svg>
13+
);
14+
15+
export const TelegramIcon = () => (
16+
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
17+
<path d="M9.993 15.447l-.396 4.338c.569 0 .816-.243 1.117-.536l2.675-2.548 5.55 4.053c1.015.56 1.746.265 2-.935l3.627-17.036-.003.001c.325-1.527-.549-2.124-1.547-1.757L.68 9.94c-1.487.576-1.47 1.394-.255 1.76l5.66 1.766L18.34 5.958c.553-.368 1.055-.164.641.204L9.993 15.447z" />
18+
</svg>
19+
);

0 commit comments

Comments
 (0)