jules.merienne
/
portfoliojules
generated from Templates_CodeFirst/templateHtmlCss
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add mail service
continuous-integration/drone/push Build is passing Details

Browse Source
master
exosky12 1 month ago
parent 8d7435e9a5
commit 684baa9550
7 changed files with 79 additions and 79 deletions
Show Stats Download Patch File Download Diff File

14
.gitignore vendored
Unescape View File

@ -5,7 +5,8 @@
.LSOverride
# Icon must end with two \r
Icon
Icon
# Thumbnails
._*
@ -26,3 +27,14 @@ Network Trash Folder
Temporary Items
.apdisk
# Configuration files
config.js
# OS files
Thumbs.db
# IDE files
.vscode/
.idea/
*.sublime-*

134
contact.html
Unescape View File

@ -10,6 +10,8 @@
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<script src="navigation.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
<script src="config.js"></script>
<style>
body {
font-family: 'Inter', sans-serif;
@ -26,8 +28,7 @@
Contactez-moi
</h1>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">
Une idée de projet ? Une question ? N'hésitez pas à me contacter.
Je vous répondrai dans les plus brefs délais.
Une question ? Une idée ? N'hésitez pas à me contacter !
</p>
</div>
@ -40,7 +41,7 @@
<form id="contact-form" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-2">
Nom complet *
Nom *
</label>
<input
type="text"
@ -48,13 +49,13 @@
name="name"
required
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
placeholder="Votre nom complet"
placeholder="Votre nom"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-2">
Adresse e-mail *
Email *
</label>
<input
type="email"
@ -66,54 +67,6 @@
>
</div>
<div>
<label for="company" class="block text-sm font-medium text-gray-700 mb-2">
Entreprise (optionnel)
</label>
<input
type="text"
id="company"
name="company"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
placeholder="Nom de votre entreprise"
>
</div>
<div>
<label for="subject" class="block text-sm font-medium text-gray-700 mb-2">
Sujet *
</label>
<select
id="subject"
name="subject"
required
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
>
<option value="">Choisissez un sujet</option>
<option value="project">Nouveau projet</option>
<option value="collaboration">Collaboration</option>
<option value="consultation">Consultation</option>
<option value="other">Autre</option>
</select>
</div>
<div>
<label for="budget" class="block text-sm font-medium text-gray-700 mb-2">
Budget estimé (optionnel)
</label>
<select
id="budget"
name="budget"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
>
<option value="">Sélectionnez une fourchette</option>
<option value="5k-10k">5k - 10k €</option>
<option value="10k-25k">10k - 25k €</option>
<option value="25k-50k">25k - 50k €</option>
<option value="50k+">50k+ €</option>
</select>
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700 mb-2">
Message *
@ -124,15 +77,15 @@
rows="6"
required
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors resize-vertical"
placeholder="Décrivez votre projet ou votre demande en détail..."
placeholder="Écrivez votre message ici..."
></textarea>
</div>
<button
type="submit"
class="btn-primary w-full magnetic"
class="btn-primary w-full"
>
Envoyer le message
Envoyer
</button>
</form>
@ -141,7 +94,7 @@
<svg class="w-5 h-5 text-green-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<p class="text-green-800">Message envoyé avec succès ! Je vous répondrai bientôt.</p>
<p class="text-green-800">Message envoyé ! Je vous répondrai bientôt.</p>
</div>
</div>
@ -150,7 +103,7 @@
<svg class="w-5 h-5 text-red-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<p class="text-red-800">Une erreur s'est produite. Veuillez réessayer ou me contacter directement.</p>
<p class="text-red-800">Une erreur s'est produite. Veuillez réessayer.</p>
</div>
</div>
</div>
@ -158,7 +111,7 @@
<div class="space-y-8">
<div class="bg-gray-50 rounded-xl p-8 animate-on-scroll" data-animation="fade-up" data-delay="200">
<h2 class="text-2xl font-bold text-gray-900 mb-6">
Informations de contact
Me contacter
</h2>
<div class="space-y-4">
@ -169,7 +122,7 @@
</svg>
</div>
<div>
<p class="text-sm text-gray-600">E-mail</p>
<p class="text-sm text-gray-600">Email</p>
<a href="mailto:julesmerienne06@gmail.com" class="text-gray-900 font-medium hover:text-blue-600">
julesmerienne06@gmail.com
</a>
@ -185,7 +138,7 @@
</div>
<div>
<p class="text-sm text-gray-600">Localisation</p>
<p class="text-gray-900 font-medium">Clermont-Ferrand, Disponible à distance</p>
<p class="text-gray-900 font-medium">Clermont-Ferrand</p>
</div>
</div>
</div>
@ -193,7 +146,7 @@
<div class="bg-gray-50 rounded-xl p-8 animate-on-scroll" data-animation="fade-up" data-delay="300">
<h3 class="text-xl font-bold text-gray-900 mb-4">
Retrouvez-moi sur
Mes réseaux
</h3>
<div class="flex space-x-4">
@ -205,7 +158,7 @@
<a href="https://github.com/exosky12" target="_blank" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center text-white hover:bg-gray-900 transition-all duration-300 hover:scale-110">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.665-.305-5.467-1.334-5.467-5.931 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/>
</svg>
</a>
@ -216,16 +169,6 @@
</a>
</div>
</div>
<div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-xl p-8 animate-on-scroll" data-animation="fade-up" data-delay="400">
<h3 class="text-xl font-bold text-gray-900 mb-4">
Disponibilité
</h3>
<div class="flex items-center">
<div class="w-3 h-3 bg-green-500 rounded-full mr-3 animate-pulse"></div>
<span class="text-gray-900 font-medium">Disponible pour de nouveaux projets</span>
</div>
</div>
</div>
</div>
</div>
@ -281,6 +224,51 @@
<script>
document.addEventListener('DOMContentLoaded', function() {
initNavigation('contact');
// Initialize EmailJS
emailjs.init(config.EMAILJS_PUBLIC_KEY);
// Handle form submission
const form = document.getElementById('contact-form');
const successMessage = document.getElementById('form-success');
const errorMessage = document.getElementById('form-error');
form.addEventListener('submit', function(e) {
e.preventDefault();
// Show loading state
const submitButton = form.querySelector('button[type="submit"]');
const originalText = submitButton.innerHTML;
submitButton.innerHTML = 'Envoi en cours...';
submitButton.disabled = true;
// Get form data
const formData = {
name: document.getElementById('name').value,
email: document.getElementById('email').value,
message: document.getElementById('message').value
};
// Send email using EmailJS
emailjs.send(config.EMAILJS_SERVICE_ID, config.EMAILJS_TEMPLATE_ID, formData)
.then(function() {
// Show success message
successMessage.classList.remove('hidden');
errorMessage.classList.add('hidden');
form.reset();
})
.catch(function(error) {
// Show error message
errorMessage.classList.remove('hidden');
successMessage.classList.add('hidden');
console.error('Error:', error);
})
.finally(function() {
// Reset button state
submitButton.innerHTML = originalText;
submitButton.disabled = false;
});
});
});
</script>
</body>

BIN
images/cv.pdf
View File

Binary file not shown.

4
navigation.js
Unescape View File

@ -319,9 +319,9 @@ function createNavigation(activePage = 'home') {
if (!document.getElementById('cv-download-btn')) {
const cvButton = document.createElement('a');
cvButton.id = 'cv-download-btn';
cvButton.href = '../assets/cv.pdf';
cvButton.href = 'images/cv.pdf';
cvButton.className = 'cv-download-btn';
cvButton.download = true;
cvButton.setAttribute('download', 'cv-jules-merienne.pdf');
cvButton.title = 'Télécharger mon CV';
cvButton.innerHTML = `Télécharger CV <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>`;
document.body.appendChild(cvButton);

2
projets/ateliermerienne.html
Unescape View File

@ -365,7 +365,7 @@
});
</script>
<a id="cv-download-btn" href="../images/cv.pdf" class="cv-download-btn" download title="Télécharger mon CV">
<a id="cv-download-btn" href="../images/cv.pdf" class="cv-download-btn" download="cv-jules-merienne.pdf" title="Télécharger mon CV">
Télécharger CV
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="margin-left:4px;width:18px;height:18px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
</a>

2
projets/duckandcover.html
Unescape View File

@ -366,7 +366,7 @@
});
</script>
<a id="cv-download-btn" href="../images/cv.pdf" class="cv-download-btn" download title="Télécharger mon CV">
<a id="cv-download-btn" href="../images/cv.pdf" class="cv-download-btn" download="cv-jules-merienne.pdf" title="Télécharger mon CV">
Télécharger CV
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="margin-left:4px;width:18px;height:18px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
</a>

2
projets/skillupnow.html
Unescape View File

@ -254,7 +254,7 @@
});
</script>
<a id="cv-download-btn" href="../images/cv.pdf" class="cv-download-btn" download title="Télécharger mon CV">
<a id="cv-download-btn" href="../images/cv.pdf" class="cv-download-btn" download="cv-jules-merienne.pdf" title="Télécharger mon CV">
Télécharger CV
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="margin-left:4px;width:18px;height:18px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
</a>

Write Preview
Loading…
Cancel
Save