Portfólio - Nayara Louback

Portfólio profissional responsivo desenvolvido com foco em design moderno, experiência do usuário e boas práticas de desenvolvimento web.

📋 Sobre

Página web pessoal que apresenta informações profissionais, projetos desenvolvidos e formas de contato. Design limpo e minimalista com paleta de cores escura e detalhes em roxo.

---

🛠️ Tecnologias Utilizadas

Frontend

• HTML5 - Estrutura semântica e acessível
• CSS3 - Estilos avançados com variáveis CSS, gradientes e animations
• JavaScript (Vanilla) - Interatividade e funcionalidades dinâmicas

Design & UX

• Design Responsivo - Mobile-first, suporta todos os tamanhos de tela
• Backdrop Filter - Efeitos visuais modernos
• CSS Grid & Flexbox - Layouts flexíveis e organizados
• Custom Properties (CSS Variables) - Tema consistente e fácil de manter

Performance & Acessibilidade

• Smooth Scroll - Navegação suave entre seções
• Fade-in Animations - Efeitos de entrada elegantes
• SEO Friendly - Estrutura semântica apropriada
• WCAG Compliance - Respeita padrões de acessibilidade

---

📁 Estrutura do Projeto

portifolio/
├── index.html          # Página principal (HTML semântico)
├── style.css           # Estilos globais e componentes
├── script.js           # Scripts interativos
├── img/
│   └── nayara.png      # Foto de perfil
└── README.md           # Documentação do projeto

---

🎨 Seções Principais

1. Navegação

• Menu fixo com links de âncora para seções principais
• Logo personalizado
• Efeitos hover smooth

2. Hero Section

• Apresentação profissional
• Avatar circular com foto de perfil
• Call-to-action buttons
• Tags de especialização

3. Sobre Mim

• Descrição profissional
• Tecnologias principais
• Skills com barras de progresso visual

4. Projetos

• Grid de projetos com cards interativos
• Links para demo live e repositório GitHub
• Descrições detalhadas e tags de tecnologias

5. Contato

• Links para redes sociais
• E-mail profissional
• Integração com LinkedIn e GitHub

---

🎯 Funcionalidades

✅ Design Responsivo - Funciona perfeitamente em mobile, tablet e desktop
✅ Smooth Scrolling - Navegação fluida entre seções
✅ Animations - Efeitos fade-in e hover elegantes
✅ Dark Theme - Paleta de cores profissional e moderna
✅ Links em Nova Aba - Todos os links externos abrem em nova janela
✅ Acessível - Semântica HTML apropriada e boas práticas de UX

---

🚀 Como Usar

1. Clone ou baixe o projeto

   git clone https://github.com/NayaraLF/portifolio.git

2. Abra em um navegador

   • Abra o arquivo index.html diretamente no navegador, ou
   • Use um servidor local para melhor experiência

3. Com Live Server (VS Code)

   • Instale a extensão Live Server
   • Clique com botão direito em index.html → Open with Live Server

---

📱 Responsividade

O projeto foi desenvolvido com abordagem Mobile-First e é totalmente responsivo:

• Mobile (< 768px) - Layout otimizado para telas pequenas
• Tablet (768px - 1024px) - Ajustes intermediários
• Desktop (> 1024px) - Experiência completa

---

🎨 Paleta de Cores

--bg: #0f0f13 /* Fundo principal */ --surface: #1a1a24
  /* Superfícies secundárias */ --surface2: #22222f /* Superfícies terciárias */
  --accent: #7c6af7 /* Cor primária (roxo) */ --accent2: #a78bfa
  /* Cor secundária (roxo claro) */ --text: #e8e8f0 /* Texto principal */
  --muted: #8888a8 /* Texto secundário */ --border: #2e2e42 /* Bordas */;

---

📞 Contato

• Email: nayara993@gmail.com
• LinkedIn: linkedin.com/in/nayaralf
• GitHub: github.com/NayaraLF

---

📄 Licença

Este projeto é de uso pessoal. Sinta-se livre para usar como inspiração para seu próprio portfólio.

---

👨‍💻 Desenvolvido por

Nayara Louback - Desenvolvedora Full Stack
2026