https://github.com/ofelipelucca/portfolio-dashboard-js
Um dashboard com todos os meus repositórios e projetos freelances. Feito com HTML, CSS e JavaScript
https://github.com/ofelipelucca/portfolio-dashboard-js
css dashboard dashboard-application html html-css-javascript html5 javascript portfolio portfolio-site portfolio-website repositories-manager website website-design
Last synced: 5 months ago
JSON representation
Um dashboard com todos os meus repositórios e projetos freelances. Feito com HTML, CSS e JavaScript
- Host: GitHub
- URL: https://github.com/ofelipelucca/portfolio-dashboard-js
- Owner: ofelipelucca
- License: mit
- Created: 2023-04-03T17:03:24.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-14T00:56:03.000Z (5 months ago)
- Last Synced: 2024-12-14T01:28:37.929Z (5 months ago)
- Topics: css, dashboard, dashboard-application, html, html-css-javascript, html5, javascript, portfolio, portfolio-site, portfolio-website, repositories-manager, website, website-design
- Language: CSS
- Homepage: https://ofelipelucca.github.io/Portfolio-Dashboard-JS/
- Size: 563 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🖥️ Um dashboard de repositórios!
Este script em JavaScript utiliza Node.JS (com Axios) para obter, a cada 48 horas, os dados dos meus repositórios públicos por meio de um Workflow no GitHub Actions e os exibe em um dashboard.
## 👁️ Uso
- **Clone o repositório**
- **No GitHub, gere um fine-grained token que dá acesso aos dados dos repositórios públicos**
- **No repositório, crie um repository secret com o nome de TOKEN_GITHUB, e como valor insira o fine-grained token gerado**
- **No mesmo lugar, crie um repository secret com o nome de USERNAME_GITHUB, e como valor insira o seu nick no GitHub**
## 👨💻 Estrutura do Código
- **Configuração do GitHub Actions:** A cada 48 horas, o arquivo YML do repositório é executado, e nele é rodado o código em Node.JS passando as credenciais necessárias para a API do GitHub por meio de secrets.
- **Requisição à API do GitHub:** Utiliza o Axios para obter os dados dos meus repositórios públicos e os armazena no arquivo repositorios-data.json, em formato JSON.
- **Construção do site:** O site é construído carregando os dados salvos em JSON na pasta data/, contendo os dados dos repositórios públicos e dos freelances.
- **Manipulação do DOM:** Cria elementos HTML dinamicamente para exibir informações sobre os repositórios em um formato de dashboard.
- **Ordenação e Detalhes:** Ordena os repositórios por data de criação e exibe detalhes, como nome, descrição e data de criação.
- **Evento de Clique:** Adiciona um evento de clique a cada post, abrindo o repositório correspondente.
## 📌 Autor
Felipe Lucca Taumaturgo de Oliveira