Como montar apresentações no Readme do repositório do Github. Caso queira criar um perfil para aparecer como sua pagina inicial então crie um repositório com o mesmo nome do seu usuário no Github.
Substitua as tags abaixo :
- Utilizar o nome do usuário:
<usuário>. - Alterar o tema
<tema>. - Pode utilizar as cores no padrão hex como
left_color=2f80ederight_color=2f80ed, para criar uma paleta de cores acesse o Coolors.
É nescessário entender a estrutura de um card ou badge em Markdown, geralmente vemos a estrutura [](URL para redirecionamento)
- Inicie com sua apresentação, pode até ser com o exemplo inicial ao criar o readme para seu perfil.
- Apresente suas redes sociais e email pois, as pessoas podem querer conhecer mais seu trabalho.
- Liste exemplo de repositórios com projetos recentes.
- Listar ferramentas, linguagem de programação, banco de dados entre outros itens que mostre ao leitor sua experiência profissional.
- Alguns sites como o Creddly registram badges de cursos e essas podem ser usadas no perfil.
- Use os itens abordados nesse artigo para incrementar o que achar nescessário.
- Visitas no perfil:
Ícones podem ser encontrados no sites icon8, iconfinder, thenounproject e iconmonstr.
Abaixo exemplo do icone do Github:
<p align="center">
<a href="https://github.com/"
><img
src="https://img.icons8.com/bubbles/50/000000/github.png"
alt="GitHub"
/></a>
</p>
É possível gerar badges de redes sociais ou até mesmo lista com as ferramentas, linguagens de programação entre outros pelos sites Markdown Badges, GitHub Profile Badges, Shields, Repositório Shields, Awesome Badges e Simple Badges. Pode ser usado via HTML ou Markdown como no exemplo abaixo:
<p align="center">
<a href="https://bio.link/mayanna">
<img
alt="Bio link"
src="https://img.shields.io/badge/Bio%20Link-000000.svg?style=for-the-badge&logo=Bio-Link&logoColor=white"
/>
</a>
</p>
Utilizar o status do Github e de demais redes sociais via badges, o mesmo pode ser feito com o Youtube seguindo o Github README YouTube Stats
Podem ser usadas em HTML ou Markdown:
<p align="left">
<a href="https://github.com/mayannaoliveira/mayannaoliveira"><img src="https://img.shields.io/github/forks/mayannaoliveira/mayannaoliveira.svg?style=social&label=Fork" alt="Forks"/></a>
<a href="https://github.com/mayannaoliveira/mayannaoliveira"><img src="https://img.shields.io/github/stars/mayannaoliveira/mayannaoliveira.svg?style=social&label=Star" alt="Star"/></a>
<a href="https://github.com/mayannaoliveira/mayannaoliveira"><img src="https://img.shields.io/github/watchers/mayannaoliveira/mayannaoliveira.svg?style=social&label=Watch" alt="Watch"/></a>
<a href="https://github.com/mayannaoliveira/mayannaoliveira"><img src="https://img.shields.io/github/followers/mayannaoliveira.svg?style=social&label=Follow" alt="Follow"/></a>
<a href="https://github.com/mayannaoliveira/mayannaoliveira"><img src="https://img.shields.io/twitter/follow/oliveiramayanna.svg?style=social" alt="Twitter"/></a>
</p>Outra opção de badges:
<p align="left">
<a href="https://github.com/mayannaoliveira/mayannaoliveira/stargazers"><img src="https://img.shields.io/github/stars/mayannaoliveira/mayannaoliveira" alt="Stars Badge"/></a>
<a href="https://github.com/mayannaoliveira/mayannaoliveira/network/members"><img src="https://img.shields.io/github/forks/mayannaoliveira/mayannaoliveira" alt="Forks Badge"/></a>
<a href="https://github.com/mayannaoliveira/mayannaoliveira/pulls"><img src="https://img.shields.io/github/issues-pr/mayannaoliveira/mayannaoliveira" alt="Pull Requests Badge"/></a>
<a href="https://github.com/mayannaoliveira/mayannaoliveira/issues"><img src="https://img.shields.io/github/issues/mayannaoliveira/mayannaoliveira" alt="Issues Badge"/></a>
<a href="https://github.com/mayannaoliveira/mayannaoliveira/contributors"><img alt="GitHub contributors" src="https://img.shields.io/github/contributors/mayannaoliveira/mayannaoliveira?color=2b9348"></a>
<a href="https://wakatime.com/@cd4a8b69-f939-4fa3-a908-c3b12093052f"><img src="https://wakatime.com/badge/user/cd4a8b69-f939-4fa3-a908-c3b12093052f.svg" alt="Total time coded since Aug 1 2021" /></a>
</p>Para utilizar o status do GitHub é apenas utilizar o código abaixo e inserir o usuário e o tema, mais informações GitHub Readme Stats.
Os temas (theme) podem ser: dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast e dracula.
Card para exibir os dados do Github, é possível gerar via site Awesome GitHub Stats ou usar a versão HTML ou Markdown. Esse tipo de card permite alterar os seguintes itens:
- O tipo do card
cardType=level. - O tema
theme=ocean-dark.
Versão Markdown:
[](https://git.io/awesome-stats-card)
Versão HTML com o alinhamento no centro:
<p align="center">
<a href="https://awesome-github-stats.azurewebsites.net/index.html??cardType=github&theme=vision-friendly-dark&preferLogin=false">
<img alt="mayannaoliveira's GitHub Stats" src="https://awesome-github-stats.azurewebsites.net/user-stats/mayannaoliveira?cardType=github&theme=vision-friendly-dark&preferLogin=false" /></a>
</p>É bem parecido com o GitHub Stats. Pode-se usar os temas: flat, onedark, gruvbox, dracula, monokai, chalk, nord, alduin, darkhub, juicyfresh, buddhism, oldie, radical, onestar, discord, algolia, gitdimmed, tokyonight, matrix, apprentice, dark_dimmed e dark_lover. Detalhes disponíveis na página GitHub Profile Trophy
Versão em Markdown:
[](<url-para-redirecionar>)```Versão em Markdown:
[](https://github.com/mayannaoliveira/github-profile-trophy)
Versão em Markdown:
[](https://github.com/mayannaoliveira/github-profile-trophy)Acessar o repositório e ir no caminho: Settings > Actions > General > Actions permissions > Allow all actions and reusable workflows assim as actions definidas poderão ser executadas e assim ver o resultado delas na visualização do README.md.
Passo-a-passo:
- Acessar o
Settings. - Clicar opção
Actions>General. - Na opção
Actions permissionsselecionar a opçãoAllow all actions and reusable workflows. - Abrir a página do
README.mdem uma guia anônima e verificar se houve a atualização.
Exibe as atividades que foram executadas recentemente no GitHub. Os passos abaixo devem ser seguidos para que a ação possa acontecer no repositório. Mais informações na página GitHub Recent Activity.
Estrutura do repositório:
Criar uma pasta .github e dentro dela outra workflows, onde ficarar os arquivos YML.
usuário/usuário
│ README.md
│
└───.github
└───workflows
blog-post-workflow.yml
update-badges.yml
update-readme.ymlNo arquivo README.md inserir os comentários:
<!--START_SECTION:activity-->
<!--END_SECTION:activity-->Após criar as pastas .github e workflows inserir dentro da workflows o YML update-readme.yml com o código abaixo:
name: Update README
on:
schedule:
- cron: "*/5 * * * *" # Runs every 5 minutes.
jobs:
build:
runs-on: ubuntu-latest
name: Update this repo's README with recent activity
steps:
- uses: actions/checkout@v2
- uses: jamesgeorge007/github-activity-readme@master
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
COMMIT_MSG: "Updated README with recent activity"
MAX_LINES: 10Atividades do GitHub:
Após finalizar o processo acima abra o link do repositório na guia anônima do navegador para ver o resultado.
Para mais informações acesse a página Github Readme Activity Graph.
O código em Markdown:
[](https://github.com/Ashutosh00710/github-readme-activity-graph)
Utilizando os temas:
O código em Markdown:
[](https://github.com/<usuário>/github-readme-activity-graph)
Observação: Caso não esteja visualizando a ação leia as recomendações do parágrado Permissão para uso do Actions.
Lista as postagens recentes do seu blog dentro do README, processo semelhante ao do GitHub Recent Activity. Os passos abaixo devem ser seguidos para que a ação possa acontecer no repositório. Mais informações na página Blog Post Workflow.
Estrutura do repositório:
Criar uma pasta .github e dentro dela outra workflows, onde ficarar os arquivos YML.
usuário/usuário
│ README.md
│
└───.github
└───workflows
blog-post-workflow.yml
update-badges.yml
update-readme.yml
Inserir dentro README.md do o código abaixo:
<!-- BLOG-POST-LIST:START -->
- [Terminal do Windows com Oh My Posh](https://dev.to/mayannaoliveira/terminal-do-windows-com-oh-my-posh-14jm)
- [Introdução aos Comandos Git](https://dev.to/mayannaoliveira/introducao-aos-comandos-git-3am7)
- [Atualização do Ubuntu via Terminal](https://dev.to/mayannaoliveira/atualizacao-do-ubuntu-via-terminal-2mp9)
- [Instalação do Docker no Ubuntu](https://dev.to/mayannaoliveira/instalacao-do-docker-no-ubuntu-3jej)
<!-- BLOG-POST-LIST:END -->Após criar as pastas .github e workflows inserir dentro da workflows o YML blog-post-workflow.yml com o código abaixo:
name: Latest blog post workflow
on:
schedule:
- cron: "0 * * * *"
workflow_dispatch:
permissions:
contents: write
jobs:
update-readme-with-blog:
name: Update this repo's README with latest blog posts
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Pull in dev.to posts
uses: gautamkrishnar/blog-post-workflow@v1
with:
feed_list: "https://dev.to/feed/mayannaoliveira,https://www.mayannaoliveira.com/feed/"
max_post_count: 4No trecho feed_list: "https://dev.to/feed/mayannaoliveira,https://www.mayannaoliveira.com/feed/" deve inserir o link e o feed do seu blog como no exemplo, já usei no Dev e no Hashnode.
Para alterar a quantidades de artigos a serem exibidos alterem a quantidade em max_post_count: <quantidade>.
Uma outra forma de exibir suas habilidades vida GitHub WidgetBox. Disponível no tema: darkmode, viridescent, carbon, nautilus ou serika.
[](https://github.com/Jurredr/github-widgetbox)[](https://github.com/mayannaoliveira)[](https://github.com/mayannaoliveira/github-widgetbox) Stackoverflow card Mostre sua colaboração na plataforma utilizando um dos cards do Stack Overflow Stats abaixo alguns exemplos:
[](URL-do-perfil)[](https://stackoverflow.com/users/16884312/mayanna)[](https://stackoverflow.com/users/16884312/mayanna)Na opção acima alguns itens podem ser adicionados ao código seguindo o exemplo de theme.
- showLogo: true
- theme: [stackoverflow-dark, stackoverflow-light, dracula, ...]
- showBorder: true
- showIcons: true
- showAnimations: true
Seguir exemplo do WakaTime coding metrics on your profile readme que foi elaborado pelo usuário athul.
Adicionar uma action de nome waka-readme.yml com o código abaixo:
name: Waka Readme
on:
# for manual workflow trigger
workflow_dispatch:
schedule:
# runs at 12 AM UTC (5:30 AM IST)
- cron: "0 0 * * *"
jobs:
update-readme:
name: WakaReadme DevMetrics
runs-on: ubuntu-latest
steps:
- uses: athul/waka-readme@master # this action name
with:
WAKATIME_API_KEY: ${{ secrets.WAKATIME_API_KEY }}Inserir as linhas abaixo no readme.md:
<!--START_SECTION:waka-->
<!--END_SECTION:waka-->Inserir chave da Api no Github
A chave da API do WakaTime pode ser encontrada no link Wakatime API Key. Após adicionar as actions será nescessário inserir a chave da API do Todoist, passo-a-passo:
- Acessar a opção do
Settingsno repositório. - Selecionar a opção
Secrets.
- O mesmo processo pode ser feio pelo link
https://github.com/<USUÁRIO>/<USUÁRIO>/settings/secrets.
- Criar um novo
Secretsde nomeWAKATIME_API_KEYe inserir emValuea chave da sua API.
Outra opção é essa, muito simples:
Inserir o Todoist no seu repositório, seguindo o exemplo do Todoist Readme, elaborado pelo usuário abhisheknaiidu.
Action para usuário que não utilizam a versão Premium
- Criar uma action com nome
update-todoist.ymlutilizando o código abaixo:
name: Todoist Readme
on:
workflow_dispatch:
schedule:
# Runs every minute
- cron: "* * * * *"
jobs:
update-readme:
name: Update todoist stats
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: abhisheknaiidu/todoist-readme@master
with:
TODOIST_API_KEY: ${{ secrets.TODOIST_API_KEY }}
PREMIUM: ""Action para usuário que utilizam a versão Premium
- Criar uma action com nome
update-todoist.ymlutilizando o código abaixo:
name: Todoist Readme
on:
workflow_dispatch:
schedule:
# Runs every minute
- cron: "* * * * *"
jobs:
update-readme:
name: Update todoist stats
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: abhisheknaiidu/todoist-readme@master
with:
TODOIST_API_KEY: ${{ secrets.TODOIST_API_KEY }}
PREMIUM: trueChave da API do Todoist
Chave da API do Todoist, segui tutorial Encontre seu token API:
- Faça login no Todoist no aplicativo web via Todoist.
- Clique em seu avatar no canto superior esquerdo.
- Selecione
Configurações. - À esquerda, selecione
Integrações. - Selecione a aba
Desenvolvedor. - Clique em Copiar para a área de transferência para obter seu token API.
Inserir chave da API no Github
Após adicionar as actions será nescessário inserir a chave da API do Todoist, passo-a-passo:
- Acessar a opção do
Settingsno repositório. - Selecionar a opção
Secrets.
- O mesmo processo pode ser feio pelo link
https://github.com/<USUÁRIO>/<USUÁRIO>/settings/secrets.
- Criar um novo
Secretsde nomeTODOIST_API_KEYe inserir emValuea chave da sua API.
Inserir no README.md as linhas:
<!-- TODO-IST:START -->
<!-- TODO-IST:END -->As suas conquistas em formato de badges, para saber mais sobre o Holopin acesse o site oficial e leia a documentação onde tem todos os passos de como conseguir as badges.
[](https://holopin.io/@mayannaoliveira)Codewars é um site onde é possível aprender e compartilhar o aprendizado de programação. As badges estão disponíveis em 3 tamanhos diferentes:
Tamanho grande:
Tamanho médio:
Tamanho pequeno:
Utilizar na versão HTML:
<img src= "https://www.codewars.com/users/mayannaoliveira/badges/micro" width= "200"/>Para acessar a sua badge do Codewar basta ir no link https://www.codewars.com/users/<USUÁRIO>/badges e inserir em Markdown ou HTML como mostra os exemplos na página.
OSS Insight é mais uma opção para exibir o stats do seu perfil.
<!-- Copy-paste in your Readme.md file -->
<a href="https://next.ossinsight.io/widgets/official/compose-user-dashboard-stats?user_id=8138985" target="_blank" style="display: block" align="center">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-user-dashboard-stats/thumbnail.png?user_id=8138985&image_size=auto&color_scheme=dark" width="771" height="auto">
<img alt="Dashboard stats of @mayannaoliveira" src="https://next.ossinsight.io/widgets/official/compose-user-dashboard-stats/thumbnail.png?user_id=8138985&image_size=auto&color_scheme=light" width="771" height="auto">
</picture>
</a>
<!-- Made with [OSS Insight](https://ossinsight.io/) -->Beautify Github Profile, Awesome GitHub Profile README Template Collection e Awesome GitHub Profile README.