Desenvolvedor Frontend Criando Experiências Digitais

"**Contexto:** Criar um site pessoal responsivo para um desenvolvedor frontend chamado [Seu Nome], focado em portfólio e habilidades. **Requisitos Técnicos:** - HTML5 semântico + CSS moderno (Flexbox/Grid) - JavaScript leve (ES6+) para interações - Design mobile-first (breakpoints: 320px, 768px, 1200px) - Acessibilidade WCAG 2.1 AA - SEO básico otimizado **Seções Obrigatórias:** 1. **Hero Section** - Tagline: "Desenvolvedor Frontend Criando Experiências Digitais" - CTA: "Ver Projetos" (link âncora para portfólio) - Ícones decorativos SVG 2. **Sobre Mim** - Foto de perfil circular (placeholder: `avatar.jpg`) - Bio de 2 parágrafos (ênfase em React/Vue e design systems) - Botão "Baixar CV" (PDF) 3. **Habilidades Técnicas** - Categorias: Frontend (HTML/CSS/JS), Frameworks (React, Vue), Ferramentas (Git, Webpack) - Exibição em cards com ícones SVG e barra de progresso visual 4. **Portfólio** - 6 projetos com: * Nome + breve descrição * Tags de tecnologias * Links para GitHub e Demo - Layout em grid responsivo com efeito hover 5. **Contato** - Formulário com: Nome, Email, Mensagem - Links sociais (GitHub, LinkedIn, Twitter) como ícones **Diretrizes de Design:** - Paleta: `#0a192f` (azul escuro), `#64ffda` (ciano), `#ccd6f6` (branco gelo) - Tipografia: Inter (principal), Fira Code (códigos) - Efeitos: Transições suaves, shadows sutis, bordas arredondadas - Microinterações: Hover em botões/links, animação de digitação no hero **Funcionalidades Especiais:** - Modo claro/escuro (persistente com localStorage) - Menu mobile com hamburger icon - Filtro de projetos por tecnologia - Validação de formulário em tempo real **Instruções de Entrega:** 1. Código completo em único arquivo HTML (com CSS/JS embutido) 2. Comentários para seções importantes 3. Imagens de placeholder via CDN (ex: https://via.placeholder.com/600x400) 4. Incluir pré-loader para assets "