A developer profile with avatar, role, location, stack chips, a year of contributions as an animated heatmap with hover tooltips, and pinned project cards with stars and forks.
971 contributions in the last year
PinnedAll repositories
Local-first sync engine with CRDT merging and durable offline queues.
A tiny, fully typed parser combinator library for TypeScript.
Zero-downtime Postgres schema migrations from the command line.
Accessible React primitives that ship with zero runtime styles.
npx shadcn@latest add https://hyperblur.dev/r/profile-dev-card.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/profile-dev-card.tsx.
import { ProfileDevCard } from "@/components/hyperblur/profile-dev-card"
<ProfileDevCard name="Priya Raman" handle="priyar" stack={["TypeScript", "Rust"]} />| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | "Priya Raman" | Display name. Also gives the avatar initials. |
| handle | string | "priyar" | Username under the name. |
| role | string | "Staff engineer at Fieldnote" | Role line in the facts list. |
| location | string | "Toronto, Canada" | Location line in the facts list. |
| bio | string | "I work on sync engines..." | Short bio. Hidden when empty. |
| status | string | "Open to mentoring" | Status pill under the name. Hidden when empty. |
| stack | string[] | ["TypeScript", "Rust", "Go", ...] | Technology chips. |
| stats | { label: string; value: string }[] | followers, following, stars earned | Inline stats in the facts list. |
| projects | { name: string; description: string; language: string; languageColor: string; stars: number; forks: number; href: string }[] | 4 sample repositories | Pinned project cards. |
| weeks | number | 52 | Number of week columns in the heatmap. |
| seed | number | 11 | Seed for the deterministic sample contribution data. |
| endDate | string | "2026-11-01" | Last day of the heatmap as YYYY-MM-DD. Drives month labels and tooltip dates. |
| following | boolean | Controlled follow state. Pair with onFollowChange. | |
| defaultFollowing | boolean | false | Initial follow state when uncontrolled. |
| onFollowChange | (following: boolean) => void | Called when the follow button toggles. | |
| accent | string | "#34d399" | Heatmap scale, follow button, repo names and status pill. |
| className | string | Extra classes on the section. | |
| style | CSSProperties | Inline styles on the section. |