- A História por Trás
- Funcionalidades
- Destaque: Chat RAG Inteligente
- Destaque: Gerador de Currículo IA (ATS)
- Arquitetura do Projeto
- Stack Tecnológico
- Pipeline de Automação
- Estrutura de Arquivos
- Como Executar Localmente
- Variáveis de Ambiente
- Qualidade e Testes
- Padrões de Engenharia
- Roadmap
- Contato
- Licença
A maioria dos portfólios são vitrines. Este é uma plataforma de engenharia viva.
Eu poderia ter feito o que todo mundo faz: uma página bonita com cards de projetos e um botão "Baixar CV". Mas isso não reflete quem eu sou.
Sou um profissional em transição de carreira para IA e Automação, e meu portfólio precisava responder uma pergunta simples: "Ele realmente sabe fazer o que diz?"
A resposta está na própria experiência de navegação:
- O Chat com RAG responde perguntas sobre mim usando Retrieval-Augmented Generation — buscando provas reais nos meus 56+ repositórios e certificados.
- O Gráfico de Habilidades é gerado automaticamente a partir dos meus repositórios do GitHub via pipeline diária.
- O Gerador de Currículo ATS analisa vagas em tempo real e monta um dossiê personalizado cruzando com meus dados reais.
- Engenharia de Conversão: O site monitora engajamento (Vercel Analytics) e facilita o agendamento direto via Calendly/WhatsApp.
Cada feature deste site é uma demonstração técnica viva das habilidades que eu listo no meu currículo. Não é buzzword — é código em produção, testado e monitorado.
| Feature | Descrição | Tech |
|---|---|---|
| 🧠 Chat RAG | Assistente com Retrieval-Augmented Generation — busca em 56+ repos e certificados para respostas com fontes verificáveis | Gemini Embedding, Cosine Similarity, Vercel Functions |
| 🤖 Gerador de CV ATS | Analisa vagas e gera Relatório + Currículo + Carta em .doc |
Gemini 2.5 Flash + Fallback |
| 📊 Skills Dinâmicas | Gráfico radar gerado via pipeline GitHub Actions + Gemini | Chart.js, GitHub GraphQL API |
| 🎓 Ingestão de Certificados | PDFs do Google Drive → transcrição automática via Gemini Vision | Google Drive API, Gemini Vision |
| 📈 Telemetria de Leads | Monitoramento de cliques e conversão em tempo real | Vercel Analytics |
| 🎯 CTA de Conversão | Agendamento via Calendly e WhatsApp integrados | Headless JSON Config |
| ✨ UX Nudges | Micro-animações (Pulse) que ativam após scroll estratégico | JS Intersection Observer |
| 📱 Mobile-First | 100% responsivo com tipografia fluida (clamp) |
CSS Grid, Clamp Logic |
| 🧪 Blindagem Técnica | Testes Unitários (Jest) e End-to-End (Playwright) | Jest, Playwright |
"O chat não inventa. Ele busca provas nos seus projetos reais antes de responder."
O sistema de chat implementa uma arquitetura RAG (Retrieval-Augmented Generation) completa, 100% serverless e sem custos de infraestrutura:
┌──────────────────────────────────────────────────────────────────────────┐
│ PIPELINE DIÁRIA (GitHub Actions — 06:00 UTC) │
│ │
│ 1. 📂 Busca 56+ repositórios públicos (GraphQL) + READMEs (REST) │
│ 2. 🎓 Ingestão de certificados do Google Drive (Gemini Vision) │
│ 3. 🧠 Gera embeddings com gemini-embedding-001 → vectors.json │
│ 4. 🚀 Commit automático → Vercel auto-deploy │
└──────────────────────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────────────────────────┐
│ RUNTIME (Vercel Serverless — cada pergunta do recrutador) │
│ │
│ Pergunta → Embedding da query → Cosine Similarity vs vectors.json │
│ → Top-5 documentos relevantes → Injeção de contexto no System Prompt │
│ → Gemini responde com fontes verificáveis e links clicáveis │
└──────────────────────────────────────────────────────────────────────────┘
- Zero-Hallucination: O LLM só responde com informações presentes nos documentos recuperados.
- Fontes Clicáveis: Cada resposta inclui links diretos para os repositórios GitHub citados.
- Graceful Degradation: Se o banco vetorial não existir, o chat funciona normalmente sem RAG.
- Zero-Ops: Sem banco de dados externo — o
vectors.json(~4MB) é servido como asset estático.
"Recrutador, em vez de entregar um PDF genérico, construí um agente que monta o currículo sob medida para a SUA vaga."
Esta é a feature que diferencia este portfólio. O sistema funciona assim:
┌──────────────┐ ┌──────────────────┐ ┌──────────────────────┐
│ Recrutador │────▶│ Cole a Vaga no │────▶│ Gemini 2.5 Flash │
│ (Browser) │ │ Modal do Site │ │ (Temperature = 0) │
└──────────────┘ └──────────────────┘ └──────────┬───────────┘
│
┌──────────▼───────────┐
│ Fallback Automático │
│ Gemini 3.1 Lite │
└──────────┬───────────┘
│
┌───────────────────────────────────▼─┐
│ 3 Outputs Separados │
│ │
│ 📊 Relatório de Compatibilidade │
│ 📄 Currículo ATS (.doc) │
│ ✉️ Carta de Apresentação (.doc) │
└──────────────────────────────────────┘
- Zero-Hallucination: Perfil embutido estaticamente no System Prompt.
- Dual-Model Fallback: Migração automática entre modelos se atingir Rate Limits.
- Exportação Nativa: Arquivos
.docgerados via Blob com wrapper XML do MS Office.
graph TD;
A["index.html"]-->B["styles.css (Design System)"]
A-->C["main.js (UX Logic)"]
A-->H["cv-generator.js (AI logic)"]
I["Vercel Functions"]-->J["/api/chat.js (RAG Engine)"]
I-->K["/api/generate-cv.js"]
J-->VEC["vectors.json (Semantic Search)"]
J-->EMB["gemini-embedding-001"]
J-->LLM["Gemini 3.1 Flash Lite"]
K-->P["Gemini API (Primary/Fallback)"]
L["GitHub Actions (Daily)"]-->M1["generate-projects.mjs"]
L-->M2["generate-skills.mjs"]
L-->M3["ingest-certificates.mjs"]
L-->M4["generate-embeddings.mjs"]
M1-->O1["projects.json"]
M2-->O2["languages.json"]
M3-->O3["certificates.json"]
M4-->O4["vectors.json"]
R["Playwright CI"]-->A
S["Vercel Analytics"]-->A
| Camada | Tecnologias |
|---|---|
| Frontend | HTML5 Semântico, Vanilla CSS (Design Tokens), Vanilla JS ES6+ |
| Inteligência | Google Gemini (Multi-model), RAG (Embeddings + Cosine Similarity), Vercel Serverless |
| Dados | Google Drive API (Certificados), GitHub GraphQL + REST API (Repositórios) |
| Qualidade | Playwright (E2E), Jest (Unit), GitHub Actions (CI) |
| Observabilidade | Vercel Analytics (Event Tracking) |
| Automação | 4 scripts Node.js autônomos (Daily Pipeline), GitHub Actions |
A pipeline diária roda automaticamente às 06:00 UTC via GitHub Actions:
| Step | Script | Output | Descrição |
|---|---|---|---|
| 1 | generate-projects.mjs |
projects.json |
Busca repos pinados + enriquecimento Gemini |
| 2 | generate-skills.mjs |
languages.json |
Analisa bytes de código + gera radar de skills |
| 3 | ingest-certificates.mjs |
certificates.json |
Transcreve PDFs do Google Drive via Gemini Vision |
| 4 | generate-embeddings.mjs |
vectors.json |
Gera embeddings de 56+ repos + certificados |
| 5 | Auto-commit | git push |
Vercel auto-deploy com dados atualizados |
portfolio/
├── api/ # Vercel Serverless Functions
│ ├── chat.js # Chat RAG Engine (v3.0)
│ └── generate-cv.js # Gerador de CV ATS
├── assets/
│ ├── css/styles.css # Design System completo
│ ├── data/ # Headless CMS (JSON)
│ │ ├── config.json # Configuração centralizada (Calendly, WhatsApp)
│ │ ├── projects.json # Projetos pinados (auto-generated)
│ │ ├── languages.json # Skills radar (auto-generated)
│ │ ├── certificates.json # Certificados transcritos (auto-generated)
│ │ ├── vectors.json # Banco vetorial RAG (auto-generated)
│ │ └── experience.json # Experiência profissional
│ └── js/ # Módulos JavaScript
│ ├── main.js # UX, animações, navegação
│ ├── chat.js # Chat widget (RAG sources UI)
│ ├── cv-generator.js # Lógica do gerador de CV
│ ├── projects.js # Renderização de cards
│ └── skills-chart.js # Gráfico radar (Chart.js)
├── scripts/ # Pipelines autônomos
│ ├── generate-projects.mjs # GitHub Pinned → projects.json
│ ├── generate-skills.mjs # GitHub Languages → languages.json
│ ├── ingest-certificates.mjs # Google Drive PDFs → certificates.json
│ └── generate-embeddings.mjs # All Repos + Certs → vectors.json
├── docs/ # Documentação AIOX
│ ├── prd.md # Product Requirements Document
│ ├── stories/ # User Stories por Epic
│ └── design-system-lite.md # Design tokens e guidelines
├── tests/ # Testes automatizados
│ ├── unit/ # Jest (lógica de dados)
│ └── e2e/ # Playwright (fluxo de conversão)
├── .github/workflows/ # CI/CD
│ ├── ci.yml # Build + Testes no PR/Push
│ └── update-projects.yml # Pipeline diária (Daily Data)
└── index.html # Entry point
git clone https://github.com/Jcnok/portfolio.git
cd portfolio
npm installcp .env.example .env
# Preencha as variáveis necessárias (ver seção abaixo)npx serve .# Testes Unitários
npm test
# Testes E2E
npx playwright install
npx playwright test| Variável | Obrigatória | Descrição |
|---|---|---|
GEMINI_API_KEY |
✅ | Chave da API Google AI Studio (obter aqui) |
GITHUB_TOKEN |
✅ | Token GitHub com escopo public_repo (criar aqui) |
GOOGLE_SERVICE_ACCOUNT_KEY |
📋 Pipeline | JSON da Service Account do Google Cloud |
GOOGLE_DRIVE_FOLDER_ID |
📋 Pipeline | ID da pasta do Drive com certificados em PDF |
As variáveis 📋 são necessárias apenas para a pipeline de ingestão (GitHub Actions).
Para garantir que a experiência do recrutador seja sempre perfeita, implementamos:
- Jest: Valida a lógica de filtragem de projetos e manipulação de dados JSON.
- Playwright: Simula um usuário real navegando no site, abrindo o modal de IA e clicando nos CTAs de contato.
- CI Pipeline: Bloqueia o deploy caso qualquer teste quebre, mantendo a integridade 100% do tempo.
- Story-Driven Development: Cada feature segue o ciclo PRD → Epic → Story → Implementation → Done.
- Headless CMS: Todos os dados dinâmicos vivem em
assets/data/*.json, sem CMS externo. - Zero-Ops: Nenhuma infraestrutura paga — Google Free Tier + Vercel Free + GitHub Actions.
- Graceful Degradation: Features de IA falham silenciosamente sem afetar a navegação base.
- Conventional Commits: Mensagens semânticas (
feat:,fix:,docs:,chore:). - AIOX Framework: Documentação e desenvolvimento orientados por agentes especializados.
- Chat com IA (Gemini)
- Pipeline automática de Skills (GitHub Actions)
- Gerador de Currículo ATS com Dual-LLM
- Engenharia de Conversão (Analytics + CTAs)
- Testes E2E (Playwright) + CI/CD
- Headless Config (Centralizado em JSON)
- RAG Engine — Chat com busca vetorial em 56+ repos e certificados
- Ingestão automática de certificados do Google Drive
- Embeddings com
gemini-embedding-001(Zero-Ops) - Blog integrado com IA
- Internacionalização (EN/PT)
- Progressive Web App (PWA)
| Canal | Link |
|---|---|
| linkedin.com/in/juliookuda | |
| 📅 Agendar Café | Calendly |
| julio.okuda@gmail.com | |
| 🌐 Portfólio | portfolio-jcnok.vercel.app |
Este projeto está sob a licença MIT.
Desenvolvido com ❤️ e IA por Julio Cesar Okuda
"Não é apenas um portfólio. É a prova de conceito do seu próximo projeto."