🚀 Gabriel Motta | Portfólio

Portfólio profissional de Gabriel Motta: desenvolvimento web, inteligência artificial e análise de dados.

📋 Sobre o Projeto

Este é meu portfólio pessoal, construído com as tecnologias mais modernas do ecossistema React. O projeto apresenta meus projetos, habilidades e experiências profissionais de forma interativa e responsiva.

Acesse ao vivo: gmotta.space

✨ Características

• 🌓 Modo Escuro/Claro - Alternância suave entre temas
• 🌍 Multilíngue - Suporte para Português e Inglês (i18next)
• 🎨 Animações Fluidas - Framer Motion para transições elegantes
• 📱 Totalmente Responsivo - Design adaptável para todos os dispositivos
• ⚡ Performance Otimizada - Vite para builds ultra-rápidos
• 📊 Analytics Integrado - Vercel Analytics e Google Analytics 4
• 🎯 SEO Optimizado - Meta tags, Open Graph e Structured Data
• 🔍 TypeScript - Tipagem estática para maior segurança

🛠️ Tecnologias Utilizadas

Frontend

• React 18.3 - Biblioteca UI
• TypeScript 5.8 - Superset JavaScript tipado
• Vite 6.3 - Build tool e dev server
• React Router 7 - Roteamento client-side
• Tailwind CSS 3.4 - Framework CSS utility-first
• Framer Motion 12 - Biblioteca de animações

Internacionalização

• i18next 24 - Framework de internacionalização
• react-i18next 15 - Bindings React para i18next

Estado e Persistência

• Zustand 5 - Gerenciamento de estado leve

Analytics e SEO

• Vercel Analytics - Análise de performance
• Google Analytics 4 - Análise de comportamento do usuário
• React Helmet Async - Gerenciamento de meta tags

UI Components

• Lucide React - Ícones modernos
• class-variance-authority - Variantes de estilo
• tailwind-merge - Merge inteligente de classes
• tailwindcss-animate - Animações Tailwind

Backend (API de Contato)

• Express 4 - Framework Node.js
• Resend - Serviço de envio de emails
• CORS - Cross-Origin Resource Sharing
• dotenv - Variáveis de ambiente

🚀 Começando

Pré-requisitos

• Node.js 18+ instalado
• npm ou pnpm (gerenciador de pacotes)

Instalação

# Clone o repositório
git clone https://github.com/devgmotta/portifolio.git

# Entre no diretório
cd portifolio

# Instale as dependências
npm install

Configuração de Variáveis de Ambiente

Crie arquivos .env.development e .env.production baseados no .env.example:

# .env.development
VITE_RESEND_API_KEY=sua_chave_resend_aqui
VITE_CONTACT_EMAIL=seu_email@exemplo.com
# Adicione outras variáveis conforme necessário

Executando Localmente

# Apenas o frontend (modo desenvolvimento)
npm run dev

# Frontend + Backend (API de contato)
npm run dev:full

# Apenas a API
npm run dev:api

O projeto estará disponível em http://localhost:5173

Build para Produção

# Compilar TypeScript e criar build
npm run build

# Pré-visualizar build de produção
npm run preview

# Verificar tipos sem compilar
npm run check

📁 Estrutura do Projeto

portifolio/
├── public/              # Arquivos estáticos
├── src/
│   ├── components/      # Componentes React
│   ├── pages/          # Páginas da aplicação
│   ├── hooks/          # Custom hooks
│   ├── utils/          # Funções utilitárias
│   ├── i18n/           # Traduções
│   ├── styles/         # Estilos globais
│   └── main.tsx        # Entry point
├── server.js           # API Express (contato)
├── index.html          # Template HTML
├── tailwind.config.js  # Configuração Tailwind
├── vite.config.ts      # Configuração Vite
└── vercel.json         # Configuração Vercel

🌐 Deploy

Este projeto está configurado para deploy automático na Vercel:

1. Conecte seu repositório GitHub à Vercel
2. Configure as variáveis de ambiente no dashboard da Vercel
3. Cada push para main dispará um deploy automático

📝 Scripts Disponíveis

Comando	Descrição
npm run dev	Inicia servidor de desenvolvimento
npm run dev:api	Inicia apenas a API Express
npm run dev:full	Inicia frontend + backend simultaneamente
npm run build	Build de produção
npm run preview	Pré-visualiza build de produção
npm run lint	Executa ESLint
npm run check	Verifica tipos TypeScript

🎨 Personalização

Cores do Tema

As cores principais podem ser ajustadas em tailwind.config.js:

colors: {
  primary: { /* suas cores */ },
  secondary: { /* suas cores */ },
  // ...
}

Traduções

Adicione ou edite traduções em src/i18n/locales/:

• pt-BR.json - Português Brasileiro
• en-US.json - Inglês

📊 SEO e Performance

• Lighthouse Score: 95+ em todas as categorias
• Meta Tags: Configuradas para melhor indexação
• Open Graph: Otimizado para compartilhamento social
• Schema.org: Structured data para rich snippets
• Sitemap: Gerado automaticamente
• Analytics: Google Analytics 4 + Vercel Analytics

🤝 Contribuindo

Contribuições são bem-vindas! Sinta-se à vontade para:

1. Fazer fork do projeto
2. Criar uma branch para sua feature (git checkout -b feature/AmazingFeature)
3. Commit suas mudanças (git commit -m 'Add some AmazingFeature')
4. Push para a branch (git push origin feature/AmazingFeature)
5. Abrir um Pull Request

📄 Licença

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

📫 Contato

Gabriel Motta

• 🌐 Website: gmotta.space
• 📧 Email: devgmleite@gmail.com
• 💼 LinkedIn: devgmotta
• 🐙 GitHub: devgmotta

---

Feito com ❤️ por Gabriel Motta

_{Se você gostou do projeto, considere dar uma ⭐!}