GitHub Activity

​

Overview

• Activity graph showing contributions over time
• Streak statistics tracking consecutive contribution days
• Snake animation visualizing contribution grid
• Automatic updates from GitHub’s public API
• Error handling with graceful fallbacks

​

Component Structure

import React, { useState } from 'react';
import ScrollReveal from './ScrollReveal';

const GithubActivity: React.FC = () => {
  const username = 'AndreRuperto';
  const theme = 'merko';  // Color scheme

  const [showGraph, setShowGraph] = useState(true);
  const [showSnake, setShowSnake] = useState(true);

  return (
    <section className="w-full py-16 px-4 bg-background">
      {/* Activity visualizations */}
    </section>
  );
};

​

Visualizations

​

1. Activity Graph

{showGraph && (
  <ScrollReveal className="w-full" delay={100}>
    <div className="w-full glass rounded-lg p-4 hover-lift">
      <img
        src={`https://github-readme-activity-graph.vercel.app/graph?username=${username}&theme=${theme}`}
        alt="Gráfico de atividade do GitHub"
        className="w-full rounded-lg"
        onError={() => setShowGraph(false)}
      />
    </div>
  </ScrollReveal>
)}

• Shows contribution frequency
• Color-coded by activity level
• Displays recent months
• Automatically updates daily

​

2. Streak Statistics

{showSnake && (
  <ScrollReveal delay={200}>
    <div className="w-full max-w-2xl glass rounded-lg p-4 hover-lift">
      <a
        href="https://git.io/streak-stats"
        target="_blank"
        rel="noopener noreferrer"
      >
        <img
          src={`https://randolph-santos.vercel.app?user=${username}&theme=${theme}`}
          alt="GitHub Streak"
          className="w-full rounded-lg"
        />
      </a>
    </div>
  </ScrollReveal>
)}

• Current streak (consecutive days)
• Longest streak achieved
• Total contributions
• Last contribution date

​

3. Snake Animation

{showSnake && (
  <ScrollReveal delay={300}>
    <div className="w-full mt-8 glass rounded-lg p-6">
      <img
        src={`https://raw.githubusercontent.com/${username}/${username}/output/github-contribution-grid.svg`}
        alt="Snake animation"
        className="w-full"
        onError={() => setShowSnake(false)}
      />
    </div>
  </ScrollReveal>
)}

​

Section Header

<div className="text-center mb-16">
  <span className="section-title">Github</span>
  <h2 className="heading-md">
    Atividade <span className="text-gradient">Github</span>
  </h2>
</div>

​

Error Handling

const [showGraph, setShowGraph] = useState(true);
const [showSnake, setShowSnake] = useState(true);

// On image load error
<img
  onError={() => setShowGraph(false)}
/>

1. Error event is triggered
2. State is updated to hide that visualization
3. Other visualizations remain visible
4. No error message is shown to users

​

Theme Configuration

const theme = 'merko';

• default - GitHub’s default colors
• dark - Dark mode friendly
• radical - Vibrant purple/pink
• merko - Green/yellow (currently used)
• gruvbox - Retro color scheme
• tokyonight - Blue/purple theme
• onedark - Atom One Dark
• cobalt - Blue theme
• synthwave - Neon/retro
• highcontrast - High contrast

const theme = 'dark'; // or any other theme name

​

Scroll Animations

<ScrollReveal delay={100}>  {/* Activity graph */}
<ScrollReveal delay={200}>  {/* Streak stats */}
<ScrollReveal delay={300}>  {/* Snake animation */}

​

Responsive Design

​

Mobile

• Full-width visualizations
• Stacked layout
• Maintained aspect ratios
• Touch-friendly sizing

​

Desktop

• Centered max-width container
• Generous padding
• Hover effects on cards
• Optimal viewing size

​

Integration

import GithubActivity from '@/components/GithubActivity';

function App() {
  return (
    <>
      <HeroSection />
      <ProjectsSection />
      <GithubActivity />  {/* Place where desired */}
      <ContactSection />
    </>
  );
}

​

Customization

​

Change Username

const username = 'YourGitHubUsername';

​

Adjust Container Styles

<div className="max-w-6xl mx-auto">  {/* Change max width */}
  {/* Content */}
</div>

​

Modify Card Appearance

<div className="glass rounded-lg p-4 hover-lift">  {/* Custom classes */}
  <img src="..." />
</div>

​

External Services Used

​

Activity Graph Service

• username - GitHub username
• theme - Color theme name

​

Streak Stats Service

• user - GitHub username
• theme - Color theme name

​

Snake Animation

​

Privacy Considerations

• Public repository contributions
• Public commit activity
• Contribution streaks
• Total contribution counts

• Private repository activity
• Organization private repos
• Commit messages or code
• Repository names or details

​

Performance

• Images are cached by browser
• Loading is non-blocking
• Failed images don’t break layout
• Lazy loading via ScrollReveal

• Activity graph: ~1-2 seconds
• Streak stats: ~1 second
• Snake animation: ~500ms (if pre-generated)

​

Troubleshooting

​

Visualizations Not Appearing

1. Check username: Ensure username variable is correct
2. Verify profile is public: Private profiles won’t work
3. Check browser console: Look for 404 or CORS errors
4. Test image URLs directly: Open image URLs in browser

​

Snake Animation Missing

1. Setup GitHub Action: Required for snake generation
2. Check repository name: Should match username exactly
3. Verify action ran: Check Actions tab in GitHub
4. Wait for generation: Initial setup takes a few minutes

​

Theme Not Applying

1. Check theme name: Ensure it’s spelled correctly
2. Try different theme: Some services support different themes
3. Clear cache: Hard refresh to see changes

​

Images Look Broken on Mobile

1. Check responsive classes: Ensure w-full is applied
2. Test on real device: Not just browser dev tools
3. Verify image aspect ratio: Some themes have fixed dimensions

​

Alternative Services

• github-readme-stats.vercel.app
• github-profile-summary-cards.vercel.app

• github-readme-streak-stats.herokuapp.com
• Custom implementation with GitHub API

• github-readme-activity-graph (different output)
• Custom D3.js visualization

​

Advanced: Custom GitHub Integration

// Fetch contribution data directly
const query = `
  query($username: String!) {
    user(login: $username) {
      contributionsCollection {
        contributionCalendar {
          totalContributions
          weeks {
            contributionDays {
              date
              contributionCount
            }
          }
        }
      }
    }
  }
`;

• Custom visualizations
• Real-time updates
• Additional data points
• Complete styling control