Conversão de conhecimento em páginas de apresentação interativas

pista

# Análise de documentos e geração de portfólio visual na Web




## Requisitos de conteúdo
- Manter as principais informações do documento original, mas apresentá-las de forma mais legível e visual
- Adicionar uma área de informações do autor na parte inferior da página contendo:
- **Nome do autor**: [nome do autor]
- **Links de mídia social**: inclua pelo menos Twitter/X
- Informações de direitos autorais e ano**

Estilo de design ##
- O estilo geral faz referência ao design moderno e minimalista do **Linear App**
- Use uma hierarquia visual clara para destacar o conteúdo importante
- O esquema de cores deve ser **profissional, harmonioso e adequado para leitura prolongada**

Especificações técnicas do ##
- Use **HTML5, TailwindCSS 3.0+ (introduzido via CDN)** e o JavaScript necessário
- Implementar **funcionalidade completa de alternância de modo escuro/claro**, seguindo as configurações do sistema por padrão
- Estrutura de código clara, incluindo comentários apropriados, fácil de entender e manter

## Design responsivo
- A página deve ser exibida perfeitamente em **todos os dispositivos (celulares, tablets, desktops)
- Otimize o **layout e os tamanhos de fonte** para diferentes tamanhos de tela
- Garanta uma **boa experiência de toque no **móvel

## Recursos de mídia
- Use **links de imagem do Markdown em documentos** (se disponível)
- Use o **código de incorporação de vídeo** da documentação (se disponível)

## Ícones e elementos visuais
- Use bibliotecas de ícones especializadas, como **Font Awesome ou Material Icons (trazidos via CDN)**
- Escolha **ilustrações ou gráficos** apropriados para o tópico do conteúdo Exiba dados
- Evite usar **emoji** como ícones principais

## Experiência interativa
- Adicione efeitos de **microinteração** apropriados para aprimorar a experiência do usuário:
- **Passar o mouse sobre o botão** com um leve zoom e mudança de cor
- **Passar o mouse sobre o elemento do cartão** com efeitos sofisticados de sombra e borda
- **Transições suaves na rolagem da página** **Transições suaves na rolagem da página** **Carregamento do bloco de conteúdo
- Animação elegante de fade-in quando os blocos de conteúdo são carregados** **Animação elegante de fade-in quando os blocos de conteúdo são carregados** **Efeito de transição suave na rolagem

## Otimização do desempenho
- Certifique-se de que as **páginas carreguem rapidamente e evite recursos desnecessariamente grandes** **Ative o carregamento lento
- Implementar técnicas de carregamento lento** para conteúdo de páginas longas

## Requisitos de saída
- Forneça um arquivo HTML único e totalmente funcional** com todos os CSS e JavaScript necessários
- Garantir que **o código esteja em conformidade com a W3C e livre de avisos de erro**
- As páginas mantenham uma aparência e uma funcionalidade consistentes em todos os navegadores**

Requisitos de geração ###:
Dependendo do tipo de conteúdo do arquivo carregado (documento, dados, imagem etc.), crie **uma visualização da página que seja mais adequada para exibir esse conteúdo**.

Instruções de uso

fazer uso de Claude Soneto

Tenha cuidado para não exceder a janela de contexto