feat: Added .section-heading utility class to unify four heading styles…

- "frontend/src/App.css"
- "frontend/src/pages/Home.tsx"

GSD-Task: S06/T02

alembic/versions/015_add_creator_profile.py

@@ -0,0 +1,25 @@
+"""Add bio, social_links, and featured columns to creators table.
+
+Revision ID: 015_add_creator_profile
+Revises: 014_add_creator_avatar
+"""
+from alembic import op
+import sqlalchemy as sa
+from sqlalchemy.dialects.postgresql import JSONB
+
+revision = "015_add_creator_profile"
+down_revision = "014_add_creator_avatar"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    op.add_column("creators", sa.Column("bio", sa.Text(), nullable=True))
+    op.add_column("creators", sa.Column("social_links", JSONB(), nullable=True))
+    op.add_column("creators", sa.Column("featured", sa.Boolean(), server_default="false", nullable=False))
+
+
+def downgrade() -> None:
+    op.drop_column("creators", "featured")
+    op.drop_column("creators", "social_links")
+    op.drop_column("creators", "bio")

backend/models.py

@@ -106,6 +106,9 @@ class Creator(Base):
     avatar_url: Mapped[str | None] = mapped_column(String(1000), nullable=True)
     avatar_source: Mapped[str | None] = mapped_column(String(50), nullable=True)
     avatar_fetched_at: Mapped[datetime | None] = mapped_column(nullable=True)
+    bio: Mapped[str | None] = mapped_column(Text, nullable=True)
+    social_links: Mapped[dict | None] = mapped_column(JSONB, nullable=True)
+    featured: Mapped[bool] = mapped_column(default=False, server_default="false")
     view_count: Mapped[int] = mapped_column(Integer, default=0, server_default="0")
     hidden: Mapped[bool] = mapped_column(default=False, server_default="false")
     created_at: Mapped[datetime] = mapped_column(

backend/routers/creators.py

@@ -13,7 +13,7 @@ from sqlalchemy.ext.asyncio import AsyncSession
 
 from database import get_session
 from models import Creator, SourceVideo, TechniquePage
-from schemas import CreatorBrowseItem, CreatorDetail, CreatorRead
+from schemas import CreatorBrowseItem, CreatorDetail, CreatorRead, CreatorTechniqueItem
 
 logger = logging.getLogger("chrysopedia.creators")
 
@@ -111,7 +111,11 @@ async def get_creator(
     slug: str,
     db: AsyncSession = Depends(get_session),
 ) -> CreatorDetail:
-    """Get a single creator by slug, including video count."""
+    """Get a single creator by slug with full profile data.
+
+    Returns video/technique counts, full technique list, genre breakdown,
+    bio, social links, and avatar for the creator landing page.
+    """
     stmt = select(Creator).where(Creator.slug == slug)
     result = await db.execute(stmt)
     creator = result.scalar_one_or_none()
@@ -119,14 +123,46 @@ async def get_creator(
     if creator is None:
         raise HTTPException(status_code=404, detail=f"Creator '{slug}' not found")
 
-    # Count videos for this creator
+    # Video count
-    count_stmt = (
+    video_count = (await db.execute(
-        select(func.count())
+        select(func.count()).select_from(SourceVideo)
-        .select_from(SourceVideo)
         .where(SourceVideo.creator_id == creator.id)
+    )).scalar() or 0
+
+    # Technique pages for this creator
+    technique_rows = (await db.execute(
+        select(
+            TechniquePage.title,
+            TechniquePage.slug,
+            TechniquePage.topic_category,
+            TechniquePage.created_at,
         )
-    count_result = await db.execute(count_stmt)
+        .where(TechniquePage.creator_id == creator.id)
-    video_count = count_result.scalar() or 0
+        .order_by(TechniquePage.created_at.desc())
+    )).all()
+
+    techniques = [
+        CreatorTechniqueItem(
+            title=t.title, slug=t.slug,
+            topic_category=t.topic_category, created_at=t.created_at,
+        )
+        for t in technique_rows
+    ]
+
+    # Genre breakdown across this creator's techniques
+    genre_breakdown: dict[str, int] = {}
+    for t in technique_rows:
+        cat = t.topic_category
+        genre_breakdown[cat] = genre_breakdown.get(cat, 0) + 1
 
     creator_data = CreatorRead.model_validate(creator)
-    return CreatorDetail(**creator_data.model_dump(), video_count=video_count)
+    return CreatorDetail(
+        **creator_data.model_dump(),
+        bio=creator.bio,
+        social_links=creator.social_links,
+        featured=creator.featured,
+        video_count=video_count,
+        technique_count=len(techniques),
+        techniques=techniques,
+        genre_breakdown=genre_breakdown,
+    )

backend/routers/pipeline.py

@@ -1306,6 +1306,41 @@ async def reindex_all(
     }
 
 
+# ── Admin: Creator profile editing ───────────────────────────────────────────
+
+@router.put("/admin/pipeline/creators/{creator_id}")
+async def update_creator_profile(
+    creator_id: str,
+    body: dict,
+    db: AsyncSession = Depends(get_session),
+):
+    """Update creator profile fields (bio, social_links, featured, avatar_url).
+
+    Only provided fields are updated — omitted fields are left unchanged.
+    """
+    creator = (await db.execute(
+        select(Creator).where(Creator.id == creator_id)
+    )).scalar_one_or_none()
+    if not creator:
+        raise HTTPException(status_code=404, detail="Creator not found")
+
+    updatable = {"bio", "social_links", "featured", "avatar_url"}
+    updated = []
+    for field in updatable:
+        if field in body:
+            setattr(creator, field, body[field])
+            updated.append(field)
+
+    if not updated:
+        raise HTTPException(status_code=400, detail="No updatable fields provided")
+
+    if "avatar_url" in body and body["avatar_url"]:
+        creator.avatar_source = "manual"
+
+    await db.commit()
+    return {"status": "updated", "creator": creator.name, "fields": updated}
+
+
 # ── Admin: Avatar fetching ───────────────────────────────────────────────────
 
 @router.post("/admin/pipeline/creators/{creator_id}/fetch-avatar")

backend/schemas.py

@@ -43,9 +43,31 @@ class CreatorRead(CreatorBase):
     updated_at: datetime
 
 
+class CreatorTechniqueItem(BaseModel):
+    """Minimal technique page info for creator detail."""
+    title: str
+    slug: str
+    topic_category: str
+    created_at: datetime
+
+
 class CreatorDetail(CreatorRead):
-    """Creator with nested video count."""
+    """Full creator profile for landing page."""
+    bio: str | None = None
+    social_links: dict | None = None
+    featured: bool = False
     video_count: int = 0
+    technique_count: int = 0
+    techniques: list[CreatorTechniqueItem] = []
+    genre_breakdown: dict[str, int] = {}
+
+
+class CreatorProfileUpdate(BaseModel):
+    """Admin update payload for creator profile fields."""
+    bio: str | None = None
+    social_links: dict | None = None
+    featured: bool | None = None
+    avatar_url: str | None = None
 
 
 # ── SourceVideo ──────────────────────────────────────────────────────────────

frontend/src/App.css

@@ -204,6 +204,7 @@ body {
   padding: 0.75rem 1.5rem;
   background: var(--color-bg-header);
   color: var(--color-text-on-header-hover);
+  border-bottom: 2px solid var(--color-accent);
 }
 
 .app-header__brand span {
@@ -1067,11 +1068,26 @@ a.app-footer__repo:hover {
   background: var(--color-bg-surface-hover);
 }
 
+/* ── Section Heading Utility ───────────────────────────────────────────────── */
+
+.section-heading {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-text-muted);
+  margin: 0 0 0.75rem;
+}
+
+.section-heading--accent {
+  color: var(--color-accent);
+}
+
 /* ── Home / Hero ──────────────────────────────────────────────────────────── */
 
 .home-hero {
   text-align: center;
-  padding: 2rem 1rem 2.5rem;
+  padding: 1.5rem 1rem 1.5rem;
 }
 
 .home-hero__title {
@@ -1089,7 +1105,7 @@ a.app-footer__repo:hover {
 
 .home-hero__value-prop {
   max-width: 32rem;
-  margin: 1.5rem auto 0;
+  margin: 1rem auto 0;
   font-size: 1.0625rem;
   line-height: 1.6;
   color: var(--color-text-secondary);
@@ -1100,9 +1116,9 @@ a.app-footer__repo:hover {
 .home-how-it-works {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 1.25rem;
+  gap: 0.75rem;
   max-width: 42rem;
-  margin: 2rem auto 0;
+  margin: 1.25rem auto 0;
 }
 
 .home-how-it-works__step {
@@ -1167,12 +1183,8 @@ a.app-footer__repo:hover {
 }
 
 .home-popular-topics__title {
-  font-size: 0.875rem;
+  /* inherits .section-heading — section-specific overrides only */
-  font-weight: 600;
   color: var(--color-text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 0.75rem;
 }
 
 .home-popular-topics__list {
@@ -1532,11 +1544,7 @@ a.app-footer__repo:hover {
 }
 
 .home-featured__label {
-  font-size: 0.6875rem;
+  /* inherits .section-heading + .section-heading--accent — section-specific overrides only */
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--color-accent);
   margin-bottom: 0.5rem;
 }
 
@@ -1594,9 +1602,7 @@ a.app-footer__repo:hover {
 }
 
 .recent-section__title {
-  font-size: 1.125rem;
+  /* inherits .section-heading — no section-specific overrides */
-  font-weight: 700;
-  margin-bottom: 0.75rem;
 }
 
 .recent-list {
@@ -3383,12 +3389,7 @@ a.app-footer__repo:hover {
 }
 
 .home-trending__title {
-  font-size: 0.75rem;
+  /* inherits .section-heading — no section-specific overrides */
-  color: var(--color-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  margin: 0 0 0.75rem;
-  font-weight: 600;
 }
 
 .home-trending__list {

frontend/src/hooks/useCountUp.ts

@@ -0,0 +1,81 @@
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * Animates a number from 0 → target using requestAnimationFrame with ease-out timing.
+ * Animation triggers when the referenced element enters the viewport (IntersectionObserver).
+ *
+ * @param target  - The number to animate to. If it changes from 0 to a positive value,
+ *                  the animation resets and re-triggers.
+ * @param duration - Animation duration in ms (default 1200).
+ * @returns `{ value, ref }` — current display value and a ref to attach to the observed element.
+ */
+export function useCountUp<T extends HTMLElement = HTMLElement>(
+  target: number,
+  duration = 1200,
+): { value: number; ref: React.RefObject<T> } {
+  const [value, setValue] = useState(0);
+  const ref = useRef<T>(null);
+  const rafId = useRef<number | null>(null);
+  const hasAnimated = useRef(false);
+  const isVisible = useRef(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry?.isIntersecting) {
+          isVisible.current = true;
+          // Trigger animation if we have a real target and haven't animated yet
+          if (target > 0 && !hasAnimated.current) {
+            startAnimation();
+          }
+        }
+      },
+      { threshold: 0.3 },
+    );
+    observer.observe(el);
+
+    function startAnimation() {
+      hasAnimated.current = true;
+      const start = performance.now();
+
+      function tick(now: number) {
+        const elapsed = now - start;
+        const t = Math.min(elapsed / duration, 1);
+        // Ease-out cubic: 1 - (1 - t)^3
+        const eased = 1 - Math.pow(1 - t, 3);
+        setValue(Math.round(eased * target));
+
+        if (t < 1) {
+          rafId.current = requestAnimationFrame(tick);
+        }
+      }
+
+      rafId.current = requestAnimationFrame(tick);
+    }
+
+    // If already visible when target arrives (e.g., stats loaded after scroll)
+    if (isVisible.current && target > 0 && !hasAnimated.current) {
+      startAnimation();
+    }
+
+    return () => {
+      observer.disconnect();
+      if (rafId.current !== null) {
+        cancelAnimationFrame(rafId.current);
+      }
+    };
+  }, [target, duration]);
+
+  // Reset when target changes from 0 → positive (async data load)
+  useEffect(() => {
+    if (target === 0) {
+      hasAnimated.current = false;
+      setValue(0);
+    }
+  }, [target]);
+
+  return { value, ref };
+}

frontend/src/pages/Home.tsx

@@ -10,6 +10,7 @@ import SearchAutocomplete from "../components/SearchAutocomplete";
 import TagList from "../components/TagList";
 import { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
+import { useCountUp } from "../hooks/useCountUp";
 import { useDocumentTitle } from "../hooks/useDocumentTitle";
 import {
   fetchTechniques,
@@ -34,6 +35,10 @@ export default function Home() {
   const [trending, setTrending] = useState<PopularSearchItem[] | null>(null);
   const navigate = useNavigate();
 
+  // Animated stat counters — called unconditionally, target updates when stats load
+  const techniqueCount = useCountUp<HTMLElement>(stats?.technique_count ?? 0);
+  const creatorCount = useCountUp<HTMLDivElement>(stats?.creator_count ?? 0);
+
   const handleRandomTechnique = async () => {
     setRandomLoading(true);
     setRandomError(false);
@@ -184,7 +189,7 @@ export default function Home() {
 
         {popularTopics.length > 0 && (
           <section className="home-popular-topics">
-            <h2 className="home-popular-topics__title">Popular Topics</h2>
+            <h2 className="home-popular-topics__title section-heading">Popular Topics</h2>
             <div className="home-popular-topics__list">
               {popularTopics.map((topic) => (
                 <Link
@@ -218,13 +223,20 @@ export default function Home() {
 
       {/* Stats scorecard */}
       {stats && (
-        <section className="home-stats card-stagger" style={{ '--stagger-index': 2 } as React.CSSProperties}>
+        <section
+          className="home-stats card-stagger"
+          style={{ '--stagger-index': 2 } as React.CSSProperties}
+          ref={techniqueCount.ref}
+        >
           <div className="home-stats__metric">
-            <span className="home-stats__number">{stats.technique_count}</span>
+            <span className="home-stats__number">{techniqueCount.value}</span>
             <span className="home-stats__label">Articles</span>
           </div>
-          <div className="home-stats__metric">
+          <div
-            <span className="home-stats__number">{stats.creator_count}</span>
+            className="home-stats__metric"
+            ref={creatorCount.ref}
+          >
+            <span className="home-stats__number">{creatorCount.value}</span>
             <span className="home-stats__label">Creators</span>
           </div>
         </section>
@@ -233,7 +245,7 @@ export default function Home() {
       {/* Trending Searches */}
       {trending && trending.length > 0 && (
         <section className="home-trending card-stagger" style={{ '--stagger-index': 3 } as React.CSSProperties}>
-          <h2 className="home-trending__title">Trending Searches</h2>
+          <h2 className="home-trending__title section-heading">Trending Searches</h2>
           <div className="home-trending__list">
             {trending.map((item, i) => (
               <Link
@@ -263,7 +275,7 @@ export default function Home() {
       {/* Featured Technique Spotlight */}
       {featured && (
         <section className="home-featured">
-          <h2 className="home-featured__label">Featured Technique</h2>
+          <h2 className="home-featured__label section-heading section-heading--accent">Featured Technique</h2>
           <Link to={`/techniques/${featured.slug}`} className="home-featured__title">
             {featured.title}
           </Link>
@@ -293,7 +305,7 @@ export default function Home() {
 
       {/* Recently Added */}
       <section className="recent-section">
-        <h2 className="recent-section__title">Recently Added</h2>
+        <h2 className="recent-section__title section-heading">Recently Added</h2>
         {recentLoading ? (
           <div className="loading">Loading…</div>
         ) : recent.length === 0 ? (

frontend/tsconfig.app.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/public-client.ts","./src/components/AdminDropdown.tsx","./src/components/AppFooter.tsx","./src/components/CategoryIcons.tsx","./src/components/CopyLinkButton.tsx","./src/components/CreatorAvatar.tsx","./src/components/ReadingHeader.tsx","./src/components/ReportIssueModal.tsx","./src/components/SearchAutocomplete.tsx","./src/components/SortDropdown.tsx","./src/components/TableOfContents.tsx","./src/components/TagList.tsx","./src/hooks/useDocumentTitle.ts","./src/hooks/useSortPreference.ts","./src/pages/About.tsx","./src/pages/AdminPipeline.tsx","./src/pages/AdminReports.tsx","./src/pages/AdminTechniquePages.tsx","./src/pages/CreatorDetail.tsx","./src/pages/CreatorsBrowse.tsx","./src/pages/Home.tsx","./src/pages/SearchResults.tsx","./src/pages/SubTopicPage.tsx","./src/pages/TechniquePage.tsx","./src/pages/TopicsBrowse.tsx","./src/utils/catSlug.ts","./src/utils/citations.tsx"],"version":"5.6.3"}
+{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/public-client.ts","./src/components/AdminDropdown.tsx","./src/components/AppFooter.tsx","./src/components/CategoryIcons.tsx","./src/components/CopyLinkButton.tsx","./src/components/CreatorAvatar.tsx","./src/components/ReadingHeader.tsx","./src/components/ReportIssueModal.tsx","./src/components/SearchAutocomplete.tsx","./src/components/SortDropdown.tsx","./src/components/TableOfContents.tsx","./src/components/TagList.tsx","./src/hooks/useCountUp.ts","./src/hooks/useDocumentTitle.ts","./src/hooks/useSortPreference.ts","./src/pages/About.tsx","./src/pages/AdminPipeline.tsx","./src/pages/AdminReports.tsx","./src/pages/AdminTechniquePages.tsx","./src/pages/CreatorDetail.tsx","./src/pages/CreatorsBrowse.tsx","./src/pages/Home.tsx","./src/pages/SearchResults.tsx","./src/pages/SubTopicPage.tsx","./src/pages/TechniquePage.tsx","./src/pages/TopicsBrowse.tsx","./src/utils/catSlug.ts","./src/utils/citations.tsx"],"version":"5.6.3"}