DEV Community

Cover image for Automate the visualization of your GitHub projects in your portfolio. 🌟
Diego Arthur
Diego Arthur

Posted on

1 2 1 2 1

Automate the visualization of your GitHub projects in your portfolio. 🌟


✅ github-automated-repos is the library,ReactJS, that gives you the power to control your GitHub data, your projects on the portfolio / website, in your own GitHub in one place!

❌ project.js files ( edit code ) ❌ GitHub API ( no data control )

banner_logo_github-automated-repos

Check Repository 🌟.

Getting Start

1. Installation

npm install github-automated-repos
    # or
yarn add github-automated-repos
Enter fullscreen mode Exit fullscreen mode

2. hook config.

import {useGitHubAutomatedRepos} from "github-automated-repos";

const data = useGitHubAutomatedRepos("GitHubUsername", "KeyWord");
Enter fullscreen mode Exit fullscreen mode

3. Choose the repositories and fill in the Topics field with the keyword you determined.

To insert stack names in the topics field, see web documentation > Stack Icons.

Repository > Edit repository details > Topics
Image description

Render icons

Image description

4. Banner

Insert banner, layout images to represent your project. Types are .PNG and .SVG. For this to be possible, the name of the image file must contain bannerin the name. Insert your images in the following path: Ex.:

└── public
      └── `bannerXYZ.png` 
      └── `bannerABC.svg` 
    ├── ...
Enter fullscreen mode Exit fullscreen mode

dashgo_layout
dashfincaneiro_layout
proffy_layout

5. ✅Ready! JSON - Data from repositories chosen by you!

Ex.:
JSON - DATA
Data Example ~ console.log(data) ~

Array(4)
0
: 
{id: 517152367, name: 'Dashgo', html_url: 'https://github.com/DIGOARTHUR/Dashgo', description: 'IGNITE - Trilha ReactJS/ - Neste projeto é aplicad…ate, Components, Props. Recursos do JS como: Map.', topics: Array(7), …}
1
: 
{id: 482667387, name: 'DashBoard-Financeiro', html_url: 'https://github.com/DIGOARTHUR/DashBoard-Financeiro', description: 'IGNITE - Trilha ReactJS/ Chapter II - Esta aplicaç…mpanhamento de valores de entrada, saída e total.', topics: Array(6), …}
2
: 
{id: 412849316, name: 'Task.TODO', html_url: 'https://github.com/DIGOARTHUR/Task.TODO', description: 'IGNITE - Trilha ReactJS/ - Este projeto aborda con…Filter e Math, Spread. E para estilização o SASS.', topics: Array(7), …}
3
: 
{id: 355616217, name: 'Move.it', html_url: 'https://github.com/DIGOARTHUR/Move.it', description: 'NLW#04 - Rocketseat - Utilizando a técnica Pomodor… o objetivo é executar a tarefa do seu interesse.', topics: Array(8), …}
length
: 
4
[[Prototype]]
: 
Array(0)
Enter fullscreen mode Exit fullscreen mode

IN PAGE WEB

Image description

Love github-automated-repos? Give our repo a star ⭐ .

based in: Api Github

by: @digoarthur

Tiger Data image

🐯 🚀 Timescale is now TigerData: Building the Modern PostgreSQL for the Analytical and Agentic Era

We’ve quietly evolved from a time-series database into the modern PostgreSQL for today’s and tomorrow’s computing, built for performance, scale, and the agentic future.

So we’re changing our name: from Timescale to TigerData. Not to change who we are, but to reflect who we’ve become. TigerData is bold, fast, and built to power the next era of software.

Read more

Top comments (2)

Collapse
 
nevodavid profile image
Nevo David

Pretty cool, I always wanted an easier way to show off my repos on my site without fighting the API all day.

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

Pretty cool, I always end up spending forever tweaking stuff for my portfolio - stuff like this saves me from a headache.

DevCycle image

Ship Faster, Stay Flexible.

DevCycle is the first feature flag platform with OpenFeature built-in to every open source SDK, designed to help developers ship faster while avoiding vendor-lock in.

Start shipping

👋 Kindness is contagious

Embark on this engaging article, highly regarded by the DEV Community. Whether you're a newcomer or a seasoned pro, your contributions help us grow together.

A heartfelt "thank you" can make someone’s day—drop your kudos below!

On DEV, sharing insights ignites innovation and strengthens our bonds. If this post resonated with you, a quick note of appreciation goes a long way.

Get Started