Profile Card

Features

• Data-driven cards rendered from js/data.js through an async fetchProfiles() API seam
• Real portrait photos (optimized local WebP) with automatic initials-disc fallback on load error
• Skeleton loading state with a token-driven shimmer while profiles are fetched
• Cobalt filled verified badge (Tabler rosette-discount-check-filled, --info token) with a brighter dark-mode twin
• Online / away / offline status dot on each avatar
• Stats row with Posts, Followers, and Following counts set in tabular numerals
• Skill chips with wash hover feedback — no lift or scale anywhere, color-only hovers
• Cross-theme contrast-safe chip and stat-label ink retains accent/neutral character while clearing AA at 11px
• Follow toggle button with aria-pressed, a springy press scale, and a live follower count
• Follow state persists across reloads via localStorage
• Icon-only Message button with explicit aria-label
• Polite live feedback for follow/message actions, visible load errors, and a real empty state
• Abstract layered-gradient banner art per card (aurora, tide bands, prism beams) — pure CSS, fully token-driven so it retones with any design system
• Equal-height cards with the stats row, chips, and actions pinned to a shared baseline across the grid
• Cool-dusk dark mode — deep blue-charcoal surfaces from dedicated night-* design tokens instead of generic gray
• Theme follows the OS preference on load and persists any explicit choice; the gallery toolbar drives toggling
• Keyboard-accessible controls with :focus-visible ring

Accessibility

ARIA labels

Follow and icon-only Message buttons carry explicit per-profile aria-label

Follow toggle

Real <button> with aria-pressed toggled and persisted by JS

Loading state

Grid announces aria-busy="true" during skeleton, false after render; skeletons are aria-hidden

Avatar photos

<img> with descriptive alt ("Portrait of …"), initials fallback on load error

Verified badge

Inline filled SVG with role="img" and aria-label="Verified profile"

Status dot

Static role="img" with aria-label (Online/Away/Offline)

Theme

Follows OS prefers-color-scheme on first visit; explicit choice persisted

Focus indicators

:focus-visible with contrast-safe --prf-focus-ink outline on all elements

Action feedback

Follow/message actions announce through a polite live region; persistence failures explain that the session still works

Async states

Skeleton uses aria-busy; empty results render explicit copy; module/render failures expose a visible alert with a recovery action

Reduced motion

prefers-reduced-motion: reduce disables all animations

Viewport

100dvh for mobile-safe viewport height

Customise it with AI

Open Profile Card 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.