Dev: Replace Build Log with live GitHub stats and layout refinements

[luinbytes]

Live GitHub stats replace the old Build Log in your Activity section, the 2FA demo now behaves more like a real rotating code, and spacing/typography across major sections is tightened so the portfolio feels cleaner and more cohesive.

[claude]

Pull Request Review: Replace Build Log with GitHub Stats

Overview

This PR successfully replaces the static Build Log with dynamic GitHub statistics and improves layout consistency. The changes enhance interactivity and visual polish.

✅ Strengths

Code Quality:

• Clean component structure with well-organized stats components
• Proper state management with useState hooks
• Good separation of concerns (calculateLanguages, calculateStreak helpers)
• Consistent Tailwind styling

User Experience:

• Real-time GitHub data improves credibility
• Proper loading states prevent layout shifts
• Better visual hierarchy (improved spacing)
• 2FA demo now rotates realistically

⚠️ Issues & Recommendations (1/3)

1. API Rate Limiting & Error Handling (HIGH PRIORITY)

Location: components/sections/activity.tsx:87-156

Problem: Multiple unauthenticated GitHub API calls will hit rate limits (60 req/hour):

• github.com/users/luinbytes/events/public
• github-contributions-api.jogruber.de
• github.com/users/luinbytes/repos?per_page=100

Recommendations:

• Implement exponential backoff for failed requests
• Add error boundaries for graceful degradation
• Cache responses (localStorage with TTL)
• Show user-friendly error messages on rate limits
• Handle Retry-After headers for 403 responses
• Add fallback for third-party API downtime

[claude]

Issues & Recommendations (2/3)

2. TypeScript Type Safety (MEDIUM PRIORITY)

Location: Throughout activity.tsx

Problem: Excessive use of any types reduces type safety. Define proper interfaces for Commit and CalendarDay types instead of any[].

3. Streak Calculation Bug (MEDIUM PRIORITY)

Location: activity.tsx:57-83

Problem: Logic breaks if user hasn't committed today. Current code only checks daysDiff === streak which expects consecutive days from today. The streak should allow for today to be empty and still continue from yesterday.

4. Language Calculation Accuracy (LOW-MEDIUM)

Location: activity.tsx:35-54

Issue: Counts repos, not code bytes. A 2-line TypeScript repo counts the same as a 10,000-line repo. Consider using languages_url API for byte counts (but adds N more API calls).

[claude]

Issues & Recommendations (3/3)

5. Accessibility Issues (MEDIUM PRIORITY)

Missing attributes in activity.tsx:298 and throughout:

• External link missing rel="noopener noreferrer"
• Interactive divs should be buttons with ARIA labels
• Loading states should use aria-live="polite"
• Language color indicators need accessible labels

6. Performance Considerations (LOW PRIORITY)

Three simultaneous API calls on mount could benefit from:

• Promise.allSettled() for better error handling
• AbortController for cleanup on unmount
• Request deduplication

7. 2FA Code Generation (LOW PRIORITY)

Location: automation-playground.tsx:172-176

While this is just a demo, consider making it more realistic with 6-digit codes and visual transitions when the code changes.

[claude]

Security & Testing

Security Considerations

Good practices:

• No sensitive data exposed
• External API calls are read-only
• No user input injection

Minor concern:

• Third-party dependency on github-contributions-api.jogruber.de requires fallback strategy and monitoring

Test Coverage

No tests found for new functionality. Recommendations:

• Unit tests for calculateLanguages() and calculateStreak()
• Integration tests for API error handling
• Test loading states and error boundaries
• Accessibility testing with axe or jest-axe

Summary

Files changed: 8 | +222 -76 lines

Priority fixes:

1. HIGH: Add API rate limit handling and error boundaries
2. MEDIUM: Fix streak calculation logic
3. MEDIUM: Improve TypeScript type safety
4. MEDIUM: Add accessibility attributes
5. LOW: Consider language calculation improvements

Verdict: Approve with suggested improvements

This is a solid enhancement that significantly improves the portfolio. Code is clean and follows good practices. Main concerns are error handling and API rate limiting. Recommend addressing high-priority items before merging.

Great work on the visual improvements and 2FA demo enhancement!