About Section

A structured about-me section with bio paragraphs, a learn-more link, and a two-column skills grid.

AboutSection renders a bio, a "learn more" link, and a two-column skills grid. Every piece of content is a prop — no portfolio data is baked in.

Installation

npx shadcn@latest add @adv/about-section

Usage

import { AboutSection } from '@/components/sections/about-section';

<AboutSection
  bio={[
    "I'm a multidisciplinary product designer with 12+ years of experience.",
    "I combine research, strategy, and craft to build products people love.",
  ]}
  learnMoreHref="/about"
  skillCategories={[
    { heading: 'Design', items: ['User flows', 'Design systems', 'Mentorship'] },
    { heading: 'Development', items: ['React', 'Next.js', 'A/B testing'] },
  ]}
  extras="Outside work I enjoy hiking and generative art."
/>

Example

ABOUT

I'm a curious, multidisciplinary product designer with 12+ years of experience building digital products for web and mobile.

My approach combines analytical thinking with creative exploration, always grounded in user research and business objectives.

Learn more about my journey and philosophy

Core Skills

Design

• Strategy & CRO presentations
• User flows & concept sketches
• Wireframes & mockups
• Design systems & pattern libraries

Development

• Rapid prototyping (Framer, React)
• Frontend frameworks (React, Next.js)
• API design & web components
• A/B testing & experimentation

Outside work I enjoy hiking, reading about systems thinking, and tinkering with generative art.

Props

Prop	Type	Default	Description
`heading`	`string`	`"ABOUT"`	Section heading.
`bio`	`string[]`	Two placeholder paragraphs	Bio paragraphs (one per element).
`learnMoreHref`	`string`	`"/about"`	href for the "Learn more" link.
`learnMoreLabel`	`string`	`"Learn more about my journey..."`	Label for the "Learn more" link.
`skillsHeading`	`string`	`"Core Skills"`	Skills sub-section heading.
`skillCategories`	`SkillCategory[]`	Two sample categories	Each `{ heading: string; items: string[] }`.
`extras`	`string`	—	Personal blurb below the skills grid (omitted if not provided).