a4b4423ff4
- Removed outdated CV file and replaced with a new image for the profile. - Implemented a new email service using EmailJS for contact form submissions. - Enhanced the contact form to handle errors and success messages. - Updated the About section for grammatical accuracy. - Modified the Hero component to link to the new CV file and updated GitHub profile link. - Updated project links to point to the correct GitHub repositories. - Improved styling for error messages and avatar image with hover effects.
105 lines
2.9 KiB
Markdown
105 lines
2.9 KiB
Markdown
# Configuration EmailJS pour le Portfolio
|
|
|
|
Ce guide vous explique comment configurer EmailJS pour que le formulaire de contact de votre portfolio fonctionne réellement.
|
|
|
|
## 1. Créer un compte EmailJS
|
|
|
|
1. Allez sur [EmailJS.com](https://www.emailjs.com/)
|
|
2. Créez un compte gratuit (jusqu'à 200 emails/mois)
|
|
3. Connectez-vous à votre dashboard
|
|
|
|
## 2. Configurer le service email
|
|
|
|
1. Dans votre dashboard EmailJS, allez dans **Email Services**
|
|
2. Cliquez sur **Add New Service**
|
|
3. Choisissez votre fournisseur email (Gmail, Outlook, etc.)
|
|
4. Suivez les instructions pour connecter votre compte email
|
|
5. Notez votre **Service ID** (ex: `service_xyz123`)
|
|
|
|
## 3. Créer un template d'email
|
|
|
|
1. Allez dans **Email Templates**
|
|
2. Cliquez sur **Create New Template**
|
|
3. Configurez votre template avec ces variables :
|
|
- `{{from_name}}` - Nom de l'expéditeur
|
|
- `{{from_email}}` - Email de l'expéditeur
|
|
- `{{subject}}` - Sujet du message
|
|
- `{{message}}` - Corps du message
|
|
|
|
Exemple de template :
|
|
```
|
|
Nouveau message depuis votre portfolio
|
|
|
|
De: {{from_name}} ({{from_email}})
|
|
Sujet: {{subject}}
|
|
|
|
Message:
|
|
{{message}}
|
|
|
|
---
|
|
Ce message a été envoyé depuis votre formulaire de contact.
|
|
```
|
|
|
|
4. Notez votre **Template ID** (ex: `template_abc456`)
|
|
|
|
## 4. Obtenir votre clé publique
|
|
|
|
1. Allez dans **Account** > **General**
|
|
2. Trouvez votre **Public Key** (ex: `user_def789`)
|
|
|
|
## 5. Configurer les variables d'environnement
|
|
|
|
Créez un fichier `.env` à la racine de votre projet :
|
|
|
|
```env
|
|
VITE_EMAILJS_SERVICE_ID=your_service_id_here
|
|
VITE_EMAILJS_TEMPLATE_ID=your_template_id_here
|
|
VITE_EMAILJS_PUBLIC_KEY=your_public_key_here
|
|
```
|
|
|
|
## 6. Sécurité et limitations
|
|
|
|
### Version gratuite d'EmailJS :
|
|
- 200 emails par mois maximum
|
|
- Pas de limitation de domaine
|
|
- Support communautaire
|
|
|
|
### Pour la production :
|
|
- Considérez un plan payant pour plus d'emails
|
|
- Ajoutez une validation côté serveur si nécessaire
|
|
- Implémentez un captcha pour éviter le spam
|
|
|
|
## 7. Test du formulaire
|
|
|
|
1. Remplissez les variables d'environnement
|
|
2. Redémarrez votre serveur de développement
|
|
3. Testez le formulaire de contact
|
|
4. Vérifiez la réception de l'email
|
|
|
|
## 8. Dépannage
|
|
|
|
### Erreurs communes :
|
|
|
|
**"Invalid template ID"**
|
|
- Vérifiez que le Template ID est correct
|
|
- Assurez-vous que le template est publié
|
|
|
|
**"Forbidden"**
|
|
- Vérifiez votre Public Key
|
|
- Assurez-vous que le service est actif
|
|
|
|
**Email non reçu**
|
|
- Vérifiez vos spams
|
|
- Vérifiez la configuration du service email
|
|
- Testez depuis le dashboard EmailJS
|
|
|
|
### Fallback automatique
|
|
Si EmailJS ne fonctionne pas, le système bascule automatiquement vers `mailto:` pour ouvrir le client email par défaut de l'utilisateur.
|
|
|
|
## 9. Fichiers modifiés
|
|
|
|
- `src/services/emailService.ts` - Service d'envoi d'emails
|
|
- `src/components/Contact.tsx` - Intégration du service
|
|
- `src/styles/components/_contact.scss` - Styles des messages d'erreur
|
|
|
|
Le formulaire de contact est maintenant prêt à fonctionner avec une vraie logique d'envoi d'emails ! |