gh-profile

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
This skill transforms GitHub profiles from basic to extraordinary. Your GitHub profile is your digital resume, portfolio, and personal brand—make it unforgettable.
本技能可将你的GitHub个人资料从基础款升级为极具特色的版本。你的GitHub个人资料是你的数字简历、作品集和个人品牌——要让它令人过目不忘。

What Users Want

用户需求

Users typically want help with GitHub profile customization when they:
  • Want to stand out to recruiters and collaborators
  • Need to showcase their skills, projects, and achievements
  • Want to add dynamic stats cards, streaks, and visualizations
  • Are looking for automation with GitHub Actions
  • Need inspiration from templates and examples
  • Want to add animations, badges, or interactive elements
  • Seek to integrate external services (blogs, LeetCode, Spotify, etc.)
当用户有以下需求时,通常会寻求GitHub个人资料定制帮助:
  • 希望在招聘人员和合作者面前脱颖而出
  • 需要展示自己的技能、项目和成就
  • 想要添加动态统计卡片、贡献 streak(连续贡献天数)和可视化内容
  • 寻求通过GitHub Actions实现自动化
  • 需要从模板和示例中获取灵感
  • 想要添加动画、徽章或交互元素
  • 希望集成外部服务(博客、LeetCode、Spotify等)

What You Provide

提供的内容

You provide comprehensive GitHub profile customization guidance, including:
  • Complete profile README creation from scratch
  • Theme selection and customization (dracula, radical, tokyonight, synthwave, gruvbox, etc.)
  • Stats cards and metrics (GitHub Stats, Streak Stats, Top Languages, Trophies, GitHub Trends)
  • Animations (typing SVG, snake contribution graph, animated GIFs)
  • Visitor counters and badges
  • GitHub Actions automation for dynamic content
  • External service integration (blog feeds, LeetCode, WakaTime, Spotify)
  • GitHub Achievements system and earning strategies
  • AI-powered profile generation assistance
  • Advanced automation with Python scripts and GraphQL
  • Best practices for performance, security, and accessibility
  • Recruitment optimization strategies
  • Troubleshooting and optimization
你将提供全面的GitHub个人资料定制指导,包括:
  • 从零开始创建完整的个人资料README
  • 主题选择与定制(dracula、radical、tokyonight、synthwave、gruvbox等)
  • 统计卡片与指标(GitHub Stats、Streak Stats、Top Languages、Trophies、GitHub Trends)
  • 动画效果(打字SVG、贡献图贪吃蛇动画、动态GIF)
  • 访客计数器与徽章
  • 基于GitHub Actions的动态内容自动化
  • 外部服务集成(博客订阅源、LeetCode、WakaTime、Spotify)
  • GitHub成就系统及获取策略
  • AI驱动的资料生成辅助
  • 基于Python脚本和GraphQL的高级自动化
  • 性能、安全与可访问性最佳实践
  • 面向招聘的优化策略
  • 问题排查与优化

Understanding GitHub Profiles

了解GitHub个人资料

What is a GitHub Profile?

什么是GitHub个人资料?

A GitHub profile is a special README.md file that appears on your GitHub profile page at
github.com/username
. It's created through a unique repository named exactly like your username.
GitHub个人资料是一个特殊的README.md文件,会显示在你的GitHub个人主页
github.com/username
上。它需要通过一个与你用户名完全同名的专属仓库来创建。

Why Create a Profile?

为什么要创建个人资料?

Your GitHub profile is your:
  • Digital resume for recruiters and hiring managers
  • Portfolio of your work and projects
  • Personal brand showcase
  • First impression for collaborators and employers
  • Professional presence in the developer community
你的GitHub个人资料是:
  • 面向招聘人员和招聘经理的数字简历
  • 展示你作品和项目的作品集
  • 个人品牌的展示窗口
  • 给合作者和雇主的第一印象
  • 在开发者社区中的专业形象

How It Works

如何创建?

  1. Create a repository named
    YOUR_USERNAME
    (must match exactly)
  2. Add a
    README.md
    file with markdown content
  3. The README automatically appears at
    github.com/YOUR_USERNAME
  4. Anyone visiting your profile page sees your customized content
  1. 创建一个名为
    YOUR_USERNAME
    的仓库(必须与用户名完全一致)
  2. 添加包含markdown内容的
    README.md
    文件
  3. 该README会自动显示在
    github.com/YOUR_USERNAME
    页面
  4. 任何访问你个人主页的用户都能看到你定制的内容

Important Notes

重要注意事项

  • The repository must be public for your profile to be visible
  • The repository name must match your username exactly (case-sensitive)
  • The
    README.md
    file must be in the root directory
  • You can have only one profile per GitHub account
  • 仓库必须是公开的,你的个人资料才能被看到
  • 仓库名称必须与你的用户名完全匹配(区分大小写)
  • README.md
    文件必须放在根目录
  • 每个GitHub账号只能拥有一个个人资料

2025 Trends & Best Practices

2025年趋势与最佳实践

Current Design Trends

当前设计趋势

  • Minimalist Professional: Clean, focused, strategic use of whitespace
  • Themed Profiles: Tokyo Night, Dracula, Gruvbox, Synthwave (80s retro), One Dark
  • Dynamic & Real-Time: Automated content via GitHub Actions
  • Storytelling Profiles: Career timelines, journey mapping
  • Performance-Optimized: Lightweight SVGs, efficient loading
  • AI-Powered Generation: Smart template recommendations based on your activity
  • Recruitment-Focused: Optimized layouts for ATS systems and recruiters
  • 极简专业风:简洁、聚焦,合理运用留白
  • 主题化资料:Tokyo Night、Dracula、Gruvbox、Synthwave(80年代复古风)、One Dark
  • 动态与实时更新:通过GitHub Actions实现内容自动化
  • 叙事型资料:职业时间线、成长历程展示
  • 性能优化:轻量级SVG、高效加载
  • AI驱动生成:基于你的活动智能推荐模板
  • 招聘导向:针对ATS系统和招聘人员优化布局

What Works in 2025

2025年有效实践

✅ Clean, branded profiles with consistent styling ✅ Strategic widget placement (stats, streak, languages) ✅ High contrast themes for accessibility ✅ Tech stack badges and social links ✅ Animated typing SVG and contribution snakes ✅ Visitor counters with geographic tracking ✅ Dynamic blog feeds via GitHub Actions ✅ Project showcases with repo cards ✅ GitHub Achievements displayed prominently ✅ Impact metrics ("Used by 10k+ users", "500+ stars")
❌ Overcrowded profiles with too many widgets ❌ Broken or slow-loading images ❌ Generic templates without customization ❌ Low contrast color schemes ❌ Excessive GIFs that hurt performance ❌ Missing or outdated contact information
✅ 风格一致的简洁品牌化资料 ✅ 合理放置组件(统计、streak、语言) ✅ 高对比度主题以保障可访问性 ✅ 技术栈徽章和社交链接 ✅ 打字SVG动画和贡献贪吃蛇动画 ✅ 带地域追踪的访客计数器 ✅ 通过GitHub Actions实现的动态博客订阅源 ✅ 带仓库卡片的项目展示 ✅ 突出展示GitHub成就 ✅ 影响力指标("10k+用户使用"、"500+星标")
❌ 组件过多导致资料拥挤 ❌ 图片损坏或加载缓慢 ❌ 未定制的通用模板 ❌ 低对比度配色方案 ❌ 过多GIF影响性能 ❌ 缺失或过时的联系信息

How to Help Users

如何帮助用户

Initial Assessment

初始评估

When a user requests help, first understand their needs:
  1. Profile Status: Do they have a profile README already? What's their GitHub username?
  2. Goals: Job hunting? Personal branding? Showcasing projects? Community building?
  3. Style Preference: Minimalist, creative, themed, professional, animated?
  4. Technical Comfort: Beginner needing generators, or advanced wanting custom automation?
  5. Key Features: Stats cards? Visitor counter? Blog automation? Animations?
当用户请求帮助时,首先要了解他们的需求:
  1. 资料状态:他们是否已经有个人资料README?GitHub用户名是什么?
  2. 目标:找工作?打造个人品牌?展示项目?社区建设?
  3. 风格偏好:极简风、创意风、主题风、专业风、动画风?
  4. 技术熟练度:需要生成器的新手,还是想要自定义自动化的进阶用户?
  5. 核心功能需求:统计卡片?访客计数器?博客自动化?动画效果?

Quick Diagnostic Questions

快速诊断问题

If they have no profile yet:
  • Do you have a GitHub account? What's your username?
  • Have you created a repository with your username?
  • Are you comfortable with markdown, or would you prefer a generator tool?
If they have an existing profile:
  • Share your profile URL so I can see what you have
  • What do you like about your current profile?
  • What do you want to improve or add?
For customization goals:
  • Are you job hunting? (Recruiters love clean, professional profiles)
  • Do you want to showcase specific projects or skills?
  • Are you looking to build a personal brand?
  • Do you write blog posts you want to feature?
如果用户还没有个人资料:
  • 你有GitHub账号吗?用户名是什么?
  • 你创建过与用户名同名的仓库吗?
  • 你熟悉markdown,还是更倾向于使用生成器工具?
如果用户已有个人资料:
  • 分享你的资料URL,让我看看现有内容
  • 你喜欢当前资料的哪些部分?
  • 你想要改进或添加什么内容?
针对定制目标:
  • 你正在找工作吗?(招聘人员喜欢简洁专业的资料)
  • 你想要展示特定项目或技能吗?
  • 你想要打造个人品牌吗?
  • 你有想要展示的博客文章吗?

Step-by-Step Guidance

分步指导

For Complete Beginners (No Profile Yet)

面向完全新手(还没有个人资料)

Quick Start: Your First Profile in 5 Minutes

快速上手:5分钟创建你的第一个个人资料

Step 1: Create Your Profile Repository
  1. Go to GitHub and click the "+" icon → "New repository"
  2. CRITICAL: Name the repository exactly your username (e.g.,
    johndoe
    )
  3. Set it to Public (private profiles won't work)
  4. Check "Initialize with README"
  5. Click "Create repository"
Step 2: Add Your Profile Content
Copy this entire block and paste it into your README.md (replace the placeholders):
markdown
<div align="center">
步骤1:创建个人资料仓库
  1. 打开GitHub,点击右上角的 "+" 图标 → "New repository"
  2. 关键操作:仓库名称必须与你的用户名完全一致(例如:
    johndoe
  3. 设置为公开(私有仓库无法生效)
  4. 勾选 "Initialize with README"
  5. 点击 "Create repository"
步骤2:添加个人资料内容
复制以下完整代码块,粘贴到你的README.md中(替换占位符):
markdown
<div align="center">

Hi, I'm Your Name! 👋

Hi, I'm Your Name! 👋

I'm a developer who loves building things that live on the internet.
I'm a developer who loves building things that live on the internet.

🚀 What I'm Working On

🚀 What I'm Working On

  • Currently building [your current project]
  • Learning [technology you're learning]
  • Open to collaborations on [topics you're interested in]
  • Currently building [your current project]
  • Learning [technology you're learning]
  • Open to collaborations on [topics you're interested in]

💬 Let's Connect

💬 Let's Connect

  • Email: your.email@example.com
  • LinkedIn: linkedin.com/in/yourprofile
  • Twitter: @yourhandle

This profile is a work in progress!
</div> ```
Step 3: Verify It Works
  1. Commit your changes (click "Commit changes")
  2. Visit
    github.com/YOUR_USERNAME
    (not the repository, your main profile)
  3. Wait 10-30 seconds and refresh
  4. You should see your new profile!
That's it! You now have a working GitHub profile. Ready to level up? Continue below.
  • Email: your.email@example.com
  • LinkedIn: linkedin.com/in/yourprofile
  • Twitter: @yourhandle

This profile is a work in progress!
</div> ```
步骤3:验证是否生效
  1. 提交更改(点击 "Commit changes")
  2. 访问
    github.com/YOUR_USERNAME
    (不是仓库页面,是你的个人主页)
  3. 等待10-30秒后刷新页面
  4. 你应该能看到新的个人资料了!
完成! 你现在拥有了一个可用的GitHub个人资料。准备升级吗?继续往下看。

✅ Profile Setup Checklist

✅ 资料设置检查清单

Before customizing further, verify:
  • Repository named exactly
    YOUR_USERNAME
    (case-sensitive)
  • Repository is PUBLIC (not private)
  • README.md exists in the root directory
  • You can see your profile at github.com/YOUR_USERNAME
Not seeing your profile? See Troubleshooting
在进一步定制之前,请确认:
  • 仓库名称与
    YOUR_USERNAME
    完全一致(区分大小写)
  • 仓库是公开的(不是私有)
  • README.md存在于根目录
  • 你能在github.com/YOUR_USERNAME看到你的资料
看不到资料?请查看问题排查

For Beginners Wanting Enhancement

想要增强资料的新手

Once you have a basic profile, add these features one at a time:
markdown
1. Add GitHub Stats Card
   - Shows your stars, forks, contributions
   - Choose a theme (dracula, radical, tokyonight)

2. Add Tech Stack Badges
   - Display your programming languages
   - Add frameworks and tools you use

3. Add Social Links
   - Email, LinkedIn, Twitter, Website
   - Use badge formats for consistency

4. Add Visitor Counter
   - Track how many people visit your profile
   - Geographic data if desired

5. Add Featured Projects
   - Link to your best repositories
   - Include brief descriptions
当你拥有基础资料后,可以逐个添加以下功能:
markdown
1. 添加GitHub统计卡片
   - 展示你的星标、复刻、贡献数据
   - 选择主题(dracula、radical、tokyonight)

2. 添加技术栈徽章
   - 展示你使用的编程语言
   - 添加你常用的框架和工具

3. 添加社交链接
   - 邮箱、LinkedIn、Twitter、个人网站
   - 使用统一的徽章格式

4. 添加访客计数器
   - 追踪访问你资料的人数
   - 如需可添加地域数据

5. 添加精选项目
   - 链接到你最好的仓库
   - 包含简短描述

For Intermediate Users (Existing Profile, Want Enhancement)

面向进阶用户(已有资料,想要增强)

markdown
1. Add Stats Cards (github-readme-stats)
2. Add Streak Stats
3. Add Profile Trophy
4. Add Visitor Counter
5. Add Tech Stack Icons
6. Add Typing Animation
7. Integrate Blog Feed (GitHub Actions)
8. Add Snake Contribution Animation
markdown
1. 添加统计卡片(github-readme-stats)
2. 添加Streak Stats(连续贡献统计)
3. 添加Profile Trophy(成就奖杯)
4. 添加访客计数器
5. 添加技术栈图标
6. 添加打字动画
7. 集成博客订阅源(GitHub Actions)
8. 添加贡献贪吃蛇动画

For Advanced Users (Want Automation & Customization)

面向高级用户(想要自动化与定制化)

markdown
1. Set Up GitHub Actions Workflows
   - Automated blog post updates
   - Dynamic content generation
   - Custom SVG generation
   - External API integrations

2. Create Custom Scripts
   - Python/Node.js for data fetching
   - Jinja2 templates for content
   - GraphQL queries for complex data

3. Optimize Performance
   - Caching strategies
   - API rate limiting
   - Lazy loading for large content
   - SVG optimization

4. Implement Security Best Practices
   - Token management
   - Permission limiting
   - Secret management
markdown
1. 设置GitHub Actions工作流
   - 自动化博客文章更新
   - 动态内容生成
   - 自定义SVG生成
   - 外部API集成

2. 创建自定义脚本
   - Python/Node.js数据抓取
   - Jinja2模板生成内容
   - GraphQL查询复杂数据

3. 优化性能
   - 缓存策略
   - API请求限制
   - 大内容懒加载
   - SVG优化

4. 实施安全最佳实践
   - Token管理
   - 权限限制
   - 密钥管理

Component Reference Guide

组件参考指南

All code snippets below go in your
README.md
unless otherwise specified.
除非另有说明,以下所有代码片段都要添加到你的
README.md
中。

Stats Cards

统计卡片

GitHub Readme Stats (Most Popular)

GitHub Readme Stats(最受欢迎)

markdown
![GitHub Stats](https://github-readme-stats.vercel.app/api?username=YOUR_USERNAME&show_icons=true&theme=dracula)
Parameters Explained:
  • username=YOUR_USERNAME
    - Your GitHub username (required)
  • show_icons=true
    - Show service icons next to labels
  • theme=dracula
    - Color scheme (dracula, radical, tokyonight, gruvbox, synthwave, etc.)
  • hide_border=true
    - Remove card border
  • title_color=00ff00
    - Custom title color (hex code)
  • bg_color=000000
    - Custom background color (hex code)
Available Themes:
  • dark
    ,
    light
    ,
    dracula
    ,
    radical
    ,
    merko
    ,
    gruvbox
    ,
    tokyonight
    ,
    onedark
    ,
    cobalt
    ,
    synthwave
    ,
    highcontrast
    ,
    monokai
    ,
    nord
    ,
    gotham
markdown
![GitHub Stats](https://github-readme-stats.vercel.app/api?username=YOUR_USERNAME&show_icons=true&theme=dracula)
参数说明:
  • username=YOUR_USERNAME
    - 你的GitHub用户名(必填)
  • show_icons=true
    - 在标签旁显示服务图标
  • theme=dracula
    - 配色方案(dracula、radical、tokyonight、gruvbox、synthwave等)
  • hide_border=true
    - 移除卡片边框
  • title_color=00ff00
    - 自定义标题颜色(十六进制代码)
  • bg_color=000000
    - 自定义背景颜色(十六进制代码)
可用主题:
  • dark
    ,
    light
    ,
    dracula
    ,
    radical
    ,
    merko
    ,
    gruvbox
    ,
    tokyonight
    ,
    onedark
    ,
    cobalt
    ,
    synthwave
    ,
    highcontrast
    ,
    monokai
    ,
    nord
    ,
    gotham

Top Languages Card

顶级语言卡片

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

Repository Pin Card

仓库固定卡片

markdown
![Repo Card](https://github-readme-stats.vercel.app/api/pin/?username=YOUR_USERNAME&repo=REPO_NAME&theme=dracula)
markdown
![Repo Card](https://github-readme-stats.vercel.app/api/pin/?username=YOUR_USERNAME&repo=REPO_NAME&theme=dracula)

GitHub Trends (Advanced Metrics)

GitHub Trends(高级指标)

markdown
[![GitHub Trends](https://github-readme-trends.vercel.app/api?username=YOUR_USERNAME)](https://github.com/avgupta456/github-trends)
Features:
  • Lines of Code (LOC) statistics
  • Advanced metrics beyond basic stats
  • Customizable visualizations
markdown
[![GitHub Trends](https://github-readme-trends.vercel.app/api?username=YOUR_USERNAME)](https://github.com/avgupta456/github-trends)
功能:
  • 代码行数(LOC)统计
  • 超越基础统计的高级指标
  • 可定制的可视化效果

Streak Stats

Streak Stats(连续贡献统计)

markdown
[![GitHub Streak](https://streak-stats.demolab.com/?user=YOUR_USERNAME&theme=dracula)](https://git.io/streak-stats)
Parameters:
  • theme=dracula
    - Color theme
  • hide_border=true
    - Remove border
  • mode=daily
    - Show daily contributions
  • stroke=00ff00
    - Custom stroke color
markdown
[![GitHub Streak](https://streak-stats.demolab.com/?user=YOUR_USERNAME&theme=dracula)](https://git.io/streak-stats)
参数:
  • theme=dracula
    - 配色主题
  • hide_border=true
    - 移除边框
  • mode=daily
    - 显示每日贡献
  • stroke=00ff00
    - 自定义线条颜色

Profile Trophy

Profile Trophy(成就奖杯)

markdown
[![trophy](https://github-profile-trophy.vercel.app/?username=YOUR_USERNAME&theme=dracula&no-frame=true&column=4)](https://github.com/ryo-ma/github-profile-trophy)
Parameters:
  • no-frame=true
    - Remove trophy frame
  • no-bg=true
    - Remove background
  • column=4
    - Number of columns (default: 7)
  • margin-w=4
    - Width margin
markdown
[![trophy](https://github-profile-trophy.vercel.app/?username=YOUR_USERNAME&theme=dracula&no-frame=true&column=4)](https://github.com/ryo-ma/github-profile-trophy)
参数:
  • no-frame=true
    - 移除奖杯边框
  • no-bg=true
    - 移除背景
  • column=4
    - 列数(默认:7)
  • margin-w=4
    - 宽度边距

Animations

动画效果

Typing SVG

打字SVG

File:
README.md
markdown
[![Typing SVG](https://readme-typing-svg.herokuapp.com?font=Fira+Code&size=32&duration=2800&pause=2000&color=00ff00&center=true&vCenter=true&width=940&lines=Full+Stack+Developer;Open+Source+Enthusiast;Always+learning+new+things)](https://git.io/typing-svg)
Parameters:
  • font=Fira+Code
    - Font family (Fira+Code, monospace, Arial, etc.)
  • size=32
    - Font size in pixels
  • duration=2800
    - Typing duration in milliseconds
  • pause=2000
    - Pause between typing cycles
  • color=00ff00
    - Text color
  • center=true
    - Center alignment
  • lines=Line1;Line2;Line3
    - Lines to type (semicolon-separated)
文件:
README.md
markdown
[![Typing SVG](https://readme-typing-svg.herokuapp.com?font=Fira+Code&size=32&duration=2800&pause=2000&color=00ff00&center=true&vCenter=true&width=940&lines=Full+Stack+Developer;Open+Source+Enthusiast;Always+learning+new+things)](https://git.io/typing-svg)
参数:
  • font=Fira+Code
    - 字体(Fira+Code、monospace、Arial等)
  • size=32
    - 字体大小(像素)
  • duration=2800
    - 打字时长(毫秒)
  • pause=2000
    - 打字周期间隔(毫秒)
  • color=00ff00
    - 文字颜色
  • center=true
    - 居中对齐
  • lines=Line1;Line2;Line3
    - 要显示的行(分号分隔)

Snake Animation (GitHub Actions)

贪吃蛇动画(GitHub Actions)

File:
.github/workflows/snake.yml
yaml
name: Generate Snake
on:
  schedule:
    - cron: "0 0 * * *"  # Daily at midnight
  workflow_dispatch:

jobs:
  generate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: Platane/snk@v3
        with:
          github_user_name: ${{ github.repository_owner }}
          outputs: |
            dist/github-snake.svg
            dist/github-snake-dark.svg?palette=github-dark
            dist/ocean.gif?generator_ocean

      - uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist
Usage in README.md:
markdown
![Snake Animation](https://raw.githubusercontent.com/YOUR_USERNAME/YOUR_USERNAME/output/github-snake.svg)
文件:
.github/workflows/snake.yml
yaml
name: Generate Snake
on:
  schedule:
    - cron: "0 0 * * *"  # Daily at midnight
  workflow_dispatch:

jobs:
  generate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: Platane/snk@v3
        with:
          github_user_name: ${{ github.repository_owner }}
          outputs: |
            dist/github-snake.svg
            dist/github-snake-dark.svg?palette=github-dark
            dist/ocean.gif?generator_ocean

      - uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist
在README.md中使用:
markdown
![Snake Animation](https://raw.githubusercontent.com/YOUR_USERNAME/YOUR_USERNAME/output/github-snake.svg)

GitHub Achievements

GitHub成就

Understanding Achievements

了解成就系统

GitHub Achievements are badges you earn for various activities on the platform. They add gamification to your profile and demonstrate your engagement with the GitHub community.
GitHub成就是你在平台上完成各类活动后获得的徽章。它们为你的资料增添了游戏化元素,也能展示你在GitHub社区中的参与度。

Achievement Levels

成就等级

  • DEFAULT - Basic achievements everyone earns
  • BRONZE - Intermediate achievements for consistent activity
  • SILVER - Advanced achievements for dedicated contributors
  • GOLD - Expert achievements for exceptional accomplishments
  • DEFAULT - 所有人都能获得的基础成就
  • BRONZE - 持续活动可获得的中级成就
  • SILVER - 专注贡献可获得的高级成就
  • GOLD - 卓越成就可获得的专家级成就

Common Achievements & How to Earn Them

常见成就及获取方式

Starstruck (DEFAULT/Bronze)

Starstruck(DEFAULT/青铜)

  • Created a repository that earned many stars
  • How to earn: Create useful, high-quality repositories that people want to use
  • 创建的仓库获得大量星标
  • 获取方式: 创建有用、高质量的仓库,让用户愿意使用

Arctic Code Vault (Bronze/Silver)

Arctic Code Vault(青铜/白银)

  • Contributed to the Arctic Code Vault archive
  • How to earn: Have contributions between Feb 2020 - Apr 2020
  • 为北极代码库归档做出贡献
  • 获取方式: 在2020年2月-4月期间有贡献记录

Pull Shark (Bronze/Silver/Gold)

Pull Shark(青铜/白银/黄金)

  • Made many pull requests
  • How to earn: Contribute PRs regularly (Bronze: 10+, Silver: 100+, Gold: 500+)
  • 提交大量拉取请求(PR)
  • 获取方式: 定期提交PR(青铜:10+,白银:100+,黄金:500+)

YOLO (Bronze)

YOLO(青铜)

  • Created a public repository and renamed default branch
  • How to earn: Rename
    master
    branch to
    main
    or any other name
  • 创建公开仓库并重命名默认分支
  • 获取方式:
    master
    分支重命名为
    main
    或其他名称

Quickdraw (Bronze)

Quickdraw(青铜)

  • Quick response to issues
  • How to earn: Comment on issues quickly after they're opened
  • 快速响应议题
  • 获取方式: 在议题创建后迅速发表评论

Pair Extraordinaire (Bronze/Silver)

Pair Extraordinaire(青铜/白银)

  • Co-authored commits with others
  • How to earn: Use
    @
    mentions in commit messages
  • 与他人共同提交代码
  • 获取方式: 在提交信息中使用
    @
    提及合作者

Galaxy Brain (Bronze/Silver)

Galaxy Brain(青铜/白银)

  • Answers marked as helpful in discussions
  • How to earn: Provide helpful answers in GitHub Discussions
  • 在讨论中的回答被标记为有帮助
  • 获取方式: 在GitHub Discussions中提供有帮助的回答

Mind Blowing (Bronze)

Mind Blowing(青铜)

  • Received 10+ reactions on a discussion answer
  • How to earn: Give exceptionally helpful answers
  • 讨论回答获得10+个反应
  • 获取方式: 提供极具帮助的回答

How to Display Achievements

如何展示成就

Achievements automatically appear on your profile once earned. To maximize them:
  1. Focus on quality contributions
    • Create repos that solve real problems
    • Write clear documentation
    • Provide helpful examples
  2. Consistent activity
    • Make regular contributions
    • Engage with issues and PRs
    • Participate in discussions
  3. Community engagement
    • Collaborate with others
    • Co-author commits
    • Review pull requests
  4. Create popular repositories
    • Build tools developers need
    • Write clear READMEs
    • Respond to issues promptly
成就获得后会自动显示在你的资料中。要最大化成就数量:
  1. 专注高质量贡献
    • 创建解决实际问题的仓库
    • 编写清晰的文档
    • 提供有用的示例
  2. 保持持续活动
    • 定期做出贡献
    • 参与议题和PR
    • 参与社区讨论
  3. 参与社区互动
    • 与他人协作
    • 共同提交代码
    • 审核拉取请求
  4. 创建受欢迎的仓库
    • 开发开发者需要的工具
    • 编写清晰的README
    • 及时响应议题

Achievement Resources

成就资源

Visitor Counters

访客计数器

Basic Visitor Counter

基础访客计数器

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

Profile Views Counter

资料浏览量计数器

markdown
![Profile Views](https://komarev.com/ghpvc/?username=YOUR_USERNAME&color=blueviolet&style=flat)
markdown
![Profile Views](https://komarev.com/ghpvc/?username=YOUR_USERNAME&color=blueviolet&style=flat)

Visitor Badge with Country Flags

带国旗的访客徽章

markdown
![Visitors](https://api.visitorbadge.io/api/VisitorBadge?userId=YOUR_USERNAME&repo=YOUR_USERNAME&countColor=%23263759)
markdown
![Visitors](https://api.visitorbadge.io/api/VisitorBadge?userId=YOUR_USERNAME&repo=YOUR_USERNAME&countColor=%23263759)

Tech Stack Icons

技术栈图标

Skill Icons (Interactive)

交互式技能图标

markdown
[![My Skills](https://skillicons.dev/icons?i=js,ts,react,nodejs,python,go,java,aws,docker,kubernetes)](https://skillicons.dev)
markdown
[![My Skills](https://skillicons.dev/icons?i=js,ts,react,nodejs,python,go,java,aws,docker,kubernetes)](https://skillicons.dev)

Badge Format (Static)

静态徽章格式

markdown
![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=black)
![Python](https://img.shields.io/badge/Python-3776AB?logo=python&logoColor=white)
![React](https://img.shields.io/badge/React-20232A?logo=react&logoColor=61DAFB)
![Node.js](https://img.shields.io/badge/Node.js-339933?logo=nodedotjs&logoColor=white)
![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?logo=typescript&logoColor=white)
markdown
![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=black)
![Python](https://img.shields.io/badge/Python-3776AB?logo=python&logoColor=white)
![React](https://img.shields.io/badge/React-20232A?logo=react&logoColor=61DAFB)
![Node.js](https://img.shields.io/badge/Node.js-339933?logo=nodedotjs&logoColor=white)
![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?logo=typescript&logoColor=white)

Tech Stack Generator Icons

技术栈生成器图标

markdown
<div align="center">
  <img src="https://techstack-generator.vercel.app/react-icon.svg" alt="React" width="50" height="50" />
  <img src="https://techstack-generator.vercel.app/js-icon.svg" alt="JavaScript" width="50" height="50" />
  <img src="https://techstack-generator.vercel.app/python-icon.svg" alt="Python" width="50" height="50" />
  <img src="https://techstack-generator.vercel.app/ts-icon.svg" alt="TypeScript" width="50" height="50" />
  <img src="https://techstack-generator.vercel.app/docker-icon.svg" alt="Docker" width="50" height="50" />
</div>
markdown
<div align="center">
  <img src="https://techstack-generator.vercel.app/react-icon.svg" alt="React" width="50" height="50" />
  <img src="https://techstack-generator.vercel.app/js-icon.svg" alt="JavaScript" width="50" height="50" />
  <img src="https://techstack-generator.vercel.app/python-icon.svg" alt="Python" width="50" height="50" />
  <img src="https://techstack-generator.vercel.app/ts-icon.svg" alt="TypeScript" width="50" height="50" />
  <img src="https://techstack-generator.vercel.app/docker-icon.svg" alt="Docker" width="50" height="50" />
</div>

AI-Powered Profile Generation

AI驱动的资料生成

AI-Assisted Generators (2025 Trend)

AI辅助生成器(2025年趋势)

AI-powered tools can help you create your profile faster:
AI驱动工具可以帮助你更快创建资料:

Top AI-Powered Generators

顶级AI生成器

  1. ReadMeCodeGen
  2. rahuldkjain/github-profile-readme-generator
  3. Using ChatGPT/Claude
    • Generate profile content with AI assistance
    • Example prompt: "Create a GitHub profile README for a senior React developer who loves open source, contributes to React libraries, and is interested in GraphQL and TypeScript."
  1. ReadMeCodeGen
  2. rahuldkjain/github-profile-readme-generator
  3. 使用ChatGPT/Claude
    • 借助AI生成资料内容
    • 示例提示:"为一名热爱开源、贡献React库、关注GraphQL和TypeScript的资深React开发者创建GitHub个人资料README。"

How to Use AI Effectively

如何有效使用AI

  1. Describe your skills and experience to the AI
  2. Let AI suggest appropriate widgets and layouts
  3. Customize the generated output to maintain authenticity
  4. Add your unique voice and personality
  1. 向AI描述你的技能和经验
  2. 让AI推荐合适的组件和布局
  3. 自定义生成的内容以保持真实性
  4. 添加你的独特风格和个性

Example AI Prompts

AI提示示例

For Job Seekers:
"Create a GitHub profile README for a senior full-stack developer with 5 years experience. Skills: React, Node.js, Python, AWS. Looking for senior roles. Include stats cards, tech stack badges, and featured projects with impact metrics."
For Open Source Contributors:
"Create a minimalist GitHub profile for an open source enthusiast. Focus on contributions, starred repos, and community engagement. Use Tokyo Night theme. Include activity graph and contribution snake."
For Students/Juniors:
"Create a GitHub profile for a computer science student passionate about web development. Include learning journey, current projects, and contact information. Keep it clean and professional."
面向求职者:
"为一名拥有5年经验的资深全栈开发者创建GitHub个人资料README。技能:React、Node.js、Python、AWS。正在寻找资深岗位。包含统计卡片、技术栈徽章和带影响力指标的精选项目。"
面向开源贡献者:
"为一名开源爱好者创建极简风格的GitHub个人资料。重点展示贡献、星标仓库和社区参与度。使用Tokyo Night主题。包含活动图和贡献贪吃蛇动画。"
面向学生/初级开发者:
"为一名热爱Web开发的计算机科学学生创建GitHub个人资料。包含学习历程、当前项目和联系信息。保持简洁专业。"

External Service Integration

外部服务集成

Blog Feeds

博客订阅源

File:
.github/workflows/blog-posts.yml
yaml
name: Blog Posts
on:
  schedule:
    - cron: '0 */6 * * *'  # Every 6 hours
  workflow_dispatch:

jobs:
  update-blog:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: gautamkrishnar/blog-post-workflow@v1
        with:
          comment_tag_name: BLOG_POST_LIST
          feed_list: "https://yourblog.com/feed.xml,https://medium.com/feed/@yourusername"
          max_post_count: 5
          feed_item_custom_template: "- [$title]($url)"
          date_format: "MMM DD, YYYY"
In README.md:
markdown
undefined
文件:
.github/workflows/blog-posts.yml
yaml
name: Blog Posts
on:
  schedule:
    - cron: '0 */6 * * *'  # Every 6 hours
  workflow_dispatch:

jobs:
  update-blog:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: gautamkrishnar/blog-post-workflow@v1
        with:
          comment_tag_name: BLOG_POST_LIST
          feed_list: "https://yourblog.com/feed.xml,https://medium.com/feed/@yourusername"
          max_post_count: 5
          feed_item_custom_template: "- [$title]($url)"
          date_format: "MMM DD, YYYY"
在README.md中:
markdown
undefined

📝 Latest Blog Posts

📝 Latest Blog Posts

<!-- BLOG_POST_LIST:START --> <!-- BLOG_POST_LIST:END -->
undefined
<!-- BLOG_POST_LIST:START --> <!-- BLOG_POST_LIST:END -->
undefined

Coding Stats

编码统计

WakaTime Integration

WakaTime集成

File:
.github/workflows/wakatime.yml
yaml
name: WakaTime Stats
on:
  schedule:
    - cron: '0 0 * * *'  # Daily at midnight
  workflow_dispatch:

jobs:
  update-wakatime:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: lowlighter/metrics@latest
        with:
          filename: metrics.svg
          token: ${{ secrets.METRICS_TOKEN }}
          base: header, activity, community, repositories, metadata
          plugin_wakatime: yes
          plugin_wakatime_sections: time, languages, languages-graphs, projects, history
          plugin_wakatime_token: ${{ secrets.WAKATIME_API_KEY }}
Setup:
  1. Sign up at https://wakatime.com/
  2. Get your API key from settings
  3. Add
    WAKATIME_API_KEY
    to GitHub repository secrets
  4. Add metrics SVG to README
文件:
.github/workflows/wakatime.yml
yaml
name: WakaTime Stats
on:
  schedule:
    - cron: '0 0 * * *'  # Daily at midnight
  workflow_dispatch:

jobs:
  update-wakatime:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: lowlighter/metrics@latest
        with:
          filename: metrics.svg
          token: ${{ secrets.METRICS_TOKEN }}
          base: header, activity, community, repositories, metadata
          plugin_wakatime: yes
          plugin_wakatime_sections: time, languages, languages-graphs, projects, history
          plugin_wakatime_token: ${{ secrets.WAKATIME_API_KEY }}
设置步骤:
  1. https://wakatime.com/注册账号
  2. 从设置中获取API密钥
  3. WAKATIME_API_KEY
    添加到GitHub仓库密钥中
  4. 将metrics SVG添加到README

LeetCode Stats

LeetCode统计

markdown
![LeetCode Stats](https://leetcode-stats.vercel.app/api?username=YOUR_USERNAME&theme=Dark&mode=card)

![LeetCode Stats](https://leetcode-stats.vercel.app/api?username=YOUR_USERNAME&theme=Dark)
Parameters:
  • theme=Dark
    - Color theme (Dark, Light, Radical)
  • mode=card
    - Display mode (default, card)
markdown
![LeetCode Stats](https://leetcode-stats.vercel.app/api?username=YOUR_USERNAME&theme=Dark&mode=card)

![LeetCode Stats](https://leetcode-stats.vercel.app/api?username=YOUR_USERNAME&theme=Dark)
参数:
  • theme=Dark
    - 配色主题(Dark、Light、Radical)
  • mode=card
    - 显示模式(默认、卡片)

Spotify Now Playing

Spotify正在播放

File:
.github/workflows/spotify.yml
yaml
name: Update Spotify
on:
  schedule:
    - cron: '*/15 * * * *'  # Every 15 minutes
  workflow_dispatch:

jobs:
  spotify:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses:athul/waka-readme@master
        with:
          WAKATIME_API_KEY: ${{ secrets.WAKATIME_API_KEY }}
文件:
.github/workflows/spotify.yml
yaml
name: Update Spotify
on:
  schedule:
    - cron: '*/15 * * * *'  # Every 15 minutes
  workflow_dispatch:

jobs:
  spotify:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses:athul/waka-readme@master
        with:
          WAKATIME_API_KEY: ${{ secrets.WAKATIME_API_KEY }}

Performance & Security

性能与安全

Performance Best Practices

性能最佳实践

Optimize Loading Speed

优化加载速度

  1. Limit External Images
    • Use SVG instead of PNG/JPG when possible
    • Combine multiple stats into single cards
    • Remove unused widgets regularly
  2. Lazy Loading
markdown
<details>
<summary>Click to expand more stats</summary>

<br>
![Detailed Stats](https://github-readme-stats.vercel.app/api/...)
![More Stats](https://github-readme-stats.vercel.app/api/...)

</details>
  1. Caching Strategies
File:
.github/workflows/cached-update.yml
yaml
name: Cached Profile Update
on:
  schedule:
    - cron: '0 0 * * *'
  workflow_dispatch:

jobs:
  update:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Cache node modules
        uses: actions/cache@v4
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - name: Your update script
        run: |
          # Your update commands here

      - name: Check for changes
        id: check-changes
        run: |
          if git diff --quiet HEAD README.md; then
            echo "has_changes=false" >> $GITHUB_OUTPUT
          else
            echo "has_changes=true" >> $GITHUB_OUTPUT
          fi

      - name: Commit changes
        if: steps.check-changes.outputs.has_changes == 'true'
        run: |
          git config --local user.email "action@github.com"
          git config --local user.name "GitHub Action"
          git add README.md
          git commit -m "Update profile [skip ci]"
          git push
  1. 限制外部图片数量
    • 尽可能使用SVG替代PNG/JPG
    • 将多个统计合并到单个卡片中
    • 定期移除未使用的组件
  2. 懒加载
markdown
<details>
<summary>Click to expand more stats</summary>

<br>
![Detailed Stats](https://github-readme-stats.vercel.app/api/...)
![More Stats](https://github-readme-stats.vercel.app/api/...)

</details>
  1. 缓存策略
文件:
.github/workflows/cached-update.yml
yaml
name: Cached Profile Update
on:
  schedule:
    - cron: '0 0 * * *'
  workflow_dispatch:

jobs:
  update:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Cache node modules
        uses: actions/cache@v4
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - name: Your update script
        run: |
          # Your update commands here

      - name: Check for changes
        id: check-changes
        run: |
          if git diff --quiet HEAD README.md; then
            echo "has_changes=false" >> $GITHUB_OUTPUT
          else
            echo "has_changes=true" >> $GITHUB_OUTPUT
          fi

      - name: Commit changes
        if: steps.check-changes.outputs.has_changes == 'true'
        run: |
          git config --local user.email "action@github.com"
          git config --local user.name "GitHub Action"
          git add README.md
          git commit -m "Update profile [skip ci]"
          git push

API Rate Limiting

API请求限制

When fetching data from APIs:
  1. Use authentication for higher rate limits
  2. Implement caching to reduce API calls
  3. Batch requests when possible
  4. Use GraphQL instead of multiple REST calls
当从API获取数据时:
  1. 使用身份验证以获得更高的请求限制
  2. 实现缓存以减少API调用
  3. 批量请求(如果可能)
  4. 使用GraphQL替代多个REST调用

Security Best Practices

安全最佳实践

1. Never Expose Secrets

1. 绝不暴露密钥

BAD:
yaml
run: echo "API_KEY=12345" > config.txt
GOOD:
yaml
run: echo "API_KEY=${{ secrets.API_KEY }}" > config.txt
错误示例:
yaml
run: echo "API_KEY=12345" > config.txt
正确示例:
yaml
run: echo "API_KEY=${{ secrets.API_KEY }}" > config.txt

2. Use GitHub Secrets

2. 使用GitHub Secrets

Add secrets in: Repository Settings → Secrets and variables → Actions
yaml
env:
  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
  API_KEY: ${{ secrets.API_KEY }}
  SPOTIFY_CLIENT_ID: ${{ secrets.SPOTIFY_CLIENT_ID }}
在仓库设置中添加密钥:Repository Settings → Secrets and variables → Actions
yaml
env:
  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
  API_KEY: ${{ secrets.API_KEY }}
  SPOTIFY_CLIENT_ID: ${{ secrets.SPOTIFY_CLIENT_ID }}

3. Limit Workflow Permissions

3. 限制工作流权限

yaml
permissions:
  contents: write
  pull-requests: read
yaml
permissions:
  contents: write
  pull-requests: read

4. Use Pinned Versions

4. 使用固定版本

yaml
undefined
yaml
undefined

BAD

错误示例

  • uses: actions/checkout@master
  • uses: actions/checkout@master

GOOD

正确示例

  • uses: actions/checkout@v4
  • uses: actions/checkout@v4

GOOD (with SHA pinning for production)

生产环境推荐(固定SHA)

  • uses: actions/checkout@8ade135a41bc03ea155e62e844d2df94e0d05d4b
undefined
  • uses: actions/checkout@8ade135a41bc03ea155e62e844d2df94e0d05d4b
undefined

5. Token Rotation

5. Token轮换

  • Use personal access tokens with minimal permissions
  • Set expiration dates on tokens
  • Review token access regularly
  • Rotate tokens periodically
  • 使用权限最小化的个人访问令牌
  • 为令牌设置过期日期
  • 定期审查令牌访问权限
  • 定期轮换令牌

Accessibility

可访问性

WCAG Compliance

WCAG合规

  1. High Contrast
    • Use themes like
      highcontrast
      ,
      dracula
      ,
      tokyonight
    • Avoid low contrast custom colors
    • Test contrast ratio (minimum 4.5:1 for normal text)
  2. Alt Text
    • Provide alt text for all images
    • Example:
      ![Profile stats showing 500 stars and 200 forks](url)
  3. Screen Reader Friendly
    • Use semantic HTML (
      <div align="center">
      ,
      <details>
      , etc.)
    • Ensure proper heading hierarchy
    • Test with screen readers
  4. Color Blind Safe
    • Don't rely on color alone to convey information
    • Use symbols/icons along with colors
    • Test with color blindness simulators
  5. Keyboard Navigable
    • Ensure all links are accessible via keyboard
    • Test tab order
    • Include focus indicators
  1. 高对比度
    • 使用
      highcontrast
      dracula
      tokyonight
      等主题
    • 避免低对比度的自定义配色
    • 测试对比度(普通文本最低4.5:1)
  2. 替代文本
    • 为所有图片提供替代文本
    • 示例:
      ![Profile stats showing 500 stars and 200 forks](url)
  3. 屏幕阅读器友好
    • 使用语义化HTML(
      <div align="center">
      <details>
      等)
    • 确保正确的标题层级
    • 使用屏幕阅读器测试
  4. 色盲友好
    • 不要仅依赖颜色传达信息
    • 结合符号/图标与颜色
    • 使用色盲模拟器测试
  5. 键盘可导航
    • 确保所有链接可通过键盘访问
    • 测试Tab键顺序
    • 包含焦点指示器

Recommended Themes for Accessibility

推荐的可访问性主题

  • High Contrast - Maximum accessibility (WCAG AAA)
  • Dracula - Good contrast, very popular
  • Tokyo Night - Easy on eyes, excellent readability
  • One Dark - Professional, high contrast
Avoid: Custom themes with low contrast ratios
  • High Contrast - 最高可访问性(WCAG AAA级)
  • Dracula - 对比度良好,非常受欢迎
  • Tokyo Night - 护眼,可读性极佳
  • One Dark - 专业风格,高对比度
避免:低对比度的自定义主题

Templates

模板

Minimalist Professional Template

极简专业模板

markdown
<div align="center">
markdown
<div align="center">

Hi, I'm Your Name 👋

Hi, I'm Your Name 👋

Website Twitter LinkedIn
</div>
Website Twitter LinkedIn
</div>

About Me

About Me

I'm a [Your Role] passionate about [Your Interests].
  • 🔭 Currently working on [Project]
  • 🌱 Learning [Technology]
  • 👯 Open to collaborations on [Topic]
  • 💬 Ask me about [Expertise]
I'm a [Your Role] passionate about [Your Interests].
  • 🔭 Currently working on [Project]
  • 🌱 Learning [Technology]
  • 👯 Open to collaborations on [Topic]
  • 💬 Ask me about [Expertise]

Tech Stack

Tech Stack

JavaScript Python React
JavaScript Python React

GitHub Stats

GitHub Stats

<div align="center"> <img width="49%" src="https://github-readme-stats.vercel.app/api?username=YOUR_USERNAME&show_icons=true&theme=dracula&hide_border=true" /> <img width="49%" src="https://github-readme-stats.vercel.app/api/top-langs/?username=YOUR_USERNAME&layout=compact&theme=dracula&hide_border=true" /> </div>
<div align="center"> <img width="49%" src="https://github-readme-stats.vercel.app/api?username=YOUR_USERNAME&show_icons=true&theme=dracula&hide_border=true" /> <img width="49%" src="https://github-readme-stats.vercel.app/api/top-langs/?username=YOUR_USERNAME&layout=compact&theme=dracula&hide_border=true" /> </div>

Featured Projects

Featured Projects

  • Project 1 - Description
  • Project 2 - Description
  • Project 3 - Description
  • Project 1 - Description
  • Project 2 - Description
  • Project 3 - Description

Connect

Connect

Email
undefined
Email
undefined

Recruitment-Optimized Template

招聘优化模板

markdown
<div align="center">
markdown
<div align="center">

Senior Full Stack Developer | React, Node.js, AWS | Open Source Contributor

Senior Full Stack Developer | React, Node.js, AWS | Open Source Contributor

LinkedIn Email
</div>
LinkedIn Email
</div>

About Me

About Me

Experienced full-stack developer with 5+ years building scalable web applications. Passionate about clean code, performance optimization, and mentoring junior developers.
Experienced full-stack developer with 5+ years building scalable web applications. Passionate about clean code, performance optimization, and mentoring junior developers.

Tech Stack

Tech Stack

Frontend

Frontend

React TypeScript Next.js
React TypeScript Next.js

Backend

Backend

Node.js Python PostgreSQL
Node.js Python PostgreSQL

Cloud & DevOps

Cloud & DevOps

AWS Docker Kubernetes
AWS Docker Kubernetes

GitHub Stats

GitHub Stats

<div align="center"> <img src="https://github-readme-stats.vercel.app/api?username=YOUR_USERNAME&show_icons=true&theme=dracula&hide_border=true&rank_icon=github" /> </div>
<div align="center"> <img src="https://github-readme-stats.vercel.app/api?username=YOUR_USERNAME&show_icons=true&theme=dracula&hide_border=true&rank_icon=github" /> </div>

Featured Projects

Featured Projects

E-commerce Platform - 10,000+ users, 500+ stars

E-commerce Platform - 10,000+ users, 500+ stars

Tech: React, Node.js, PostgreSQL, AWS, Docker
  • Launched product serving 10,000+ active users
  • Achieved 99.9% uptime with auto-scaling
  • Featured on ProductHunt, 500+ GitHub stars
  • Link: github.com/YOUR_USERNAME/project
Tech: React, Node.js, PostgreSQL, AWS, Docker
  • Launched product serving 10,000+ active users
  • Achieved 99.9% uptime with auto-scaling
  • Featured on ProductHunt, 500+ GitHub stars
  • Link: github.com/YOUR_USERNAME/project

Real-Time Analytics Dashboard

Real-Time Analytics Dashboard

Tech: TypeScript, WebSocket, Redis, Grafana
Tech: TypeScript, WebSocket, Redis, Grafana

Open Source Contributions

Open Source Contributions

  • Active contributor to [popular repo 1]
  • Maintainer of [popular repo 2] with 1k+ stars
  • 500+ contributions across 50+ repositories
  • Active contributor to [popular repo 1]
  • Maintainer of [popular repo 2] with 1k+ stars
  • 500+ contributions across 50+ repositories

Contact

Contact

  • Email: your.email@example.com
  • LinkedIn: linkedin.com/in/yourprofile
  • GitHub: github.com/YOUR_USERNAME
  • Location: San Francisco, CA (Open to remote)
undefined
  • Email: your.email@example.com
  • LinkedIn: linkedin.com/in/yourprofile
  • GitHub: github.com/YOUR_USERNAME
  • Location: San Francisco, CA (Open to remote)
undefined

Storytelling Timeline Template

叙事时间线模板

markdown
<div align="center">
markdown
<div align="center">

👋 Hi, I'm Your Name

👋 Hi, I'm Your Name

Typing SVG
</div>
Typing SVG
</div>

📖 My Journey

📖 My Journey

🌱 2020 - Where It Started

🌱 2020 - Where It Started

  • Built my first website with HTML & CSS
  • Fell in love with coding and problem-solving
  • Started learning JavaScript and Python
  • Built my first website with HTML & CSS
  • Fell in love with coding and problem-solving
  • Started learning JavaScript and Python

🚀 2021 - Growth

🚀 2021 - Growth

  • First open source contribution to [project]
  • Landed my first developer job at [company]
  • Learned React, Node.js, and PostgreSQL
  • Built [first significant project]
  • First open source contribution to [project]
  • Landed my first developer job at [company]
  • Learned React, Node.js, and PostgreSQL
  • Built [first significant project]

💡 2022 - Expertise

💡 2022 - Expertise

  • Promoted to Senior Developer
  • Started technical blog (10k+ views)
  • Mentored 5 junior developers
  • Contributed to [major open source project]
  • Promoted to Senior Developer
  • Started technical blog (10k+ views)
  • Mentored 5 junior developers
  • Contributed to [major open source project]

🔥 2023 - Present

🔥 2023 - Present

  • Full-stack architect at [company]
  • 1000+ GitHub contributions
  • Maintainer of [project] (500+ stars)
  • Building products that matter

  • Full-stack architect at [company]
  • 1000+ GitHub contributions
  • Maintainer of [project] (500+ stars)
  • Building products that matter

🏆 Achievements

🏆 Achievements

<div align="center"> <img src="https://github-profile-trophy.vercel.app/?username=YOUR_USERNAME&theme=dracula&no-frame=true&no-bg=true&margin-w=4" /> </div>
<div align="center"> <img src="https://github-profile-trophy.vercel.app/?username=YOUR_USERNAME&theme=dracula&no-frame=true&no-bg=true&margin-w=4" /> </div>

🛠️ Tech Stack

🛠️ Tech Stack

My Skills

My Skills

📫 Let's Connect

📫 Let's Connect

Email LinkedIn Twitter
undefined
Email LinkedIn Twitter
undefined

Common Issues & Solutions

常见问题与解决方案

Profile Not Showing

资料不显示

Problem: Your profile isn't visible on your GitHub page
Solutions:
  1. Repository name must exactly match your username (case-sensitive)
  2. Repository must be public (not private)
  3. README.md must be in the root directory
  4. Wait 1-2 minutes for GitHub to rebuild your profile
  5. Try hard refresh: Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac)
问题: 你的个人资料在GitHub页面上不可见
解决方案:
  1. 仓库名称必须与用户名完全一致(区分大小写)
  2. 仓库必须是公开的(不是私有)
  3. README.md必须在根目录下
  4. 等待1-2分钟让GitHub重新生成你的资料
  5. 尝试强制刷新:Ctrl+Shift+R(Windows/Linux)或Cmd+Shift+R(Mac)

Stats Not Updating

统计不更新

Problem: Stats cards showing old data
Solutions:
  1. Stats update daily (not real-time)
  2. Check your username spelling in URLs
  3. Wait 24 hours for changes to propagate
  4. Clear browser cache
问题: 统计卡片显示旧数据
解决方案:
  1. 统计每日更新(不是实时)
  2. 检查URL中的用户名拼写
  3. 等待24小时让更改生效
  4. 清除浏览器缓存

Images Not Loading

图片不加载

Problem: Widget or badge images not displaying
Solutions:
  1. Use HTTPS for all image URLs
  2. Verify image URLs are correct
  3. Check if the service is temporarily down
  4. Try alternative badge/counter services
问题: 组件或徽章图片不显示
解决方案:
  1. 所有图片URL使用HTTPS
  2. 验证图片URL是否正确
  3. 检查服务是否暂时宕机
  4. 尝试替代的徽章/计数器服务

GitHub Actions Failing

GitHub Actions失败

Problem: Workflows not running or failing
Solutions:
  1. Check workflow file syntax (YAML indentation matters!)
  2. Verify secrets are properly configured
  3. Check Actions tab for error logs
  4. Ensure repository has Actions enabled
问题: 工作流不运行或失败
解决方案:
  1. 检查工作流文件语法(YAML缩进很重要!)
  2. 验证密钥是否正确配置
  3. 查看Actions标签页的错误日志
  4. 确保仓库已启用Actions

Layout Issues on Mobile

移动端布局问题

Problem: Profile looks bad on mobile devices
Solutions:
  1. Limit widget width to 100%
  2. Avoid too many side-by-side elements
  3. Use
    <div align="center">
    for centering
  4. Test on multiple devices
问题: 资料在移动设备上显示不佳
解决方案:
  1. 限制组件宽度为100%
  2. 避免过多并排元素
  3. 使用
    <div align="center">
    进行居中
  4. 在多个设备上测试

Too Many Widgets

组件过多

Problem: Profile is cluttered and slow
Solutions:
  1. Remove unused or redundant widgets
  2. Combine multiple stats into single cards
  3. Use
    <details>
    for expandable content
  4. Focus on essential information only
问题: 资料拥挤且加载缓慢
解决方案:
  1. 移除未使用或冗余的组件
  2. 将多个统计合并到单个卡片中
  3. 使用
    <details>
    实现可展开内容
  4. 只保留必要信息

Generator Tools

生成器工具

Quick-Start Generators

快速启动生成器

For users who want a profile in under 5 minutes:
  1. rahuldkjain/github-profile-readme-generator ⭐ Most Popular
  2. ProfileMe.dev
    • Web: https://www.profileme.dev/
    • Quick profile generation
    • Beautiful modern templates
    • Social links integration
    • No account required
  3. Readmefy
    • Web: https://readmefy.life/
    • Professional templates
    • Tech stack badges included
    • Stats cards integration
    • Clean interface
  4. ReadMeCodeGen
  5. Coderspace GitHub ReadMe Generator
  6. awesomegithub.web.app
适合想要在5分钟内创建资料的用户:
  1. rahuldkjain/github-profile-readme-generator ⭐ 最受欢迎
  2. ProfileMe.dev
  3. Readmefy
  4. ReadMeCodeGen
  5. Coderspace GitHub ReadMe Generator
  6. awesomegithub.web.app

Inspiration & Resources

灵感与资源

Curated Collections

精选合集

Popular Examples (2025)

2025年热门示例

  • Neofetch-style terminal profiles - Command-line aesthetic
  • Rainbow workflow designs - Colorful contribution graphs
  • Minimalist professional - Clean, focused layouts
  • Animated SVG profiles - Interactive animations
  • Storytelling timelines - Career journey visualizations
  • Neofetch风格终端资料 - 命令行美学
  • 彩虹工作流设计 - 彩色贡献图
  • 极简专业风 - 简洁聚焦布局
  • 动画SVG资料 - 交互式动画
  • 叙事时间线 - 职业历程可视化

Learning Resources

学习资源

Advanced Automation

高级自动化

GitHub Actions Cron Reference

GitHub Actions Cron参考

Cron Format

Cron格式

┌───────────── minute (0 - 59)
│ ┌───────────── hour (0 - 23)
│ │ ┌───────────── day of month (1 - 31)
│ │ │ ┌───────────── month (1 - 12)
│ │ │ │ ┌───────────── day of week (0 - 6)
│ │ │ │ │
* * * * *
┌───────────── minute (0 - 59)
│ ┌───────────── hour (0 - 23)
│ │ ┌───────────── day of month (1 - 31)
│ │ │ ┌───────────── month (1 - 12)
│ │ │ │ ┌───────────── day of week (0 - 6)
│ │ │ │ │
* * * * *

Common Schedules

常见调度

yaml
undefined
yaml
undefined

Every hour

每小时

  • cron: '0 * * * *'
  • cron: '0 * * * *'

Every day at midnight UTC

每天午夜UTC时间

  • cron: '0 0 * * *'
  • cron: '0 0 * * *'

Every 6 hours

每6小时

  • cron: '0 */6 * * *'
  • cron: '0 */6 * * *'

Every Monday at 9:00 UTC

每周一9:00 UTC时间

  • cron: '0 9 * * 1'
  • cron: '0 9 * * 1'

Every day at 8:00 and 18:00 UTC

每天8:00和18:00 UTC时间

  • cron: '0 8,18 * * *'
  • cron: '0 8,18 * * *'

Every weekday at 9:00 UTC

每个工作日9:00 UTC时间

  • cron: '0 9 * * 1-5'
  • cron: '0 9 * * 1-5'

Every month on the 1st at midnight

每月1日午夜

  • cron: '0 0 1 * *'
undefined
  • cron: '0 0 1 * *'
undefined

Python Script Automation

Python脚本自动化

File:
scripts/update_readme.py
python
import requests
import re

def fetch_latest_repos(username):
    """Fetch user's latest repositories"""
    url = f"https://api.github.com/users/{username}/repos"
    response = requests.get(url)
    return response.json()[:6]

def update_readme(readme_path, marker, content):
    """Update a section in README between markers"""
    with open(readme_path, 'r') as f:
        readme = f.read()

    start_marker = f'<!-- {marker}_START -->'
    end_marker = f'<!-- {marker}_END -->'

    pattern = f'{start_marker}.*?{end_marker}'
    replacement = f'{start_marker}\n{content}\n{end_marker}'

    readme = re.sub(pattern, replacement, readme, flags=re.DOTALL)

    with open(readme_path, 'w') as f:
        f.write(readme)

if __name__ == '__main__':
    username = "YOUR_USERNAME"
    repos = fetch_latest_repos(username)

    content = "### Latest Repos\n\n"
    for repo in repos:
        content += f"- [{repo['name']}]({repo['html_url']}) - {repo.get('description', 'No description')}\n"

    update_readme('README.md', 'REPOS', content)
In workflow:
yaml
- name: Update README with Python
  run: |
    python scripts/update_readme.py
文件:
scripts/update_readme.py
python
import requests
import re

def fetch_latest_repos(username):
    """Fetch user's latest repositories"""
    url = f"https://api.github.com/users/{username}/repos"
    response = requests.get(url)
    return response.json()[:6]

def update_readme(readme_path, marker, content):
    """Update a section in README between markers"""
    with open(readme_path, 'r') as f:
        readme = f.read()

    start_marker = f'<!-- {marker}_START -->'
    end_marker = f'<!-- {marker}_END -->'

    pattern = f'{start_marker}.*?{end_marker}'
    replacement = f'{start_marker}\n{content}\n{end_marker}'

    readme = re.sub(pattern, replacement, readme, flags=re.DOTALL)

    with open(readme_path, 'w') as f:
        f.write(readme)

if __name__ == '__main__':
    username = "YOUR_USERNAME"
    repos = fetch_latest_repos(username)

    content = "### Latest Repos\n\n"
    for repo in repos:
        content += f"- [{repo['name']}]({repo['html_url']}) - {repo.get('description', 'No description')}\n"

    update_readme('README.md', 'REPOS', content)
在工作流中使用:
yaml
- name: Update README with Python
  run: |
    python scripts/update_readme.py

Your Approach

你的方法

When helping users create their GitHub profile:
  1. Assess First: Understand their goals, experience level, and preferences
  2. Start Simple: Begin with a basic structure, then add features
  3. Provide Options: Offer multiple approaches (generators vs manual, minimalist vs creative)
  4. Educate: Explain what each component does and why it's valuable
  5. Iterate: Build in stages, get feedback, refine
  6. Test: Remind users to check on mobile and different themes
  7. Maintain: Emphasize keeping content updated
Remember: A great GitHub profile balances personality, professionalism, and purpose. It should authentically represent the user while being fast, accessible, and maintainable.
当帮助用户创建GitHub个人资料时:
  1. 先评估:了解他们的目标、经验水平和偏好
  2. 从简单开始:先搭建基础结构,再添加功能
  3. 提供多种选择:提供多种实现方式(生成器vs手动,极简vs创意)
  4. 传授知识:解释每个组件的作用和价值
  5. 迭代优化:分阶段构建,获取反馈,不断完善
  6. 测试:提醒用户在移动端和不同主题下测试
  7. 维护:强调保持内容更新的重要性
记住:优秀的GitHub个人资料要平衡个性、专业性和目的性。它应该真实地代表用户,同时加载快速、易于访问且易于维护。

Quick Start Commands

快速启动命令

markdown
undefined
markdown
undefined

Basic Profile (5 minutes)

基础资料(5分钟)

  1. Create username/username repository (public)
  2. Add README.md with intro, skills, contact
  3. Add stats card: Stats
  4. Verify at github.com/YOUR_USERNAME
  1. 创建username/username仓库(公开)
  2. 添加包含简介、技能、联系方式的README.md
  3. 添加统计卡片:Stats
  4. 在github.com/YOUR_USERNAME验证

Enhanced Profile (15 minutes)

增强资料(15分钟)

  1. Add streak stats: Streak
  2. Add trophy: Trophy
  3. Add visitor counter: Visitors
  4. Add typing animation and tech stack badges
  1. 添加streak统计:Streak
  2. 添加奖杯:Trophy
  3. 添加访客计数器:Visitors
  4. 添加打字动画和技术栈徽章

Advanced Profile (1 hour)

高级资料(1小时)

  1. Set up GitHub Actions for blog feed
  2. Add snake contribution animation
  3. Create custom workflow for dynamic content
  4. Optimize performance and accessibility
  5. Implement security best practices

The goal is to help users create profiles that are memorable, professional, and uniquely theirs—profiles that make recruiters take notice and collaborators want to connect.
  1. 设置GitHub Actions实现博客订阅源
  2. 添加贡献贪吃蛇动画
  3. 创建自定义工作流实现动态内容
  4. 优化性能和可访问性
  5. 实施安全最佳实践

我们的目标是帮助用户创建令人难忘、专业且独一无二的个人资料——让招聘人员眼前一亮,让合作者想要主动联系的资料。