Skip to content

Latest commit

 

History

History
333 lines (223 loc) · 10.2 KB

File metadata and controls

333 lines (223 loc) · 10.2 KB

📖 The Complete GitHub Profile Guide

Follow every phase in order. Do not skip steps. By the end, your profile will be outstanding.


📌 Table of Contents


Phase 1 — Create Your Profile Repository

This is the foundation. GitHub has a secret feature — if you create a repository with the exact same name as your username, it becomes your profile README.

Step 1.1 — Create the Repository

  1. Go to github.com/new
  2. In Repository name, type your exact GitHub username
    • Example: if your username is john-doe, the repo name must be john-doe
  3. Make sure it is set to Public
  4. Check ✅ Add a README file
  5. Click Create repository

💡 You will see a special message from GitHub: "✨ john-doe/john-doe is a special repository..." — that means it worked!

Step 1.2 — Open the README Editor

  1. Click on the README.md file in your new repo
  2. Click the pencil icon ✏️ to edit it
  3. Delete all the default content — you will replace it completely

Step 1.3 — Understand the Structure

Your README.md is just a Markdown file. Think of it like a web page made of text. You will use:

  • # for headings
  • **text** for bold
  • [text](url) for links
  • ![alt](image-url) for images
  • HTML tags like <div align="center"> for alignment

Phase 2 — Write Your About Me

This is the most personal part. It tells visitors who you are in seconds.

Step 2.1 — Start With a Strong Header

Copy this and customize it:

<div align="center">

# Hi there, I'm [Your Name] 👋

### [Your Title — e.g., Full Stack Developer | Open Source Enthusiast]

</div>

Step 2.2 — Add a Typing Animation (Optional but impressive)

<div align="center">

[![Typing SVG](https://readme-typing-svg.herokuapp.com?font=Fira+Code&pause=1000&color=2196F3&center=true&vCenter=true&width=435&lines=Full+Stack+Developer;Open+Source+Contributor;Always+Learning+New+Things)](https://git.io/typing-svg)

</div>

✏️ Change the lines= part to match your own description. Separate lines with ;

Step 2.3 — Write Your About Section

## 🙋 About Me

- 🔭 I'm currently working on **[Your Current Project]**
- 🌱 I'm currently learning **[What You're Learning]**
- 👯 I'm looking to collaborate on **[Type of Projects]**
- 💬 Ask me about **[Your Expertise]**
- 📫 How to reach me: **[your@email.com]**
- ⚡ Fun fact: **[Something Interesting About You]**

💡 Tips for a great About section:

  • Be specific. "Learning React and Node.js" is better than "Learning web development"
  • Keep it to 5-7 bullet points maximum
  • Make it feel human, not like a resume

Step 2.4 — Add Social / Contact Links

<div align="center">

[![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](YOUR_LINKEDIN_URL)
[![Twitter](https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](YOUR_TWITTER_URL)
[![Portfolio](https://img.shields.io/badge/Portfolio-FF5722?style=for-the-badge&logo=todoist&logoColor=white)](YOUR_PORTFOLIO_URL)
[![Gmail](https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white)](mailto:YOUR_EMAIL)

</div>

✏️ Replace YOUR_LINKEDIN_URL, etc. with your real links. Remove any you don't use.

📄 Read more: sections/about-me.md


Phase 3 — Add Your Tech Stack

This shows visitors what technologies you know — at a glance.

Step 3.1 — Add a Languages & Tools Section

## 🛠️ Tech Stack

### Languages
![Python](https://img.shields.io/badge/Python-3776AB?style=for-the-badge&logo=python&logoColor=white)
![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)
![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)

### Frameworks & Libraries
![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
![Node.js](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white)

### Databases
![MongoDB](https://img.shields.io/badge/MongoDB-4EA94B?style=for-the-badge&logo=mongodb&logoColor=white)
![PostgreSQL](https://img.shields.io/badge/PostgreSQL-316192?style=for-the-badge&logo=postgresql&logoColor=white)

### Tools
![Git](https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white)
![VS Code](https://img.shields.io/badge/VS_Code-0078D4?style=for-the-badge&logo=visual%20studio%20code&logoColor=white)
![Docker](https://img.shields.io/badge/Docker-2496ED?style=for-the-badge&logo=docker&logoColor=white)

💡 Rules for Tech Stack:

  • Only add technologies you actually know — keep it honest
  • Group them logically (Languages → Frameworks → Tools)
  • Do not add too many — 10-15 badges is ideal

📄 Full badge list: sections/skills-badges.md


Phase 4 — Add GitHub Stats

These are live widgets that automatically update with your real GitHub data.

Step 4.1 — GitHub Stats Card

## 📊 GitHub Stats

<div align="center">

![Your GitHub stats](https://github-readme-stats.vercel.app/api?username=YOUR_USERNAME&show_icons=true&theme=tokyonight&hide_border=true)

</div>

Step 4.2 — Top Languages Card

<div align="center">

![Top Languages](https://github-readme-stats.vercel.app/api/top-langs/?username=YOUR_USERNAME&layout=compact&theme=tokyonight&hide_border=true)

</div>

Step 4.3 — GitHub Streak Counter

<div align="center">

![GitHub Streak](https://streak-stats.demolab.com/?user=YOUR_USERNAME&theme=tokyonight&hide_border=true)

</div>

Step 4.4 — Display Stats Side by Side (Pro tip!)

<div align="center">

<img src="https://github-readme-stats.vercel.app/api?username=YOUR_USERNAME&show_icons=true&theme=tokyonight&hide_border=true" height="165" />
<img src="https://github-readme-stats.vercel.app/api/top-langs/?username=YOUR_USERNAME&layout=compact&theme=tokyonight&hide_border=true" height="165" />

</div>

✏️ Replace YOUR_USERNAME with your actual GitHub username everywhere 💡 Try different themes: tokyonight, radical, merko, gruvbox, dracula, nord

📄 All stats options: sections/stats.md


Phase 5 — Pin Your Best Repositories

Pinned repos are the showcase of your work. This is what visitors look at after your README.

Step 5.1 — How to Pin Repositories

  1. Go to your GitHub profile page
  2. Click "Customize your pins" (below your bio)
  3. Select up to 6 repositories to pin
  4. Click Save pins

Step 5.2 — Which Repos to Pin?

Follow this priority order:

  1. ✅ Projects with a good README (visitors will click through)
  2. ✅ Projects that show your best technical skills
  3. ✅ Projects that are complete, not abandoned
  4. ✅ Projects with some stars or forks (social proof)
  5. ✅ Projects that are diverse (don't pin 6 similar things)

Step 5.3 — Improve Each Pinned Repo's README

Each pinned repo needs at minimum:

  • A clear title and description
  • What the project does (1-2 sentences)
  • How to install/run it
  • A screenshot or demo GIF if possible
  • Tech stack used

📄 Full guide: sections/projects.md


Phase 6 — Make It Dynamic

Take your profile from static to alive with auto-updating content.

Step 6.1 — Add a Visitor Counter

<div align="center">

![Visitor Count](https://visitor-badge.laobi.icu/badge?page_id=YOUR_USERNAME.YOUR_USERNAME)

</div>

Step 6.2 — Add Activity Graph

## 📈 Activity Graph

![Activity Graph](https://github-readme-activity-graph.vercel.app/graph?username=YOUR_USERNAME&theme=tokyo-night&hide_border=true)

Step 6.3 — Auto-Update with GitHub Actions (Advanced)

Create .github/workflows/update-readme.yml in your profile repo:

name: Update README

on:
  schedule:
    - cron: '0 0 * * *'  # Runs every day at midnight
  workflow_dispatch:

jobs:
  update:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Update README
        run: echo "Add your update script here"

💡 You can use this to auto-pull your latest blog posts, tweets, or GitHub activity into your README every day automatically.


Phase 7 — Final Checklist

Before you call your profile done, go through every item:

✅ Profile Settings

  • Profile photo is clear and professional
  • Real name is set (or preferred name)
  • Bio is filled (keep it under 160 characters)
  • Location is set
  • Website/portfolio link is added
  • Email is set to public (if comfortable)

✅ Profile README

  • Has a clear, welcoming header
  • Has an About Me section with specific details
  • Has social/contact links
  • Has tech stack badges (only real skills)
  • Has GitHub stats widgets
  • Has streak counter
  • Looks good on both desktop and mobile

✅ Repositories

  • Up to 6 repos are pinned
  • Every pinned repo has a description set
  • Every pinned repo has a proper README
  • Repos are tagged with relevant topics

✅ General

  • No spelling mistakes (proofread everything)
  • All links work (test every one)
  • Contribution graph shows recent activity
  • Profile is set to Public

🎉 Congratulations!

You have built an outstanding GitHub profile. Now:

  1. Star this repo ⭐ if it helped you
  2. Share your result in examples/README.md
  3. Keep your profile updated — add new skills, new projects, new achievements

💡 The best profiles are never "done" — they grow with you.