You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
4
+
5
+
| Feature | Description |
6
+
| :--- | :--- |
7
+
|**Stats Card**| Shows core metrics: total stars, commits (in the last year), pull requests, and contribution count. |
8
+
|**Language Card**| Displays your usage breakdown of **top languages** across your repositories (excluding forks). |
9
+
10
+
### Setup Example (Stats & Language Cards)
11
+
12
+
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.
You can drastically change the appearance and content of your cards by adding parameters to the URL string (e.g., `¶m=value`).
26
+
27
+
#### 🎨 Popular Themes (`&theme`)
28
+
29
+
The &theme= parameter allows you to apply a full color scheme. Try one of these popular options by adding it to the API URL:
30
+
31
+
- dark: Standard dark mode, high contrast.
32
+
- buefy: Bright blue and purple scheme (used in the example above).
33
+
- synthwave: Retro 80s neon look.
34
+
- onedark: A popular editor theme, often used by developers.
35
+
- solarized_light: A classic light theme option.
36
+
37
+
38
+
#### 📐 Layout Options (`&layout`)
39
+
40
+
This parameter is most commonly used for the Top Languages card to optimize space:
41
+
42
+
- default: (Used on the Stats Card) A larger vertical layout with distinct borders.
43
+
- compact: (Recommended for Language Card) Displays language bars horizontally, resulting in a much shorter, more compact card.
44
+
45
+
#### Other Key Parameters
46
+
47
+
| Parameter | Example Value | Description |
48
+
| :--- | :--- | :--- |
49
+
| `&show_icons=` | `show_icons=true` | Displays icons next to each stat label (highly recommended). |
50
+
| `&hide=` | `hide=issues,prs` | Hides specific statistics, like issues or pull requests, if you prefer a cleaner look. |
51
+
| `&title_color=` | `title_color=007bff` | Sets a custom hexadecimal color for the card title. |
52
+
| `&exclude_repo=` | `exclude_repo=test-repo,docs` | Hides specific repositories from the language calculations.|
53
+
54
+
⚠️ **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.
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.
4
+
5
+
### How the Snake Animation Works
6
+
7
+
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.
8
+
9
+
---
10
+
11
+
## GitHub Action Setup
12
+
13
+
To automate the snake animation, you must create a YAML workflow file named **`snake.yml`** inside your profile repository's `.github/workflows/` directory.
14
+
15
+
### 1. The Workflow File (`snake.yml`)
16
+
17
+
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.
18
+
19
+
```yaml
20
+
name: Generate Snake Animation
21
+
22
+
on:
23
+
schedule:
24
+
# Runs at 1 AM UTC every day
25
+
- cron: "0 01 * * *"
26
+
workflow_dispatch:
27
+
# Allows manual trigger via the GitHub Actions tab
28
+
29
+
jobs:
30
+
generate:
31
+
runs-on: ubuntu-latest
32
+
permissions:
33
+
contents: write # CRITICAL: This grants permission to commit the new file
34
+
35
+
steps:
36
+
- uses: actions/checkout@v4
37
+
- uses: lowlighter/metrics@latest # Use the metrics action
38
+
39
+
with:
40
+
# REQUIRED: GitHub token (automatically provided by GitHub)
41
+
token: ${{ secrets.GITHUB_TOKEN }}
42
+
43
+
# Output configuration
44
+
output_name: output/github-snake.svg
45
+
user: ${{ github.repository_owner }} # Automatically detects your username
46
+
47
+
# Plugin configuration for the snake
48
+
template: snake
49
+
base: ""# Base is disabled to focus only on the snake plugin
50
+
plugin_isocalendar: yes
51
+
plugin_isocalendar_duration: full-year
52
+
```
53
+
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:
These tools complement the core GitHub Readme Stats by focusing on **gamification** and **consistency**, turning your contributions into visible achievements.
4
+
5
+
### GitHub Trophy Case 🏆
6
+
7
+
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.
8
+
9
+
**Setup Example:**
10
+
To include the trophy case, simply embed the SVG image link in your Readme, replacing `YOUR_USERNAME`:
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!
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.
4
+
5
+
---
6
+
7
+
## Why Customize?
8
+
9
+
### 🛠️ The Essential First Step: Create Your Profile Repository
10
+
11
+
Before you can add any dynamic stats or flair, you must complete the single, most important requirement:
12
+
13
+
**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.
14
+
15
+
### Why Personalization Pays Off
16
+
17
+
Once your profile repo is set up, customization offers tangible benefits that go far beyond aesthetics:
18
+
19
+
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.
20
+
21
+
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.
22
+
23
+
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.
24
+
25
+
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.
description: In this tutorial, you will learn about the how to create a GitHub repo by Online GUI interface.
8
8
---
9
9
10
-
In the previous post we spoke about commit, fork, clone, in this post we gonna deep dive into the terminology by creating a GitHub Repository from the Scratch.
11
-
Inorder to create a project and host, the repository is a place where you add all your program code files and other documentation.
10
+
In the previous post, we learned about commit, fork and clone. In this post, we are going to take a deep dive into the terminology by creating a GitHub Repository from scratch.
11
+
To create and host a project, the repository is a place where you add all your program code files and other documentation.
12
12
13
13
### Prerequisites
14
14
15
-
-1. You should have a Github account
16
-
-2.Should have a basic understanding of how Git works/ and Git running in your OS.
15
+
-1. You must have a GitHub account.
16
+
-2.You must also have a basic understanding of how Git works and ensure Git is installed and running on your operating system.
17
17
18
18
### How to create Github Repository
19
19
20
-
**Step 1:** Go to GitHub page, by default you will be in the Home page as shown below, Step 1 requires you to click on the ``+``Icon and from the drop down click on the ``New Repository``.
20
+
**Step 1:** Go to the GitHub website. By default, you will be on the Home page as shown below. Click on the ``+``icon in the top-right corner, and from the dropdown, select``New Repository``.
**Step 2:** Specify the name of the Project, make It public or private, for this tutorial you will make it public, Once the repository is gone private the project admin have to give permission or manually added other GitHub user to collaborate or make it visible. This is usual application in the organisation level. The next step check on the readme file, this allows you to create a ``readme.md`` file along with the repository creation. Then click on ``Create repository`` on the button below.
25
+
**Step 2:** Specify the name of the project and choose whether to make it public or private. For this tutorial, we’ll make it public.
26
+
27
+
Once a repository is made private, the project admin must manually grant permission to other GitHub users to collaborate or view it. This is a common practice at the organizational level.
28
+
29
+
Next, check the box to include a README file—this will automatically create a ``README.md`` file along with the repository. Finally, click on ``Create repository`` at the bottom.
You will now be able to see the uploaded resume in your repository.
128
132
129
133
### Watch the video Tutorial
130
134
131
135
<iframewidth="880"height="480"src="https://www.youtube.com/embed/XWjx-RjmhRM?list=PLrLTYhoDFx-kiuFiGQqVpYYZ56pIhUW63"title="How to create your first GitHub repository"frameborder="0"allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"referrerpolicy="strict-origin-when-cross-origin"allowfullscreen></iframe>
132
136
133
137
## Conclusion
134
138
135
-
In this tutorial, you learned about the syntax and structure of HTML. HTML syntax consists of elements, tags, and attributes that define the structure and content of a web page. An HTML document follows a basic structure with elements like `<!DOCTYPE html>`, `<html>`, `<head>`, `<title>`, `<meta>`, and `<body>`. Understanding HTML syntax and structure is essential for creating web pages and applications.
139
+
In this tutorial, you learned about the syntax and structure of HTML. HTML syntax consists of elements, tags and attributes that define the structure and content of a web page. A HTML document follows a basic structure with elements like `<!DOCTYPE html>`, `<html>`, `<head>`, `<title>`, `<meta>` and `<body>`. Understanding HTML syntax and structure is essential for creating web pages and applications.
0 commit comments