Skill de Site de Portfólio
Gera um site de portfólio profissional: seção hero, grade de showcase de projetos, seção sobre e formulário de contato. Limpo, tipográfico, minimalista.
Metadados
Nome: portfolio-site Descrição: Gere um site de portfólio profissional com seções hero, showcase de projetos, sobre e contato. Palavras-chave de gatilho: "portfólio", "site pessoal", "portfólio de desenvolvedor", "portfólio criativo", "site de currículo"
Entradas e Parâmetros
| Parâmetro | Tipo | Obrigatório | Padrão |
|---|---|---|---|
name | string | ✓ | — |
tagline | string | ✓ | — |
projects | array | ✓ | — |
github_url | string | — | — |
linkedin_url | string | — | — |
email | string | — | — |
years_experience | number | — | 3 |
skills | array | — | [] |
Item do array de projetos:
{ title: string; description: string; tags: string[]; url?: string; image?: string }
Seções Obrigatórias (em ordem)
- Navegação — Nome como logo, links: Projetos / Sobre / Contato
- Hero — Nome, tagline, proposta de valor em uma linha, links sociais (GitHub, LinkedIn, email)
- Grade de Projetos — Grade responsiva de 3 colunas, cada cartão: título + descrição + tags + link
- Sobre — 2 colunas: texto de biografia à esquerda, habilidades/estatísticas à direita
- Contato — Formulário simples: nome, email, mensagem, botão de enviar
- Rodapé — Direitos autorais + links sociais
Regras de Design
- Página única, totalmente responsiva
- Modo escuro como padrão (use tokens de modo escuro do DESIGN.md)
- Todos os links abrem em nova aba
- Sem bibliotecas JS externas
- Todo CSS em bloco
<style> - HTML5 semântico (
<header>,<nav>,<main>,<section>,<footer>)
Saída
Arquivo único: index.html (autossuficiente)
Auto-verificação
- O título do hero é o nome, não "Bem-vindo"
- Pelo menos 4 projetos mostrados
- Links sociais usam ícones SVG (sem emoji)
- Mobile: grade de coluna única
- Formulário de contato não tem atributo
actionquebrado
Esta skill foi gerada automaticamente.