@ -6,6 +6,7 @@
< link rel = "stylesheet" href = "site.css" >
< / head >
< body >
< div class = "wrapper" >
< header class = "bandeau" >
< div class = "photo_titre_bandeau" >
< img src = "image/user_arpoulain.jpeg" alt = "photo" class = "image_accueil" >
@ -33,113 +34,44 @@
< / nav >
< / header >
< div class = "background" > < / div >
< div class = "background" > < / div >
< section class = "container" >
< h1 style = "text-align: center;" > Mes Projets< / h1 >
< br >
<!-- Projets personnels -->
< h2 class = "section-title" > Personnels< / h2 >
< div class = "projects-grid" >
< div class = "project-card" >
< button class = "close-btn" style = "display:none;" aria-label = "Fermer" > × < / button >
< h3 > < span style = "color:red;" > We< / span > Tube< / h3 >
< p > Appuyer pour en savoir plus< / p >
< section class = "container" >
< h1 style = "text-align: center;" > Mes Projets< / h1 >
< br >
<!-- Projets personnels -->
< h2 class = "section-title" > Personnels< / h2 >
< div class = "projects-grid" >
< div class = "project-card" >
< button class = "close-btn" style = "display:none;" aria-label = "Fermer" > × < / button >
< h3 > < span style = "color:red;" > We< / span > Tube< / h3 >
< p > Appuyer pour en savoir plus< / p >
< / div >
< / div >
< / div >
<!-- Projets universitaires -->
< h2 class = "section-title" > Universitaires< / h2 >
< div class = "projects-grid" >
< div class = "project-card" >
< button class = "close-btn" style = "display:none;" aria-label = "Fermer" > × < / button >
< h3 > Projet 1< / h3 >
< p > Appuyer pour en savoir plus< / p >
< / div >
< div class = "project-card" >
< button class = "close-btn" style = "display:none;" aria-label = "Fermer" > × < / button >
< h3 > Projet 2< / h3 >
< p > Appuyer pour en savoir plus< / p >
<!-- Projets universitaires -->
< h2 class = "section-title" > Universitaires< / h2 >
< div class = "projects-grid" >
< div class = "project-card" >
< button class = "close-btn" style = "display:none;" aria-label = "Fermer" > × < / button >
< h3 > Projet 1< / h3 >
< p > Appuyer pour en savoir plus< / p >
< / div >
< div class = "project-card" >
< button class = "close-btn" style = "display:none;" aria-label = "Fermer" > × < / button >
< h3 > Projet 2< / h3 >
< p > Appuyer pour en savoir plus< / p >
< / div >
< / div >
< / div >
< / section >
< / section >
< / div >
< footer class = "basPage" >
< p > © 2025 Poulain Arsène. Tous droits réservés.< / p >
< / footer >
< script >
// Texte par défaut et texte détaillé pour chaque projet
const details = {
"WeTube": "< strong > WeTube< / strong > est un projet personnel que j'ai commencé lors de mon année de Terminale. " +
"Il s'agit d'une plateforme de partage de vidéos, inspirée de YouTube et d'Instagram.< br > < br > " +
"J'ai eu l'idée de développer ce projet principalement pour apprendre et perfectionner mes compétences " +
"en développement web, notamment en HTML, CSS et PHP. Je gère également la base de données locale du site.< br > < br > " +
"Le site n'est pas encore terminé : certaines fonctionnalités manquent et, comme j'ai commencé ce projet au lycée, " +
"je n'ai pas pu récupérer toutes les données. De plus, avec mes études, j'ai mis ce projet de côté pour le moment.< br > < br > " +
"< em > Il devrait bientôt être disponible sur mon < u > < a href = 'https://github.com/ArsenePoulain' target = '_blank' > GitHub< / a > < / u > .< / em > ",
"Projet 1": "Projet universitaire 1 : < strong > description détaillée ici< / strong > .< br > < ul > < li > Point 1< / li > < li > Point 2< / li > < / ul > ",
"Projet 2": "Projet universitaire 2 : description détaillée ici.< br > < img src = 'image/exemple.png' alt = 'exemple' style = 'max-width:100px;' > "
};
document.querySelectorAll('.project-card').forEach(card => {
const closeBtn = card.querySelector('.close-btn');
// Fermer la carte avec la croix
closeBtn.addEventListener('click', (e) => {
e.stopPropagation();
card.classList.remove('expanded');
card.querySelector('p').textContent = "Appuyer pour en savoir plus";
closeBtn.style.display = 'none';
// Réaffiche toutes les cartes
document.querySelectorAll('.project-card').forEach(c => c.style.visibility = 'visible');
});
card.addEventListener('click', (e) => {
// Si on clique sur la croix, ne rien faire ici
if (e.target.classList.contains('close-btn')) return;
// Retire 'expanded' de toutes les cartes sauf celle cliquée
document.querySelectorAll('.project-card.expanded').forEach(expandedCard => {
if (expandedCard !== card) {
expandedCard.classList.remove('expanded');
const p = expandedCard.querySelector('p');
p.textContent = "Appuyer pour en savoir plus";
const btn = expandedCard.querySelector('.close-btn');
btn.style.display = 'none';
}
});
// Bascule 'expanded' sur la carte cliquée
card.classList.toggle('expanded');
const h3 = card.querySelector('h3');
const p = card.querySelector('p');
if (card.classList.contains('expanded')) {
// Met le texte détaillé
if (details[h3.textContent]) {
p.innerHTML = details[h3.textContent];
} else {
p.textContent = "Description détaillée du projet.";
}
closeBtn.style.display = 'block';
// Masque les autres cartes
document.querySelectorAll('.project-card').forEach(otherCard => {
if (otherCard !== card) {
otherCard.style.visibility = 'hidden';
}
});
} else {
// Remet le texte par défaut
p.textContent = "Appuyer pour en savoir plus";
closeBtn.style.display = 'none';
// Réaffiche toutes les cartes
document.querySelectorAll('.project-card').forEach(c => c.style.visibility = 'visible');
}
});
});
// ...script inchangé...
< / script >
< / body >
< / html >
Arsène Poulain
1 month ago
