Social Profile Tabs

Features

• The verified-badge cutout remains visible across host-supplied light and dark themes.
• Cover photo header with an overlapping rounded avatar and an animated verified badge (pop-in)
• Name row with a stateful Follow toggle: outlined base, indigo fill slides in on hover, plus icon rotates, follow/following/unfollow with a red destructive hover state
• Four-stat highlights row (Followers, Following, Posts, Hourly Rate) with count-up numbers animated via IntersectionObserver
• About block with a bio, social links (GitHub, LinkedIn, X) and a location link
• Tabbed panel (Experience / Skills / Reviews) with a CSS :has()-driven sliding active-tab indicator
• Staggered fade-and-slide entrance for the name, stats, about, tabs, and CTA blocks
• Shimmer-sweep primary CTA driven by a transform-based highlight overlay
• Dark mode is supplied by the host/browser

Accessibility

ARIA labels

All buttons and icon links carry aria-label or visible text

Follow toggle

<button> with aria-pressed reflecting follow state

Tabs

role="tablist" / role="tab" / role="tabpanel" with aria-selected and aria-controls

Keyboard nav

ArrowLeft/ArrowRight/Home/End navigation moves between tabs

Focus indicators

:focus-visible with --ring outline on all elements

Reduced motion

prefers-reduced-motion: reduce disables all animations

Viewport

100dvh for mobile-safe viewport height

Customise it with AI

Open Social Profile Tabs in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the profile is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.