GitHub Contributions

I'm excited to share my new GitHub contributions visualization - a dynamic dashboard that provides an at-a-glance view of my coding activity over the past year. It displays contribution patterns, repository creation, and daily activity in an interactive heat map.

Technical Implementation

The component is built using Next.js and fetches data through a streamlined system:

export default async function getGithubContribution() {
  const res = await fetch(
    "https://github-contributions-api.jogruber.de/v4/R4ULtv?y=last",
    { next: { revalidate: 43200 } } // Revalidate every 12h
  );
  return await res.json();
}

This implementation automatically updates every 12 hours and uses Next.js's built-in caching to minimize API calls while keeping data fresh.

Design Features

The visualization combines functionality with aesthetics, featuring a responsive heat map that adapts to different screen sizes. Each contribution cell displays detailed information on hover, while the color gradient provides immediate insight into activity levels. The design supports both light and dark modes, ensuring good visibility in any environment.

Technical Stack

Built with Next.js, TypeScript, and Tailwind CSS, the component leverages modern web technologies to deliver a smooth user experience. The system uses efficient data caching and revalidation to maintain performance while keeping the visualization current.

Future Enhancements

I'm planning to expand this feature with contribution streak tracking, language breakdowns, and project activity highlights. These additions will provide even more insight into my development patterns and project focus areas.

Feedback Welcome

I'd love to hear your thoughts on this visualization and what additional features you'd find useful. Drop a comment below with your suggestions!