From 8e5d54859876f0779964ccfe0b8c0f98d7358680 Mon Sep 17 00:00:00 2001 From: Evandro Fonseca Junior Date: Sat, 24 Oct 2026 04:56:22 -0300 Subject: [PATCH] docs(readme): redesenha o README com hero em SVG [skip ci] --- README.md | 197 ++++++++++++++++------------------------- assets/readme/hero.svg | 46 ++++++++++ 2 files changed, 122 insertions(+), 121 deletions(-) create mode 100644 assets/readme/hero.svg diff --git a/README.md b/README.md index 92609c8..dded8a3 100644 --- a/README.md +++ b/README.md @@ -1,48 +1,41 @@
-Logo do Evandro.dev.br +evandro.dev.br: o portfólio de Evandro Fonseca Junior, com o índice dos nove cases publicados e o estado de cada um -

Evandro Fonseca Junior

+![Next.js 16.3.8](https://img.shields.io/badge/Next.js-16.3.8-ccff00?style=flat-square&labelColor=0a0a0a) +![React 19.1.0](https://img.shields.io/badge/React-19.1.0-ccff00?style=flat-square&labelColor=0a0a0a) +![Node 22.x](https://img.shields.io/badge/Node-22.x-ccff00?style=flat-square&labelColor=0a0a0a) +![Status: em produção](https://img.shields.io/badge/status-em_produ%C3%A7%C3%A3o-ccff00?style=flat-square&labelColor=0a0a0a) -

Engenheiro da Computação em Garuva-SC: sites, sistemas web e revisão de apps feitos com IA, com contato direto pelo WhatsApp.

- -Site · -Cases · -Currículo · -Quickstart · -Arquitetura · -LinkedIn · -Issues - -![Stack](https://img.shields.io/badge/Stack-Next.js_16-000000?logo=nextdotjs&logoColor=white) -![Status](https://img.shields.io/badge/status-produ%C3%A7%C3%A3o-brightgreen) -![Licença](https://img.shields.io/badge/licen%C3%A7a-todos_os_direitos_reservados-lightgrey) +[Site](https://evandro.dev.br) · [Cases](https://evandro.dev.br/cases) · [Currículo](https://evandro.dev.br/curriculo) · [LinkedIn](https://www.linkedin.com/in/evandrodevbr/) · [Issues](https://git.evandro.dev.br/evandro/portifolio-evandrodevbr/issues)
-
+| SEV Moda Íntima | NutriScan | +|---|---| +| Site da SEV Moda Íntima | NutriScan | +| **SC Plus Aquicultura** | **AS Serviços** | +| Site da SC Plus Aquicultura | Site da AS Serviços | -## 📌 O problema +Capturas feitas com Chrome headless a partir de deploys de produção do próprio autor. Origem e créditos (inclusive do ícone do WhatsApp) em [`CREDITS.md`](CREDITS.md). -Pequenos negócios costumam vender e atender por mensagem: o cliente pergunta o preço um a um, o estoque vive em planilha e qualquer mudança no site depende de um desenvolvedor. Este repositório é o site [evandro.dev.br](https://evandro.dev.br), a vitrine de quem resolve isso: projetos entregues, serviços, currículo e um botão de WhatsApp para começar a conversa. +## O que é -## ✨ O que faz +O código do site [evandro.dev.br](https://evandro.dev.br), o portfólio de Evandro Fonseca Junior, engenheiro da computação em Garuva-SC. Pequenos negócios costumam vender e atender por mensagem: o cliente pergunta o preço um a um, o estoque vive em planilha e qualquer mudança no site depende de um desenvolvedor. O site mostra projetos entregues, serviços, currículo e um botão de WhatsApp para começar a conversa. - Apresenta três ofertas: criação de sites, sistemas web sob medida e revisão de apps feitos com IA (`/ia`). -- Publica oito cases com stack, entregas e decisões técnicas, cada um em `/cases/`. +- Publica nove cases com stack, entregas e decisões técnicas, cada um em `/cases/`. - Detalha seis serviços em `/servicos/*`, com escopo e etapas visíveis e a parte técnica em `
`. - Serve o currículo em HTML e o PDF em `/Profile.pdf`. -- Abre o `wa.me` com o briefing já preenchido a partir do formulário de contato; não há backend de formulário. -- Mostra o hero e o notebook de projetos em 3D (Three.js) só onde o dispositivo comporta; nos demais, entrega HTML estático. -- Carrega Google Analytics somente depois de aceite explícito, e permite revogar o consentimento depois. - Gera `sitemap.xml`, `robots.txt`, manifest, imagens Open Graph e dados estruturados JSON-LD. ### Cases publicados -Fonte: `public/portfolio-data.json` e `lib/site-content.ts` (os mesmos oito ids). +Fonte: `public/portfolio-data.json` e `lib/site-content.ts` (os mesmos nove ids). | Case | O que é | Estado | Demo | -| --- | --- | --- | --- | +|---|---|---|---| +| [`julia-beauty`](https://evandro.dev.br/cases/julia-beauty) | Julia Beauty: site de estúdio de extensão de cílios em Camboriú, com simulador de efeito e SEO local | Em produção | [juliabeauty.com.br](https://juliabeauty.com.br) | | [`sev-modaintima`](https://evandro.dev.br/cases/sev-modaintima) | SEV Moda Íntima: catálogo digital e loja virtual, pedido pelo WhatsApp e painel de estoque | Em produção | [sevmodaintima.com.br](https://sevmodaintima.com.br) | | [`lavacao-047`](https://evandro.dev.br/cases/lavacao-047) | Lavação 047: site e painel para lavação automotiva em Garuva-SC, o dono edita preços, textos e fotos | Em produção | [landing-page-lavacao047.vercel.app](https://landing-page-lavacao047.vercel.app) | | [`nutriscan`](https://evandro.dev.br/cases/nutriscan) | NutriScan: consulta de produtos por nome e código de barras | Em produção | [nutriscan.evandro.dev.br](https://nutriscan.evandro.dev.br) | @@ -52,82 +45,40 @@ Fonte: `public/portfolio-data.json` e `lib/site-content.ts` (os mesmos oito ids) | [`gcc-installer`](https://evandro.dev.br/cases/gcc-installer) | MinGW GCC Installer: instalador do compilador GCC para Windows | Concluído | sem demo | | [`as-servicos`](https://evandro.dev.br/cases/as-servicos) | AS Serviços: site institucional com cena 3D | Concluído | sem demo | -## 🖼️ Demonstração +## Por que usar -| SEV Moda Íntima | NutriScan | -| --- | --- | -| Site da SEV Moda Íntima | NutriScan | -| **SC Plus Aquicultura** | **AS Serviços** | -| Site da SC Plus Aquicultura | Site da AS Serviços | +O repositório é a referência de como o site funciona, não um template. As decisões que valem conferir: -Capturas feitas com Chrome headless a partir de deploys de produção do próprio autor. Origem e créditos (inclusive do ícone do WhatsApp) em [`CREDITS.md`](CREDITS.md). +- **Sem backend.** O formulário de contato abre o `wa.me` com o briefing já preenchido, e o rodapé mantém o contato direto por e-mail; não há API route ativa nem banco. +- **3D só onde o aparelho aguenta.** O hero e o notebook de projetos em Three.js aparecem só onde o dispositivo comporta; em telas pequenas, com ponteiro `coarse` ou movimento reduzido, o site entrega a versão em HTML estático. +- **Analytics com consentimento.** O Google Analytics só carrega depois de aceite explícito, e o consentimento pode ser revogado depois (detalhes em `/privacidade`). +- **Demos externas não derrubam o render.** O estado de cada demo vem de um snapshot versionado; em produção, o render não consulta as demos. -## 🚀 Quickstart +Quando não usar: se você procura um template de portfólio. O projeto é pessoal (`"private": true` no `package.json`) e não tem licença publicada. -| Ferramenta | Versão mínima | -| --- | --- | -| Node.js | `22.x` (`engines`) | -| pnpm | `9.15.9` (`packageManager`) | -| Chromium | só para `pnpm test:e2e` (Playwright) | +## Como funciona -```bash -corepack pnpm@9.15.9 install --frozen-lockfile -corepack pnpm@9.15.9 dev # Next.js com Turbopack -corepack pnpm@9.15.9 build # build de produção -corepack pnpm@9.15.9 start # serve um build já gerado -``` - -A instalação é sempre com `--frozen-lockfile`, igual ao CI e ao Nixpacks. - -Não há `.env.example` e nenhuma variável é necessária para rodar localmente. As que o código lê: - -| Variável | Obrigatória | Descrição | -| --- | --- | --- | -| `NEXT_PUBLIC_GOOGLE_ADS_CONVERSION_LABEL` | Não | Rótulo de conversão do Google Ads; sem ele, nenhum evento de conversão é enviado | -| `BASE_URL` | Não | Endereço do site testado por `pnpm test:e2e` (padrão `http://localhost:3001`) | -| `PW_CHROMIUM` | Não | Caminho de um Chromium local para o Playwright, para não baixar o navegador | - -> [!IMPORTANT] -> O Next.js (`16.3.8`) é fixado de propósito: a `16.2.11` mantinha três advisories transitivos de severidade alta, e a `16.3.0` foi a menor versão estável da mesma major que deixou as auditorias sem vulnerabilidades high. Não faça downgrade sem repetir `pnpm audit`. - -## 🧱 Arquitetura - -```mermaid -flowchart LR - A["public/portfolio-data.json"] --> B["lib/portfolio-data.server.ts"] - S["lib/site-content.ts"] --> E["app/ App Router"] - C["data/project-health.json"] --> B - D["scripts/check-projects.mjs"] -->|rename atômico| C - B --> E - E --> F["Vercel"] -``` - -- O conteúdo vem de `public/portfolio-data.json` e `lib/site-content.ts`; a homepage escolhe os projetos pelo campo `featured`. -- `data/project-health.json` é um snapshot versionado das demos. Ele só controla o CTA de cada card (disponível, indisponível, desconhecido ou sem demo) e nunca remove um card. -- Em produção, o render só lê o snapshot e não consulta demos externas. Em desenvolvimento, um snapshot ausente ou com mais de 15 minutos é atualizado em memória. -- `pnpm check:projects` atualiza o snapshot por rename atômico. Contrato completo em [`docs/project-health.md`](docs/project-health.md). -- Não há API route ativa. - -### CI/CD - -Um único workflow, [`.gitea/workflows/ci.yml`](.gitea/workflows/ci.yml), roda em `push`, `pull_request` e `workflow_dispatch`, com permissão `contents: read`. O repositório usa Gitea; por isso não há badge de GitHub Actions. +1. O conteúdo vem de `public/portfolio-data.json` (lido por `lib/portfolio-data.server.ts`) e de `lib/site-content.ts`; a homepage escolhe os projetos pelo campo `featured`. +2. `data/project-health.json` é um snapshot versionado das demos. Ele só controla o CTA de cada card (disponível, indisponível, desconhecido ou sem demo) e nunca remove um card. +3. Em produção, o render só lê o snapshot. Em desenvolvimento, um snapshot ausente ou com mais de 15 minutos é atualizado em memória. `pnpm check:projects` atualiza o arquivo por rename atômico. Contrato completo em [`docs/project-health.md`](docs/project-health.md). +4. Um único workflow, [`.gitea/workflows/ci.yml`](.gitea/workflows/ci.yml), roda em `push`, `pull_request` e `workflow_dispatch`, com permissão `contents: read`: | Job | O que roda | Bloqueia o deploy | -| --- | --- | --- | +|---|---|---| | `verify` | Node 22, `pnpm install --frozen-lockfile`, `lint`, `typecheck`, `test -- --runInBand`, `build` | Sim | | `audit` | `pnpm audit --prod` e `pnpm audit --dev`, ambos com `--audit-level=high` | Não | | `e2e` | Playwright (Chromium) contra o build de produção na porta 3001; publica `test-results/` | Não | -| `deploy` | Vercel CLI `61.1.0`; só após `verify`; branch padrão vai para produção, as demais para preview; pull request não publica | n/a | +| `deploy` | Vercel CLI `61.1.0`, só após `verify`: branch padrão vai para produção, as demais para preview; pull request não publica | n/a | O deploy usa o secret `VERCEL_TOKEN`; o projeto na Vercel é o nome do repositório, ou a variável `VERCEL_PROJECT`. [`nixpacks.toml`](nixpacks.toml) (`nodejs_22`, `pnpm-9_x`) e [`vercel.json`](vercel.json) (`framework: nextjs`) descrevem o build.
-Rotas +Rotas e estrutura | Rota | Conteúdo | -| --- | --- | +|---|---| | `/` | Hero, notebook de projetos, perfil, competências, experiência, projetos, modalidades de trabalho e contato | -| `/cases`, `/cases/` | Índice e página de cada um dos oito cases | +| `/cases`, `/cases/` | Índice e página de cada um dos nove cases | | `/servicos` | Índice dos seis serviços | | `/servicos/criacao-de-sites` | Criação de sites | | `/servicos/engenharia-de-software` | Sistemas web e aplicativos mobile sob medida | @@ -139,10 +90,6 @@ O deploy usa o secret `VERCEL_TOKEN`; o projeto na Vercel é o nome do repositó | `/curriculo` | Currículo em HTML, com download de `/Profile.pdf` | | `/privacidade` | Privacidade e consentimento de analytics | -
- -## 🗂️ Estrutura - ```text app/ rotas (App Router) e componentes lib/ conteúdo (site-content.ts), SEO, JSON-LD, WhatsApp, project health @@ -152,26 +99,25 @@ scripts/ check-projects.mjs e utilitários de SEO e vídeo e2e/ testes Playwright (9 specs) docs/ SEO/GEO, project health e planos .gitea/workflows/ ci.yml (verify, audit, e2e, deploy) -nixpacks.toml build e start via Nixpacks -CREDITS.md créditos de capturas e ícone ``` -Stack: Next.js 16.3.8, React 19.1.0, TypeScript 5.9.2, Tailwind CSS 4, Three.js, Lenis e Lucide React. Qualidade: Biome, Jest 30 com Testing Library (150 arquivos de teste), Playwright e axe-core. Todas as dependências diretas estão fixadas em versões exatas, exceto `lenis` (`^1.3.26`). +
-## 🧪 Scripts +## Início rápido -| Comando | O que faz | -| --- | --- | -| `pnpm dev` | Next.js em desenvolvimento com Turbopack | -| `pnpm build` | Build de produção com Turbopack | -| `pnpm start` | Serve um build já gerado | -| `pnpm lint` | Executa `biome check` | -| `pnpm typecheck` | Executa `next typegen` e `tsc --noEmit` | -| `pnpm format` | Formata o repositório com Biome | -| `pnpm test` | Executa a suíte Jest | -| `pnpm test:watch` | Executa Jest em modo watch | -| `pnpm test:e2e` | Executa o Playwright contra um servidor já no ar (`BASE_URL`) | -| `pnpm check:projects` | Consulta as demos e substitui atomicamente `data/project-health.json` | +Requisitos: Node.js `22.x` (`engines`), pnpm `9.15.9` (`packageManager`) e, só para `pnpm test:e2e`, o Chromium do Playwright. + +```bash +corepack pnpm@9.15.9 install --frozen-lockfile +corepack pnpm@9.15.9 dev # Next.js com Turbopack +corepack pnpm@9.15.9 build # build de produção +corepack pnpm@9.15.9 start # serve um build já gerado +``` + +A instalação é sempre com `--frozen-lockfile`, igual ao CI e ao Nixpacks. + +> [!IMPORTANT] +> O Next.js (`16.3.8`) é fixado de propósito: a `16.2.11` mantinha três advisories transitivos de severidade alta, e a `16.3.0` foi a menor versão estável da mesma major que deixou as auditorias sem vulnerabilidades high. Não faça downgrade sem repetir `pnpm audit`. Validação completa, na mesma ordem do CI: @@ -185,30 +131,39 @@ corepack pnpm@9.15.9 audit --prod --audit-level=high corepack pnpm@9.15.9 audit --dev --audit-level=high ``` -Para os testes de ponta a ponta: `pnpm build && pnpm start -p 3001`, e em outro terminal `BASE_URL=http://localhost:3001 pnpm test:e2e`. +Testes de ponta a ponta: `pnpm build && pnpm start -p 3001` e, em outro terminal, `BASE_URL=http://localhost:3001 pnpm test:e2e`. -## 📚 Documentação +Outros scripts: `pnpm format` (Biome), `pnpm test:watch` (Jest em modo watch) e `pnpm check:projects` (atualiza `data/project-health.json`). -- [`docs/project-health.md`](docs/project-health.md): estados do CTA das demos e atualização do snapshot. -- [`docs/seo-geo-operations.md`](docs/seo-geo-operations.md): runbook de SEO e GEO (Search Console, Bing, Cloudflare, CrUX), descrito e **não executado**. -- [`docs/seo-geo-validation.md`](docs/seo-geo-validation.md): validação de SEO e GEO. -- [`CREDITS.md`](CREDITS.md): créditos das capturas de tela e do ícone do WhatsApp. +## Configuração -## 🛣️ Limitações e próximos passos +Não há `.env.example`, e nenhuma variável é necessária para rodar localmente. O código lê: -- **Sem backend.** O formulário de contato não grava nada: abre `wa.me` com o briefing preenchido, e o rodapé mantém o contato direto por e-mail. -- **Demos externas podem aparecer como indisponíveis.** O CTA reflete o último snapshot versionado, não uma consulta em tempo real. No snapshot de 2026-07-11, só a SEV respondeu 200; `nutriscan` falhou na consulta e `sc-plus` respondeu 502. Rode `pnpm check:projects` para renová-lo. -- **Sem 3D em telas pequenas, com ponteiro `coarse` ou movimento reduzido.** O hero e o notebook entregam a versão HTML. +| Variável | Descrição | +|---|---| +| `NEXT_PUBLIC_GOOGLE_ADS_CONVERSION_LABEL` | Rótulo de conversão do Google Ads; sem ele, nenhum evento de conversão é enviado | +| `BASE_URL` | Endereço do site testado por `pnpm test:e2e` (padrão `http://localhost:3001`) | +| `PW_CHROMIUM` | Caminho de um Chromium local para o Playwright, para não baixar o navegador | + +## Estado do projeto + +Em produção em [evandro.dev.br](https://evandro.dev.br). Stack: Next.js 16.3.8, React 19.1.0, TypeScript 5.9.2, Tailwind CSS 4, Three.js, Lenis e Lucide React. Qualidade: Biome, Jest 30 com Testing Library (150 arquivos de teste), Playwright e axe-core. Todas as dependências diretas estão fixadas em versões exatas, exceto `lenis` (`^1.3.26`). + +Limites e próximos passos: + +- **Demos externas podem aparecer como indisponíveis.** O CTA reflete o último snapshot versionado, não uma consulta em tempo real. No snapshot de 2026-07-11, só a SEV respondeu 200; `nutriscan` falhou na consulta, `twins-lab` respondeu 404 e `sc-plus`, 502. Rode `pnpm check:projects` para renová-lo. Em 2026-10-24, `nutriscan.evandro.dev.br` continuava sem responder com o app. - **Ações externas de SEO/GEO pendentes.** Search Console, Bing, Cloudflare e CrUX estão só no runbook. -## 🤝 Contribuindo +Documentação: [`docs/project-health.md`](docs/project-health.md) (estados do CTA das demos e atualização do snapshot), [`docs/seo-geo-operations.md`](docs/seo-geo-operations.md) (runbook de SEO e GEO, descrito e **não executado**), [`docs/seo-geo-validation.md`](docs/seo-geo-validation.md) (validação de SEO e GEO) e [`CREDITS.md`](CREDITS.md). -Projeto pessoal (`"private": true` no `package.json`). O CI roda em `push` e `pull_request`; antes de abrir um PR, o que ele exige deve passar localmente: +O CI roda em `push` e `pull_request`; antes de abrir um PR, rode `pnpm lint && pnpm typecheck && pnpm test -- --runInBand && pnpm build`. -```bash -pnpm lint && pnpm typecheck && pnpm test -- --runInBand && pnpm build -``` +## Licença -## 📄 Licença +Sem licença publicada: todos os direitos reservados. -Sem licença definida — todos os direitos reservados. +
+ +Feito por Evandro Fonseca Junior · git.evandro.dev.br + +
diff --git a/assets/readme/hero.svg b/assets/readme/hero.svg new file mode 100644 index 0000000..51ef0b3 --- /dev/null +++ b/assets/readme/hero.svg @@ -0,0 +1,46 @@ + + evandro.dev.br + O portfólio de Evandro Fonseca Junior em evandro.dev.br. À direita, o índice /cases com os nove cases publicados e o estado de cada um, com Julia Beauty em destaque como o case mais recente. + + + + + portifolio-evandrodevbr + + evandro.dev.br + O portfólio de Evandro Fonseca Junior: + cases, serviços e currículo. + Next.js 16 · React 19 · Three.js + + + + + /cases + 9 cases + + + + + julia-beauty + sev-modaintima + lavacao-047 + nutriscan + twins-lab + reddit-explorer + sc-plus + gcc-installer + as-servicos + + + em produção + em produção + em produção + em produção + protótipo + concluído + concluído + concluído + concluído + + +