Skip to content

Commit 4cb592c

Browse files
Mrwicks00Mrwicks00
committed
Merge branch 'main' into mrwicks-branch
2 parents 586470a + 5d61485 commit 4cb592c

File tree

13 files changed

+572
-1
lines changed

13 files changed

+572
-1
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/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/app/builders/0xb216270aFB9DfcD611AFAf785cEB38250863F2C9/icons.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export const GitHubIcon = () => (
2+
<svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
3+
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
4+
</svg>
5+
);
6+
7+
export const TwitterIcon = () => (
8+
<svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
9+
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
10+
</svg>
11+
);

0 commit comments

Comments
 (0)