Skip to content

Commit

Permalink
feat(personal page): unique touch
Browse files Browse the repository at this point in the history
  • Loading branch information
@DimaKush
DimaKush committed Jan 10, 2025
1 parent 2b8070a commit a10b88a
Showing 1 changed file with 82 additions and 109 deletions.
191 changes: 82 additions & 109 deletions packages/nextjs/app/builders/0x845D62b5405aAAe6b95CF3fbf33968A1E71a9cAD/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,139 +6,112 @@ import { TelegramIcon } from "~~/components/assets/TelegramIcon";
import { TwitterIcon } from "~~/components/assets/TwitterIcon";
import { Address } from "~~/components/scaffold-eth";

const BUILDER_INFO = {
const INFO = {
name: "DimaKush",
role: "Full Stack Developer",
address: "0x845D62b5405aAAe6b95CF3fbf33968A1E71a9cAD",
avatar: "https://avatars.githubusercontent.com/u/81520363",
tagline: "Love decentralication, simplicity and Mom",
languages: ["En", "Ru"],
tagline: "Love decentralization, simplicity and Mom",
links: {
bg: "https://app.buidlguidl.com/builders/0x845D62b5405aAAe6b95CF3fbf33968A1E71a9cAD",
github: "https://github.com/DimaKush",
twitter: "https://twitter.com/_Dima_Kush_",
telegram: "https://t.me/kushnarevdn",
},
focus: {
building: "weird stuff",
learning: "amazing things from awesome people",
contributing: "to the better future",
},
journey: [
{
year: "2023",
milestone: "Backend Developer",
detail: "Building modern web applications",
},
{
year: "2024",
milestone: "Next.js Developer",
detail: "Frontend development & Web3",
},
{
year: "2025",
milestone: "Full Stack Developer",
detail: "Hustling around",
},
],
skills: ["Next.js", "React", "TypeScript", "Solidity", "Foundry", "Hardhat", "Ethers", "IPFS", "Aiogram"],
currentWork: "Building weird stuff and exploring Web3 possibilities",
vision: "Contributing to the better future through decentralized technologies and simple solutions",
} as const;

const DimaKushProfile: NextPage = () => {
return (
<div className="min-h-screen p-4 flex items-center justify-center bg-base-100">
<div className="max-w-2xl w-full">
<div className="bg-base-200 rounded-lg shadow-xl p-8">
{/* Profile Section */}
<div className="flex flex-col items-center space-y-4">
{/* Avatar with loading and error handling */}
<div className="relative w-32 h-32">
<Image
src={BUILDER_INFO.avatar}
alt={`${BUILDER_INFO.name}'s profile picture`}
fill
priority
className="rounded-full object-cover"
/>
</div>
<div className="min-h-screen bg-gradient-to-b from-base-300 to-base-100 py-12 px-4">
<div className="max-w-4xl mx-auto">
<div className="relative bg-base-200 rounded-xl p-8 mb-8 overflow-hidden">
<div className="absolute inset-0 opacity-5 bg-[linear-gradient(45deg,#333_25%,transparent_25%),linear-gradient(-45deg,#333_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#333_75%),linear-gradient(-45deg,transparent_75%,#333_75%)] bg-[length:20px_20px]" />

<div className="relative flex flex-col md:flex-row items-center gap-8">
<Image
src={INFO.avatar}
alt="Profile"
width={200}
height={200}
className="rounded-2xl shadow-xl"
priority
/>

{/* Identity */}
<h1 className="text-3xl font-bold">{BUILDER_INFO.name}</h1>
<Address address={BUILDER_INFO.address} />
<p className="text-lg opacity-80">{BUILDER_INFO.tagline}</p>
<a
href={BUILDER_INFO.links.bg}
target="_blank"
rel="noopener noreferrer"
className="hover:opacity-80 transition-opacity"
>
<BuidlGuidlLogo className=" h-6" />
</a>
{/* Enhanced Social Links */}
<div className="flex items-center gap-8">
<a
href={BUILDER_INFO.links.github}
target="_blank"
rel="noopener noreferrer"
className="hover:opacity-80 transition-opacity"
>
<GithubIcon className="h-6" />
</a>
<a
href={BUILDER_INFO.links.twitter}
target="_blank"
rel="noopener noreferrer"
className="hover:opacity-80 transition-opacity"
>
<TwitterIcon className="h-6" />
</a>
<a
href={BUILDER_INFO.links.telegram}
target="_blank"
rel="noopener noreferrer"
className="hover:opacity-80 transition-opacity"
>
<TelegramIcon className="h-6" />
</a>
<div className="flex-1 text-center md:text-left">
<h1 className="text-4xl font-bold mb-2">{INFO.name}</h1>
<p className="text-xl opacity-80 mb-4">{INFO.role}</p>
<Address address={INFO.address} />
</div>
</div>
</div>

{/* Main Content Grid */}
<div className="grid md:grid-cols-2 gap-8">
<div className="space-y-8">
<div className="bg-base-200 rounded-xl p-6">
<h2 className="text-2xl font-bold mb-4">Vision</h2>
<p className="opacity-80">{INFO.vision}</p>
</div>

{/* Languages */}
<div className="text-center">
<p className="text-lg opacity-80">{BUILDER_INFO.languages.join(" ")}</p>
<div className="bg-base-200 rounded-xl p-6">
<h2 className="text-2xl font-bold mb-4">Current Work</h2>
<p className="opacity-80">{INFO.currentWork}</p>
</div>
</div>

{/* Current Focus */}
<div className="mt-8 space-y-6">
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="flex flex-col items-center bg-base-300 rounded-lg p-4">
<h2 className="text-xl font-bold mb-2">Building</h2>
<p className="text-center">{BUILDER_INFO.focus.building}</p>
</div>
<div className="flex flex-col items-center bg-base-300 rounded-lg p-4">
<h2 className="text-xl font-bold mb-2">Learning</h2>
<p className="text-center">{BUILDER_INFO.focus.learning}</p>
</div>
<div className="flex flex-col items-center bg-base-300 rounded-lg p-4">
<h2 className="text-xl font-bold mb-2">Contributing</h2>
<p className="text-center">{BUILDER_INFO.focus.contributing}</p>
<div className="space-y-8">
<div className="bg-base-200 rounded-xl p-6">
<h2 className="text-2xl font-bold mb-4">Skills</h2>
<div className="flex flex-wrap gap-2">
{INFO.skills.map((skill, i) => (
<span key={i} className="px-3 py-1 bg-base-300 rounded-full text-sm">
{skill}
</span>
))}
</div>
</div>
</div>

{/* Journey Timeline */}
<div className="mt-8">
<h2 className="text-xl font-bold mb-4">Journey</h2>
<div className="space-y-4">
{BUILDER_INFO.journey.map((step, index) => (
<div key={index} className="flex items-center space-x-4">
<span className="font-bold">{step.year}</span>
<span className="flex-grow border-t border-base-300"></span>
<div className="flex flex-col items-end">
<span className="font-bold">{step.milestone}</span>
<span>{step.detail}</span>
</div>
<div className="space-y-8">
<div className="bg-base-200 rounded-xl p-6">
<h2 className="text-2xl font-bold mb-4">Connect</h2>
<div className="flex items-center gap-8">
<a
href={INFO.links.github}
target="_blank"
rel="noopener noreferrer"
className="hover:opacity-80 transition-opacity"
>
<GithubIcon className="h-10 w-10" />
</a>
<a
href={INFO.links.twitter}
target="_blank"
rel="noopener noreferrer"
className="hover:opacity-80 transition-opacity"
>
<TwitterIcon className="h-10 w-10" />
</a>
<a
href={INFO.links.telegram}
target="_blank"
rel="noopener noreferrer"
className="hover:opacity-80 transition-opacity"
>
<TelegramIcon className="h-10 w-10" />
</a>
<a
href={INFO.links.bg}
target="_blank"
rel="noopener noreferrer"
className="hover:opacity-80 transition-opacity"
>
<BuidlGuidlLogo className=" h-10 w-10" />
</a>
</div>
))}
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit a10b88a

Please sign in to comment.