Thania Brito - Site Institucional

Site institucional/portfólio desenvolvido com Astro, Tailwind CSS 4 e TypeScript com foco em performance máxima, acessibilidade e SEO.

Stack Tecnológica

• Astro 5 - Framework web focado em performance
• Tailwind CSS 4 - Framework CSS utilitário
• TypeScript - Tipagem estática
• Zero JavaScript global - Apenas quando necessário

Estrutura do Projeto

src/
├── components/
│   ├── ui/           # Componentes reutilizáveis (Button, Container)
│   ├── layout/       # Componentes de layout (Header, Footer)
│   └── hero/         # Componente Hero
├── layouts/
│   └── BaseLayout.astro  # Layout base com SEO
├── pages/
│   └── index.astro   # Página inicial
└── styles/
    └── global.css    # Estilos globais e tema Tailwind

Comandos

# Usar a versão correta do Node.js
nvm use

# Instalar dependências
npm install

# Iniciar servidor de desenvolvimento
npm run dev

# Gerar build de produção
npm run build

# Preview do build de produção
npm run preview

Requisitos

• Node.js >= 18.20.8 (recomendado: v24+)

Características

Performance

• Output estático (pre-renderizado)
• Zero JavaScript por padrão
• CSS minificado

Acessibilidade

• HTML semântico
• Skip links
• Contraste adequado
• Roles ARIA quando necessário
• Focus visible styles

SEO

• Meta tags completas
• Open Graph / Twitter Cards
• Canonical URLs

Responsividade

• Mobile-first design
• Breakpoints otimizados
• Flexbox e Grid CSS

Personalização

Imagem do Hero

Substitua o arquivo public/images/hero-bg.jpg por uma imagem de alta qualidade de Fernando de Noronha ou similar.

Cores do Tema

Edite src/styles/global.css para personalizar as cores no bloco @theme.

Redes Sociais

Edite os links em src/components/layout/Header.astro no array defaultSocialLinks.

Licença

MIT