design: color the contribution graph and add click-to-flip photo cards by FindMalek · Pull Request #144 · FindMalek/website

FindMalek · 2026-09-11T15:38:51Z

Summary

Recolors the GitHub contributions graph with a green activity scale (levels 0-4, light/dark aware) instead of flat grayscale opacity steps, and hides the tooltip for zero-contribution days.
Adds a personal story caption to every photo card in the About section's card stack, plus 4 new photo cards (Jbal Rsas summit, Vanille, a Cappadocia balloon ride with the Jobflow team, and Nevey), and makes the top card flip on tap to reveal its story.

Test plan

pnpm lint — no errors
pnpm tsc --noEmit — no errors
pnpm build — blocked in this sandbox by a missing .env.local (not present even in the main checkout, unrelated to this change); please verify a full build locally
Visual check of the flip interaction and new photos in a real browser (not done in this environment — please confirm before merging)

Closes #143

🤖 Generated with Claude Code

https://claude.ai/code/session_016LmYnyiogFPyQ4cf9MtGNo

Summary by CodeRabbit

New Features
- Added tap-to-flip image cards that reveal personal stories and optional links.
- Added new story-driven image cards to the overview section.
- Cards reset when moved from the top position, and links remain independently clickable.
Improvements
- Updated contribution graphs with clearer green activity levels and improved dark-mode colors.
- Removed tooltips from days with no contributions while retaining them for active days.

- Recolor the GitHub contribution graph with a green activity scale (light/dark aware) instead of flat grayscale opacity steps, and skip the tooltip on zero-contribution days. - Add a story/caption to each photo card and 4 new photos (Jbal Rsas summit, Vanille, Cappadocia balloon ride with the Jobflow team, and Nevey), and make the top card flip on tap to reveal its story. Closes #143 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016LmYnyiogFPyQ4cf9MtGNo

chatgpt-codex-connector · 2026-09-11T15:38:55Z

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

vercel · 2026-09-11T15:38:57Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
findmalek	Ready	Preview	Sep 11, 2026 3:53pm UTC

coderabbitai · 2026-09-11T15:39:47Z

Warning

Review limit reached

Next included review available in 46 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: 3e3de017-1d23-4dfa-aabf-126f2685aecd

📥 Commits

Reviewing files that changed from the base of the PR and between 5f2d7c3 and 364c4f3.

📒 Files selected for processing (3)

components/app/about-overview-card-stack.tsx
components/app/about-overview-cards-stack.tsx
components/app/github-contributions.tsx

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: e35d3846-f2ca-4667-8628-9c63b4567f67

📥 Commits

Reviewing files that changed from the base of the PR and between 89e9416 and 5f2d7c3.

⛔ Files ignored due to path filters (4)

public/about/cappadocia-balloon-jobflow.jpg is excluded by !**/*.jpg
public/about/jbal-rsas-summit.jpg is excluded by !**/*.jpg
public/about/nevey-cat.jpg is excluded by !**/*.jpg
public/about/vanille-cat.jpg is excluded by !**/*.jpg

📒 Files selected for processing (5)

components/app/about-overview-card-stack.tsx
components/app/contribution-graph.tsx
components/app/github-contributions.tsx
config/consts.ts
types/index.d.ts

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

📝 Walkthrough

Walkthrough

Changes

Homepage interactions

Layer / File(s)	Summary
Photo card data and story contracts `types/index.d.ts`, `config/consts.ts`	`CardData` now supports stories and optional story links. Overview cards include story content and new image entries.
Photo card flip interaction `components/app/about-overview-card-stack.tsx`	Top image cards flip on tap to show stories. Story links stop card toggling. Flip state resets when cards leave the top position, and drag overlays ignore pointer events while flipped.
Contribution graph rendering `components/app/contribution-graph.tsx`, `components/app/github-contributions.tsx`	Contribution levels use green theme colors. Empty contribution days render without tooltips.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant AboutOverviewCardStack
  participant CardData
  participant Jobflow
  User->>AboutOverviewCardStack: Tap top image card
  AboutOverviewCardStack->>CardData: Read story and storyLink
  CardData-->>AboutOverviewCardStack: Return story content
  AboutOverviewCardStack-->>User: Render flipped story face
  User->>Jobflow: Select optional story link

Merge Risk: ⚪ Minimal · up to 5f2d7

The contribution graph and photo-card updates preserve their stated rendering and interaction contracts, with no current merge-blocking risk identified.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 5 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Linked Issues check	❓ Inconclusive	The implementation evidence supports most requirements in `#143`. The contribution graph uses green light/dark classes, zero-count days bypass tooltips, `CardData` has `story` and `storyLink`, the card …	Provide reviewable evidence that `public/about/jbal-rsas-summit.jpg`, `public/about/vanille-cat.jpg`, `public/about/cappadocia-balloon-jobflow.jpg`, and `public/about/nevey-cat.jpg` exist and that the card data contains exactly the four req…

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes both primary changes: contribution graph recoloring and tap-to-flip photo cards.
Description check	✅ Passed	The description explains the changes, links the issue, and documents completed and pending validation. It uses different headings from the template and does not explicitly address every checklist item…
Out of Scope Changes check	✅ Passed	The reviewed changes map to the coding objectives in `#143`: contribution styling, zero-day tooltip handling, photo-card stories, four photo-card additions, the Jobflow link, and tap-to-flip behavior. N…

Full details: Linked Issues check

Explanation

The implementation evidence supports most requirements in #143. The contribution graph uses green light/dark classes, zero-count days bypass tooltips, CardData has story and storyLink, the card data includes stories and the Jobflow link, and the card component adds flip-state handling with drag overlay control. Linting and TypeScript checks pass. The four required JPEG files are excluded from review, so their presence and exact content cannot be established. The summary also gives inconsistent counts for the new image cards. Browser verification of drag-versus-tap behavior remains pending.

Resolution

Provide reviewable evidence that public/about/jbal-rsas-summit.jpg, public/about/vanille-cat.jpg, public/about/cappadocia-balloon-jobflow.jpg, and public/about/nevey-cat.jpg exist and that the card data contains exactly the four required new image cards. Verify the flip and drag interaction in a browser.

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch design/143-streak-and-photo-stack

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01A4sWRNRb5YFhgEQ27zJain

…ipe, fix the flip - Revert the contribution graph to its grayscale theme and instead highlight just the current active streak's days in gold, computed from real contribution data (not the whole graph). - Slow the photo card auto-swipe from 3s to 6s and pause it entirely while the top card is flipped, instead of swiping out from under whoever's reading a story. - Fix the flip: stop double-clipping the 3D rotation with a redundant overflow-hidden ancestor, add the Safari-required -webkit- prefixes for backface-visibility/transform-style/perspective, and slow/deepen it so the image visibly rotates instead of just cross-fading. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01A4sWRNRb5YFhgEQ27zJain

FindMalek self-assigned this Sep 11, 2026

vercel Bot deployed to Preview September 11, 2026 15:39 View deployment

FindMalek and others added 2 commits September 11, 2026 16:47

Merge branch 'main' into design/143-streak-and-photo-stack

e83f60a

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01A4sWRNRb5YFhgEQ27zJain

vercel Bot deployed to Preview September 11, 2026 15:53 View deployment

FindMalek merged commit 234a2d7 into main Sep 11, 2026
5 checks passed

Navigation Menu

design: color the contribution graph and add click-to-flip photo cards - #144

design: color the contribution graph and add click-to-flip photo cards#144
FindMalek merged 3 commits into
mainfrom
design/143-streak-and-photo-stack

FindMalek commented Sep 11, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

chatgpt-codex-connector Bot commented Sep 11, 2026

Uh oh!

vercel Bot commented Sep 11, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Sep 11, 2026 •

edited

Loading

Review limit reached

Walkthrough

Changes

Sequence Diagram(s)

❌ Failed checks (1 warning, 1 inconclusive)

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

FindMalek commented Sep 11, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Summary by CodeRabbit

Uh oh!

chatgpt-codex-connector Bot commented Sep 11, 2026

Uh oh!

vercel Bot commented Sep 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Sep 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review limit reached

Walkthrough

Changes

Sequence Diagram(s)

❌ Failed checks (1 warning, 1 inconclusive)

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

FindMalek commented Sep 11, 2026 •

edited by coderabbitai Bot

Loading

vercel Bot commented Sep 11, 2026 •

edited

Loading

coderabbitai Bot commented Sep 11, 2026 •

edited

Loading