Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Profile blocks

Pro

Web Developer Profile Block for Vue

A web developer portfolio with technology chips in Frontend, Backend and Infra groups that keep only the projects using all of them, six drawn project screenshots, and a status line with a Clear button.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let a visitor find the work that matches their stack with this web developer profile for Vue with Ark UI. A compact header holds the title and one sentence. The frame under it opens on the person, then splits in two: a start cell with technologies in three groups, Frontend, Backend and Infra, as Toggle Group chips that show the years used, and a main cell with six project cards. Each card has a small greyscale screenshot drawn from a few rectangles, a title, a line, its stack as outline Badges and a Live site link. Pressing chips keeps only the projects that use all of them and dims the rest, and the status line reads, for example, 2 of 6 projects use React and Postgres, or says that none do and invites you to clear. Clear is always there and is disabled until you pick something. It's built from Toggle Group, Badge, Button, Avatar and Guides, with a CSS entrance only. For a portfolio, an agency team page or any profile with a stack.

FAQ

How do I add my own technologies and projects?

Edit GROUPS (the groups, their technologies and the years) and PROJECTS (title, line, stack as technology ids and the shapes of the drawn screenshot). A project shows while its stack contains every chip that is on. The counts and the sentence are worked out from the lists.

Can I use real screenshots?

Yes: replace the Shot component with an image. The demo draws each screenshot from at most six rectangles so the page has no image files and stays the same in every theme.

Why are the other projects dimmed instead of hidden?

So the page never changes height while you filter. Projects that do not match keep their place, take a flat tint and cannot be reached with the keyboard, and the status line says how many match.

Is it accessible?

Each group of chips is named by its heading, every chip announces whether it is pressed, and the status line is a polite live region that always has room for two lines. Chip labels and project titles are isolated so they keep their order in a right-to-left layout.

How does it look on a phone?

The technologies come first, wrapped over a few lines, and the project cards stack in one column under them.

All 100 profile blocks