Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
# Anurag Hazra's GitHub Readme Cards

This is the foundational tool for dynamic profile statistics. It uses a serverless function to generate SVGs (Scalable Vector Graphics) displaying **real-time data** pulled directly from your GitHub profile. These cards are the quickest and most popular way to upgrade your Readme.

| Feature | Description |
| :--- | :--- |
| **Stats Card** | Shows core metrics: total stars, commits (in the last year), pull requests, and contribution count. |
| **Language Card** | Displays your usage breakdown of **top languages** across your repositories (excluding forks). |

### Setup Example (Stats & Language Cards)

To use these cards, you simply embed them as images in your `README.md`. **Replace `YOUR_USERNAME` with your actual GitHub username.** The code below uses the popular `buefy` theme.

```markdown
## My GitHub Stats

[![GitHub Stats](https://github-readme-stats.vercel.app/api?username=YOUR_USERNAME&show_icons=true&theme=buefy&hide_rank=true)](https://github.com/anuraghazra/github-readme-stats)

## Top Languages

[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=YOUR_USERNAME&layout=compact&theme=buefy&exclude_repo=recode-hive-docs,test-repo)](https://github.com/anuraghazra/github-readme-stats)

### Customization: Themes and Layouts

You can drastically change the appearance and content of your cards by adding parameters to the URL string (e.g., `&param=value`).

#### 🎨 Popular Themes (`&theme`)

The &theme= parameter allows you to apply a full color scheme. Try one of these popular options by adding it to the API URL:

- dark: Standard dark mode, high contrast.
- buefy: Bright blue and purple scheme (used in the example above).
- synthwave: Retro 80s neon look.
- onedark: A popular editor theme, often used by developers.
- solarized_light: A classic light theme option.


#### 📐 Layout Options (`&layout`)

This parameter is most commonly used for the Top Languages card to optimize space:

- default: (Used on the Stats Card) A larger vertical layout with distinct borders.
- compact: (Recommended for Language Card) Displays language bars horizontally, resulting in a much shorter, more compact card.

#### Other Key Parameters

| Parameter | Example Value | Description |
| :--- | :--- | :--- |
| `&show_icons=` | `show_icons=true` | Displays icons next to each stat label (highly recommended). |
| `&hide=` | `hide=issues,prs` | Hides specific statistics, like issues or pull requests, if you prefer a cleaner look. |
| `&title_color=` | `title_color=007bff` | Sets a custom hexadecimal color for the card title. |
| `&exclude_repo=` | `exclude_repo=test-repo,docs` | Hides specific repositories from the language calculations.|

⚠️ **Important Note on Language Calculations:** The Top Languages card calculates language usage from all public repos you own. To ensure the card accurately reflects your coding focus (and not just boilerplate files), it is strongly recommended to use the &exclude_repo= parameter to ignore repositories containing auto-generated documentation or simple configuration.

🔗 Relevant Repo: ![Anurag Hazra's GitHub Readme Stats](https://github.com/anuraghazra/github-readme-stats)
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
# Snake Contribution Animation 🐍

The Snake Contribution Animation is a visually unique and engaging way to represent your yearly activity. This feature adds a looping GIF or SVG of a "snake" chasing and consuming your contribution blocks, creating a dynamic element on your profile.

### How the Snake Animation Works

Unlike static image cards, the snake animation is a generated file (usually an SVG). This file must be **generated by a script and committed** back to your profile repository regularly to stay up-to-date with your latest activity. This entire process is fully automated using a **GitHub Action** that runs on a schedule.

---

## GitHub Action Setup

To automate the snake animation, you must create a YAML workflow file named **`snake.yml`** inside your profile repository's `.github/workflows/` directory.

### 1. The Workflow File (`snake.yml`)

Use the following content for your workflow file. This configuration uses the recommended `lowlighter/metrics` action, sets it to run daily, and ensures the necessary permissions are granted.

```yaml
name: Generate Snake Animation

on:
schedule:
# Runs at 1 AM UTC every day
- cron: "0 01 * * *"
workflow_dispatch:
# Allows manual trigger via the GitHub Actions tab

jobs:
generate:
runs-on: ubuntu-latest
permissions:
contents: write # CRITICAL: This grants permission to commit the new file

steps:
- uses: actions/checkout@v4
- uses: lowlighter/metrics@latest # Use the metrics action

with:
# REQUIRED: GitHub token (automatically provided by GitHub)
token: ${{ secrets.GITHUB_TOKEN }}

# Output configuration
output_name: output/github-snake.svg
user: ${{ github.repository_owner }} # Automatically detects your username

# Plugin configuration for the snake
template: snake
base: "" # Base is disabled to focus only on the snake plugin
plugin_isocalendar: yes
plugin_isocalendar_duration: full-year
```
Once your workflow runs successfully (you can check the Actions tab on GitHub), the generated file will be saved to your repository. Embed the image in your main README.md using the path where the action saved the file:

```markdown
## My 2024 GitHub Activity

![Snake Animation](https://raw.githubusercontent.com/YOUR_USERNAME/YOUR_USERNAME/output/github-snake.svg)
```

(Replace YOUR_USERNAME with your actual GitHub username.)
27 changes: 27 additions & 0 deletions docs/GitHub/Fun-Profile-Customizations/Trophy-Case-Streaks.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
# Trophy Case and Contribution Streaks

These tools complement the core GitHub Readme Stats by focusing on **gamification** and **consistency**, turning your contributions into visible achievements.

### GitHub Trophy Case 🏆

This service awards different virtual "trophies" based on your activity, such as total star count, number of commits, number of followers, and maintaining contribution streaks. It’s an excellent motivator for long-term engagement.

**Setup Example:**
To include the trophy case, simply embed the SVG image link in your Readme, replacing `YOUR_USERNAME`:

### My Trophy Case

[![GitHub Trophies](https://github-profile-trophy.vercel.app/?username=YOUR_USERNAME&theme=gruvbox&no-frame=true)](https://github.com/ryo-ma/github-profile-trophy)

🔗 Relevant Repo: ![ryo-ma/github-profile-trophy](https://github.com/ryo-ma/github-profile-trophy)

### GitHub Streaks 🔥
This card displays your current streak of contributions and your longest historical streak, promoting a daily habit of coding. Seeing your streak number grow can be a powerful psychological push!

**Setup Example:**

[![GitHub Streak](https://github-readme-streak-stats.herokuapp.com/?user=YOUR_USERNAME&theme=highcontrast&date_format=j+M+Y)](https://github.com/DenverCoder1/github-readme-streak-stats)

🔗 Relevant Repo: ![DenverCoder1/github-readme-streak-stats](https://github.com/DenverCoder1/github-readme-streak-stats)

💡 Tip: To maintain a streak, remember that contributions count if they are made within a 24-hour period, based on UTC time.
25 changes: 25 additions & 0 deletions docs/GitHub/Fun-Profile-Customizations/Why-Customize.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
# 🎨 Fun GitHub Profile Customizations

Your GitHub profile Readme is a prime piece of digital real estate. It’s more than just a list of code repositories—it's your developer brand, your digital workshop, and your **first impression** on the global coding community. Customizing it is essential for promoting the dynamic developer culture of Recode Hive and maximizing your personal visibility.

---

## Why Customize?

### 🛠️ The Essential First Step: Create Your Profile Repository

Before you can add any dynamic stats or flair, you must complete the single, most important requirement:

**Requirement:** You must create a **public GitHub repository** named *exactly* the same as your GitHub username (e.g., if your username is `recode`, the repo must be `recode/recode`). When you create this special repository, GitHub will automatically use its `README.md` file as the content for your public profile page.

### Why Personalization Pays Off

Once your profile repo is set up, customization offers tangible benefits that go far beyond aesthetics:

1. **First Impressions and Engagement:** A creative, customized profile is immediately **engaging and memorable**, encouraging visitors (mentors, recruiters, or collaborators) to spend more time exploring your work. By highlighting your key skills and active projects upfront, you dramatically increase the chances of a meaningful connection.

2. **Highlight Activity and Commitment:** Dynamic cards displaying stats for your **total commits, contribution streaks, and top languages** automatically validate your commitment to continuous learning and development. This proof-of-work is far more convincing than a simple claim on a resume.

3. **Showcase Your Identity and Skills:** Customization allows you to highlight projects that matter most to you, whether it's a specific Recode Hive project or a new language you're mastering. Your profile becomes a curated **showcase of your specific expertise** and personality.

4. **Professional Polish and Detail:** A well-structured, customized profile demonstrates **attention to detail, technical flair, and ownership**. These soft skills are highly valued in any professional development setting.
11 changes: 11 additions & 0 deletions sidebars.ts
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,17 @@ const sidebars: SidebarsConfig = {
"GitHub/Maintainer-guide/enable-dicussion",
],
},
{
type: "category",
label: "🎨 Fun Proflie Customizations",
className: "custom-sidebar-fun",
items: [
"GitHub/Fun-Profile-Customizations/Why-Customize",
"GitHub/Fun-Profile-Customizations/Anurag-Hazra's-GitHub-Readme-Cards",
"GitHub/Fun-Profile-Customizations/Trophy-Case-Streaks",
"GitHub/Fun-Profile-Customizations/Snake-Contribution-Animation",
]
}
],
},
{
Expand Down
Loading