A maneira mais fácil de começar é visitar nosso site, onde você pode personalizar e visualizar seu cartão ao vivo.
https://github-readme-tech stack.vercel.app
Como desenvolvedor, é importante mostrar sua experiência em diferentes tecnologias para possíveis colaboradores e empregadores. Com o GitHub-ReadMe-Tech Stack , você pode criar facilmente uma representação visual das tecnologias usadas no repositório do seu GitHub e incluí-lo no seu perfil ReadMe . Isso pode ajudá -lo a se destacar e atrair a atenção de outras pessoas que procuram desenvolvedores com conjuntos de habilidades específicos.
As imagens são totalmente personalizáveis, para que você possa escolher as tecnologias que deseja mostrar e até ajustar as cores, os ícones e o alinhamento para combinar com sua marca pessoal.
Pessoalmente, eu sempre quis mostrar minhas habilidades de uma maneira limpa e moderna. Eu poderia fazer isso apenas com os emblemas, mas eles não combinavam com o estilo do GitHub-Readme-Strek-Stats e Github-Readme-Stats. Com o Github-ReadMe-Tech Stack , isso não é mais um problema, naturalmente corresponde a esses cartões!
profile README .svg se eles ainda não existirem.Nenhum dos campos é necessário. Cada parâmetro de consulta possui um valor padrão, listado abaixo.
| Parâmetro | Exemplo | Valor padrão | Descrição |
|---|---|---|---|
| título | title=My%20Title | Minha pilha de tecnologia | O título do cartão. %20 pode ser usado como um espaço. |
| tema | theme=github_dark | Github | O tema do cartão. Você pode navegar entre os temas aqui. |
| alinhar | align=center | esquerda | O alinhamento dos crachás. ( left , center , right ) |
| Titlealign | align=center | esquerda | O alinhamento do título. ( left , center , right ) |
| Showborder | showBorder=false | verdadeiro | Exiba a borda ao redor do cartão ou não. ( true , false ) |
| hidetitle | hideTitle=true | falso | Exiba o título do cartão ou não. ( true , false ) |
| hidebg | hideBg=true | falso | Se verdadeiro, define o plano de fundo para transparente. ( true , false ) |
| fronteira | borderRadius=12.5 | 4.5 | Número entre 0 e 50. |
| Fontfamily | fontFamily=consolas | Segoe Ui | A família de fontes do título. Se a família especificada não existir, o padrão será usado. |
| fontsize | fontSize=20 | 18 | O tamanho do título. Aceita um número entre 15 e 30. |
| peso -font | fontWeight=normal | semibold | A espessura do título. ( thin , normal , semibold , bold ) |
| largura | width=500 | 495 | A largura do cartão. Aceita um número válido. |
| brecha | gap=15 | 10 | A lacuna entre os crachás. Aceita um número entre 0 e 30. |
| LineHeight | lineHeight=10 | 7 | A lacuna entre as linhas. Aceita um número entre 0 e 30. |
| LineCount | lineCount=2 | 1 | O número de linhas que você deseja adicionar ao seu cartão. |
| linho} | line1=html5,html5,auto | - | A linha atual do crachá, onde {n} é um número. (1 <= n <= lineCount) |
| bg | bg=%2383324c | - | A cor do fundo. |
| fronteira | border=%232da7c7 | - | A cor da borda. |
| distintivo | badge=%2383324c | - | A cor dos emblemas. |
| titlecolor | titleColor=%232da7c7 | - | A cor do título. |
Esses cartões vêm com vários temas embutidos que você pode usar. Você pode encontrar todos eles clicando aqui.
Você também pode personalizar os temas. É mais fácil ver com o site da demonstração.
# Clone the project:
git clone https://github.com/0l1v3rr/github-readme-tech-stack.git
cd github-readme-tech-stack
# Install the dependencies:
npm i
npm run prepare
# Running the application:
npm run dev
# Running the storybook:
npm run storybook Todas as contribuições são bem -vindas.
Você pode encontrar uma diretriz contribuinte aqui.
Este projeto é divulgado sob a licença do MIT.