Sites & Landing Pages
Claude 3.5 Sonnet
Portfólio de Desenvolvedor com Filtro de Projetos e Dark Mode
Página de portfólio em um único HTML: hero com foto, grid de projetos filtrável por stack, seção sobre e contato — dark mode persistente.
1cópias
0joinhas
0favoritos
O prompt
Crie uma página de portfólio profissional em um único arquivo HTML (CSS + JS embutidos, sem frameworks) para {{nome_dev}}.
Parâmetros:
- Nome do Desenvolvedor: {{nome_dev}}
- Stack Principal: {{stack_principal}} (ex.: 'TypeScript, React, Node.js')
- Cor de Destaque: {{cor_destaque}}
Requisitos:
1. Hero com nome, título ('Desenvolvedor(a) Full-Stack'), frase curta de posicionamento e 2 CTAs ('Ver projetos' âncora + 'Entrar em contato'); foto/avatar circular à direita.
2. Seção de projetos: grid responsivo (3 colunas desktop, 1 mobile) com cards contendo título, descrição de 2 linhas, tags da stack usada e links (demo + código). Filtros por tecnologia como chips clicáveis (Todos + as stacks de {{stack_principal}}), filtrando sem recarregar.
3. Seção 'Sobre' com bio curta, lista de habilidades em barras ou badges e linha do tempo de experiência (3 itens).
4. Dark mode: toggle no header alternando claro/escuro, persistido em localStorage e respeitando prefers-color-scheme na primeira visita; variáveis CSS para toda a paleta.
5. Seção de contato com formulário simples (nome, e-mail, mensagem) que abre o mailto preenchido ao enviar + links para GitHub/LinkedIn/e-mail.
6. Acessibilidade: navegação por teclado, aria-labels nos filtros, contraste AA nos dois temas; animações sutis no scroll (IntersectionObserver).
Como usar
- Substitua {{nome_dev}}, {{stack_principal}} e {{cor_destaque}} (hex).
- Cole no Claude — o prompt foi calibrado para modelos com bom senso de design.
- Salve como index.html e abra no navegador; troque os 6 projetos de exemplo pelos seus (título, descrição, tags, links).
- Para publicar grátis: arraste a pasta para Netlify Drop ou GitHub Pages — é um arquivo único, sem build.
Exemplo de saída
index.html (~380 linhas): hero com CTA duplo e avatar, grid de 6 projetos filtrável por chips de stack (sem reload), seção sobre com timeline de 3 experiências, dark mode persistente via variáveis CSS + prefers-color-scheme, formulário abrindo mailto preenchido, navegação por teclado com aria-labels e reveal suave no scroll.