shadcn.io is not affiliated with official shadcn/ui
Availability Portfolio Footer Block for Vue
A centred one-person footer for a freelance designer: an avatar with initials, the name, a one-line bio, an availability line with a status dot, four social links with names and a row with the nav and the copyright.
Installation
Overview
A personal footer for Vue with Ark UI, for a freelancer's portfolio. Everything is centred on the page column with no bands: an avatar carrying the designer's initials, the name, one line about what they do, and an availability line with a status dot ("Taking on projects from next month"). Under it, four social links, each a neutral glyph and the network's name, and a last row with the nav labelled Footer (four links) and the copyright. On a phone the last row stacks. There is no photo, so nothing to load, and no JavaScript of its own.
FAQ
How do I change the availability line?
Edit the sentence next to the status dot. It uses a relative phrase ("from next month") rather than a date, so it does not go stale; change it when your calendar changes. The dot is decorative and the sentence carries the meaning.
Can I use a photo instead of initials?
Yes. Add an AvatarImage with an alt of your name inside the Avatar; the initials stay as the fallback while it loads. The avatar is hidden from screen readers because the name sits right under it.
Why do the social links show generic icons with names?
The icon set has no brand logos, and a row of unlabelled glyphs leaves people guessing. Each link shows a neutral glyph and the network's name, which is also its accessible name.
How do screen readers move through it?
The name is an h2, the social links are a list named Follow Lowell, and the four page links sit in a nav labelled Footer. Every link shows the theme's focus ring.