Personal page added (soul4code.eth) #18
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Hey @soul4code, thank you very much for your PR!
I like what you did with the avatar :)
(But it's not showing up on mobile devices, you should check this)
But I think you should try to improve the page a bit — add more information, some contrasting elements, different sections. That would be cool :)
And please add a screenshot of it to your PR description.
- Fix display avatar on mobile device - Make avatar coolest a little ) - Added Skills with animation
Hi @melanke. Thank you for comments.
|
| // eslint-disable-next-line @next/next/no-img-element | ||
| <img | ||
| className="rounded-full" | ||
| src={avatar.data || ""} | ||
| width={100} | ||
| height={100} | ||
| alt={`${BUILDER_ADDRESS} avatar`} | ||
| onLoad={() => setAvatarLoaded(true)} | ||
| /> |
There was a problem hiding this comment.
Oh no! I think you should keep the BlockieAvatar — that’s the proper way to show the avatar. It wasn’t working on mobile simply because it was squeezed, which could be fixed with Tailwind.
There was a problem hiding this comment.
Thank you, I have fixed it. But added some unrequired props to BlockieAvatar
...nextjs/app/builders/0x1f88B7D5a0753b7b72658d36c06B372b1fd8617e/_components/BuilderAvatar.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
This project follows the utility-first CSS approach, meaning we find it easier to read and style the code by adding pre-built CSS classes directly to the HTML. We're using Tailwind 4.1.3. I suggest checking out its documentation and the rest of the project code. I assure you the learning curve is easy.
I think even the animations can be done using Tailwind, but if not, let’s keep only those as CSS rules.
There was a problem hiding this comment.
Tailwind classes used now. But animation keeped in css as tailwind theme extension according to https://tailwindcss.com/docs/animation#customizing-your-theme
| const preloaderClasses = | ||
| "w-12 h-12 border-10 border-solid border-base-100 rounded-full relative rotate-45 box-border"; | ||
| const preloaderBeforeClasses = [ | ||
| "before:content-['']", | ||
| "before:absolute", | ||
| "before:box-border", | ||
| "before:-inset-[10px]", | ||
| "before:rounded-full", | ||
| "before:border-10", | ||
| "before:border-solid", | ||
| "before:border-success", | ||
| "before:animate-avatar-loader", | ||
| ].join(" "); |
There was a problem hiding this comment.
A few considerations about this:
- You don’t need two distinct variables — the “before” classes could also be inside
preloaderClasses. - You could use
clsxdirectly here, so you wouldn’t need to use arrays. - Since this is a constant, it makes sense to place it outside the component, so it’s created only once at module initialization instead of on every render.
| interface BlockieAvatarProps { | ||
| address: string; | ||
| ensImage?: string | null; | ||
| size: number; | ||
| onLoad?: () => void; | ||
| defaultAvatar?: string; | ||
| } |
There was a problem hiding this comment.
Why do you need defaultAvatar when you already have ensImage?
Also, couldn’t you extend AvatarComponent instead of rewriting it completely just to include onLoad?
There was a problem hiding this comment.
How to extend AvatarComponent? It is just type and AvatarComponentProps didnt have external export.
There was a problem hiding this comment.
Maybe like this:
FC<AvatarComponentProps & { onLoad?: () => void; }>
Description
Personal builder page added, according Issue B.
Additional Information
Related Issues
Added my personal page according #8
Your ENS/address: soul4code.eth