Mentor Tabs

Features

• Flanking stat badges (Students with a school glyph, Hourly Rate with a coin glyph) whose numbers count up when the card scrolls into view
• Figtree avatar that overlaps upward between the two stat badges, with an initials fallback on image error
• Verified name row (blue verified rosette) above a muted role line
• Centered six-icon social row (GitHub, LinkedIn, X, Instagram, YouTube, Website) with lilac hover
• Keyboard-navigable About / Skills / Reviews tab strip with roving tabindex, aria-selected, and a :has()-driven sliding lavender indicator
• Panel content rendered from js/data.js — intro copy, help/skill link lists, and student review cards with avatars
• Skeleton silhouette with a shimmer sweep shown during the async data fetch
• Full-width Book Mentoring call to action with a springy press
• Dark-mode ready via body.dark tokens — no built-in toggle; the host shell (or a manual dark class on body) drives theming

Accessibility

ARIA labels

All social links and the CTA carry aria-label or visible text

Tabs

role="tablist" / role="tab" / role="tabpanel" with aria-selected, aria-controls, roving tabindex

Keyboard nav

Arrow keys, Home, End move between tabs; Enter/Space activate

Avatar fallback

Broken photos swap to an initials tile

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 Mentor 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.