finalisation portfolio version pc

Projets.html

@@ -54,12 +54,12 @@
                 <div class="projects-grid">
                     <div class="project-card">
                         <button class="close-btn" style="display:none;" aria-label="Fermer">&times;</button>
-                        <h3>Projet 1</h3>
+                        <h3>Kingdomino</h3>
                         <p>Appuyer pour en savoir plus</p>
                     </div>
                     <div class="project-card">
                         <button class="close-btn" style="display:none;" aria-label="Fermer">&times;</button>
-                        <h3>Projet 2</h3>
+                        <h3>ChesSAE</h3>
                         <p>Appuyer pour en savoir plus</p>
                     </div>
                 </div>
@@ -71,7 +71,94 @@
         </footer>
 
         <script>
-        // ...script inchangé...
+// 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>" +
+    "<br><img src='image/accueil_wetube.png' style='max-width:250px; height:auto; display:block; margin:20px auto;'>",
+
+    "Kingdomino": "<strong>Kingdomino</strong> est un projet réalisé en groupe en fin de première année de BUT Informatique. " +
+        "L'objectif était de reproduire le jeu de société Kingdomino sous forme d'application, en utilisant <strong>C#</strong> et <strong>.NET MAUI</strong> pour le développement, avec un affichage graphique en <strong>XAML</strong>.<br><br>" +
+        "Ce projet m'a permis de participer activement au développement d'une application complète, tout en découvrant la gestion de projet et la collaboration au sein d'une équipe informatique. " +
+        "Nous avons dû organiser notre travail, répartir les tâches, et communiquer efficacement pour mener à bien le projet.<br><br>" +
+        "Ce fut une expérience enrichissante, mêlant technique, gestion de projet et travail d'équipe."+
+        "<br><img src='image/kingdomino.png' alt='Kingdomino' style='max-width:180px; display:block; margin:20px auto;'>",
+
+    "ChesSAE": "<strong>ChesSAE</strong> est une SAÉ de groupe réalisée en première année de BUT Informatique. " +
+        "L’objectif de ce projet était de récupérer des données ouvertes et libres, de les insérer dans une base de données puis de les exploiter. " +
+        "Cette SAÉ nous a permis d’aborder tous les aspects de la conception, de l’implémentation et de l’exploitation d’une base de données, y compris la communication des informations extraites.<br><br>" +
+        "Nous avons choisi d’analyser des datasets sur le jeu d’échecs, trouvés gratuitement en ligne. Un script Python a été développé pour trier, ranger, renommer et analyser ces données afin d’en tirer des informations sur les plus grands joueurs, les événements majeurs, etc.<br><br>" +
+        "<u>Principaux renseignements :</u><br>" +
+        "- L’âge des grands maîtres était historiquement élevé, mais de plus en plus de jeunes accèdent au haut niveau.<br>" +
+        "- Le choix de l’ouverture (code ECO) est crucial et très étudié par les grands maîtres, notamment grâce à l’informatique.<br>" +
+        "- Certaines villes comme Moscou et Tripoli ont joué un rôle historique dans les grands événements d’échecs.<br>" +
+        "En conclusion, ce projet nous a permis de transformer des données brutes en analyses visuelles et statistiques pertinentes, tout en développant nos compétences en gestion de données et en travail d’équipe." +
+        "<div style='display:flex; justify-content:center; gap:20px; margin-top:20px;'>" +
+            "<img src='image/mld.png' alt='ChesSAE' style='max-width:120px; height:auto; border-radius:8px;'>" +
+            "<img src='image/graph.png' alt='ChesSAE' style='max-width:120px; height:auto; border-radius:8px;'>" +
+        "</div>",
+};
+
+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>
+
     </body>
 </html>

contact.html

@@ -51,7 +51,7 @@
                     <h2 class="cv-title">Mon CV</h2>
                     <div class="cv-container">
                         <!-- Le lien doit inclure l'image comme enfant direct -->
-                        <a href="cv/cv_alternance.pdf" download="cv_alternance.pdf">
+                        <a href="cv/cv_alternance_Poulain_Arsene.pdf" download="cv_alternance_Poulain_Arsene.pdf">
                             <img src="cv/cv.png" alt="Aperçu du CV" class="cv-preview">
                         </a>
                         <p class="cv-download-text">Cliquez sur l'image pour télécharger mon CV.</p>

site.css

@@ -1,71 +1,12 @@
-@media (max-width: 800px) {
-    .contener {
-    	display : flex;
-	flex-direction : column;
-    }
-}
-
-@font-face {
-    font-family: "Trickster";
-    src:"Police/Inter-Italic-VariableFont_opsz\,wght.ttf" format("truetype");
-  }
-  
-
-@media print {
-    header{
-	display: none;
-    }
-
-    header{
-	display: none;
-    }
-}
-#taille_tableau{
-    width: 50%;
-}
-
-th{
-    background-color: cyan;
-}
-
-td{
-    background-color: white;
-}
-
-.images_tableau{
-    max-width: 150px;
-}
-
-#legende_tableau{
-    float:right;
-    width: 50%
-}
-
-a{
-    text-decoration: none;
-    color: black;
-}
-
-a:hover:visited{
-    color: rgb(24, 24, 24);
-}
-
-.centrer{
-    text-align: center;
-}
-
-.activités{
-    background-color: orangered;
-}
-
-
+/* =========================
+   GÉNÉRAL & RESET
+   ========================= */
 html, body {
     height: 100%;
     margin: 0;
     padding: 0;
 }
 
-
 body {
     min-height: 100vh;
     display: flex;
@@ -78,18 +19,28 @@ body {
     flex-direction: column;
 }
 
+@font-face {
+    font-family: "Trickster";
+    src:"Police/Inter-Italic-VariableFont_opsz\,wght.ttf" format("truetype");
+}
 
+a {
+    text-decoration: none;
+    color: black;
+}
 
-.bandeau{
-    background-color : rgb(53, 52, 52);
-    width: 100%;
-    height : 150px;
-    display: flex;
-    position: sticky;
-    top:0;
-    border-bottom : 2px solid rgb(44, 44, 44);
+a:hover:visited {
+    color: rgb(24, 24, 24);
 }
 
+::selection {
+    color: black;
+    background-color: rgb(57, 103, 143);
+}
+
+/* =========================
+   STRUCTURE & FOND
+   ========================= */
 .background {
     position: fixed;
     top: 0;
@@ -100,46 +51,7 @@ body {
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
-    z-index: -2; /* met bien l'image en fond derrière tout */
-}
-
-.cv-container {
-    text-align: center;
-    margin-top: 20px;
-}
-
-.cv-preview {
-    width: 200px;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    cursor: pointer;
-}
-
-.cv-preview:hover {
-    transform: scale(1.5); /* Agrandit l'image à 1.5x sa taille */
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-.contact-section a {
-    color: white;
-    text-decoration: none;
-}
-
-.contact-section a:hover {
-    text-decoration: underline; /* Ajoute un soulignement au survol */
-}
-
-/* Centrer le titre "Mon CV" */
-.cv-title {
-    text-align: center;
-    margin-bottom: 20px;
-}
-
-/* Descendre le texte sous l'image */
-.cv-download-text {
-    text-align: center;
-    margin-top: 10px;
-    font-size: 14px;
-    color: #ffffff;
+    z-index: -2;
 }
 
 .background::after {
@@ -149,34 +61,54 @@ body {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.8); /* noir semi-transparent */
+    background-color: rgba(0, 0, 0, 0.8);
     z-index: -1;
 }
 
-.image_accueil{
-    height: 120px;
-    width: 100px;
-    border-radius: 50%;
-    margin-top: 15px;
+.container {
+    margin-left: 8px;
+    margin-right: 8px;
+    color: white;
+    padding-left: 8px;
+    padding-right: 8px;
+    margin-bottom: 80px;
 }
 
+.container h1 {
+    text-align: center;
+    font-size: 36px;
+    margin-bottom: 20px;
+    color: #ffffff;
+}
 
-.photo_titre_bandeau{
+/* =========================
+   BANDEAU & NAVIGATION
+   ========================= */
+.bandeau {
+    background-color: rgb(53, 52, 52);
+    width: 100%;
+    height: 150px;
+    display: flex;
+    position: sticky;
+    top: 0;
+    border-bottom: 2px solid rgb(44, 44, 44);
+}
+
+.photo_titre_bandeau {
     margin-left: 8px;
     display: flex;
 }
 
-#bouttons_liens_nav{
-    border-left : 2px solid grey;
+#bouttons_liens_nav {
+    border-left: 2px solid grey;
     width: 100%;
     max-height: 150px;
-    display:flex;
+    display: flex;
     justify-content: space-evenly;
     align-items: center;
-
 }
 
-.bouttons_liens{
+.bouttons_liens {
     background-color: #ffffff;
     color: grey;
     height: 50px;
@@ -190,63 +122,130 @@ body {
     border-right: 2px solid black;
 }
 
-.container {
-    margin-left: 8px;
-    margin-right: 8px;
-    color: white;
-    padding-left: 8px;
-    padding-right: 8px;
-    margin-bottom: 80px; /* Ajoute de l'espace sous le contenu */
-}
-
-.blocs{
+/* =========================
+   ACCUEIL & BLOCS
+   ========================= */
+.blocs {
     display: flex;
     gap: 30px;
     justify-content: center;
     margin-top: 40px;
-    flex-wrap: wrap; /* pour adaptation mobile */
+    flex-wrap: wrap;
 }
 
-.bloc1{
+.bloc1 {
     float: left;
     width: 200px;
     background-color: grey;
-    padding: 10px;
+    padding: 15px;
     margin-left: 10%;
-    margin-top : 5%;
-    border : solid black 2px;
+    margin-top: 5%;
+    border: solid black 2px;
     border-radius: 10%;
-    padding : 15px;
 }
 
-.bloc2{
+.bloc2 {
     float: right;
     width: 200px;
     background-color: grey;
-    padding: 10px;
+    padding: 15px;
     margin-right: 10%;
-    margin-top : 10%;
-    border : solid black 2px;
+    margin-top: 10%;
+    border: solid black 2px;
     border-radius: 10%;
-    padding : 15px;
 }
 
-/* Section des projets */
-.section-title {
+.bloc-texte {
+    margin-top: 30px;
+    margin-left: 20px;
+    line-height: 1.6;
+}
+
+/* =========================
+   TABLEAUX
+   ========================= */
+#taille_tableau {
+    width: 50%;
+}
+
+th {
+    background-color: cyan;
+}
+
+td {
+    background-color: white;
+}
+
+.images_tableau {
+    max-width: 150px;
+}
+
+#legende_tableau {
+    float: right;
+    width: 50%;
+}
+
+/* =========================
+   IMAGES & ICONES
+   ========================= */
+.image_accueil {
+    height: 120px;
+    width: 100px;
+    border-radius: 50%;
+    margin-top: 15px;
+}
+
+.images_bouttons_liens {
+    height: 30px;
+    width: 30px;
+}
+
+.taille_image_gallerie {
+    height: 250px;
+    width: 400px;
+}
+
+/* =========================
+   LIENS & TEXTE
+   ========================= */
+.centrer {
     text-align: center;
-    margin: 20px 0;
-    font-size: 18px; /* réduit la taille */
-    color: #ffffff;
 }
 
-.container h1 {
+.activités {
+    background-color: orangered;
+}
+
+.texte_principal {
+    width: 80%;
+    float: left;
+}
+
+.texte_principal:hover {
+    color: black;
+}
+
+.liste_liens {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+#liens_externes {
+    width: 20%;
+    border: 2px solid black;
+    float: right;
+}
+
+/* =========================
+   PROJETS
+   ========================= */
+.section-title {
     text-align: center;
-    font-size: 36px; /* augmente la taille */
-    margin-bottom: 20px;
+    margin: 20px 0;
+    font-size: 18px;
     color: #ffffff;
 }
 
-/* Grille des projets */
 .projects-grid {
     display: flex;
     justify-content: center;
@@ -255,78 +254,53 @@ body {
     margin: 20px 0;
 }
 
-/* Carte de projet */
 .project-card {
-    background-color: #f9f9f9;
-    border: 2px solid #bbb;           /* border grise */
-    border-radius: 15px;
-    width: 250px;
-    height: 150px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    transition: transform 0.3s, box-shadow 0.3s, z-index 0.1s;
-    cursor: pointer;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.07); /* légère ombre */
     position: relative;
-    z-index: 1;
+    background: #ffffff;
+    border-radius: 16px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
+    padding: 24px 20px;
+    margin: 18px 0;
+    min-width: 220px;
+    min-height: 120px;
+    transition: box-shadow 0.2s, transform 0.2s;
+    overflow: hidden;
 }
 
 .project-card:hover {
     transform: scale(1.05);
     box-shadow: 0 8px 24px rgba(0,0,0,0.18);
-    z-index: 10; /* Passe au-dessus des autres */
+    z-index: 10;
 }
 
 .project-card h3 {
     margin: 0;
-    font-size: 18px;
+    font-size: 2.1rem;
     color: #333;
+    font-weight: bold;
 }
 
 .project-card p {
     font-size: 14px;
     color: #666;
     margin-top: 10px;
-}
-
-.bloc-texte {
-    margin-top: 30px; /* espace entre les blocs */
-    margin-left: 20px;
+    padding: 8px 0;
     line-height: 1.6;
+    word-break: break-word;
 }
 
-#liens_externes{
-    width : 20%;
-    border : 2px solid black;
-    float:right;
-}
-
-.liste_liens{
-    margin-top: 5px;
-    margin-bottom: 5px;
-}
-
-.images_bouttons_liens{
-    height: 30px;
-    width: 30px;
-}
-
-.texte_principal{
-    width : 80%;
-    float:left;
-}
-
-.texte_principal:hover{
-    color: black;
+.project-card img,
+.project-card.expanded img {
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 20px auto 0 auto;
+    border-radius: 10px;
 }
 
-
-.taille_image_gallerie{
-    height: 250px;
-    width: 400px;
+.project-card.expanded img {
+    max-width: 700px;
 }
 
 /* État agrandi */
@@ -334,11 +308,12 @@ body {
     position: fixed;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%) scale(1.2); /* Zoom centré */
+    transform: translate(-50%, -50%) scale(1.2);
     width: 60vw;
-    height: 220px;
+    min-height: 400px;
+    max-height: 90vh;
     z-index: 100;
-    background: #e9e9e9;
+    background: #fff;
     box-shadow: 0 8px 24px rgba(0,0,0,0.18);
     transition: 
         transform 0.3s cubic-bezier(.4,2,.6,1), 
@@ -346,6 +321,8 @@ body {
         z-index 0.1s,
         width 0.3s,
         height 0.3s;
+    overflow-y: auto;
+    padding: 32px 28px;
 }
 
 .close-btn {
@@ -369,6 +346,9 @@ body {
     color: #333;
 }
 
+/* =========================
+   COMPÉTENCES (SKILLS)
+   ========================= */
 .apropos-card {
     display: flex;
     align-items: center;
@@ -381,7 +361,7 @@ body {
     padding: 30px;
     width: 100%;
     max-width: 100%;
-    box-sizing: border-box; /* <-- Ajouté */
+    box-sizing: border-box;
     gap: 30px;
 }
 
@@ -395,25 +375,11 @@ body {
     box-shadow: 0 2px 8px rgba(0,0,0,0.10);
 }
 
-@media (max-width: 900px) {
-    .apropos-card {
-        flex-direction: column;
-        align-items: flex-start;
-        text-align: left;
-        padding: 20px;
-    }
-    .apropos-image img {
-        max-width: 100%;
-        margin-top: 15px;
-    }
-}
-
-
 .skill-row {
     display: flex;
     align-items: center;
-    margin-bottom: 10px;
-    gap: 15px;
+    margin-bottom: 18px;
+    gap: 10px;
 }
 
 .skill-row span {
@@ -444,32 +410,92 @@ body {
     margin-right: 10px;
     vertical-align: middle;
 }
-.skill-row {
-    display: flex;
-    align-items: center;
-    margin-bottom: 18px; /* Augmente la valeur pour plus d'espace */
-    gap: 10px;
+
+/* =========================
+   CONTACT & CV
+   ========================= */
+.contact-section a {
+    color: white;
+    text-decoration: none;
+}
+
+.contact-section a:hover {
+    text-decoration: underline;
+}
+
+.cv-title {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.cv-container {
+    text-align: center;
+    margin-top: 20px;
+}
+
+.cv-preview {
+    width: 200px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    cursor: pointer;
 }
 
+.cv-preview:hover {
+    transform: scale(1.5);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
 
+.cv-download-text {
+    text-align: center;
+    margin-top: 10px;
+    font-size: 14px;
+    color: #ffffff;
+}
+
+/* =========================
+   AUTRES
+   ========================= */
 .bonne-visite {
     text-align: center;
-    margin-top: 40px;
+    margin-top: 30%;
     font-size: 1.5em;
-    margin-top : 30%;
 }
 
+/* =========================
+   FOOTER
+   ========================= */
 .basPage {
     text-align: center;
     background-color: rgb(53, 52, 52);
     padding: 10px 0;
-    /* position: fixed;  <-- supprime ou commente cette ligne */
-    /* bottom: 0;        <-- supprime ou commente cette ligne */
-    /* left: 0;          <-- supprime ou commente cette ligne */
     width: 100%;
     z-index: 10;
 }
-::selection{
-    color: black;
-    background-color: rgb(57, 103, 143);
+
+/* =========================
+   MEDIA QUERIES
+   ========================= */
+@media (max-width: 900px) {
+    .apropos-card {
+        flex-direction: column;
+        align-items: flex-start;
+        text-align: left;
+        padding: 20px;
+    }
+    .apropos-image img {
+        max-width: 100%;
+        margin-top: 15px;
+    }
+}
+
+@media (max-width: 800px) {
+    .contener {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+@media print {
+    header {
+        display: none;
+    }
 }