• Sobre
• Features
• Stack
• Estrutura do projeto
• Rodando localmente
• Variaveis de ambiente
• Deploy
• Reutilizando este repositorio
• Contato

Portfolio pessoal e profissional bilíngue (PT/EN), com design inspirado em interfaces de comando e HUD. Desenvolvido com React 19 + TypeScript e servido por Express, inclui um assistente virtual com IA para interação em tempo real.

• Bilíngue — alternância PT/EN com todas as traduções centralizadas em um único arquivo
• Chat com IA — assistente virtual integrado via backend server-side (sem exposição de chaves no client)
• Design interativo — grid responsivo ao mouse, animações laser, HUD card com métricas
• SEO & GEO — robots.txt, sitemap.xml, llms.txt, JSON-LD Person, OpenGraph, hreflang
• Knowledge pages — páginas HTML crawláveis em português e inglês para LLM discoverability

├── App.tsx # Layout principal + background effects
├── index.tsx # Entry point React
├── index.html # HTML template
├── server.mjs # Express server (produção)
├── vite.config.ts # Config do Vite
├── Dockerfile # Multi-stage build (Node 20 Alpine)
├── components/
│ ├── Navbar.tsx # Navegação + toggle de idioma
│ ├── sections/
│ │ ├── Hero.tsx # Seção hero com HUD animado
│ │ ├── Expertise.tsx # Cards de competências
│ │ ├── Experience.tsx # Timeline profissional
│ │ └── AIChat.tsx # Chat interativo com IA
│ └── ui/
│ └── Button.tsx # Componente de botão reutilizável
├── contexts/
│ └── LanguageContext.tsx # Provider i18n (PT/EN) com todo o conteúdo textual
├── public/
│ ├── robots.txt
│ ├── sitemap.xml
│ ├── llms.txt
│ └── knowledge/ # Páginas crawláveis (pt.html, en.html)
├── .github/
│ └── workflows/
│ └── deploy-pages.yml # CI/CD GitHub Pages
└── docs/ # Documentação interna

Pré-requisitos: Node.js 20+

# 1. Clone o repositório
git clone git@github.com:robertoecf/portfolio.git
cd portfolio
# 2. Instale as dependências
npm install
# 3. Crie o arquivo de variáveis de ambiente
cp .env.example .env.local
# Edite .env.local com sua chave (veja tabela abaixo)
# 4. Inicie o servidor de desenvolvimento
npm run dev

O site estará disponível em http://localhost:5173.

Para rodar em modo produção local:

npm run build && npm start

Sem a chave, o site funciona normalmente mas o chat com IA ficará indisponível.

1. Conecte o repositório no Vercel
2. Adicione GEMINI_API_KEY como variável de ambiente server-side
3. Deploy automático a cada push na main

O workflow .github/workflows/deploy-pages.yml faz deploy automático usando npm run build:pages.

docker build -t portfolio .
docker run -p 8080:8080 -e GEMINI_API_KEY="sua-chave" portfolio

Para usar como base para seu próprio portfolio:

1. Fork o repositório
2. Edite contexts/LanguageContext.tsx — todo o conteúdo textual (nome, experiências, competências, traduções) está centralizado neste único arquivo
3. Substitua profile.jpeg pela sua foto
4. Atualize metadata.json com suas informações
5. Edite os arquivos em public/ (llms.txt, sitemap.xml, knowledge pages) com seus dados
6. Configure sua própria GEMINI_API_KEY — ou remova a seção AIChat do App.tsx se não quiser IA
7. Ajuste as cores no Tailwind config para sua paleta

Dica: O conteúdo é 100% data-driven. Você não precisa mexer nos componentes React para trocar textos, experiências ou competências — tudo vem do LanguageContext.tsx.

LinkedIn

Uso pessoal. Para reutilização, faça um fork e substitua o conteúdo pelo seu.