_{Steamfolio. Built with 💙 by Anderson "Yagasaki" Marlon and contributors}

Language navigation

• English
• Português do Brasil

---

English

Table of contents

• Overview
• Demo
• Features
• Tech stack
• Project structure
• API integrations
• Configuration
• Getting started
• Available scripts
• Customization guide
• Contributing
• License

Overview

Steamfolio is a personal profile landing page inspired by the Steam UI. It fetches GitHub data, displays stats and badges, and optionally consumes a blog RSS feed to show recent articles. The project is built with React, Vite, and styled-components, and is intended to be simple to fork and customize.

Demo

• https://steamfolio.vercel.app/

Features

• GitHub profile and repository stats.
• Visual badges and a Steam-like layout.
• Optional RSS feed integration for blog posts.
• Easily configurable profile data and assets.

Tech stack

• React
• TypeScript
• Vite
• styled-components
• Bun (optional), npm, or Yarn for package management

Project structure

src/
├── App.tsx                # Main application logic and data fetching
├── steamDetails.tsx       # Layout component for the Steam-like UI
├── utils/
│   └── getLevelByGPQ.ts   # Helper to render a badge based on commit count
└── styles/                # Global styles and component styling

API integrations

GitHub API

The app uses the GitHub REST API to read profile data, repositories, and commit totals. Requests are authenticated using a personal access token (PAT) to increase rate limits.

Endpoints in use:

• GET https://api.github.com/users/{username}
• GET https://api.github.com/users/{username}/repos?sort=updated
• GET https://api.github.com/search/commits?q=author:{username} is:merge

Required header:

Authorization: Bearer <token>

RSS feed

The app fetches an RSS feed URL and parses it in the browser with DOMParser. The default URL in the project points to the author’s blog, and you can replace it with your own feed.

Configuration

Create a .env file in the project root:

VITE_GITHUB_API_KEY=your_github_token

Notes:

• The token only needs read access.
• If you do not provide a token, the API may rate-limit you quickly, especially during development.

Getting started

Prerequisites

• Node.js 18+ or Bun
• Git

Install and run

Using npm:

npm install
npm run dev

Using Yarn:

yarn

yarn dev

Using Bun:

bun install
bun run dev

The Vite dev server will run on http://localhost:5173 by default.

Available scripts

• dev: start the Vite development server
• preview: preview a production build
• lint: run ESLint
• vercel: run tsc and vite build
• clean: remove node_modules and reinstall dependencies with Bun

Customization guide

Most of the content is configured in src/App.tsx. Typical updates:

• userGitHub: GitHub username used for API calls and links.
• subnick, infoSubTitle, badgeTitle, badgeEXP: text labels shown in the UI.
• avatarBorder, fixedAvatar, badgeIcon, awardIconLink, perfilIconLink: image and link assets.
• flag, birthday, sinceExperience: used for badges and profile info.
• RSS feed URL: replace the URL inside the fetchArticles function to point to your blog.

When adjusting assets, verify that images are available and meet your desired size and format.

Contributing

1. Fork the repository.
2. Create a branch for your change:

   git checkout -b feature/my-change
   

3. Make your updates and ensure the project builds and lint passes.
4. Commit your work with a clear message:

   git commit -m "Describe your change"
   

5. Push your branch and open a pull request.

When opening a pull request, include:

• A summary of what changed.
• Screenshots for visual updates.
• Any relevant testing details.

License

MIT. See LICENCE.

---

Português do Brasil

Sumário

• Visão geral
• Demo
• Funcionalidades
• Stack tecnológica
• Estrutura do projeto
• Integrações de API
• Configuração
• Como rodar
• Scripts disponíveis
• Guia de personalização
• Como contribuir
• Licença

Visão geral

Steamfolio é uma landing page de perfil pessoal inspirada na interface da Steam. Ela busca dados do GitHub, exibe estatisticas e badges, e opcionalmente consome um feed RSS para mostrar artigos recentes. O projeto usa React, Vite e styled-components e foi pensado para ser facil de clonar e personalizar.

Demo

• https://steamfolio.vercel.app/

Funcionalidades

• Estatisticas de perfil e repositórios do GitHub.
• Badges visuais e layout no estilo Steam.
• Integração opcional com RSS para posts do blog.
• Dados de perfil e assets configuráveis.

Stack tecnológica

• React
• TypeScript
• Vite
• styled-components
• Bun (opcional), npm ou Yarn para gerenciamento de pacotes

Estrutura do projeto

src/
├── App.tsx                # Logica principal e chamadas de API
├── steamDetails.tsx       # Layout principal da interface
├── utils/
│   └── getLevelByGPQ.ts   # Helper para renderizar badge por commits
└── styles/                # Estilos globais e componentes

Integrações de API

GitHub API

A aplicação usa a API REST do GitHub para dados de perfil, repositórios e total de commits. As requisições sao autenticadas com um token pessoal (PAT) para aumentar o limite de requisições.

Endpoints usados:

• GET https://api.github.com/users/{username}
• GET https://api.github.com/users/{username}/repos?sort=updated
• GET https://api.github.com/search/commits?q=author:{username} is:merge

Header obrigatorio:

Authorization: Bearer <token>

RSS feed

A aplicação busca uma URL de RSS e faz o parse no navegador com DOMParser. A URL padrão aponta para o blog do autor, mas você pode substituir pela sua propria fonte.

Configuração

Crie um arquivo .env na raiz do projeto:

VITE_GITHUB_API_KEY=seu_github_token

Observacoes:

• O token precisa apenas de acesso de leitura.
• Sem token, a API pode limitar requisições rapidamente durante o desenvolvimento.

Como rodar

Pré-requisitos

• Node.js 18+ ou Bun
• Git

Instalar e executar

Usando npm:

npm install
npm run dev

Usando Yarn:

yarn

yarn dev

Usando Bun:

bun install
bun run dev

O servidor do Vite roda em http://localhost:5173 por padrão.

Scripts disponíveis

• dev: inicia o servidor de desenvolvimento do Vite
• preview: visualiza o build de produção
• lint: executa o ESLint
• vercel: roda tsc e vite build
• clean: remove node_modules e reinstala dependências com Bun

Guia de personalização

A maior parte do conteúdo fica em src/App.tsx. Mudanças comuns:

• userGitHub: usuário do GitHub usado nas chamadas e links.
• subnick, infoSubTitle, badgeTitle, badgeEXP: textos exibidos na interface.
• avatarBorder, fixedAvatar, badgeIcon, awardIconLink, perfilIconLink: imagens e links.
• flag, birthday, sinceExperience: usados para badges e informacoes do perfil.
• URL do RSS: altere dentro da funcao fetchArticles para o seu blog.

Ao trocar assets, confirme se as imagens estao acessiveis e com o tamanho adequado.

Como contribuir

1. Faca um fork do repositório.
2. Crie uma branch para sua alteração:

   git checkout -b feature/minha-mudanca
   

3. Faça as alterações e garanta que o projeto compila e o lint passa.
4. Commit suas mudanças:

   git commit -m "Descreva sua alteracao"
   

5. Envie sua branch e abra um pull request.

Ao abrir o pull request, inclua:

• Um resumo do que mudou.
• Screenshots para mudanças visuais.
• Informações de testes relevantes.

Licença

MIT. Veja LICENCE.