Overview
This ticket covers assembling the User Profile page, wiring up data/props, and ensuring correct spacing, ordering, and responsive behaviour across all three breakpoints. The page has two states — empty (new user with no bio or activity) and filled (established user with full profile data).
Empty State
Filled State
Background
The following components exist and are ready to use:
| Component |
Description |
NavBar |
Logo, nav links, search (CTRL+K), theme toggle, user avatar, log in — "Posts" tab with notification dot |
UserProfile |
User avatar, username, role badge, member since, and role |
HeaderLinks |
Icon Button component for social links (GitHub, Website, Email, Slack etc.) |
BioBlock |
Bio content area; renders empty state prompt or filled bio with role/library breakdowns and free text |
GitHubActivityBlock |
Bullet list of recent GitHub activity with linked repo names, "View on GitHub" CTA |
MailingListActivityBlock |
Date + subject line list of mailing list posts, "View all activity" CTA |
UserPageCards |
For achievements, badges and CTA |
PostsCard |
List of user's posts (title, date, tags); "View all posts" CTA |
Footer |
Nav links + social icons |
Breakpoints
| Label |
Width |
| Mobile |
< 768px |
| Tablet |
768px – 1279px |
| Desktop |
≥ 1280px |
Empty vs Filled States
Empty State
BioBlock — renders prompt: "Add a short bio to tell the community who you are, what you work on, or what you're passionate about."AchievementsBlock — renders placeholder tiles + "Showcase your contributions and milestones as you participate in the community." copyBadgesBlock — renders placeholder badge icons + "Badges highlight specific skills, roles, or areas of contribution" copyPostsBlock — renders "Share your knowledge with the community" prompt + "Create a post" CTAEdit Profile Button — triggers the edit profile UISocial Link Icons — Disabled, action prompts are rendered on hover
Filled State
BioBlock — renders role/library breakdown (Author, Maintainer, Contributor, Reviews, Professional Profile sections) and free text paragraphsAchievementsBlock — renders achievement tiles with count, title, descriptionBadgesBlock — renders badge icons with label and earned datePostsBlock — renders list of posts (title, date, tags) + "View all posts" CTA
Acceptance Criteria
Out of Scope
- Profile editing functionality (separate ticket)
Overview
This ticket covers assembling the User Profile page, wiring up data/props, and ensuring correct spacing, ordering, and responsive behaviour across all three breakpoints. The page has two states — empty (new user with no bio or activity) and filled (established user with full profile data).
Empty State
Filled State
Background
The following components exist and are ready to use:
NavBarUserProfileHeaderLinksBioBlockGitHubActivityBlockMailingListActivityBlockUserPageCardsPostsCardFooterBreakpoints
Empty vs Filled States
Empty State
BioBlock— renders prompt: "Add a short bio to tell the community who you are, what you work on, or what you're passionate about."AchievementsBlock— renders placeholder tiles + "Showcase your contributions and milestones as you participate in the community." copyBadgesBlock— renders placeholder badge icons + "Badges highlight specific skills, roles, or areas of contribution" copyPostsBlock— renders "Share your knowledge with the community" prompt + "Create a post" CTAEdit Profile Button— triggers the edit profile UISocial Link Icons— Disabled, action prompts are rendered on hoverFilled State
BioBlock— renders role/library breakdown (Author, Maintainer, Contributor, Reviews, Professional Profile sections) and free text paragraphsAchievementsBlock— renders achievement tiles with count, title, descriptionBadgesBlock— renders badge icons with label and earned datePostsBlock— renders list of posts (title, date, tags) + "View all posts" CTAAcceptance Criteria
All components render in the correct order per breakpoint
Empty state renders correctly for Bio, Achievements, Badges, and Posts when no data is present
Filled state renders correctly with all data populated
For the disabled social links, render the following action prompts on hover:
"Add GitHub Profile Link"
"Add Website Link"
"Add Email Address"
"Add CPP Slack Profile Link"
Light and dark mode render correctly for all components
All props wired with real data for both empty and filled states, use mock data were necessary
Tested in Chrome, Safari, Firefox
Out of Scope