Portfólio Matheus Melo

Portfólio profissional de Matheus Melo, especialista em Blockchain, IA e Tecnologias Emergentes.

🚀 Funcionalidades

• Design Responsivo: Layout adaptável para desktop, tablet e mobile
• Flip Cards Interativos: Cards que giram para revelar informações adicionais
• Agentes de IA: Integração com Gemini API para gerar planos de automação e explicar conceitos de blockchain
• Animações Suaves: Transições e microinterações para melhor experiência do usuário
• Cards de Contato Interativos: Sistema de cópia de informações de contato
• Linha do Tempo: Jornada profissional com timeline visual
• Seção de Projetos: Apresentação de projetos relevantes com métricas de impacto

🛠️ Tecnologias Utilizadas

• HTML5: Estrutura semântica
• Tailwind CSS: Framework CSS utilitário
• JavaScript: Interatividade e funcionalidades dinâmicas
• Node.js: Servidor backend para API
• Gemini API: Inteligência artificial para funcionalidades interativas
• Font Awesome: Ícones
• Google Fonts: Tipografia (Inter)

📦 Instalação

1. Clone o repositório:

git clone [url-do-repositorio]
cd site-portifolio

2. Instale as dependências:

npm install

3. Configure as variáveis de ambiente: Crie um arquivo .env na raiz do projeto:

GEMINI_API_KEY=sua_chave_api_aqui
PORT=3000

4. Compile o CSS:

npm run build

5. Inicie o servidor:

npm start

🎨 Desenvolvimento

Para desenvolvimento com hot-reload do CSS:

npm run dev

📁 Estrutura do Projeto

site-portifolio/
├── index.html              # Página principal
├── script.js               # JavaScript principal
├── output.css              # CSS compilado
├── src/
│   └── input.css           # CSS fonte (Tailwind)
├── server/
│   ├── server.js           # Servidor Node.js
│   └── package.json        # Dependências do servidor
├── tailwind.config.js      # Configuração do Tailwind
├── package.json            # Dependências principais
└── README.md               # Este arquivo

🔧 Configuração da API

O projeto utiliza a API do Gemini para funcionalidades de IA. Para configurar:

1. Obtenha uma chave API do Google AI Studio
2. Adicione a chave ao arquivo .env
3. O servidor Node.js processa as requisições e protege sua chave API

🎯 Funcionalidades Principais

Flip Cards

• Cards interativos que giram ao clicar
• Informações adicionais no verso
• Botões de ação para funcionalidades de IA

Agentes de IA

• Plano de Automação: Gera planos personalizados baseados em problemas descritos
• Explicador de Blockchain: Explica conceitos técnicos de forma simples

Cards de Contato

• Sistema de cópia de informações
• Feedback visual ao copiar
• Links diretos para redes sociais

🚀 Deploy

Vercel (Recomendado)

1. Conecte seu repositório ao Vercel
2. Configure as variáveis de ambiente
3. Deploy automático a cada push

Outras Plataformas

• Netlify
• GitHub Pages (apenas frontend)
• Heroku

📱 Responsividade

O site é totalmente responsivo com breakpoints:

• Mobile: < 640px
• Tablet: 640px - 1024px
• Desktop: > 1024px

🎨 Personalização

Cores

• Fundo: zinc-950 (preto escuro)
• Destaque: yellow-400/500 (amarelo)
• Texto: white e zinc-300

Tipografia

• Fonte principal: Inter (Google Fonts)
• Pesos: 300, 400, 500, 600, 700

🤝 Contribuição

1. Fork o projeto
2. Crie uma branch para sua feature
3. Commit suas mudanças
4. Push para a branch
5. Abra um Pull Request

📄 Licença

Este projeto está sob a licença ISC.

👨‍💻 Autor

Matheus Melo

• LinkedIn: linkedin.com/in/matheus-melo-3ab20b325
• Instagram: @0matheusmelo
• YouTube: @omatheusmelo0