https://github.com/amaro-netto/grafico_dev_linguagem

Ferramenta interativa que permite visualizar as linguagens de programação mais utilizadas em um perfil do GitHub através de um gráfico de radar dinâmico
https://github.com/amaro-netto/grafico_dev_linguagem

chartjs github html5 javascript nodejs puppeteer

Last synced: about 2 months ago
JSON representation

Ferramenta interativa que permite visualizar as linguagens de programação mais utilizadas em um perfil do GitHub através de um gráfico de radar dinâmico

• Host: GitHub
• URL: https://github.com/amaro-netto/grafico_dev_linguagem
• Owner: amaro-netto
• Created: 2025-07-17T22:48:53.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2025-07-18T04:12:11.000Z (11 months ago)
• Last Synced: 2025-07-18T04:14:00.900Z (11 months ago)
• Topics: chartjs, github, html5, javascript, nodejs, puppeteer
• Language: HTML
• Homepage: https://grafdev.vercel.app/
• Size: 67.4 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Gerador de Gráfico de Radar de Linguagens GitHub

![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)

![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)

![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)

![Node.js](https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=nodedotjs&logoColor=white)

![Chart.js](https://img.shields.io/badge/Chart.js-FF6384?style=for-the-badge&logo=chartdotjs&logoColor=white)

![quickchart-js](https://img.shields.io/badge/quickchart.js-007ACC?style=for-the-badge&logo=javascript&logoColor=white)

![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white)

![Em Andamento](https://img.shields.io/badge/status-em%20andamento-yellow?style=for-the-badge)

## Gráfico



  

![Gráfico de Linguagens GitHub para amaro-netto](https://grafdev.vercel.app/api/generate-chart?username=amaro-netto&lineColor=ffffff&fillColor=00b3ff&pointColor=1100ff&textColor=ffffff&gridColor=007BFF&angleLineColor=007bff)


**Outras linguagens detectadas:** `Java`, `Nix`, `Shell`, `Dockerfile`, `Kotlin`



##

## 📝 Descrição do Projeto

Este projeto é uma ferramenta interativa que permite visualizar as linguagens de programação mais utilizadas em um perfil do GitHub através de um gráfico de radar dinâmico.Além do gráfico principal, ele lista outras linguagens detectadas como tags, oferecendo uma visão abrangente do seu portfólio de código.

A aplicação também gera um código Markdown que pode ser facilmente copiado e colado no seu arquivo `README.md` de perfil do GitHub, permitindo que você compartilhe suas estatísticas de linguagens com o mundo!

## 🚀 Como Funciona

O projeto é dividido em duas partes principais para oferecer a melhor experiência:

1.  **Aplicação Web (Front-end):**

    * Desenvolvida em **HTML**, **CSS** e **JavaScript** puro.

    * Utiliza a biblioteca **Chart.js** para renderizar o gráfico de radar no navegador.

    * Permite que o usuário digite um nome de usuário do GitHub.

    * Busca os dados dos repositórios do usuário na API do GitHub.

    * Processa as linguagens por **bytes de código** (uma métrica mais precisa do volume de código).

    * Exibe as 5 linguagens mais usadas no gráfico de radar e as demais como tags.

    * Gera um código Markdown que inclui uma imagem Base64 do gráfico.

    **Atenção:** Esta imagem Base64 é estática e pode deixar o `README.md` pesado.

## Como usar:

Acesse: https://grafdev.vercel.app/



2.  **Função Serverless (Backend para Imagem Dinâmica):**

    * Para ter uma imagem do gráfico que se atualiza automaticamente no seu `README.md` (como os troféus do GitHub), é necessário um pequeno servidor (função serverless) rodando em plataformas como **Vercel** ou **Netlify Functions**.

    * Este servidor utiliza **Node.js** com bibliotecas como **quickchart-js** para gerar o gráfico, injetar os dados do GitHub (buscados no servidor), e retornar a imagem diretamente.

    * Dessa forma, o código Markdown no seu `README.md` será um link simples para essa função serverless, e a imagem será sempre atualizada.

## 🛠️ Tecnologias Utilizadas

* **HTML5:** Estrutura da aplicação web.

* **CSS3:** Estilização e responsividade.

* **JavaScript (ES6+):** Lógica principal, interação com a API do GitHub e manipulação do DOM

* **Chart.js:** Biblioteca JavaScript para criação de gráficos.

* **API do GitHub:** Fonte dos dados de repositórios e linguagens.

* **Node.js:** (Para a função serverless de geração de imagem dinâmica)

* **quickchart-js:** (Para a função serverless, para gerar o gráfico dinamicamente)

## ✨ Inspiração

A inspiração para este projeto veio da popularidade dos "status" e "troféus" dinâmicos de perfil no GitHub, como o `github-profile-trophy.vercel.app`.

A ideia foi criar uma ferramenta semelhante, focada especificamente nas estatísticas de linguagens, mas com a flexibilidade de ser um projeto que pode ser facilmente compreendido e modificado por desenvolvedores.

A meta era transformar dados brutos da API do GitHub em uma visualização atraente e compartilhável, incentivando a personalização de perfis.

## 📄 Quer Contribuir:

Faça um Fork do projeto ou adicione Issues para me ajudar