[Intermediate]: feat(frontend): build Contributor Hall of Fame page with responsive avatar card grid and hover animations

[ambicuity]

🧩 Intermediate Contributors

This issue is for contributors comfortable with:

• Building a new page following existing docs/ structure + CSS variable system
• Responsive card grid (avatar + name + stat + links)
• CSS-only hover animation states
• NOT integrating live GitHub API data — that is the paired Advanced issue (ADV-02)

Important

You must be assigned before starting — comment /assign to claim this issue.

This issue builds the static shell. GitHub API integration is the separate Advanced issue ADV-02.

---

🐞 Problem Description

The project references a "Contributors Hall of Fame" in issue template line 55, pointing to CONTRIBUTORS.md. However, CONTRIBUTORS.md is a plain Markdown file — zero visual recognition on the web. Projects like Simplify and Wellfound build strong communities because contribution recognition is visible and desirable.

---

💡 Expected Solution

Create docs/hall-of-fame.html.

Sections:

1. Header — Same nav as index.html. Add "Hall of Fame" link to all existing pages.

2. Slim hero:

   • Title: "Contributor Hall of Fame 🏆"
   • Subtitle: "Every line of code, config entry, and documentation fix matters."

3. Stats bar (static placeholders): [XX Contributors] | [XX Total PRs] | [XX Companies Added]

4. Avatar card grid:

   • 1-col mobile → 2-col tablet → 3-col desktop → 4-col wide (≥1400px)
   • Each card: avatar <img>, GitHub username linked, contribution count badge, category tags

5. Card hover (CSS only — no JS):

   • transform: translateY(-6px), box-shadow: var(--shadow-lg), gradient top border
   • Avatar: transform: scale(1.05), border: 2px solid var(--accent-start)
   • Username color → var(--accent-mid)

6. Card HTML target:

   <div class="hof-card">
     <img class="hof-avatar" src="https://github.com/ambicuity.png?size=128" alt="ambicuity">
     <span class="hof-username"><a href="https://github.com/ambicuity">@ambicuity</a></span>
     <span class="hof-badge">Maintainer</span>
     <span class="hof-contributions">42 contributions</span>
   </div>

7. Minimum 3 placeholder cards using real names from CONTRIBUTORS.md.

8. Footer — same as index.html.

---

✅ Acceptance Criteria

• docs/hall-of-fame.html loads without errors
• "Hall of Fame" nav link added to all existing docs/*.html pages
• .hof-card grid: 1 → 2 → 3 → 4 columns across breakpoints
• All hover animations via CSS transitions only — no JS for visual states
• Avatar <img> has accessible alt with the username
• Minimum 3 placeholder cards from real contributors in CONTRIBUTORS.md
• All styles use existing CSS variables — no new colors in styles.css
• Dark and light themes correct
• pre-commit run --all-files passes
• PR linked with Fixes #<number>
• PR title: feat(frontend): add Contributor Hall of Fame static page with responsive card grid

Area: 🌐 Frontend / website (docs/)

🔗 Additional Context

• CONTRIBUTORS.md — real contributor names for placeholder cards
• Paired Advanced issue: ADV-02 (Hall of Fame GitHub API — do NOT do that work here)
• Inspiration: Astro contributors, all-contributors spec

[coderabbitai]

Coding Plan

Summary

• Create a new standalone page (hall-of-fame.html) that replicates the exact header/footer patterns from existing pages, with a slimmed-down hero and a responsive card grid showcasing contributor avatars
• Use explicit CSS Grid breakpoints (600px, 900px, 1400px) to achieve the specified 1→2→3→4 column responsive behavior
• Implement all hover animations purely in CSS using existing transition variables and the specified transforms (translateY, scale, color transitions)
• Extract minimal theme toggle logic into a dedicated hall-of-fame.js to keep the page lightweight while maintaining theme consistency across the site

Design Choices

Design Choice 1: Responsive Grid Strategy

Options Considered:

1. Use explicit media query breakpoints at ~480px, ~768px, ~1024px, ~1400px with fixed grid-template-columns values
2. Use auto-fit with minmax(280px, 1fr) to naturally flow, supplemented with a single 1400px query for 4-col

Chosen Option: 1

Rationale: Explicit breakpoints provide precise control over the 4-tier layout specified in the ticket, ensuring exact column counts at each viewport.

Design Choice 2: Theme Toggle JavaScript

Options Considered:

1. Reuse app.js on hall-of-fame.html (includes unneeded job-board logic)
2. Create minimal hall-of-fame.js with only theme functions extracted from app.js
3. Inline theme toggle script directly in the HTML

Chosen Option: 2

Rationale: A dedicated hall-of-fame.js keeps the page lightweight and follows the established pattern of page-specific JS files while avoiding unnecessary code bloat.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Create Hall of Fame Page and Styles

Build the complete hall-of-fame page including HTML structure, dedicated JavaScript for theme management, and all necessary CSS styles for the card grid and hover animations.

Task 1: Create hall-of-fame.html Page Structure

Create the main HTML file with header, hero, stats bar, card grid, and footer following existing page patterns.

• Create docs/hall-of-fame.html with <html lang="en" data-theme="dark"> root element
• Add <head> with Inter/Outfit fonts, styles.css link, and GoatCounter analytics script (exact tag: <script data-goatcounter="https://riteshrana.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>)
• Replicate header structure from index.html: .header > .header-content > .logo + .header-actions with nav links (Jobs, Insights, Hall of Fame with active class), theme toggle button (sun/moon SVG icons), and GitHub link
• Add slim hero section with title "Contributor Hall of Fame 🏆", subtitle "Every line of code, config entry, and documentation fix matters.", and blob-container for visual consistency
• Add stats bar section with three static placeholder stats: [6 Contributors], [XX Total PRs], [XX Companies Added]
• Create card grid container (.hof-grid) populated with 6 placeholder cards using real data from .all-contributorsrc
• Each card follows the specified HTML structure: .hof-card containing .hof-avatar img, .hof-username with linked @username, .hof-badge (derive from contributions array - "Maintainer" for ambiguity, contribution type for others), and .hof-contributions span
• Replicate footer structure identically from index.html, updating the Links section to include Hall of Fame
• Load hall-of-fame.js at end of body

Task 2: Create hall-of-fame.js Theme Management

Create minimal JavaScript file with only the theme toggle functionality extracted from existing app.js pattern.

• Create docs/hall-of-fame.js with initTheme() function (reads localStorage/prefers-color-scheme, sets data-theme attribute)
• Add toggleTheme() function (toggles dark/light, persists to localStorage)
• Create elements cache object referencing #theme-toggle button
• Wire up DOMContentLoaded listener to call initTheme() and attach click handler to theme toggle button
• Keep file minimal - no analytics tracking, no other page-specific logic

Task 3: Add Hall of Fame CSS Styles

Add all CSS rules for the new page components to the existing styles.css file, following established variable and pattern conventions.

• Add .hof-hero styles in docs/styles.css: centered layout, reduced min-height compared to main hero (e.g., 40vh), reuse existing blob-container pattern
• Add .hof-stats-bar styles: flexbox row, centered, gap spacing, using --bg-secondary background, existing border-radius and shadow variables
• Add .hof-grid container: CSS Grid with explicit responsive breakpoints:
  • Default (mobile): grid-template-columns: 1fr
  • min-width: 600px: grid-template-columns: repeat(2, 1fr)
  • min-width: 900px: grid-template-columns: repeat(3, 1fr)
  • min-width: 1400px: grid-template-columns: repeat(4, 1fr)
  • Use gap: 1.5rem, max-width container, centered with auto margins
• Add .hof-card base styles: --bg-card background, --border-color border, --radius-lg border-radius, padding, flexbox column layout centered, transition: all var(--transition-normal)
• Add .hof-card:hover styles per ticket spec: transform: translateY(-6px), box-shadow: var(--shadow-lg), gradient top border using --accent-gradient
• Add .hof-avatar styles: circular (border-radius: 50%), fixed size (e.g., 80px), transition: all var(--transition-normal)
• Add .hof-avatar hover state (via .hof-card:hover .hof-avatar): transform: scale(1.05), border: 2px solid var(--accent-start)
• Add .hof-username styles: --text-primary color, font-weight, link styling
• Add .hof-username hover state: color transitions to var(--accent-mid)
• Add .hof-badge styles: small pill/chip using --accent-gradient background, white text, small font-size, padding, border-radius
• Add .hof-contributions styles: --text-secondary color, smaller font-size
• Ensure all styles work correctly in both dark and light themes by using only existing CSS variables

🤖 Prompt for AI agents

Implement Phase 1 by creating three new files (`docs/hall-of-fame.html`,
`docs/hall-of-fame.js`) and modifying one existing file (`docs/styles.css`) to
build the complete Hall of Fame page with theme support and styling.

**`docs/hall-of-fame.html`:**
- Create the file with `<html lang="en" data-theme="dark">` as the root element
- In `<head>`, include Inter/Outfit Google Fonts, a link to `styles.css`, and
the GoatCounter analytics script: `<script
data-goatcounter="https://riteshrana.goatcounter.com/count" async
src="//gc.zgo.at/count.js"></script>`
- Replicate the header structure from `index.html` using `.header >
.header-content > .logo + .header-actions`
- Include nav links for Jobs, Insights, and Hall of Fame — apply the `active`
class to the Hall of Fame link
  - Include the theme toggle button with sun/moon SVG icons and a GitHub link
- Add a slim hero section with:
  - Title: "Contributor Hall of Fame 🏆"
  - Subtitle: "Every line of code, config entry, and documentation fix matters."
  - A blob-container for visual consistency with other pages
- Add a stats bar section (`.hof-stats-bar`) with three static placeholder
stats: `[6 Contributors]`, `[XX Total PRs]`, `[XX Companies Added]`
- Create a `.hof-grid` container with 6 cards using real contributor data from
`.all-contributorsrc`
- Each `.hof-card` must contain: `.hof-avatar` (img), `.hof-username` (linked
`@username`), `.hof-badge` (derived from contributions array — "Maintainer"
where ambiguous, contribution type otherwise), and `.hof-contributions` span
- Replicate the footer from `index.html` exactly, adding a Hall of Fame link in
the Links section
- Load `hall-of-fame.js` at the end of `<body>`

**`docs/hall-of-fame.js`:**
- Implement `initTheme()`: reads from `localStorage` and `prefers-color-scheme`,
then sets the `data-theme` attribute on the root element
- Implement `toggleTheme()`: toggles between dark/light values and persists the
selection to `localStorage`
- Create an `elements` cache object referencing `#theme-toggle`
- Add a `DOMContentLoaded` listener that calls `initTheme()` and attaches a
click handler to the theme toggle button calling `toggleTheme()`
- Include no analytics tracking or other page-specific logic

**`docs/styles.css` additions:**
- `.hof-hero`: centered layout, `min-height: 40vh`, reusing existing
blob-container pattern
- `.hof-stats-bar`: flexbox row, centered, gap spacing, `--bg-secondary`
background, existing border-radius and shadow variables
- `.hof-grid`: CSS Grid with the following explicit breakpoints:
  - Default: `grid-template-columns: 1fr`
  - `min-width: 600px`: `repeat(2, 1fr)`
  - `min-width: 900px`: `repeat(3, 1fr)`
  - `min-width: 1400px`: `repeat(4, 1fr)`
  - `gap: 1.5rem`, `max-width` container, `margin: auto`
- `.hof-card`: `--bg-card` background, `--border-color` border, `--radius-lg`,
padding, centered flexbox column, `transition: all var(--transition-normal)`
- `.hof-card:hover`: `transform: translateY(-6px)`, `box-shadow:
var(--shadow-lg)`, gradient top border via `--accent-gradient`
- `.hof-avatar`: `border-radius: 50%`, fixed ~80px size, `transition: all
var(--transition-normal)`
- `.hof-card:hover .hof-avatar`: `transform: scale(1.05)`, `border: 2px solid
var(--accent-start)`
- `.hof-username` and hover: `--text-primary` color, font-weight, link styling;
hover transitions to `var(--accent-mid)`
- `.hof-badge`: pill/chip shape, `--accent-gradient` background, white text,
small font-size, padding, border-radius
- `.hof-contributions`: `--text-secondary` color, smaller font-size
- Use only existing CSS variables throughout to ensure dark/light theme
compatibility

Phase 2: Update Existing Page Navigation

Add the "Hall of Fame" navigation link to all existing pages to integrate the new page into the site navigation.

Task 1: Update index.html Navigation

Add Hall of Fame link to the main jobs page header and footer.

• Edit docs/index.html header: add <a href="hall-of-fame.html" class="nav-link">Hall of Fame</a> after the Insights link in .header-actions
• Update footer Links section to include "Hall of Fame" link alongside existing links

Task 2: Update stats.html Navigation

Add Hall of Fame link to the insights page header and footer.

• Edit docs/stats.html header: add <a href="hall-of-fame.html" class="nav-link">Hall of Fame</a> after the Insights link in .header-actions
• Update footer Links section to include "Hall of Fame" link alongside existing links

🤖 Prompt for AI agents

Implement Phase 2 by updating the navigation in the two existing HTML pages to
include a link to the new Hall of Fame page.

**`docs/index.html`:**
- In the header's `.header-actions`, add `<a href="hall-of-fame.html"
class="nav-link">Hall of Fame</a>` immediately after the existing Insights nav
link
- In the footer's Links section, add a "Hall of Fame" anchor tag linking to
`hall-of-fame.html` alongside existing footer links

**`docs/stats.html`:**
- In the header's `.header-actions`, add `<a href="hall-of-fame.html"
class="nav-link">Hall of Fame</a>` immediately after the existing Insights nav
link
- In the footer's Links section, add a "Hall of Fame" anchor tag linking to
`hall-of-fame.html` alongside existing footer links

Research

The docs/ directory contains a job board site with index.html (main page) and stats.html (insights page). Both share identical header/footer structure, use CSS custom properties for dark/light theming via data-theme attribute, and load page-specific JS files (app.js, stats.js). Styles are centralized in styles.css with established patterns for card grids (auto-fit/minmax), hover transitions (translateY(-4px), var(--transition-normal)), and responsive breakpoints (primarily 768px). Contributor data is available in .all-contributorsrc as structured JSON with avatar URLs, usernames, profile links, and contribution type arrays for 6 contributors.

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

Implement Phase 1 by creating three new files (`docs/hall-of-fame.html`,
`docs/hall-of-fame.js`) and modifying one existing file (`docs/styles.css`) to
build the complete Hall of Fame page with theme support and styling.

**`docs/hall-of-fame.html`:**
- Create the file with `<html lang="en" data-theme="dark">` as the root element
- In `<head>`, include Inter/Outfit Google Fonts, a link to `styles.css`, and
the GoatCounter analytics script: `<script
data-goatcounter="https://riteshrana.goatcounter.com/count" async
src="//gc.zgo.at/count.js"></script>`
- Replicate the header structure from `index.html` using `.header >
.header-content > .logo + .header-actions`
- Include nav links for Jobs, Insights, and Hall of Fame — apply the `active`
class to the Hall of Fame link
  - Include the theme toggle button with sun/moon SVG icons and a GitHub link
- Add a slim hero section with:
  - Title: "Contributor Hall of Fame 🏆"
  - Subtitle: "Every line of code, config entry, and documentation fix matters."
  - A blob-container for visual consistency with other pages
- Add a stats bar section (`.hof-stats-bar`) with three static placeholder
stats: `[6 Contributors]`, `[XX Total PRs]`, `[XX Companies Added]`
- Create a `.hof-grid` container with 6 cards using real contributor data from
`.all-contributorsrc`
- Each `.hof-card` must contain: `.hof-avatar` (img), `.hof-username` (linked
`@username`), `.hof-badge` (derived from contributions array — "Maintainer"
where ambiguous, contribution type otherwise), and `.hof-contributions` span
- Replicate the footer from `index.html` exactly, adding a Hall of Fame link in
the Links section
- Load `hall-of-fame.js` at the end of `<body>`

**`docs/hall-of-fame.js`:**
- Implement `initTheme()`: reads from `localStorage` and `prefers-color-scheme`,
then sets the `data-theme` attribute on the root element
- Implement `toggleTheme()`: toggles between dark/light values and persists the
selection to `localStorage`
- Create an `elements` cache object referencing `#theme-toggle`
- Add a `DOMContentLoaded` listener that calls `initTheme()` and attaches a
click handler to the theme toggle button calling `toggleTheme()`
- Include no analytics tracking or other page-specific logic

**`docs/styles.css` additions:**
- `.hof-hero`: centered layout, `min-height: 40vh`, reusing existing
blob-container pattern
- `.hof-stats-bar`: flexbox row, centered, gap spacing, `--bg-secondary`
background, existing border-radius and shadow variables
- `.hof-grid`: CSS Grid with the following explicit breakpoints:
  - Default: `grid-template-columns: 1fr`
  - `min-width: 600px`: `repeat(2, 1fr)`
  - `min-width: 900px`: `repeat(3, 1fr)`
  - `min-width: 1400px`: `repeat(4, 1fr)`
  - `gap: 1.5rem`, `max-width` container, `margin: auto`
- `.hof-card`: `--bg-card` background, `--border-color` border, `--radius-lg`,
padding, centered flexbox column, `transition: all var(--transition-normal)`
- `.hof-card:hover`: `transform: translateY(-6px)`, `box-shadow:
var(--shadow-lg)`, gradient top border via `--accent-gradient`
- `.hof-avatar`: `border-radius: 50%`, fixed ~80px size, `transition: all
var(--transition-normal)`
- `.hof-card:hover .hof-avatar`: `transform: scale(1.05)`, `border: 2px solid
var(--accent-start)`
- `.hof-username` and hover: `--text-primary` color, font-weight, link styling;
hover transitions to `var(--accent-mid)`
- `.hof-badge`: pill/chip shape, `--accent-gradient` background, white text,
small font-size, padding, border-radius
- `.hof-contributions`: `--text-secondary` color, smaller font-size
- Use only existing CSS variables throughout to ensure dark/light theme
compatibility
===============================================================================

Task: 2

Implement Phase 2 by updating the navigation in the two existing HTML pages to
include a link to the new Hall of Fame page.

**`docs/index.html`:**
- In the header's `.header-actions`, add `<a href="hall-of-fame.html"
class="nav-link">Hall of Fame</a>` immediately after the existing Insights nav
link
- In the footer's Links section, add a "Hall of Fame" anchor tag linking to
`hall-of-fame.html` alongside existing footer links

**`docs/stats.html`:**
- In the header's `.header-actions`, add `<a href="hall-of-fame.html"
class="nav-link">Hall of Fame</a>` immediately after the existing Insights nav
link
- In the footer's Links section, add a "Hall of Fame" anchor tag linking to
`hall-of-fame.html` alongside existing footer links

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!