portfolio-skill: currículo → portfolio pessoal

Habilidades de Portfólio

Crie um portfólio que um gerente de contratação, recrutador ou cliente se lembrará depois de fechar a aba: uma ideia visual confiante, cópia específica, movimento com um propósito e engenharia que se sustenta quando alguém abre o DevTools.

O tema é escolhido por pessoa. Nada aqui fixa cores, fontes ou estilo de layout. Cada valor concreto neste arquivo é um exemplo do padrão, não um padrão para copiar.

---

1. Padrão de Qualidade (verifique todos antes de finalizar)

1. Uma direção de arte, executada consistentemente. Um conceito nomeado impulsiona tipo, cor, layout, movimento e tom de cópia. Nunca misture estilos não relacionados (vidro + neon + brutalismo + gradientes) em um único site.
2. Conteúdo real e específico. Cada afirmação vem do currículo, repositórios, perfis ou mensagens do usuário. Números concretos, nomes de stacks, papéis, datas. Sem lorem ipsum, sem métricas inventadas, sem "desenvolvedor apaixonado que adora codar".
3. O trabalho é o herói. Os 2 a 4 projetos principais recebem mais espaço e, idealmente, sua própria página de estudo de caso com algo interativo. Todo o resto fica em um índice filtrável e escaneável.
4. A tipografia carrega o design. Fonte de exibição expressiva + fonte de texto legível + fonte mono/utilitária opcional. Tamanhos fluidos clamp(). Inter, Roboto, Arial ou pilhas do sistema nunca são a voz de exibição.
5. O movimento é coreografado, não salpicado. Uma introdução, revelações de rolagem e 1-2 momentos marcantes. Tudo respeita prefers-reduced-motion e degrada de forma limpa.
6. Funciona em todos os lugares. 360px a ultrawide, operável por teclado, contraste WCAG AA, primeira pintura rápida, totalmente legível sem WebGL ou animação JS.
7. Entrega. Zero erros de tipo, compilação de produção aprovada, tags meta/OG por rota, link para currículo, caminho de contato que entrega, configuração de deploy.

---

2. Fluxo de Trabalho

1. Colete material. Leia tudo o que foi fornecido: currículo PDF/DOCX, site existente, READMEs, dados do GitHub, anotações. Pergunte apenas pelos itens essenciais faltantes (nome, função, público-alvo, 2 a 4 projetos emblemáticos, links, preferência visual). Se nenhuma preferência for dada, escolha uma direção você mesmo e diga qual e por quê.
2. Escolha o arquétipo e o nível de ambição (Seção 6A.2) que se adequa à pessoa e ao cronograma, depois escreva um resumo de design (Seção 3) antes de qualquer código de UI.
3. Construa a base (Seção 5): módulo de conteúdo, tokens, tipo, roteador, rolagem suave.
4. Componha as páginas em uma ordem apresentável: conteúdo -> tokens/tipo -> navegação/rodapé -> hero -> emblemáticos -> índice de trabalho -> sobre/capacidades/linha do tempo -> contato -> páginas de estudo de caso -> 404. Depois movimento (Seção 6). WebGL e efeitos de assinatura por último.
5. Verifique (Seção 9) em um navegador real em ~1440px e ~390px. Nunca declare como concluído apenas lendo o código.

Se o repositório já usa uma stack (Next.js, Astro, SvelteKit, HTML puro), mantenha-a. Todos os padrões abaixo se traduzem.

---

3. Direção de Arte

3.1 Derive o tema da pessoa

Pergunte: quem verá isso, o que eles devem sentir em 5 segundos, como é o trabalho dessa pessoa? Mapeie isso para um conceito. Cores de marca, fontes ou temas especificados pelo usuário sempre vencem.

Pessoa / sinal	Direções de exemplo (escolha uma ou invente)
Backend / sistemas / infra	Editorial papel + tinta; desenho técnico/blueprint; brutalismo de terminal; grade suíça com acentos de visualização de dados
Frontend / desenvolvimento criativo	Tipo cinético ousado; imersivo com WebGL; sticker/zine divertido; monocromático de alto contraste com um neon
Designer de produto / UX	Espaços em branco calmos de galeria; estúdio aconchegante (creme, terracota, serifa suave); revista de estudo de caso
ML / pesquisa / dados	Caderno de laboratório (papel quadriculado, anotações mono); jornal científico; observatório escuro com linhas traçadas
Desenvolvedor mobile	Vitrine focada em dispositivos; superfícies táteis suaves; polimento de loja de aplicativos com mockups de telefone ao vivo
Fotógrafo / artista	Imagem em primeiro plano sangrada; cromo mínimo; cinema escuro; grade de contato
Fundador / generalista	Editorial confiante; tipografia de manifesto; credibilidade baseada em métricas
Estudante / início de carreira	Limpo, energético, honesto; enfatize projetos e caminho de aprendizado em vez de títulos de emprego

Evite padrões que pareçam gerados por IA: gradientes roxo-para-azul em branco, cartões genéricos de glassmorphism, herói centralizado com "Oi, eu sou X" + emoji de aceno, três cartões de recursos iguais, blobs 3D de estoque.

3.2 Modelo de resumo de design (escreva isso primeiro)

Conceito:        <nome + uma frase de intenção>
Público:       <quem, o que eles devem levar embora>
Paleta:        bg, bg-2, fg, fg-2, muted, line, accent (+ acentos por projeto, se usado)
Tipo:           exibição / texto / mono (com fallbacks), proporção de escala
Gramática de layout: grade, gutters, ritmo de seção, regras/bordas vs cartões
Movimento:         personalidade (nítido/elástico/lento/mecânico), easing principal, durações
Assinatura:      os 1-2 momentos que as pessoas lembrarão
Textura:        granulado / linhas de grade / nenhum / shader

3.3 Tokens (estrutura é fixa, valores são por tema)

:root {
  /* paleta: substitua valores por tema */
  --bg: #eeeae2;  --bg-2: #e5e0d5;
  --fg: #121210;  --fg-2: #2a2925;
  --muted: #6d695f;
  --line: rgba(18,18,16,.14);
  --accent: #ff4d1c;
  /* vozes de tipo */
  --display: 'Instrument Serif', 'Times New Roman', serif;
  --text: 'Geist', 'Helvetica Neue', sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  /* ritmo */
  --gutter: clamp(1.1rem, 3.2vw, 2.75rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* aliases de nível de página para que as páginas de estudo de caso possam re-tematizar substituindo estes */
  --page-bg: var(--bg); --page-fg: var(--fg); --page-muted: var(--muted);
  --page-line: var(--line); --page-accent: var(--accent);
}

Componentes referenciam apenas --page-*. Uma página de estudo de caso define novos valores --page-* em seu <main> e toda a UI (botões, regras, cursor, seleção) re-tematiza gratuitamente.

3.4 Regras de Tipografia

• Combine com contraste: serifa de exibição + texto grotesco, ou grotesco pesado de exibição + mono, ou exibição condensada + texto humanista. Carregue via Google Fonts ou woff2 auto-hospedado com display=swap e preconnect.
• Escala fluida com clamp, por exemplo, h-xl: clamp(3.6rem, 14.5vw, 15rem), h-lg: clamp(2.8rem, 8vw, 8.5rem), h-md: clamp(2.1rem, 5vw, 4.6rem), lede: clamp(1.05rem, 1.45vw, 1.3rem).
• Exibição: entrelinhamento apertado (0.85-0.95) e tracking negativo (-0.02 a -0.04em). Corpo: entrelinhamento 1.5-1.65, max-width 38-62ch.
• Metadados em mono versalete pequeno com leve tracking ("(02) Trabalho selecionado", "2024 - Presente").
• Use itálico ou uma mudança de peso em uma palavra em um título para dar voz ("Aqueles que eu mostraria primeiro.").
• font-variant-numeric: tabular-nums para contadores e estatísticas.

3.5 Gramática de Layout

• Herói sangrado (min-height: 100svh), conteúdo ancorado no canto inferior esquerdo ou em uma grade, não centralizado morto.
• Cabeçalhos de seção como uma regra fina com rótulo mono numerado à esquerda e contexto à direita.
• Prefira regras finas e grades em vez de cartões com sombra de gota (a menos que o conceito seja tátil/suave).
• Varie o ritmo das seções: declaração grande, índice denso, carretel horizontal, divisão de duas colunas. Nunca seis seções idênticas seguidas.
• --gutter consistente em todos os lugares; padding de seção clamp(5rem, 13vw, 11rem).

3.6 Opções de Textura

Grão de filme (SVG feTurbulence data-URI em body::after, opacidade 0.04-0.08, pointer-events:none), linhas de grid de blueprint, gradientes radiais sutis ou um campo WebGL. Escolha um; não empilhe.

---

4. Estratégia de Conteúdo

4.1 Arquitetura da Informação

Página inicial (rolagem única):

1. Hero: nome, posicionamento de uma linha, texto principal de 1-2 frases, CTA principal (veja o trabalho) + secundário (currículo / contato), pequena linha de meta (função, áreas de foco, localização, disponibilidade).
2. Declaração / Sobre: 2-4 frases na voz da pessoa, mais 3-4 estatísticas verdadeiras (projetos entregues, anos, usuários, estrelas, CGPA se for estudante).
3. Emblemáticos: 2-4 projetos heróis, cartões grandes, cada um vinculando a uma página de estudo de caso.
4. Índice de trabalho: todos os outros projetos como linhas (número, nome, resumo de uma linha, stack, ano/link), filtráveis por tipo.
5. Capacidades: habilidades agrupadas (por exemplo, Backend, Mobile, IA, Ferramentas), apenas coisas que eles podem defender em uma entrevista.
6. Trajetória / linha do tempo: educação, funções, conquistas notáveis.
7. Contato: grande título de CTA, e-mail, formulário, links sociais, download de currículo.

Página de estudo de caso por emblemático: herói temático (nome, slogan, função, stack, links), problema, o que foi construído, uma demo interativa (simulador, playground, mockup ao vivo, diagrama de arquitetura que você pode passar o mouse), decisões/compensacoes principais, métricas/resultados, depois um encaminhamento de "próximo projeto" e contato.

Página 404 na mesma voz.

4.2 Regras de Cópia

• Primeira pessoa, simples, específica. Lidere com o que foi construído e por que importa, depois como.
• Bom: "Conecte suas próprias contas AWS, GCP e Azure e seus tiers gratuitos agem como um disco." Ruim: "Uma solução revolucionária em nuvem aproveitando tecnologia de ponta."
• Preenchimento proibido: apaixonado, de ponta, alavancar, sem emendas, robusto, inovador, jornada, mergulhar, "Eu amo codar".
• Cada métrica é originada ou omitida. Nunca fabrique.
• Microcópia tem personalidade, mas permanece clara ("Perdido no carretel." no 404, dicas "Rolar para panorâmica").

4.3 Módulo de Conteúdo Único

Toda a cópia e dados vivem em src/content.ts. Componentes nunca codificam texto de biografia.

export const PROFILE = { name, role, location, email, github, linkedin, resume: '/resume.pdf', statement };
export type Metric = { value: string; label: string };
export type Flagship = {
  slug: string; path: string; index: string; name: string; kicker: string; tagline: string;
  summary: string; role: string; stack: string[]; metrics: Metric[]; repo: string;
  accent: string; bg: string; fg: string;          // tema por projeto
};
export const FLAGSHIPS: Flagship[] = [ /* 2-4 */ ];
export type WorkKind = 'Systems' | 'AI' | 'Mobile' | 'Web'; // adapte à pessoa
export const WORKS: { name: string; blurb: string; stack: string[]; kind: WorkKind; year: string; href: string; route?: string }[] = [];
export const CAPABILITIES: { title: string; items: string[] }[] = [];
export const PATH: { when: string; what: string; detail: string }[] = [];
export const STATS: Metric[] = [];

---

5. Arquitetura

5.1 Stack Padrão

Vite + React + TypeScript; CSS puro com propriedades customizadas (Tailwind permitido se a equipe preferir); gsap + @gsap/react (ScrollTrigger); lenis para rolagem suave; three apenas se a direção usar WebGL; nodemailer para contato; deploy no Vercel/Netlify.

5.2 Estrutura

index.html                 fonts, meta/OG base, texto fallback noscript
public/                    favicon.svg, resume.pdf, og-image
src/content.ts             toda cópia e dados
src/index.css              tokens, tipo, layout, componentes, responsivo, reduced-motion
src/lib/smooth.ts          Lenis + ticker GSAP, flag reduced-motion, velocidade de rolagem
src/lib/motion.tsx         useReveals, useHeroIntro, <Split>, useMeta
src/lib/router.tsx         roteador de histórico + transição de cortina + <Link>
src/components/Chrome.tsx  Nav, menu Mobile, Cursor, Preloader, Footer/Contact
src/components/Field.tsx   background herói WebGL opcional
src/components/CaseShell.tsx scaffold compartilhado de estudo de caso
src/pages/*.tsx            Home, uma página por emblemático, NotFound
api/contact.ts             manipulador de e-mail serverless
vercel.json                reescritas SPA

5.3 Roteamento

Um pequeno roteador de histórico é suficiente para um portfólio e permite que você controle as transições:

• normalizePath (remove barra final, minúsculas).
• navigate(to): mesmo caminho + hash -> rolagem suave para âncora; caminho diferente -> toca cortina, troca página enquanto coberta, rola para o topo, depois revela.
• Ouça popstate; chame ScrollTrigger.refresh() após cada mudança de rota; lidere #hash pendente após a troca.
• <Link>: externo (http, mailto) renderiza uma âncora simples com target="_blank" rel="noopener noreferrer"; interno intercepta clique a menos que metaKey/ctrlKey/shiftKey ou botão não esquerdo, para que nova aba ainda funcione.
• Next.js/Astro: use o roteador deles e implemente a cortina em um hook de layout/transição.

5.4 SEO por Rota

useMeta(title, description, themeColor) atualiza document.title, description, og:*, twitter:*, theme-color e canonical em cada rota. index.html contém padrões completos mais um resumo de texto <noscript>. Adicione cartão summary_large_image do Twitter e uma imagem OG, se possível. Considere esquema JSON-LD Person.

5.5 API de Contato (serverless, api/contact.ts)

Requisitos:

• POST apenas (405 caso contrário), Cache-Control: no-store.
• Campo honeypot (por exemplo, website oculto): se preenchido, retorne 200 e descarte.
• Apare e limite o comprimento de cada campo; valide e-mail com regex simples; comprimento mínimo da mensagem.
• Remova \r\n de qualquer coisa usada em cabeçalhos/assunto (injeção de cabeçalho); escape HTML em qualquer coisa no corpo HTML.
• replyTo = remetente; from = seu usuário SMTP.
• Limitação de taxa de melhor esforço por IP (por exemplo, 3 a cada 10 min via Mapa em memória, IP de x-forwarded-for).
• Se variáveis de ambiente SMTP estiverem faltando, retorne 503 com uma mensagem amigável "me envie um e-mail diretamente"; a UI deve mostrar o e-mail como fallback.
• Variáveis de ambiente: SMTP_HOST, SMTP_PORT, SMTP_USER, SMTP_PASS, CONTACT_TO. Forneça .env.example. Nunca confirme segredos.
• Formulário frontend: estados idle/sending/sent/error, aria-live="polite" status, envio desabilitado enquanto envia, rótulos em cada entrada.

5.6 Deploy

Vercel vercel.json:

{ "cleanUrls": true,
  "rewrites": [{ "source": "/((?!api/|assets/|.*\..*).*)", "destination": "/" }] }

Netlify: /* /index.html 200 em _redirects. Currículo vive em public/resume.pdf; todo botão de currículo conecta lá com download.

---

6. Sistema de Movimento

6.1 Princípios

• Um easing padrão (por exemplo, expo.out / cubic-bezier(.16,1,.3,1)), durações 0.6-1.4s para revelações, 0.3-0.6s para hovers.
• Anime apenas transform, opacity, clip-path. Nunca anime propriedades de layout.
• Revelações mascaradas (texto subindo de uma caixa overflow:hidden) parecem premium; fades simples parecem baratos.
• Coreografia: introdução herói espera o preloader/cortina limpar (atraso intro.delay compartilhado).
• Cada efeito é controlado por `prefersReduc

…

[truncado para tradução]