web: contributors page, real avatars, bookmark redesign

- New /contributors page listing all 240 contributors (avatar, name,
  GitHub profile link), generated from the README contributors block by
  scripts/gen-contributors.mjs.
- Replace initial-letter avatars with real GitHub avatars on the homepage.
  Use direct avatars.githubusercontent.com URLs so they satisfy the site's
  COEP: require-corp header — github.com/<handle>.png 302-redirects and the
  redirect is blocked under COEP.
- Expand the homepage contributor wall from 12 to 30 cards; cards link out
  to GitHub profiles.
- Redesign the nav bookmark control as a labelled toggle button (lucide
  icon + count) with a clear active state, replacing the bare circle.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: Mrinank-Bhowmick

web/scripts/gen-contributors.mjs

@@ -0,0 +1,41 @@
+// Generates src/lib/contributors.json — every contributor, scraped from the
+// contrib-readme-action block in the repo's README.md (handle, display name,
+// GitHub avatar URL).
+//
+// Run from the web/ directory:  node scripts/gen-contributors.mjs
+// Re-run whenever the README's contributors list changes.
+
+import fs from "fs";
+import path from "path";
+
+const WEB = process.cwd();
+const README = path.join(WEB, "..", "README.md");
+const OUT = path.join(WEB, "src", "lib", "contributors.json");
+
+const BOTS = new Set(["lint-action", "github-actions", "dependabot"]);
+
+const md = fs.readFileSync(README, "utf8");
+const start = md.indexOf("<!-- readme: contributors -start -->");
+const end = md.indexOf("<!-- readme: contributors -end -->");
+if (start < 0 || end < 0) {
+  throw new Error("contributors block not found in README.md");
+}
+const block = md.slice(start, end);
+
+// Each entry: <a href="…/HANDLE"> <img src="AVATAR" … /> <br/> <sub><b>NAME</b></sub>
+const re =
+  /<a href="https:\/\/github\.com\/([^"/]+)">\s*<img src="([^"]+)"[^>]*\/>\s*<br\s*\/>\s*<sub><b>([^<]+)<\/b><\/sub>/g;
+
+const seen = new Set();
+const contributors = [];
+let m;
+while ((m = re.exec(block))) {
+  const handle = m[1].trim();
+  const key = handle.toLowerCase();
+  if (seen.has(key) || BOTS.has(key) || key.endsWith("[bot]")) continue;
+  seen.add(key);
+  contributors.push({ handle, name: m[3].trim(), avatar: m[2].trim() });
+}
+
+fs.writeFileSync(OUT, JSON.stringify(contributors, null, 2) + "\n");
+console.log(`contributors.json: ${contributors.length} contributors`);

web/src/app/contributors/page.tsx

@@ -0,0 +1,62 @@
+import type { Metadata } from "next";
+import SiteNav from "@/components/SiteNav";
+import SiteFooter from "@/components/SiteFooter";
+import { REPO_URL } from "@/lib/data";
+import type { RepoContributor } from "@/types";
+import contributors from "@/lib/contributors.json";
+
+// The full contributor roll, scraped from the README by scripts/gen-contributors.mjs.
+const CONTRIBUTORS = contributors as RepoContributor[];
+
+export const metadata: Metadata = {
+  title: "Contributors — pyBegin",
+  description: `The ${CONTRIBUTORS.length} people who built the pyBegin beginner-project collection.`,
+};
+
+export default function ContributorsPage() {
+  return (
+    <div className="s-shell">
+      <SiteNav />
+
+      <header className="s-crew-head">
+        <h1 className="s-crew-title">
+          Made by <em>{CONTRIBUTORS.length}</em> humans.
+        </h1>
+        <p className="s-crew-sub">
+          Everyone who has contributed a project or a fix to this open-source
+          collection. Your face could be here next —{" "}
+          <a href={`${REPO_URL}/blob/main/CONTRIBUTING.md`}>
+            start with the contributing guide
+          </a>
+          .
+        </p>
+      </header>
+
+      <div className="s-crew-grid">
+        {CONTRIBUTORS.map((c) => (
+          <a
+            key={c.handle}
+            className="s-crew-card"
+            href={`https://github.com/${c.handle}`}
+            target="_blank"
+            rel="noreferrer"
+            title={`${c.name} — @${c.handle}`}
+          >
+            <img
+              className="s-crew-avatar"
+              src={`${c.avatar}&s=132`}
+              alt=""
+              width={66}
+              height={66}
+              loading="lazy"
+            />
+            <div className="s-crew-name">{c.name}</div>
+            <div className="s-crew-handle">@{c.handle}</div>
+          </a>
+        ))}
+      </div>
+
+      <SiteFooter />
+    </div>
+  );
+}

web/src/app/globals.css

@@ -82,17 +82,24 @@ a { color: inherit; }
 .s-navlinks a.active, .s-navlinks button.active { background: var(--s-ink); color: var(--s-bg); }
 .s-navlinks a:hover:not(.active), .s-navlinks button:hover:not(.active) { background: rgba(29,24,48, 0.08); }
 .s-nav-right { display: flex; gap: 10px; align-items: center; }
-.s-bm-count {
-  width: 38px; height: 38px; border-radius: 50%;
+.s-bm-btn {
+  display: inline-flex; align-items: center; gap: 6px;
+  height: 38px; padding: 0 14px; border-radius: var(--s-radius-pill);
   background: var(--s-surface); border: var(--s-border-thin);
-  display: grid; place-items: center; font-weight: 700; font-size: 14px;
-  box-shadow: 3px 3px 0 var(--s-ink); position: relative; cursor: pointer;
-}
-.s-bm-count.has::after {
-  content: ''; position: absolute; top: 4px; right: 4px;
-  width: 8px; height: 8px; border-radius: 50%; background: var(--s-accent);
-  border: 1.5px solid var(--s-ink);
-}
+  box-shadow: 3px 3px 0 var(--s-ink);
+  font-weight: 800; font-size: 13px; color: var(--s-ink); cursor: pointer;
+  transition: transform .1s, box-shadow .1s, background .12s, color .12s;
+}
+.s-bm-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--s-ink); }
+.s-bm-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--s-ink); }
+.s-bm-btn.active { background: var(--s-ink); color: var(--s-bg); }
+.s-bm-n { font-family: var(--s-mono); font-size: 12.5px; font-weight: 800; }
+.s-bm-btn.active .s-bm-n { color: var(--s-accent); }
+.s-bm-word {
+  font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+@media (max-width: 520px) { .s-bm-word { display: none; } }
 .s-cta {
   padding: 12px 22px; border-radius: var(--s-radius-pill);
   background: var(--s-ink); color: var(--s-bg);
@@ -390,6 +397,56 @@ a { color: inherit; }
   background: var(--s-ink); color: var(--s-bg); font-size: 11px; font-weight: 800;
   letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--s-radius-pill);
 }
+/* real GitHub avatars (replace the initials) */
+img.s-avatar { display: block; object-fit: cover; padding: 0; }
+a.s-contrib { display: block; text-decoration: none; color: inherit; }
+
+/* ---- /contributors — the full crew page ---- */
+.s-crew-head { margin: 40px 0 28px; max-width: 720px; }
+.s-crew-title {
+  font-family: var(--s-display); font-weight: 900;
+  font-size: clamp(34px, 5vw, 56px); letter-spacing: -0.03em; line-height: 1;
+}
+.s-crew-title em {
+  font-style: normal; color: var(--s-accent);
+  -webkit-text-stroke: 1.5px var(--s-ink);
+}
+.s-crew-sub {
+  margin-top: 14px; font-size: 16px; line-height: 1.55;
+  color: rgba(29, 24, 48, 0.7);
+}
+.s-crew-sub a { color: var(--s-accent); font-weight: 700; }
+.s-crew-sub a:hover { text-decoration: underline; }
+.s-crew-grid {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 14px; margin-bottom: 56px;
+}
+.s-crew-card {
+  display: flex; flex-direction: column; align-items: center; text-align: center;
+  padding: 20px 12px; border-radius: 16px;
+  background: var(--s-surface); border: var(--s-border-thin);
+  box-shadow: 4px 4px 0 var(--s-ink);
+  text-decoration: none; color: inherit;
+  transition: transform .15s, box-shadow .15s;
+}
+.s-crew-card:hover {
+  transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--s-accent);
+}
+.s-crew-avatar {
+  width: 66px; height: 66px; border-radius: 50%; object-fit: cover;
+  border: var(--s-border-thin); background: var(--s-bg);
+}
+.s-crew-name {
+  margin-top: 12px; font-weight: 800; font-size: 14px; line-height: 1.25;
+  overflow-wrap: anywhere;
+}
+.s-crew-handle {
+  margin-top: 3px; font-family: var(--s-mono); font-size: 11px;
+  color: rgba(29, 24, 48, 0.55); overflow-wrap: anywhere;
+}
+@media (max-width: 640px) {
+  .s-crew-grid { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); }
+}
 
 .s-more { display: flex; justify-content: center; margin-top: 28px; }
 .s-more button, .s-more a {

web/src/components/Home.tsx

@@ -5,6 +5,7 @@
 
 import { useEffect, useMemo, useState } from "react";
 import Link from "next/link";
+import { Bookmark } from "lucide-react";
 import StickerLogo from "./StickerLogo";
 import ScribbleSvg from "./ScribbleSvg";
 import HeroStickers from "./HeroStickers";
@@ -13,7 +14,21 @@ import ProjectModal from "./ProjectModal";
 import SiteFooter from "./SiteFooter";
 import { CATEGORIES, CONTRIBUTORS, PATHS, PROJECTS, REPO_URL, getProject } from "@/lib/data";
 import { getBookmarks, toggleBookmark } from "@/lib/bookmarks";
-import type { Project } from "@/types";
+import contributors from "@/lib/contributors.json";
+import type { Project, RepoContributor } from "@/types";
+
+const CREW = contributors as RepoContributor[];
+
+// Resolve a handle to its GitHub avatar. Uses the direct avatars.github URL
+// (not github.com/<handle>.png — that 302-redirects and the redirect is
+// blocked by the site's COEP: require-corp header).
+const AVATARS = new Map(
+  contributors.map((c) => [c.handle.toLowerCase(), c.avatar]),
+);
+const avatarFor = (handle: string, size: number) => {
+  const url = AVATARS.get(handle.toLowerCase());
+  return url ? `${url}&s=${size}` : `https://github.com/${handle}.png`;
+};
 
 const ACCENT = "#ff7a59";
 const SORTS = ["default", "alpha", "short", "bookmarks"] as const;
@@ -81,16 +96,29 @@ export default function Home() {
             <button onClick={() => scrollTo("crew")}>Contribute</button>
           </div>
           <div className="s-nav-right">
-            <div
-              className={`s-bm-count ${bm.length ? "has" : ""}`}
-              title="Bookmarks"
+            <button
+              type="button"
+              className={`s-bm-btn${showBmOnly ? " active" : ""}`}
+              aria-pressed={showBmOnly}
+              title={
+                showBmOnly
+                  ? "Showing saved projects — click to show all"
+                  : "Show your saved projects"
+              }
               onClick={() => {
                 setShowBmOnly((v) => !v);
                 scrollTo("gallery");
               }}
             >
-              ★<span style={{ fontSize: 11, marginLeft: 2 }}>{bm.length}</span>
-            </div>
+              <Bookmark
+                size={15}
+                strokeWidth={2.5}
+                fill={bm.length ? "currentColor" : "none"}
+                aria-hidden="true"
+              />
+              <span className="s-bm-n">{bm.length}</span>
+              <span className="s-bm-word">saved</span>
+            </button>
             <a className="s-cta" href={REPO_URL} target="_blank" rel="noreferrer">
               ★ Star · 2.3k
             </a>
@@ -305,7 +333,13 @@ export default function Home() {
           </div>
           <div className="s-contributors">
             <div className="s-contrib lead">
-              <div className="s-avatar">{CONTRIBUTORS[0].name[0]}</div>
+              <img
+                className="s-avatar"
+                src={avatarFor(CONTRIBUTORS[0].handle, 200)}
+                alt=""
+                width={84}
+                height={84}
+              />
               <div className="s-cname">{CONTRIBUTORS[0].name}</div>
               <div className="s-chandle">@{CONTRIBUTORS[0].handle}</div>
               <p className="s-quote">
@@ -315,24 +349,34 @@ export default function Home() {
               </p>
               <div className="s-badge">Maintainer · 412 commits</div>
             </div>
-            {CONTRIBUTORS.slice(1, 13).map((c) => (
-              <div key={c.handle} className="s-contrib">
-                <div className="s-avatar">{c.name[0]}</div>
+            {CREW.slice(1, 31).map((c) => (
+              <a
+                key={c.handle}
+                className="s-contrib"
+                href={`https://github.com/${c.handle}`}
+                target="_blank"
+                rel="noreferrer"
+              >
+                <img
+                  className="s-avatar"
+                  src={`${c.avatar}&s=120`}
+                  alt=""
+                  width={56}
+                  height={56}
+                  loading="lazy"
+                />
                 <div className="s-cname">{c.name.split(" ")[0]}</div>
                 <div className="s-chandle">
                   @
                   {c.handle.length > 12
                     ? c.handle.slice(0, 12) + "…"
                     : c.handle}
                 </div>
-                <div className="s-commits">{c.commits} ★</div>
-              </div>
+              </a>
             ))}
           </div>
           <div className="s-more">
-            <a href={`${REPO_URL}/graphs/contributors`}>
-              See all 241 contributors →
-            </a>
+            <Link href="/contributors">See all contributors →</Link>
           </div>
         </section>