🌐 Portfólio Profissional Full‑Stack
Este repositório contém o portfólio profissional do Wesley Correia (wmakeouthill), composto por:
- Backend em Java 17 + Spring Boot 3.2.3, que:
- expõe APIs REST para chat com IA, contato e projetos;
- serve o build do frontend como SPA;
- busca markdowns do portfólio dinamicamente via GitHub API (repositório
certificados-wesley).
- Frontend em Angular 20 + TypeScript, que:
- apresenta o portfólio em uma interface moderna, responsiva e acessível;
- integra com o backend e a GitHub API;
- possui um chat com IA treinado nos conteúdos do próprio portfólio.
🧱 Arquitetura Geral
- Backend
- Java 17
- Spring Boot 3.2.3
- Lombok
- Liquibase 4.25.0 (já configurado como dependência)
- Integração com:
- OpenAI (chat com IA + fallback de modelos)
- GitHub API (projetos, linguagens e conteúdo do portfólio)
- SMTP (envio de e‑mail de contato)
- Otimizações:
- TokenBudgetService para gerenciar budget de tokens da IA
- Cache em memória (TTL 5min) para conteúdo do GitHub
- Frontend
- Angular 20.3.0 (standalone components, Signals, RxJS 7.8.0)
- TypeScript 5.9.2
- CSS moderno e responsivo
- Infra / Build
- Maven (plugin
frontend-maven-plugin já configurado)
- Node 20.19.0 (baixado automaticamente pelo Maven no build do backend)
- Deploy em:
- GitHub Pages (via pasta
docs/)
- Google Cloud Run (via imagem Docker do backend servindo o SPA)
Diagrama de Arquitetura (Mermaid)
flowchart LR
subgraph Browser
A[SPA Angular 20<br/>(hero, projects, chat-widget, contact)]
end
subgraph Backend[Backend Spring Boot 3.2.3]
B1[ChatController<br/>\n/api/chat]
B2[ContactController<br/>\n/api/contact]
B3[ProjectsController<br/>\n/api/projects]
B4[SpaController<br/>\nServiço do build Angular]
UC_CHAT[ChatUseCase]
UC_CONTACT[EnviarEmailContatoUseCase]
UC_PROJECTS[ListarProjetosGithubUseCase<br/>+ ObterMarkdownProjetoUseCase]
B1 --> UC_CHAT
B2 --> UC_CONTACT
B3 --> UC_PROJECTS
end
subgraph Domínio
D1[PortfolioPromptService<br/>\nMonta system prompt com markdowns]
D2[ContextSearchService<br/>\nBusca trechos relevantes dos .md]
end
subgraph Infra[Infraestrutura / Adaptadores]
AI[OpenAIAdapter<br/>\nAIChatPort + Fallback]
GH[GithubApiAdapter<br/>\nProjetos + Linguagens]
GH_CONTENT[GithubPortfolioContentAdapter<br/>\nBusca markdowns do GitHub]
CACHE[GithubContentCache<br/>\nTTL 5min]
MAIL[GmailAdapter]
BUDGET[TokenBudgetService<br/>\nOtimiza tokens]
end
subgraph Cloud[Google Cloud]
SM[(Secret Manager)]
CR[(Cloud Run)]
OA[(OpenAI API)]
GITHUB[(GitHub API)]
end
A <-- HTTP --> B1
A <-- HTTP --> B2
A <-- HTTP --> B3
A <-- HTTP --> B4
UC_CHAT --> D1
UC_CHAT --> D2
UC_CHAT --> BUDGET
D1 --> GH_CONTENT
D2 --> GH_CONTENT
BUDGET --> AI
UC_CONTACT --> MAIL
UC_PROJECTS --> GH
AI --> OA
GH --> GITHUB
GH_CONTENT --> CACHE
GH_CONTENT --> GITHUB
MAIL --> SM
Backend --> CR
CR --> Browser
📁 Estrutura de Pastas (Visão Geral)
.
├── backend/ # API em Spring Boot + servidor do SPA
│ ├── src/main/java/com/wmakeouthill/portfolio
│ │ ├── application/ # DTOs, ports e use cases (camada de aplicação)
│ │ ├── domain/ # Entidades, modelos e serviços de domínio
│ │ └── infrastructure/ # Adaptadores Web, OpenAI, GitHub, Email, etc.
│ ├── src/main/resources/
│ │ ├── application.properties # Configuração principal
│ │ └── static/ # Build do Angular (copiado no build)
│ │ # Nota: Markdowns são buscados dinamicamente do GitHub (repo: certificados-wesley)
│ └── pom.xml # Build + integração com frontend
│
├── frontend/ # Aplicação Angular 20 (SPA do portfólio)
│ ├── src/app/
│ │ ├── components/ # Seções do portfólio (standalone)
│ │ │ ├── header/
│ │ │ ├── hero/
│ │ │ ├── about/
│ │ │ ├── skills/
│ │ │ ├── experience/
│ │ │ ├── education/
│ │ │ ├── projects/
│ │ │ ├── certifications/
│ │ │ ├── contact/
│ │ │ ├── pdf-viewer/
│ │ │ ├── cv-modal/
│ │ │ ├── readme-modal/
│ │ │ ├── chat-widget/ # Chat com IA + composables
│ │ │ └── footer/
│ │ ├── services/ # GitHub, E‑mail, Markdown, Chat IA
│ │ ├── models/ # Interfaces TypeScript
│ │ └── utils/ # Utils (API URL, session‑storage, etc.)
│ ├── public/ # Assets, ícones, currículos, etc.
│ └── package.json # Scripts e dependências (Angular 20)
│
├── docs/ # Artefatos estáticos usados pelo GitHub Pages
├── deploy.sh / Dockerfile.* # Scripts de build e deploy
└── README.md # (este arquivo)
🔌 Backend – API, IA & Integrações
O backend segue uma arquitetura limpa (application / domain / infrastructure) e expõe as seguintes APIs principais:
Conteúdo de Portfólio (Markdown via GitHub API)
O backend não usa mais arquivos estáticos em portfolio-content/. Todo o conteúdo é buscado dinamicamente do repositório GitHub certificados-wesley:
- GithubPortfolioMarkdownAdapter (
@Primary) substitui o antigo ClasspathPortfolioContentAdapter (deprecated).
- GithubPortfolioContentAdapter busca markdowns via GitHub API:
- Markdowns gerais:
portfolio-content/*.md (raiz)
- Projetos:
portfolio-content/projects/*.md
- Trabalhos/Experiências:
portfolio-content/trabalhos/*.md
- GithubContentCache: cache em memória com TTL de 5 minutos para reduzir chamadas à API.
- Vantagens:
- Atualizações de conteúdo sem rebuild do backend;
- Versionamento via Git;
- Cache inteligente para performance;
- Separação de repositórios (código vs. conteúdo).
💻 Frontend – Angular 20 SPA
A aplicação Angular é uma SPA moderna, responsiva e focada em experiência de leitura do portfólio, com:
- Seções principais:
hero, about, skills, experience, education, projects, certifications, contact, footer.
- Funcionalidades avançadas:
- Chat Widget com IA (
chat-widget + composables use-...).
- Visualização de currículo em PDF (
pdf-viewer + cv-modal).
- Leitura de README/markdown de projetos (
readme-modal + markdown.service).
- Integração com GitHub API (
github.service) para listar repositórios.
O frontend é empacotado na pasta dist/portfolio/browser e depois:
- copiado para
backend/src/main/resources/static durante o build Maven; e
- copiado também para
backend/target/classes/static para rodar diretamente do JAR.
🧩 Stacks e Tecnologias
Este projeto utiliza apenas um subconjunto da stack completa descrita em backend/src/main/resources/portfolio-content/STACKS.md. Em alto nível:
-
Backend
- Linguagem: Java 17
- Framework: Spring Boot 3.2.3 (Spring Web, Validation, Mail)
- Infraestrutura de dados: Liquibase 4.25.0 para versionamento de schema
- Boas práticas: Lombok, logging com SLF4J/Logback, arquitetura em camadas (application, domain, infrastructure)
- Integrações:
- OpenAI API (chat com fallback entre modelos)
- Gmail SMTP (envio de mensagens de contato)
- GitHub API (projetos e linguagens)
-
Frontend
- Framework: Angular 20.3.0 (standalone components, DI com
inject, RxJS 7.8.0)
- Linguagem: TypeScript 5.9.2
- Bibliotecas:
pdfjs-dist, marked, mermaid, prismjs, lottie-web
- Práticas: SPA responsiva, componentes desacoplados, services para HTTP/integrações, utils para configuração de API.
-
DevOps / Deploy
- Build: Maven (integração com
frontend-maven-plugin)
- Containerização: Docker
- Cloud: Google Cloud Run
- Secrets: Google Secret Manager (via
DEPLOY-GOOGLE-CLOUD-RUN.md).
Para uma descrição bem mais detalhada de tecnologias, níveis de proficiência e contexto por projeto, consulte STACKS.md.
🛠️ Como Rodar o Projeto Localmente
1. Pré‑requisitos
- Java 17
- Maven 3.8+
- (Opcional) Node 20+ / npm se quiser rodar o frontend isolado
2. Rodar tudo via backend (build automático do Angular)
No diretório backend/:
cd backend
mvn clean package
# Executar a aplicação
mvn spring-boot:run
O Maven irá:
- instalar Node e npm (via
frontend-maven-plugin);
- rodar
npm install no diretório frontend/;
- rodar
npm run build -- --configuration=production;
- copiar o build para
src/main/resources/static e target/classes/static.
Depois disso, acesse:
- Aplicação web:
http://localhost:8080
- APIs:
http://localhost:8080/api/...
3. Rodar frontend em modo desenvolvimento (opcional)
No diretório frontend/:
cd frontend
npm install
npm run start:local # ou: npm start
# Frontend: http://localhost:4200
Se quiser apontar o frontend para um backend local, garanta que os serviços usem a URL adequada em api-url.util.ts (por padrão, http://localhost:8080).
🌐 Deploy & Gestão de Secrets
GitHub Pages (docs/)
O repositório possui a pasta docs/, utilizada pelo GitHub Pages. O fluxo típico é:
-
Build do frontend:
cd fr