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.
2.9 KiB
2.9 KiB
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
- Allez sur EmailJS.com
- Créez un compte gratuit (jusqu'à 200 emails/mois)
- Connectez-vous à votre dashboard
2. Configurer le service email
- Dans votre dashboard EmailJS, allez dans Email Services
- Cliquez sur Add New Service
- Choisissez votre fournisseur email (Gmail, Outlook, etc.)
- Suivez les instructions pour connecter votre compte email
- Notez votre Service ID (ex:
service_xyz123)
3. Créer un template d'email
- Allez dans Email Templates
- Cliquez sur Create New Template
- 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.
- Notez votre Template ID (ex:
template_abc456)
4. Obtenir votre clé publique
- Allez dans Account > General
- Trouvez votre Public Key (ex:
user_def789)
5. Configurer les variables d'environnement
Créez un fichier .env à la racine de votre projet :
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
- Remplissez les variables d'environnement
- Redémarrez votre serveur de développement
- Testez le formulaire de contact
- 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'emailssrc/components/Contact.tsx- Intégration du servicesrc/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 !