Portfólio Interativo 2.1

Portfólio frontend em React com experiência visual (GSAP + Three.js), seção de projetos, contato via EmailJS e gráfico de linguagens via GitHub API.

Demo · Documentação

---

⚠️ Projeto Arquivado Este projeto não recebe mais atualizações ou correções. O código permanece disponível como referência e pode ser utilizado livremente sob a licença MIT. Fique à vontade para fazer fork caso deseje continuar o desenvolvimento.

---

Índice

• Sobre o Projeto
• Funcionalidades
• Tecnologias
• Estrutura do Projeto
• Começando
  • Pré-requisitos
  • Instalação
  • Configuração
  • Uso Local
• Scripts Disponíveis
• Qualidade e Governança
• Deploy
• Licença
• Contato

---

Sobre o Projeto

Este projeto é um portfólio pessoal interativo focado em experiência visual e apresentação de projetos. Desenvolvido com React 18 e Create React App, integra animações com GSAP, visualização 3D com Three.js, envio de e-mails via EmailJS e consumo da GitHub API para exibição de linguagens utilizadas.

O repositório prioriza:

• Experiência visual rica — Animações fluidas com GSAP e cena 3D com Three.js
• Componentização modular — Seções de UI isoladas e animações separadas por domínio
• Integração com serviços externos — EmailJS para contato e GitHub API para dados de linguagens
• Boas práticas de governança — CI, Dependabot, Conventional Commits, Commitlint + Husky

Por que React + GSAP + Three.js?

React oferece componentização e reatividade para a interface, GSAP garante animações performáticas com controle granular de timeline, e Three.js adiciona uma camada visual 3D que diferencia o portfólio. A combinação resulta em uma experiência imersiva sem sacrificar a manutenibilidade do código.

---

Funcionalidades

• Seção Home — Apresentação com animações de entrada via GSAP
• Seção About — Informações pessoais e profissionais
• Seção Projects — Exibição de projetos com detalhes e links
• Seção Skills — Gráfico de linguagens consumido da GitHub API
• Visualizador 3D — Cena interativa com Three.js
• Formulário de contato — Envio de e-mails via EmailJS Browser SDK
• Navegação por pontos — Scroll navigation entre seções
• Design responsivo — Tokens utilitários com Tailwind CSS

---

Tecnologias

Core

Serviços e Integrações

Ferramentas de Desenvolvimento

Requisitos mínimos:

• Node.js 20+ (recomendado)
• npm 9+

---

Estrutura do Projeto

Portifolio_2.1/
├── src/
│   ├── components/
│   │   ├── Home/                  # Seção inicial
│   │   ├── About/                 # Seção sobre
│   │   ├── Projects/              # Seção de projetos
│   │   ├── Skills/                # Seção de habilidades
│   │   ├── Header/                # Navegação
│   │   └── Footer/                # Rodapé e contato
│   ├── Animation/                 # Animações separadas por domínio/seção
│   ├── utils/
│   │   ├── dotNavigation.js       # Navegação por pontos
│   │   └── threejsViewer.js       # Visualizador 3D
│   ├── config/
│   │   └── env.js                 # Ponto único de variáveis de ambiente
│   └── styles/
│       └── tokens.css             # Paleta e tokens centralizados
├── docs/
│   ├── ARCHITECTURE.md            # Documentação de arquitetura
│   └── SECURITY_DECISIONS.md      # Decisões de segurança
├── .github/
│   ├── workflows/
│   │   └── ci.yml                 # Pipeline de CI
│   └── dependabot.yml             # Atualizações automáticas
├── .env.example                   # Exemplo de variáveis de ambiente
├── CONTRIBUTING.md                # Guia de contribuição
├── SECURITY.md                    # Política de segurança
├── CHANGELOG.md                   # Histórico de mudanças
├── package.json                   # Dependências e scripts
└── LICENSE                        # Licença MIT

Para mais detalhes sobre a arquitetura, consulte docs/ARCHITECTURE.md.

---

Começando

Pré-requisitos

node --version  # v20 ou superior
npm --version   # v9 ou superior

Instalação

1. Clone o repositório

git clone https://github.com/ESousa97/Portifolio_2.1.git
cd Portifolio_2.1

2. Instale as dependências

npm install

Configuração

Crie o arquivo .env a partir do exemplo:

cp .env.example .env

Preencha as variáveis necessárias:

REACT_APP_GITHUB_TOKEN=your_github_personal_access_token_here
REACT_APP_SERVICE_ID=your_emailjs_service_id
REACT_APP_TEMPLATE_ID=your_emailjs_template_id
REACT_APP_USER_ID=your_emailjs_public_key

Nota: O GITHUB_TOKEN é utilizado para consumir a GitHub API e exibir o gráfico de linguagens. As variáveis SERVICE_ID, TEMPLATE_ID e USER_ID são do EmailJS para o formulário de contato.

Uso Local

Subir o servidor de desenvolvimento:

npm start

Acesse: http://localhost:3000/

---

Scripts Disponíveis

# Ambiente de desenvolvimento
npm start

# Build de produção
npm run build

# Executar lint
npm run lint

# Autofix lint
npm run lint:fix

# Formatação Prettier
npm run format

# Validação de formato
npm run format:check

# Testes em modo CI
npm run test:ci

# Testes com cobertura
npm run test:coverage

# Auditoria de segurança (dependências runtime)
npm run audit

# Pipeline local completo (lint + test + build)
npm run validate

---

Qualidade e Governança

O projeto adota práticas de governança para manter a qualidade do código:

• CI via GitHub Actions — Pipeline com lint, format-check, test e build
• Dependabot semanal — Atualizações automáticas de dependências npm
• Conventional Commits — Padronização de mensagens com Commitlint + Husky
• Templates de Issue/PR — Modelos padronizados para contribuições

Para diretrizes de contribuição, consulte CONTRIBUTING.md. Para política de segurança, consulte SECURITY.md.

---

Deploy

Vercel (Produção)

O projeto está configurado para deploy automático na Vercel. Cada push na branch principal gera um novo deploy.

vercel --prod

Produção: portifolio21.vercel.app

Configure as variáveis de ambiente na dashboard da Vercel antes do primeiro deploy.

---

Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

MIT License - você pode usar, copiar, modificar e distribuir este código.

---

Contato

José Enoque Costa de Sousa

---

⬆ Voltar ao topo

Feito com ❤️ por José Enoque

Status do Projeto: Archived — Sem novas atualizações