gh-profile

This skill transforms GitHub profiles from basic to extraordinary. Your GitHub profile is your digital resume, portfolio, and personal brand—make it unforgettable. # 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.) # 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 # Understanding GitHub Profiles ## What is a GitHub Profile? 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. ### 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 ### 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 ### 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 # 2025 Trends & Best Practices ## 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 ## What Works in 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 # 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? ### 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? ## Step-by-Step Guidance ### For Complete Beginners (No Profile Yet) #### Quick Start: Your First Profile in 5 Minutes **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"> # Hi, I'm Your Name! 👋 I'm a developer who loves building things that live on the internet. ## 🚀 What I'm Working On - Currently building [your current project] - Learning [technology you're learning] - Open to collaborations on [topics you're interested in] ## 💬 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. #### ✅ 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](#common-issues--solutions) ### 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 ``` ### 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 ``` ### 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 ``` # Component Reference Guide All code snippets below go in your `README.md` unless otherwise specified. ## Stats Cards ### GitHub Readme Stats (Most Popular) ```markdown  ``` **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` ### Top Languages Card ```markdown  ``` ### Repository Pin Card ```markdown  ``` ### GitHub Trends (Advanced Metrics) ```markdown [](https://github.com/avgupta456/github-trends) ``` **Features:** - Lines of Code (LOC) statistics - Advanced metrics beyond basic stats - Customizable visualizations ### Streak Stats ```markdown [](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 ### Profile Trophy ```markdown [](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 ## Animations ### Typing SVG **File:** `README.md` ```markdown [](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) ### Snake Animation (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  ``` ## GitHub Achievements ### 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. ### 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 ### Common Achievements & How to Earn Them #### **Starstruck** (DEFAULT/Bronze) - 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) - Contributed to the Arctic Code Vault archive - **How to earn:** Have contributions between Feb 2020 - Apr 2020 #### **Pull Shark** (Bronze/Silver/Gold) - Made many pull requests - **How to earn:** Contribute PRs regularly (Bronze: 10+, Silver: 100+, Gold: 500+) #### **YOLO** (Bronze) - Created a public repository and renamed default branch - **How to earn:** Rename `master` branch to `main` or any other name #### **Quickdraw** (Bronze) - Quick response to issues - **How to earn:** Comment on issues quickly after they're opened #### **Pair Extraordinaire** (Bronze/Silver) - Co-authored commits with others - **How to earn:** Use `@` mentions in commit messages #### **Galaxy Brain** (Bronze/Silver) - Answers marked as helpful in discussions - **How to earn:** Provide helpful answers in GitHub Discussions #### **Mind Blowing** (Bronze) - Received 10+ reactions on a discussion answer - **How to earn:** Give exceptionally helpful answers ### 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 ### Achievement Resources - **[GitHubAchievements.com](https://githubachievements.com/)** - Complete guide with earning strategies - **[GitHub Achievements List](https://github.com/drknzz/GitHub-Achievements)** - Full achievement catalog with requirements - **[Official GitHub Docs](https://docs.github.com/en/developers/overview)** - Understanding GitHub's achievement system ## Visitor Counters ### Basic Visitor Counter