Portfólio pessoal moderno e responsivo desenvolvido com as mais recentes tecnologias web. Apresenta experiência profissional, habilidades técnicas, projetos e recomendações de forma elegante e interativa.
- 🌐 Multilíngue - Suporte completo para Português e Inglês
- 🌙 Dark Mode - Tema escuro/claro com persistência
- 📱 Responsivo - Design adaptativo para todos os dispositivos
- ⚡ Performance - Site estático ultra-rápido
- 🎨 Animações - Transições suaves e modernas
- 📧 Formulário de Contato - Integração com EmailJS
- 🎠 Carrossel de Recomendações - Com autoplay e navegação
- 🔍 SEO Otimizado - Meta tags e estrutura semântica
- Node.js 18+ instalado
- Conta no EmailJS (opcional, para formulário de contato)
git clone https://github.com/Imperiali/imperiali.git
cd imperiali
npm install- Copie o arquivo de exemplo:
cp .env.example .env- Configure suas credenciais EmailJS no
.env:
PUBLIC_EMAILJS_SERVICE_ID=seu_service_id
PUBLIC_EMAILJS_TEMPLATE_ID=seu_template_id
PUBLIC_EMAILJS_AUTOREPLY_ID=seu_autoreply_id
PUBLIC_EMAILJS_PUBLIC_KEY=sua_public_keynpm run devAcesse em http://localhost:5173
npm run build
npm run previewigor-portfolio/ ├── src/ │ ├── routes/ │ │ ├── +page.svelte # Página principal │ │ ├── +layout.svelte # Layout base │ │ └── +layout.js # Configuração de pré-render │ ├── app.css # Estilos globais com Tailwind │ └── app.html # Template HTML base ├── static/ # Arquivos estáticos ├── package.json ├── svelte.config.js ├── tailwind.config.js └── vite.config.js
## 🎨 Características
- **Design Moderno**: Interface limpa e profissional
- **Responsivo**: Adaptado para todos os dispositivos
- **Performance**: Site estático ultra-rápido
- **SEO**: Meta tags otimizadas
- **Acessibilidade**: Navegação e semântica adequadas
- **i18n**: Suporte multilíngue (Português e Inglês) com troca dinâmica
- **Carrossel de Recomendações**: Navegação interativa com autoplay e controles
- **Seção de Projetos**: Design minimalista com ícones SVG grandes, tech stack e links
- **Formulário de Contato**: Integração com EmailJS para receber mensagens diretamente
## 📝 Customização
### Cores
As cores principais podem ser ajustadas em `tailwind.config.js`:
```js
colors: {
primary: { ... }
}
As traduções estão em src/lib/i18n/translations/:
pt.js- Portuguêsen.js- Inglês
Para adicionar um novo idioma:
- Crie um novo arquivo em
src/lib/i18n/translations/ - Adicione-o ao
index.js - Adicione a bandeira no componente
LanguageSwitcher.svelte
O idioma selecionado é salvo no localStorage do navegador.
A seção de projetos usa um design minimalista com ícones SVG grandes ao fundo.
Para editar os projetos:
- Abra
src/lib/i18n/translations/pt.jseen.js - Edite a seção
projects.items - Escolha um ícone disponível:
search,weather,location,shopping,vue,flutter - Para adicionar novos ícones, edite
src/lib/components/ProjectIcons.svelte
O formulário usa EmailJS para enviar emails. Para configurar:
- Crie uma conta gratuita em EmailJS
- Configure um serviço de email
- Crie 2 templates:
- 1 template principal (você recebe o contato)
- 1 auto-reply bilíngue (resposta automática para usuário)
- Obtenha as credenciais (Service ID, Template IDs, Public Key)
- Crie um arquivo
.envna raiz do projeto (copie de.env.example) - Adicione suas credenciais no arquivo
.env:PUBLIC_EMAILJS_SERVICE_ID=seu_service_id PUBLIC_EMAILJS_TEMPLATE_ID=template_principal PUBLIC_EMAILJS_AUTOREPLY_ID=autoreply PUBLIC_EMAILJS_PUBLIC_KEY=sua_public_key
- Veja templates prontos em
EMAIL_TEMPLATES.mde instruções emEMAILJS_SETUP.md
Nota: O projeto funciona sem configuração, mas os emails não serão enviados até que você configure o EmailJS.
O projeto está configurado com GitHub Actions para deploy automático.
-
Fork/Clone este repositório
-
Configure o GitHub Pages:
- Vá em
Settings→Pages - Em Source, selecione
GitHub Actions
- Vá em
-
Adicione as Secrets:
- Vá em
Settings→Secrets and variables→Actions - Adicione as seguintes secrets:
PUBLIC_EMAILJS_SERVICE_IDPUBLIC_EMAILJS_TEMPLATE_IDPUBLIC_EMAILJS_AUTOREPLY_IDPUBLIC_EMAILJS_PUBLIC_KEY
- Vá em
-
Configure o Base Path:
- Abra
svelte.config.js - Altere o
basepara o nome do seu repositório:
paths: { base: process.env.NODE_ENV === 'production' ? '/nome-do-seu-repo' : '' }
- Abra
-
Push para Main:
git add . git commit -m "Configure GitHub Pages" git push origin main
-
Aguarde o Deploy:
- O GitHub Actions irá buildar e fazer deploy automaticamente
- Acesse em:
https://Imperiali.github.io/imperiali/
O projeto também pode ser hospedado em:
- Vercel -
npm install -g vercel && vercel - Netlify - Arraste a pasta
build/no dashboard - Cloudflare Pages - Conecte o repositório no dashboard
Contribuições são bem-vindas! Sinta-se à vontade para:
- Fork o projeto
- Crie uma branch para sua feature (
git checkout -b feature/AmazingFeature) - Commit suas mudanças (
git commit -m 'Add some AmazingFeature') - Push para a branch (
git push origin feature/AmazingFeature) - Abra um Pull Request
Este projeto é de código aberto e está disponível sob a MIT License.
Igor Imperiali
- 💼 LinkedIn: igor-imperiali
- 📧 Email: igor.imperiali@gmail.com
- 🌐 Portfolio: imperiali.github.io/imperiali
