Social Link Profile using vue.js and Tailwind

I'm afraid this is getting cut off quite badly on some screens, and this gets worse when zoomed.

I'm curious as to why you've chosen to build such a simple component in Vue too tbh, but I assume it's just something you want to learn? Just remember you mustn't forget the html and css foundational principles when moving to js frameworks.

Here are suggested improvements :

• all content should be contained within landmarks. This should all be within a main landmark, with the attribution inside a footer.
• the image alt isn't bringing any value to this content. Either treat the image as decorative with empty alt or describe the image in a bit more detail.
• as this is all the content on a page I think the name should probably be a h1 not h2.
• in my opinion this design is showing a list of links, so id expect them to be structured in the markup as a list.
• it looks like you may be over using flex properties in this. Unless using gap for the vertical spacing between child elements I can't see the benefit in most places you're using it. It's making the css longer without helping much (not a problem, just maybe use gap or see what you could remove).
• if links are set to open in a new tab, that should be communicated to screen readers. Usually that's done with some sr-only text inside the link, or can be done with the title attribute.
• the overflow issue is caused by a fixed height limit on the app wrapper. Use min-height so it is allowed to be taller than the screen when it needs to be.
• the footer is overlapping other content because it's unnecessarily been made position absolute. That effectively removes it from the document positioning so it takes no regard for other content. Let it sit naturally where it sits underneath the main content in the dom to fix. (Remove absolute)
• watch the component naming. If this was a real project the links would probably not be called base button when they are not button elements.
• this component doesn't need an explicit width at any screen size (no media query is needed at all in this challenge in fact). All it needs is a max-width in rem and optionally width 100%.
• for slightly improved performance give the image a width and height. You can give it aspect ratio 1 to so the browser definitely knows how much space it needs while loading.
• the links should be display block width 100% to make them full width. They must not have explicit widths. This is an important principle. Setting explicit sizes like this will lead to fragile solutions prone to overflow.
• font size shouldn't ever be in px. https://fedmentor.dev/posts/font-size-px/
• place the pointer cursor on links only not the whole block. The spaces between links shouldn't have pointer cursor as that space isn't clickable.
• make sure you understand the difference between padding and margin. The usage seems confused here. I wouldn't expect text elements like paragraphs to have padding, only vertical margins. The only places if expect padding in this is on the outer wrapper/landmarks, the card and the links. I'd expect the padding to be in px in most places, maybe em or rem on the links. https://fedmentor.dev/posts/padding-margin/

I hope this list is helpful. I am only viewing on mobile so it comes from previewing on this screen only and reading the code.

(FYI @andreshinostroza)

@grace-snow

Thank you so much for your detailed feedback! Yes, you're absolutely right—I'm currently learning how to use Vue and experimenting with these frameworks. I really appreciate the points you've raised, and I'll definitely keep them in mind for future projects, especially regarding foundational HTML and CSS principles. Your suggestions are super helpful, and I'll work on improving those areas as I continue to practice.

Thanks again!