Como criar um perfil incrível no GitHub?

Tulio Leao — Thu, 17 Jun 2021 18:33:20 +0000

Esse artigo é uma tradução autorizada do original da @supritha:

How to have an awesome GitHub profile ?

Supritha ・ Jun 8 '21

Começando

Customize o readme.md do seu perfil no GitHub para torná-lo atraente ao seguir os passos abaixo. Também dou alguns exemplos de recursos muito legais para dar um tchan a mais!

Se o seu perfil do GitHub é tipo ESSE 👇...

Transforme-o NISSO 👇 ou em algo ainda melhor!

Siga os passos

1. Crie um novo repositório

Vá até 👉 criar novo repositório
Digite o nome do repositório, que deve ser o mesmo que o seu usuário. Isso cria um repositório secreto.
Torne o repositório Público
Selecione a caixinha de adicionar um readme ("Add a README file")
Clique em Criar Repositório

2. Modifique o arquivo `README`

O arquivo inicial se parece com o da imagem abaixo, com uma mensagem simples. Você pode editá-lo ao clicar no botão Edit README, à direita.

Como pode ver, o arquivo tem um modelo feito em markdown. Você pode editá-lo do jeito que preferir.
Quando acabar, clique em Commit changes. Se quiser, pode adicionar uma mensagem de commit.

3. ✨Embeleze seu perfil!✨

Há muitos recursos de código aberto disponíveis para chegar a uma página de perfil linda. Aqui está uma lista de recursos para escolher!

Estatísticas para o GitHub `README`

anuraghazra / github-readme-stats

⚡ Dynamically generated stats for your github readmes

GitHub Readme Stats

Get dynamically generated GitHub stats on your READMEs!

View Demo · Report Bug · Request Feature · FAQ · Ask Question

Français · 简体中文 · Español · Deutsch · 日本語 · Português Brasileiro · Italiano · 한국어 · Nederlands · नेपाली · Türkçe

Please note that documentation translations may be outdated; try to use English documentation if possible.

Love the project? Please consider donating to help it improve!

Are you considering supporting the project by donating to me? Please DO NOT!!!

India has recently suffered one of the most devastating train accidents, and your help will be immensely valuable for the people who were affected by this tragedy.

Please visit this link and make a small donation to help the people in need. A small donation goes a long way. ❤️

Features

View on GitHub

Troféus para o perfil do GitHub

ryo-ma / github-profile-trophy

🏆 Add dynamically generated GitHub Stat Trophies on your readme

GitHub Profile Trophy

🏆 Add dynamically generated GitHub Stat Trophies on your README

You can use this service for free. I'm looking for sponsors to help us keep up with this service❤️

Quick Start

Add the following code to your readme. When pasting the code into your profile's readme, change the ?username= value to your GitHub's username.

[![trophy](https://github-profile-trophy.vercel.app/?username=ryo-ma)](https://github.com/ryo-ma/github-profile-trophy)

Use theme

Add optional parameter of the theme.

[![trophy](https://github-profile-trophy.vercel.app/?username=ryo-ma&theme=onedark)](https://github.com/ryo-ma/github-profile-trophy)

More detail

About Rank

Ranks are SSS SS S AAA AA A B C UNKNOWN SECRET.

Rank	Description
SSS, SS, S	You are at a hard to reach rank. You can brag.
AAA, AA, A	You will reach this rank if you do your best. Let's aim here first.
B, C	You are currently making good progress. Let's aim a bit higher.
UNKNOWN	You have not taken action yet. Let's act first.
SECRET	This rank is very rare. The trophy will not

…

View on GitHub

Adicione um cabeçalho ou capa



[![MasterHead](your image link)](your GitHub link)

Adicione uma imagem flutuante ou GIF



<img align="right" alt="Coding" width="400" src="coloque o link aqui">

Seção de ícones de rede social



<h3 align="left">Connect with me:</h3>
<p align="left">
<a href="seu link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg" alt="" height="30" width="40"/></a>
<a href="seu link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg" alt="" height="30" width="40" /></a>
<a href="seu link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg" alt="" height="30" width="40" /></a>
<a href="seu link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/youtube.svg" alt="" height="30" width="40" /></a>
</p>

Seção de linguagens e ferramentas



<h3 align="left">Languages and Tools:</h3>
<p align="left"> <a href="https://www.cprogramming.com/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/c/c-original.svg" alt="c" width="40" height="40"/> </a> <a href="https://www.w3schools.com/cpp/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/cplusplus/cplusplus-original.svg" alt="cplusplus" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a> <a href="https://www.figma.com/" target="_blank"> <img src="https://www.vectorlogo.zone/logos/figma/figma-icon.svg" alt="figma" width="40" height="40"/> </a> <a href="https://flutter.dev" target="_blank"> <img src="https://www.vectorlogo.zone/logos/flutterio/flutterio-icon.svg" alt="flutter" width="40" height="40"/> </a> <a href="https://git-scm.com/" target="_blank"> <img src="https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg" alt="git" width="40" height="40"/> </a> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://www.linux.org/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/linux/linux-original.svg" alt="linux" width="40" height="40"/> </a> <a href="https://www.photoshop.com/en" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/photoshop/photoshop-plain.svg" alt="photoshop" width="40" height="40"/> </a> <a href="https://www.python.org" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/python/python-original.svg" alt="python" width="40" height="40"/> </a> </p>

Mais ícones de Dev

Sequência GitHub

Copie e cole o markdown abaixo no README do seu perfil do GitHub
Substitua o texto após ?user= com o seu usuário do GitHub.



[![GitHub Streak](https://github-readme-streak-stats.herokuapp.com/?user=DenverCoder1)](https://git.io/streak-stats)

Customize ele 👉aqui!

Em execução no Spotify

JeffreyCA / spotify-recently-played-readme

Display your recently played Spotify tracks on your GitHub profile README.

Spotify Recently Played README

Display your recently played Spotify tracks on your GitHub profile README. Powered by Vercel.

Check out lastfm-recently-played-readme for a similar integration for Last.fm scrobbles.

Getting Started

Click the button below to connect your Spotify account with the Vercel app. This is needed to access your recently played tracks.

By authorizing the app, you agree to have your Spotify username, access token, and refresh token stored on a secure Firebase database. This is required so you only need to authorize once and the app can automatically refresh access tokens in order to retrieve recent tracks.

You can revoke the app at https://www.spotify.com/account/apps.

After granting permission, just add the following into your README and set the user query parameter to your Spotify username.

![Spotify recently played](https://spotify-recently-played-readme.vercel.app/api?user=jeffreyca16)

Link to Spotify profile

Use the following snippet to make the widget link to your…

View on GitHub

Medalhas / Distintivos / Escudos



![badges1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6n8fc8zw8pawxveffitx.png)

Linguagens, ferramentas e ícones de redes sociais
Mais ícones

Readme Typing SVG ⌨️

Gera um SVG com animação da digitação

Demonstração

DenverCoder1 / readme-typing-svg

⚡ Dynamically generated, customizable SVG that gives the appearance of typing and deleting text for use on your profile page, repositories, or website.

⌨️ Readme Typing SVG

⚡ Quick setup

Copy-paste the markdown below into your GitHub profile README
Replace the value after ?lines= with your text. Separate lines of text with semicolons and use + or %20 for spaces.
Adjust the width parameter (see below) to fit the full width of your text.

[![Typing SVG](https://readme-typing-svg.demolab.com/?lines=First+line+of+text;Second+line+of+text)](https://git.io/typing-svg)

Star the repo 😄

⚙ Demo site

Here you can easily customize your Typing SVG with a live preview.

https://readme-typing-svg.demolab.com/demo/

🚀 Example usage

Below are links to profiles where you can see Readme Typing SVGs in action!

Feel free to open a PR and add yours!

🔧 Options

Parameter	Details	Type	Example
`lines`	Text to display with lines separated by `;` and `+` for spaces	string	`First+line;Second+line;Third+line`
`height`	Height of the output SVG in pixels (default: `50`)	integer	Any positive number
`width`	Width of the output SVG

…

View on GitHub

Contador de visualizações

antonkomarev / github-profile-views-counter

It counts how many times your GitHub profile has been viewed. Free cloud micro-service.

GitHub Profile Views Counter

Introduction

Try Ÿ HŸPE service as the more robust and feature rich solution.

GHPVС project is proof of concept. This counter designed to be an analytical instrument for you, but not for people who are visiting your profile It could be used to see profile views dynamics as result of development activity, blogging or taking part in a conference.

It counts how many times your GitHub profile has been viewed and displays them in your profile, for free.

Usage

Cloud solution launched as 100% free experience. Help me cut server costs if you like this service.

If you want to see big numbers in your profile, deploy a standalone solution to draw any views count you want without spamming our server. Everybody knows that any counters could be faked.

A billion fake profile views doesn't make you a very popular person, it makes you a person…

View on GitHub

Blog post workflow

Mostra o seu histórico de postagens em um blog

gautamkrishnar / blog-post-workflow

Show your latest blog posts from any sources or StackOverflow activity or Youtube Videos on your GitHub profile/project readme automatically using the RSS feed

Blog post workflow

How to use

Star this repo 😉
Go to your repository
Add the following section to your README.md file, you can give whatever title you want. Just make sure that you use  in your readme. The workflow will replace this comment with the actual blog post list:
```
# Blog posts


```
Create a folder named .github and create a workflows folder inside it, if it doesn't exist.

Create a new file named blog-post-workflow.yml with the following contents inside the workflows folder:

name: Latest blog post workflow
on
  schedule: # Run workflow automatically
    - cron: '0 * * * *' # Runs every hour, on the hour
  workflow_dispatch: # Run workflow manually (without waiting for the cron to be called), through the GitHub Actions Workflow page directly
permissions:
  contents:

…

View on GitHub

Adicione emojis

Lista de emojis e seus códigos

Piadas de `README`

ABSphreak / readme-jokes

😄 Jokes for your GitHub READMEs

README Jokes

Random programming jokes on your README.

View Demo ● Report Bugs

Usage

Endpoint URL: https://readme-jokes.vercel.app/api

Embed one of these in your README:

<!-- Markdown -->

![Jokes Card](https://readme-jokes.vercel.app/api)

<!-- HTML -->
<img src="https://readme-jokes.vercel.app/api" alt="Jokes Card" />

Customization Guide

Customize using ? after /api in the https link, example here with no borders using the hideBorder parameter.

Markdown method: ![Jokes Card](https://readme-jokes.vercel.app/api?hideBorder)

Image method: <img src="https://readme-jokes.vercel.app/api?hideBorder" alt="Jokes Card" />

Both methods will produce the following jokes card without border:
To use multiple parameters use '&' after the first parameter, e.g. ?hideBorder&theme=cobalt&qColor=%23944bcc&aColor=%23bbdb51

will produce a jokes card without border, with cobalt theme, answer color #944bcc and question color #bbdb51 like so:

Parameters Available

bgColor → Background Color
borderColor → Border Color
qColor → Question Color
aColor → Answer Color
textColor → Normal text Color
codeColor → Code…

View on GitHub

Frases/Citações de `README`

PiyushSuthar / github-readme-quotes

🔥 Add Programming Quotes To Your GitHub Readme

Github Readme Quotes

Developer Quotes for your Github Readme.

View Demo · Report Bug

Features ✨

Usage ⚡️

Copy the markdown below and paste it in your Github Readme.

[![Readme Quotes](https://quotes-github-readme.vercel.app/api?type=horizontal&theme=dark)](https://github.com/piyushsuthar/github-readme-quotes)

Options

Options	Default	Available
type	vertical	horizontal, vertical
theme	light	dark, chartreuse-dark, radical, merko, gruvbox, tokyonight, algolia, monokai, dracula, nord
quote	-	Customize your quote
author	-	The name of the quote's author
border	false	true, false

Installation and Development 🚀

To get started with developing this app locally, here are the steps:

Install the dependencies for the app using,

pnpm install

And then run the app using:

npx vercel dev

Usage

Vertical

You don't need to add ?type=vertical parameter.

Horizontal

You need to add ?type=horizontal parameter.

Border

You need to add ?border=true parameter.

Light

You don't need to add…

View on GitHub

Métricas de Dev

anmol098 / waka-readme-stats

This GitHub action helps to add cool dev metrics to your github profile Readme

Looking For Translation to different languages & Locale #23

Dev Metrics in Readme with added feature flags 🎌

📌✨Awesome Readme Stats

Are you an early 🐤 or a night 🦉?
When are you most productive during the day?
What are languages you code in?
Let's check out in your profile readme!

Report Bug · Request Feature

Prep Work

You need to update the markdown file(.md) with 2 comments. You can refer here for updating it.
You'll need a WakaTime API Key. You can get that from your WakaTime Account Settings
- You can refer here, if you're new to WakaTime
You'll need a GitHub API Token with repo and user scope from here if you're running the action to get commit metrics

enabling the repo scope seems DANGEROUS
but this GitHub Action only accesses your commit timestamp and lines of code added or deleted in repository you contributed.
- You can…

View on GitHub

4. MÉTODO ALTERNATIVO!

Se você achou isso tudo coisa demais, não se preocupe! Aqui estão duas maneiras fáceis de fazer isso:

Gerador de `README` do @rahuldkjain

👉 https://rahuldkjain.github.io/gh-profile-readme-generator/

GitHub Profilinator

👉 https://profilinator.rishav.dev/

rishavanand / github-profilinator

🚀 This tool contains mini GUI components that you can hook together to automatically generate markdown code for a perfect readme.

Github Profilinator

Generate creative GitHub profile readmes in few click!

View Generator · View Generated Profile · Report Bug · Request Feature

Loved the project? Show your love to the developer by starring this repo.

This project is aimed to simplify your GitHub profile generation process by providing creative components from all over the web which can be added in a few click. In the end, with the click of a button, markdown is auto-generated which you can directly add to your readmes.

🧐 Feature list

Image and text fields have multiple options like alignment, sizes, fit to screen
Skill set filed
Social badges field
GitHub activity and language stats
Dynamic blog posts
Visitor counter
Init with demo template
Multi column support
Customizable blocks and layouts
Listening to from Spotify
Multi template
Last tweet from Twitter
Last 3 uploads from Instagram

🚀 Getting started

This project is already deployed on…

View on GitHub

Ou...

Faça o fork do repositório de alguém
Clique no ícone de editar no arquivo README
Copie o código e cole no seu arquivo README. Claro que você pode (e deve) modificá-lo como quiser.

5. Algumas inspirações e ideias!

abhisheknaiidu / awesome-github-profile-readme

😎 A curated list of awesome GitHub Profile which updates in real time

Awesome GitHub Profile README

A curated list of awesome Github Profile READMEs

Loved the project? Please consider donating to help it improve!

EddieHubCommunity / awesome-github-profiles

List of GitHub profiles that have awesome customisation, that you can use for inspiration

Note: This repository is not included in the Hacktoberfest event, as it is for practice only!

Awesome GitHub profiles

List of GitHub profiles that have awesome customization, that you can use for inspiration.
Feel free to submit a pull request with your suggestions for awesome GitHub profiles.

How can I add my GitHub profile? 🤷‍♀️🤷‍♂️

Create an issue, with the title as your name, and in the description put a screenshot of the customised GitHub profile page (copy the generated image URL, this will be needed in the next step). The URL will look something like this https://github.com/EddieHubCommunity/awesome-github-profiles/assets/51878265/ee31b832-d549-4df9-8ffe-24419f9d0e46
Fork the project, using the top right corner button, that states fork
Create a file named your-username.json in the directory profiles with the following content.

Your entry should be similar to this example:

{
  "image": "https://user-images.githubusercontent.com/624760/91057573-48531300-e61f-11ea-9e13-2d7384e42000.png"
  "issueId": 66,
  "name": "Eddie Jaoude",

…

View on GitHub

Obrigado por ler!🙌

Compartilhe seu incrível perfil no GitHub nos comentários abaixo para que o mundo veja! :)
SuprithaRavish1 twitter

Curta e compartilhe para mais artigos assim.

Gostou do que ela fez?
Apoie comprando um café para ela ☕.

DEV Community: Tulio Leao

Como criar um perfil incrível no GitHub?

How to have an awesome GitHub profile ?

Supritha ・ Jun 8 '21

Começando

Siga os passos

1. Crie um novo repositório

2. Modifique o arquivo README

3. ✨Embeleze seu perfil!✨

Estatísticas para o GitHub README

anuraghazra / github-readme-stats

⚡ Dynamically generated stats for your github readmes

GitHub Readme Stats

Features

Troféus para o perfil do GitHub

ryo-ma / github-profile-trophy

🏆 Add dynamically generated GitHub Stat Trophies on your readme

GitHub Profile Trophy

Quick Start

Use theme

About Rank

Adicione um cabeçalho ou capa

Adicione uma imagem flutuante ou GIF

Seção de ícones de rede social

Seção de linguagens e ferramentas

Sequência GitHub

Em execução no Spotify

JeffreyCA / spotify-recently-played-readme

Display your recently played Spotify tracks on your GitHub profile README.

Spotify Recently Played README

Getting Started

Link to Spotify profile

Medalhas / Distintivos / Escudos

Readme Typing SVG ⌨️

DenverCoder1 / readme-typing-svg

⚡ Dynamically generated, customizable SVG that gives the appearance of typing and deleting text for use on your profile page, repositories, or website.

⌨️ Readme Typing SVG

⚡ Quick setup

⚙ Demo site

🚀 Example usage

🔧 Options

Contador de visualizações

antonkomarev / github-profile-views-counter

It counts how many times your GitHub profile has been viewed. Free cloud micro-service.

GitHub Profile Views Counter

Introduction

Usage

Blog post workflow

gautamkrishnar / blog-post-workflow

Show your latest blog posts from any sources or StackOverflow activity or Youtube Videos on your GitHub profile/project readme automatically using the RSS feed

Blog post workflow

How to use

Adicione emojis

Piadas de README

ABSphreak / readme-jokes

😄 Jokes for your GitHub READMEs

README Jokes

Usage

Customization Guide

Parameters Available

Frases/Citações de README

PiyushSuthar / github-readme-quotes

🔥 Add Programming Quotes To Your GitHub Readme

Github Readme Quotes

Developer Quotes for your Github Readme.

Features ✨

Usage ⚡️

Options

Installation and Development 🚀

Usage

Vertical

Horizontal

Border

Light

Métricas de Dev

anmol098 / waka-readme-stats

This GitHub action helps to add cool dev metrics to your github profile Readme

Dev Metrics in Readme with added feature flags 🎌

📌✨Awesome Readme Stats

Prep Work

2. Modifique o arquivo `README`

Estatísticas para o GitHub `README`

Piadas de `README`

Frases/Citações de `README`

Gerador de `README` do @rahuldkjain