# Profile Stats

> An AI-engineer profile card with a ringed avatar, identity block, social links, skill chips, an interactive weekly activity sparkline, a stats grid, and a vertical/horizontal layout toggle — token-driven and design-system agnostic.

- Category: Profile
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Odyssey
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: card, visualization
- Page: https://builder.atheros.ai/components/profile-stats
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_profile_stats/preview-6ca17b82082c.webp

## Features

- Contrast-safe weekday, identity, trend and action roles use `--card-shadow`; Weekday labels are decorative and do not impersonate controls.
- Ringed avatar with gradient halo, a subtle hover lift, and initials fallback when the image fails to load
- Layered aurora gradient cover with a granular abstract pattern (dot matrix, grid, and soft orb motifs)
- Identity block with verified badge, monospace handle, role link, and location
- Interactive weekly experiments sparkline — click or press Enter/Space on a bar to update the run count
- Stats grid for Papers, Models, and Runs
- Social link row and skill chips
- Vertical/horizontal layout toggle with an animated View Transition between stacked and side-by-side
- Skeleton-loading entrance state with a transform-based shimmer
- Responsive layout down to 375px

## Accessibility

- **ARIA labels** — All interactive elements have `aria-label` or visible text
- **Layout toggle** — `<button>` with `aria-pressed` reflecting current layout
- **Sparkline bars** — `<button>` elements with `aria-pressed` and per-day `aria-label`
- **Keyboard nav** — Enter/Space activates the layout toggle and sparkline bars
- **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

## Keyboard shortcuts

- `Enter` — Activate the focused layout toggle or sparkline bar
- `Space` — Activate the focused layout toggle or sparkline bar

## Common questions

**Which frameworks is Profile Stats available in?**

Profile Stats ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Profile Stats free?**

Profile Stats is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Profile Stats support dark mode?**

Yes. Profile Stats ships light and dark themes, both drawn from the Odyssey design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Profile Stats live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/profile-stats

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt