🌟 Meu Portfólio (React + GitHub API)

Este repositório contém o código-fonte do meu portfólio pessoal, um projeto desenvolvido para demonstrar minhas habilidades em desenvolvimento front-end moderno, consumo de APIs e design de interface.

O projeto é especial pois é totalmente dinâmico: ele se popula automaticamente buscando e exibindo meus dados de usuário e repositórios diretamente da GitHub API em tempo real.

🚀 Tecnologias Utilizadas

Este projeto foi construído com uma stack moderna e robusta:

• React: Biblioteca principal para a construção da interface de usuário.
• TypeScript: Adicionado para garantir robustez, tipagem estática e maior manutenibilidade do código, especialmente ao lidar com estruturas de dados complexas da API (interfaces Repository e User).
• APIs Web Nativas: Utilização do fetch para consumo assíncrono das APIs do GitHub.
• Estilização via JS (Inline/CSS-in-JS like): Demonstração de uma abordagem de estilo programático e componentizado, onde todas as regras de layout e design estão definidas diretamente no arquivo JavaScript.

✨ Desenvolvimento e Arquitetura do Projeto

O objetivo principal deste projeto era criar uma experiência de portfólio que fosse ao mesmo tempo elegante e técnica, evidenciando o uso de boas práticas e recursos avançados do React e TypeScript.

1. Consumo Dinâmico da GitHub API

A funcionalidade central do portfólio é a comunicação com o GitHub.

• Endpoint: São feitas duas chamadas de API:
  1. https://api.github.com/users/rickferrdev (Dados do usuário)
  2. https://api.github.com/users/rickferrdev/repos?per_page=100 (Lista de repositórios)
• Gerenciamento de Estado: O hook useState (com user, repos, e loading) e o hook useEffect são utilizados para gerenciar o ciclo de vida da busca de dados e o estado de carregamento.
• Assincronicidade: A função fetchData utiliza Promise.all para buscar os dados de usuário e repositórios em paralelo, otimizando o tempo de carregamento inicial.

2. Tipagem com TypeScript

A utilização de TypeScript foi crucial para definir as estruturas de dados esperadas da API do GitHub.

• Interfaces: As interfaces Repository e User definem claramente os campos esperados (e seus tipos, como string, number, boolean, null) garantindo que o código que consome esses dados esteja seguro e auto-documentado.

3. Componentização e Reutilização

O código está modularizado em componentes e funções auxiliares:

• Componente Principal (Portfolio): Gerencia o estado e orquestra a renderização das diferentes seções (Hero e Projetos).
• Componente de Cartão de Repositório: Cada projeto (<a> no grid) é uma unidade visual, com lógica de estilo e hover encapsulada.
• Ícones e Funções Auxiliares:
  • Ícones SVG: Os ícones (MapPinIcon, LinkIcon, etc.) são implementados como componentes React, tornando-os fáceis de usar e estilizar.
  • Função getLanguageColor: Mapeia a linguagem de programação (repo.language) para uma cor específica, que é usada para estilizar o título e o indicador de cor no cartão, um toque visual que reforça a tecnologia principal de cada projeto.
• Componente Badge: Exibe informações de status de forma consistente (ex: "Open to Work").

4. Boas Práticas de UI/UX

• Filtragem de Repositórios: A função de ordenação filtra forks (.filter((repo) => !repo.fork)) e ordena os projetos pelo número de estrelas (.sort((a, b) => b.stargazers_count - a.stargazers_count)), garantindo que os projetos mais relevantes e de autoria própria sejam exibidos primeiro.
• Estilização Dinâmica: A cor do título do cartão do projeto é definida dinamicamente com base na linguagem principal (langColor), criando um visual coeso e informativo.
• Acessibilidade e Usabilidade: O uso de tags semânticas (<header>, <main>, <footer>, <a>) e atributos (target="_blank", rel="noreferrer") contribui para uma melhor acessibilidade e usabilidade.

🛠️ Como Executar Localmente

Embora este seja um projeto de portfólio hospedado, você pode configurá-lo localmente:

1. Clone o repositório:

   git clone https://github.com/rickferrdev/exuberant-night
   cd exuberant-night
   

2. Instale as dependências:

   npm install 
   

3. Execute o projeto:

   npm dev
   

4. O projeto estará acessível em http://localhost:3000 (ou porta similar, dependendo da sua configuração).