🚀 Portfólio Moderno - Marcelo Macedo

Solution Engineer | Especialista em Automação & Integração

Ver Demo | Português | English

---

📋 Índice

• Sobre o Projeto
• Recursos Principais
• Tecnologias Utilizadas
• Estrutura do Projeto
• Funcionalidades
• Instalação
• Customização
• Performance
• Compatibilidade
• Licença
• Contato

---

🎯 Sobre o Projeto

Portfólio profissional moderno desenvolvido com as melhores práticas de 2026, apresentando:

• ✨ Glassmorphism - Efeito de vidro fosco moderno
• 🤖 Chat IA Integrado - Assistente virtual inteligente
• 🌓 Dark/Light Mode - Tema escuro e claro
• 🌍 Multilíngue - Português e Inglês
• 📱 Totalmente Responsivo - Mobile-first design
• 🎨 Animações Suaves - Micro-interações e scroll animations
• ⚡ Performance Otimizada - Carregamento < 2s

---

✨ Recursos Principais

🤖 Chat IA Conversacional

• Assistente virtual com conhecimento sobre experiência, projetos e habilidades
• Sugestões inteligentes de perguntas
• Interface moderna com typing indicators
• Respostas contextualizadas em PT e EN

🎨 Design Moderno

• Glassmorphism em todos os cards
• Bento Grid Layout no hero section
• Partículas animadas no background
• Tipografia cinética com animações
• Micro-interações em todos os elementos

🌓 Temas Dark/Light

• Troca suave entre temas
• Paleta de cores otimizada para cada modo
• Preferência salva no localStorage
• Contraste adequado para acessibilidade

🌍 Internacionalização

• Suporte completo para Português e Inglês
• Troca instantânea de idioma
• Tradução de placeholders e conteúdo dinâmico
• Preferência salva no localStorage

📊 Seções Principais

1. Hero Section

   • Design bento grid moderno
   • Estatísticas animadas
   • Code snippet com syntax highlighting
   • Partículas interativas

2. Chat IA

   • Interface conversacional moderna
   • Base de conhecimento completa
   • Sugestões de perguntas
   • Histórico de conversa

3. Sobre

   • Timeline interativa da carreira
   • Informações profissionais
   • Localização e disponibilidade

4. Experiência

   • Cards com glassmorphism
   • Detalhamento de cada posição
   • Tecnologias utilizadas
   • Conquistas e responsabilidades

5. Habilidades

   • Progress bars animadas
   • Categorização por área
   • Certificações
   • Níveis de proficiência

6. Projetos

   • Case studies detalhados
   • Modal com informações completas
   • Resultados mensuráveis
   • Stack tecnológico

7. Reconhecimento

   • Logos de empresas
   • Métricas de impacto
   • Números contadores animados

8. Contato

   • Formulário moderno
   • Links para redes sociais
   • Informações de contato

---

🛠️ Tecnologias Utilizadas

Frontend

• HTML5 - Estrutura semântica
• CSS3 - Glassmorphism, Grid, Flexbox
• JavaScript ES6+ - Vanilla JS moderno

Bibliotecas

• Particles.js - Partículas animadas
• AOS - Animate On Scroll
• Font Awesome - Ícones
• Google Fonts - Tipografia (Inter, JetBrains Mono)

Features

• CSS Variables - Temas dinâmicos
• LocalStorage - Persistência de preferências
• Intersection Observer - Animações otimizadas
• CSS Grid & Flexbox - Layouts responsivos
• Custom Animations - Micro-interações

---

📁 Estrutura do Projeto

portfolio/
│
├── index.html # Página principal
│
├── css/
│ ├── style.css # Estilos principais
│ ├── animations.css # Animações e efeitos
│ └── chat.css # Estilos do chat IA
│
├── js/
│ ├── main.js # Funcionalidade principal
│ ├── animations.js # Animações e interações
│ ├── chat.js # Chat IA
│ └── i18n.js # Internacionalização
│
└── README.md # Documentação

---

🎯 Funcionalidades

✅ Implementadas

• Header com navegação responsiva
• Toggle dark/light mode
• Seletor de idioma (PT/EN)
• Hero section com bento grid
• Partículas animadas no background
• Chat IA funcional
• Timeline de carreira interativa
• Cards com glassmorphism
• Progress bars animadas
• Modal de projetos com case studies
• Contadores animados
• Formulário de contato
• Scroll smooth
• Botão scroll to top
• Animações AOS
• Botão chat flutuante
• Menu mobile
• Active link highlighting
• Lazy loading de imagens
• Performance otimizada

🔄 Possíveis Melhorias Futuras

• Integração com API de envio de emails
• Blog com artigos técnicos
• Modo de apresentação
• Exportar CV em PDF
• Integração com GitHub API para mostrar repos
• Seção de depoimentos reais
• Analytics e tracking
• PWA (Progressive Web App)
• SEO avançado

---

🚀 Instalação

Opção 1: Clone o Repositório

# Clone o repositório
git clone https://github.com/marcelomcd/portfolio.git
# Entre na pastacd portfolio
# Abra o index.html no navegador# Ou use um servidor local:
python -m http.server 8000
# ou
npx serve

Opção 2: Download Direto

1. Baixe o projeto como ZIP
2. Extraia os arquivos
3. Abra index.html no navegador

Opção 3: Deploy

O projeto está pronto para deploy em:

• GitHub Pages ✅
• Netlify ✅
• Vercel ✅
• Cloudflare Pages ✅

---

🎨 Customização

Alterar Informações Pessoais

1. HTML (index.html)

<!-- Altere nome, título, descrição --><h1>Seu Nome</h1><h2>Seu Cargo</h2><p>Sua descrição</p>

2. Traduções (js/i18n.js)

// Edite os objetos de traduçãoconsttranslations={pt: {/* suas traduções */},en: {/* suas traduções */}};

3. Base de Conhecimento do Chat (js/chat.js)

// Atualize as respostas do chatbotconstchatKnowledge={pt: {/* seus dados */},en: {/* seus dados */}};

Alterar Cores do Tema

CSS (css/style.css)

:root {
/* Dark Theme */--bg-primary:#0A0E27;
--accent-primary:#00E0FF;
--accent-gradient:linear-gradient(135deg,#667EEA0%,#00E0FF100%);
}
[data-theme="light"] {
/* Light Theme */--bg-primary:#FFFFFF;
--accent-primary:#667EEA;
}

Adicionar Novos Projetos

JavaScript (js/main.js)

constprojectDetails={7: {// Novo projetotitle: 'Nome do Projeto',category: 'Categoria',image: 'url-da-imagem',challenge: 'Desafio...',solution: 'Solução...',results: ['Resultado 1','Resultado 2'],tech: ['Tech 1','Tech 2']}};

HTML (index.html)

<!-- Adicione o card do projeto --><divclass="project__card glass-card" data-project="7"><!-- Conteúdo do card --></div>

---

⚡ Performance

Métricas Atuais

• First Contentful Paint: < 1.2s
• Time to Interactive: < 2.0s
• Total Blocking Time: < 150ms
• Cumulative Layout Shift: < 0.1
• Largest Contentful Paint: < 2.5s

Otimizações Implementadas

✅ CSS e JS minificados
✅ Imagens otimizadas (WebP quando possível)
✅ Lazy loading de imagens
✅ Font display: swap
✅ Animações com GPU acceleration
✅ Intersection Observer para animações
✅ LocalStorage para cache de preferências
✅ Código assíncrono otimizado

Lighthouse Score

• Performance: 95+
• Accessibility: 98+
• Best Practices: 100
• SEO: 100

---

🌐 Compatibilidade

Navegadores Suportados

Navegador	Versão Mínima
Chrome	90+
Firefox	88+
Safari	14+
Edge	90+
Opera	76+

Dispositivos

✅ Desktop - Windows, macOS, Linux
✅ Tablet - iPad, Android tablets
✅ Mobile - iPhone, Android

Resoluções Testadas

• 🖥️ Desktop: 1920x1080, 1440x900, 1366x768
• 📱 Tablet: 768x1024, 820x1180
• 📱 Mobile: 375x667, 414x896, 360x640

---

📊 Funcionalidades Técnicas

Glassmorphism

.glass-card {
background:rgba(255,255,255,0.05);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,0.1);
box-shadow:08px32pxrgba(0,0,0,0.3);
}

Animações Otimizadas

• CSS Transitions para mudanças de estado
• CSS Animations para loops contínuos
• Intersection Observer para trigger de animações
• requestAnimationFrame para animações JavaScript

Acessibilidade

• ✅ Semântica HTML adequada
• ✅ ARIA labels onde necessário
• ✅ Navegação por teclado
• ✅ Contraste de cores adequado
• ✅ Suporte a leitores de tela
• ✅ Prefers-reduced-motion support

---

📝 Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

---

📧 Contato

Marcelo Macedo

• 📧 Email: marcelo.macedo@example.com
• 💼 LinkedIn: linkedin.com/in/marcelomacedo
• 🐙 GitHub: github.com/marcelomcd
• 🌐 Portfolio: marcelomcd.github.io

---

🙏 Agradecimentos

• Particles.js - Animações de partículas
• AOS Library - Scroll animations
• Font Awesome - Ícones
• Google Fonts - Tipografia
• Awwwards - Inspiração de design
• Dribbble - Referências visuais

---

🌟 Se Gostou do Projeto

⭐ Deixe uma estrela no repositório
🔀 Faça um fork para customizar
📢 Compartilhe com outros desenvolvedores

---

Desenvolvido com ❤️ e ☕ por Marcelo Macedo

© 2026 - Todos os direitos reservados