feat: 3D contribution graph on PRs tab — canvas-rendered with warm palette

Draws a horizontal 53×7 grid of 3D bars (weeks × days) using live data
from github-contributions-api. Bar height maps to contribution count,
with top/right face shading for depth. Hover shows date + count tooltip.
Graph slides in smoothly when PRs tab is selected, hides on tab switch,
and re-renders on theme toggle with matching warm tones.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: aymuos15

index.html

@@ -91,6 +91,12 @@ <h1 class="name-link">Soumya Snigdha Kundu</h1>
                 <button class="tab" data-category="misc">Misc</button>
             </div>
             <div class="updates-list" id="updates-list"></div>
+            <div class="contrib-graph" id="contrib-graph">
+                <div class="contrib-graph__inner">
+                    <canvas id="contrib-canvas" aria-label="GitHub contributions"></canvas>
+                </div>
+            </div>
+            <div class="contrib-tip" id="contrib-tip"></div>
         </section>
 
         <section id="gallery" class="section">
@@ -107,6 +113,6 @@ <h1 class="name-link">Soumya Snigdha Kundu</h1>
         <span class="footer-info">namma Chennai | London | soumya_snigdha.kundu-at-kcl.ac.uk</span>
     </footer>
 
-    <script src="script.js"></script>
+<script src="script.js"></script>
 </body>
 </html>

script.js

@@ -12,6 +12,7 @@ document.addEventListener('DOMContentLoaded', () => {
         const next = current === 'light' ? 'dark' : 'light';
         document.documentElement.setAttribute('data-theme', next);
         localStorage.setItem('theme-preference', next);
+        if (contribGraph.classList.contains('visible')) _renderCanvas();
     });
 });
 
@@ -21,6 +22,133 @@ const navLinks = document.querySelectorAll('.nav-links a');
 const navToggle = document.querySelector('.nav-toggle');
 const updatesList = document.getElementById('updates-list');
 const tabs = document.querySelectorAll('.tab');
+const contribGraph  = document.getElementById('contrib-graph');
+const contribCanvas = document.getElementById('contrib-canvas');
+const contribTip    = document.getElementById('contrib-tip');
+
+// ── 3D isometric contribution graph ──────────────────────────────────────────
+let _weeks = [], _graphReady = false;
+
+function _colors() {
+    const dark = document.documentElement.getAttribute('data-theme') === 'dark';
+    return dark
+        ? ['#1e1c18', '#4a3520', '#8a6530', '#c4a060', '#f0d090']
+        : ['#e8e3da', '#c4a070', '#a07840', '#7a5520', '#4a3010'];
+}
+
+function _shade(hex, f) {
+    const n = parseInt(hex.slice(1), 16);
+    return `rgb(${Math.min(255,~~(((n>>16)&255)*f))},${Math.min(255,~~(((n>>8)&255)*f))},${Math.min(255,~~((n&255)*f))})`;
+}
+
+function _renderCanvas() {
+    if (!_weeks.length) return;
+    const pal = _colors();
+    const CW = 9, GAP = 2, PX = CW + GAP, PY = CW + GAP;
+    const MAX_H = 18, MIN_H = 1, DX = 3, DY = 3;
+    const nC = _weeks.length, nR = 7;
+    const maxN = Math.max(1, ..._weeks.flat().filter(Boolean).map(d => d.count));
+
+    const OX = 4, OY = MAX_H + DY + 4;
+    const W  = OX + nC * PX + DX + 4;
+    const H  = OY + nR * PY + 4;
+
+    const dpr = window.devicePixelRatio || 1;
+    contribCanvas.width  = Math.ceil(W * dpr);
+    contribCanvas.height = Math.ceil(H * dpr);
+    contribCanvas.style.width  = W + 'px';
+    contribCanvas.style.height = H + 'px';
+
+    const ctx = contribCanvas.getContext('2d');
+    ctx.scale(dpr, dpr);
+    ctx.clearRect(0, 0, W, H);
+
+    const hits = [];
+    for (let row = 0; row < nR; row++) {
+        for (let col = 0; col < nC; col++) {
+            const day   = _weeks[col]?.[row];
+            const level = day?.level ?? 0;
+            const count = day?.count ?? 0;
+            const h = count > 0 ? MIN_H + (count / maxN) * (MAX_H - MIN_H) : MIN_H;
+
+            const sx = OX + col * PX;
+            const by = OY + row * PY + CW;
+            const ty = by - h;
+            const c  = pal[level];
+
+            // front face
+            ctx.fillStyle = c;
+            ctx.fillRect(sx, ty, CW, h);
+            // top face
+            ctx.beginPath();
+            ctx.moveTo(sx, ty); ctx.lineTo(sx + CW, ty);
+            ctx.lineTo(sx + CW + DX, ty - DY); ctx.lineTo(sx + DX, ty - DY);
+            ctx.closePath(); ctx.fillStyle = _shade(c, 1.18); ctx.fill();
+            // right face
+            ctx.beginPath();
+            ctx.moveTo(sx + CW, ty); ctx.lineTo(sx + CW + DX, ty - DY);
+            ctx.lineTo(sx + CW + DX, by - DY); ctx.lineTo(sx + CW, by);
+            ctx.closePath(); ctx.fillStyle = _shade(c, 0.65); ctx.fill();
+
+            hits.push({ sx, ty, h, day });
+        }
+    }
+    contribCanvas._hits = hits;
+    contribCanvas._CW   = CW;
+}
+
+contribCanvas.addEventListener('mousemove', e => {
+    const hits = contribCanvas._hits;
+    if (!hits) return;
+    const CW = contribCanvas._CW;
+    const rect = contribCanvas.getBoundingClientRect();
+    const sc   = (parseFloat(contribCanvas.style.width) || rect.width) / rect.width;
+    const mx   = (e.clientX - rect.left) * sc;
+    const my   = (e.clientY - rect.top)  * sc;
+
+    let hit = null;
+    for (let i = hits.length - 1; i >= 0; i--) {
+        const { sx, ty, h } = hits[i];
+        if (mx >= sx && mx < sx + CW && my >= ty && my < ty + h) { hit = hits[i]; break; }
+    }
+
+    if (hit?.day) {
+        const { count, date } = hit.day;
+        const label = new Date(date + 'T12:00:00').toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
+        contribTip.textContent = `${count || 'no'} contribution${count !== 1 ? 's' : ''} · ${label}`;
+        contribTip.style.display = 'block';
+        contribTip.style.left = (e.clientX + 14) + 'px';
+        contribTip.style.top  = (e.clientY - 38) + 'px';
+    } else {
+        contribTip.style.display = 'none';
+    }
+});
+contribCanvas.addEventListener('mouseleave', () => { contribTip.style.display = 'none'; });
+
+async function _loadContribs() {
+    const res  = await window.fetch('https://github-contributions-api.jogruber.de/v4/aymuos15?y=last');
+    const days = (await res.json()).contributions || [];
+    const weeks = [];
+    let week = new Array(7).fill(null);
+    days.forEach(day => {
+        const dow = new Date(day.date + 'T12:00:00').getDay();
+        if (dow === 0 && week.some(Boolean)) { weeks.push([...week]); week = new Array(7).fill(null); }
+        week[dow] = day;
+    });
+    if (week.some(Boolean)) weeks.push(week);
+    return weeks;
+}
+
+function showContribGraph() {
+    contribGraph.classList.add('visible');
+    if (_graphReady) { _renderCanvas(); return; }
+    _loadContribs().then(w => { _weeks = w; _graphReady = true; _renderCanvas(); })
+        .catch(err => console.warn('Contrib graph:', err));
+}
+function hideContribGraph() {
+    contribGraph.classList.remove('visible');
+    contribTip.style.display = 'none';
+}
 
 // Mobile nav dropdown
 navToggle.addEventListener('click', () => {
@@ -142,7 +270,7 @@ function renderUpdates(category, resetScroll) {
         ? updates.filter(u => u.category !== 'pr')
         : updates.filter(u => u.category === category);
     updatesList.innerHTML = filtered.map((u, i) =>
-        `<div class="update-item" style="animation-delay: ${i * 30}ms"><span class="update-date">${u.date}</span><span class="update-desc">${u.description}</span></div>`
+        `<div class="update-item" data-category="${u.category}" style="animation-delay: ${i * 30}ms"><span class="update-date">${u.date}</span><span class="update-desc">${u.description}</span></div>`
     ).join('');
 
     if (resetScroll) {
@@ -164,12 +292,14 @@ tabs.forEach(tab => {
         tab.classList.add('active');
 
         updatesList.classList.add('fading');
+        hideContribGraph();
 
         setTimeout(() => {
             renderUpdates(tab.dataset.category, true);
             updatesList.classList.remove('fading');
             colorizeLinks();
             tabSwitching = false;
+            if (tab.dataset.category === 'pr') showContribGraph();
         }, 300);
     });
 });

styles/components/news.css

@@ -104,3 +104,47 @@
         min-width: 55px;
     }
 }
+
+/* Contribution graph — 3D canvas, PRs tab */
+.contrib-graph {
+    overflow: hidden;
+    max-height: 0;
+    transition: max-height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.contrib-graph.visible {
+    max-height: 500px;
+}
+
+.contrib-graph__inner {
+    padding-top: 1rem;
+    opacity: 0;
+    transform: translateY(14px);
+    transition: opacity 0.45s ease 0.2s, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
+}
+
+.contrib-graph.visible .contrib-graph__inner {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.contrib-graph canvas {
+    max-width: 100%;
+    display: block;
+    cursor: crosshair;
+}
+
+.contrib-tip {
+    display: none;
+    position: fixed;
+    z-index: 300;
+    font-family: var(--font-mono);
+    font-size: 0.62rem;
+    letter-spacing: 0.05em;
+    color: var(--text);
+    background: var(--bg);
+    border: 1px solid var(--border);
+    padding: 0.25rem 0.55rem;
+    pointer-events: none;
+    white-space: nowrap;
+}