JR Minimal

Arquitetura

Visao de como o portfolio v2 organiza camadas, dados e governanca tecnica.

Camada de Apresentacao

Papel: Define rotas e composicao de pagina com App Router.

Justificativa: Mantem navegacao e SEO centralizados sem acoplar detalhes de implementacao de componentes.

  • /src/app/v2/page.tsx
  • /src/app/v2/projetos/[slug]/page.tsx
  • /src/app/v2/layout.tsx

Camada de Componentes

Papel: Encapsula UI reutilizavel e blocos de experiencia.

Justificativa: Permite evoluir secoes sem duplicar logica entre home, lista de projetos e case studies.

  • /src/components/Hero.tsx
  • /src/components/Work.tsx
  • /src/components/ProjectCard.tsx

Camada de Dominio e Dados

Papel: Modela projetos e regras de ordenacao.

Justificativa: Funciona como fonte unica para o portfolio v2 e garante consistencia com testes.

  • /src/data/projects.ts
  • /src/data/projects.test.ts

Camada de Infraestrutura

Papel: Suporta observabilidade, SEO tecnico e governanca de performance.

Justificativa: Reduz regressao silenciosa com CI, budget de bundle e telemetria orientada a produto.

  • /src/lib/analytics.ts
  • /src/app/api/og/route.tsx
  • /scripts/check-bundle.js
  • /.github/workflows/ci.yml

Diagrama C4 do EcoVoz

Visao interativa dos niveis de sistema e containers do EcoVoz.

React Flow mini map

Fluxo de Requisicao

Fluxo fim a fim de navegacao e entrega de valor no portfolio.

  1. 01.Usuario acessa /v2 e navega para um case study
  2. 02.App Router resolve a rota e a metadata canonica/OG
  3. 03.A camada de dominio entrega dados tipados do projeto
  4. 04.A camada de componentes renderiza secoes de narrativa e links
  5. 05.A infraestrutura registra eventos e aplica o budget gate no CI

Docs Relacionadas

Paginas tecnicas complementares do portfolio v2.

EngenhariaEstudos de caso