Build a stunning GitHub profile

Transform your GitHub profile with dynamic SVG graphics that showcase your contribution history, activity stats, and social links with beautiful animations.

Get Started API Reference

Dynamic SVG Rendering

Get started in minutes

Follow these steps to deploy your own dynamic GitHub profile README

Fork the repository

Clone or fork the aidrecabrera/aidrecabrera repository to your GitHub account.

git clone https://github.com/aidrecabrera/aidrecabrera.git
cd aidrecabrera

Install dependencies

Install the required packages using your preferred package manager:

npm install

Configure environment variables

Create a .env file with your GitHub token and Cloudflare credentials:

GH_SECRET=your_github_token
CLOUDFLARE_API_TOKEN=your_cloudflare_token
CLOUDFLARE_ACCOUNT_ID=your_account_id

You’ll need a GitHub personal access token with read:user scope to fetch contribution data.

Deploy to Cloudflare Workers

Deploy your worker using Wrangler:

pnpm deploy

Your worker will be deployed and you’ll receive a URL like https://aidre.svene.workers.dev/

Update your GitHub profile README

Add the dynamic SVG images to your profile README:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://your-worker.workers.dev/?section=top&theme=dark">
  <img src="https://your-worker.workers.dev/?section=top&theme=light" width="100%" height="20">
</picture>

Powerful features

Everything you need to create a stunning GitHub profile

Dynamic SVG rendering

Server-side SVG generation with Cloudflare Workers for fast, responsive graphics

Contribution graphs

Visualize your GitHub activity with animated contribution calendar displays

Dark/light themes

Built-in support for dark and light color schemes that adapt to user preferences

Animated links

Eye-catching social media links with smooth hover animations

Auto-updates

GitHub Actions workflow updates your stats twice daily automatically

Custom styling

Fully customizable CSS-in-JS styling with your brand colors and fonts

How it works

Built on modern edge infrastructure for speed and reliability

Fetch data

GitHub Actions runs a script that fetches your contribution history and WhatPulse stats

Render SVG

Cloudflare Workers generates SVG graphics on-demand with CSS animations and custom styling

Display live

Your README embeds the SVG images that update dynamically based on user theme preferences

Explore the documentation

Deep dive into concepts, customization, and deployment

Architecture overview

Learn how the system works, from data fetching to SVG rendering

Customize your style

Configure colors, fonts, and animations to match your brand

Get started

Ready to build your profile?

Follow the quickstart guide to deploy your own dynamic GitHub profile in minutes

Get Started Now