Shadcn hero sections for portfolios
Portfolio heroes have to do something almost no other hero does: introduce a person. Visitors are usually recruiters, hiring managers, or potential collaborators trying to decide in 10 seconds whether to keep reading. The structures that work: name + role + one-line value prop ('I design fintech onboarding flows'), or a single hero project that visually anchors what you do. Avoid the empty-hero with just a name and a chevron.
npx shadcn@latest add https://ruixen.com/r/structured-hero-section
For Tailwind v3 or Base UI, swap the URL prefix — see /tailwind-v3-shadcn or /base-ui-shadcn.
Why this differs for portfolio
Portfolio funnels are trust-and-fit funnels. Recruiters skim 50 portfolios a day. The hero either earns the next-section scroll or it doesn't. The two failure modes: trying too hard ('Hi, I'm an award-winning multidisciplinary creative...') or being too sparse ('I make things'). Specific is better than impressive.
Recommended components
Curated picks from the Ruixen registry that fit this use case. Click through to the canonical component docs for code, previews, and props.
Shadcn hero section — a clean hero section with announcement pill, overlapping showcase cards, trusted-by logo strip, and dual CTAs.
Shadcn hero section — an animated hero title with phased brand reveal, staggered word blur-in, and highlight box sweep effect.
Shadcn hero section — a split-layout hero section with left-aligned headline, key metrics, app screenshot showcase, and trusted-by logo strip.
Shadcn hero section — an interactive hero section featuring a card carousel with smooth animations.
Frequently asked questions
Should I show my photo in the portfolio hero?
Optional — depends on the role. For client-facing roles (consulting, leadership, freelance), a photo builds trust. For backend engineering, design systems work, or anywhere the work matters more than the person, skip it. If you do include a photo, make it neutral and recent. Avoid the 'looking-into-distance creative' shot — it reads as a stock-photo cliché.
What's the right CTA for a portfolio hero?
Two: 'See my work' (primary) and 'Get in touch' (secondary). Don't open the email-link CTA above the work CTA — visitors need to see the work before deciding to email. If you have a CV, link it in the navbar, not in the hero. The hero's job is to earn the next-section scroll; the email CTA is for visitors who've already decided after scrolling through case studies.
Is a typing animation too much?
Usually yes. Typing animations on portfolio headlines were a 2020 trend that's now a tell — they signal 'I learned framer-motion last month' more than they signal craft. The exception is if the typing reveals something genuinely surprising or playful. Default to a static headline with sharp copy. The headline does the work; the animation is decoration.
Browse all hero sections
The Hero Sections category page has every Ruixen hero sections variant — not just the curated picks for portfolio.
See all hero sections →