diff --git a/httpdocs/effect.js b/httpdocs/effect.js index 1b5a51f..2a49294 100644 --- a/httpdocs/effect.js +++ b/httpdocs/effect.js @@ -1,55 +1,9 @@ const disk = document.getElementById('profile'); -const audio = document.getElementById('disk-audio'); let hovering = false; let startTime = 0; let speedInterval = null; -// On page load, try to prime the audio. -window.addEventListener('load', () => { - // Start playing the audio muted to force loading and decoding. - audio.muted = true; - audio.play().then(() => { - // Immediately pause so it doesn't actually play muted. - audio.pause(); - audio.muted = false; - audio.currentTime = 0; // Reset to start if desired. - console.log("Audio primed and ready."); - }).catch(err => { - // If this fails (due to browser policies), we'll still try on hover. - console.log("Could not prime audio:", err); - }); -}); - -disk.addEventListener('mouseenter', () => { - hovering = true; - startTime = Date.now(); - - // Play the audio if not already playing - if (audio.paused) { - audio.currentTime = 0; // Start from beginning if desired - audio.play().catch(err => { - console.log('Playback blocked:', err); - }); - } - - speedInterval = setInterval(() => { - if (!hovering) return; - const elapsedSeconds = (Date.now() - startTime) / 1000; - const newDuration = Math.max(0.2, 2 - 0.2 * elapsedSeconds); - disk.style.animationDuration = newDuration + 's'; - }, 100); -}); - -disk.addEventListener('mouseleave', () => { - hovering = false; - clearInterval(speedInterval); - disk.style.animationDuration = '2s'; - - // Pause the audio when the mouse leaves - audio.pause(); -}); - @@ -87,4 +41,28 @@ themeSwitch.addEventListener('change', (e) => { +/* Project gallery animation (click on project to go to project page)*/ +document.addEventListener("DOMContentLoaded", function () { + const projects = document.querySelectorAll(".article-wrapper"); + + projects.forEach((project) => { + project.addEventListener("click", function (event) { + event.preventDefault(); + + // Get the project name dynamically + const projectName = this.querySelector(".project-title").innerText.trim().toLowerCase().replace(/\s+/g, "_"); + + // Add animation class + this.classList.add("clicked"); + + // Wait for animation to finish, then redirect with project name in URL + setTimeout(() => { + document.body.classList.add("fade-out"); + setTimeout(() => { + window.location.href = `project.html?name=${projectName}`; + }, 300); + }, 600); + }); + }); +}); diff --git a/httpdocs/images.html b/httpdocs/images.html index f3d3b88..4c4e366 100644 --- a/httpdocs/images.html +++ b/httpdocs/images.html @@ -1,82 +1,137 @@ - - - - Corentin - - - - - + + + + + Corentin + + -

Galerie d'Images

-

Espace

-
- - Espace - - - Espace - - - Espace - -
+

Galerie de Projets

-

Jeux video

+

Projets Personnels

- - Rocket league - - - Valorant - - - Fortnite - +
+
+
+
+
+
Project
+
+ +
+
+
+ • Analytics + • Dashboards +
+
+
+
+
+
+
+
+
Project
+
+ +
+
+
+ • Analytics + • Dashboards +
+
+
+
+
+
+
+
+
Project
+
+ +
+
+
+ • Analytics + • Dashboards +
+
+
-

Sport

+

Projets Scolaires

- - Paintball - - - Ping-pong - - - Natation - +
+
+
+
+
+
analytics
+
+ +
+
+
+ • Analytics + • Dashboards +
+
+
+
+
+
+
+
+
Project
+
+ +
+
+
+ • Analytics + • Dashboards +
+
+
+
+
+
+
+
+
Project
+
+ +
+
+
+ • Analytics + • Dashboards +
+
+
+ diff --git a/httpdocs/img/project/scolaire/mastermind_menu.png b/httpdocs/img/project/scolaire/mastermind_menu.png new file mode 100644 index 0000000..e449a5a Binary files /dev/null and b/httpdocs/img/project/scolaire/mastermind_menu.png differ diff --git a/httpdocs/project.html b/httpdocs/project.html new file mode 100644 index 0000000..ffca76d --- /dev/null +++ b/httpdocs/project.html @@ -0,0 +1,55 @@ + + + + + + + + Projet + + + + +
+

Nom du Projet

+

Description courte.

+
+ +
+

Description

+

Chargement...

+
+ +
+

Galerie

+ +
+ +
+

Technologies utilisées

+
+
+ + + + \ No newline at end of file diff --git a/httpdocs/project.js b/httpdocs/project.js new file mode 100644 index 0000000..9a306ef --- /dev/null +++ b/httpdocs/project.js @@ -0,0 +1,67 @@ +document.addEventListener("DOMContentLoaded", function () { + // Get project name from URL + const urlParams = new URLSearchParams(window.location.search); + const projectName = urlParams.get("name"); + + // Simulated "database" of projects + const projects = { + "analytics": { + title: "Projet Analytics", + subtitle: "Un projet basé sur l'analyse de données.", + description: "Ce projet se concentre sur l'analyse de données et les tableaux de bord interactifs.", + images: ["img/project/scolaire/mastermind_menu.png", "img/project/analytics2.jpg"], + technologies: ["html", "css", "js"] + }, + "dashboards": { + title: "Projet Dashboards", + subtitle: "Création de tableaux de bord interactifs.", + description: "Un projet mettant en avant la visualisation des données avec des graphiques dynamiques.", + images: ["img/dashboards1.jpg", "img/dashboards2.jpg"], + technologies: ["react", "nodejs"] + } + }; + + // Get project data or fallback + const project = projects[projectName] || { + title: "Projet Inconnu", + subtitle: "Désolé, ce projet n'existe pas.", + description: "Nous n'avons pas trouvé d'informations sur ce projet.", + images: [], + technologies: [] + }; + + // Update HTML content + document.getElementById("project-title").innerText = project.title; + document.getElementById("project-subtitle").innerText = project.subtitle; + document.getElementById("project-description").innerText = project.description; + + // Update gallery + const galleryContainer = document.getElementById("project-gallery"); + project.images.forEach(imgSrc => { + const img = document.createElement("img"); + img.src = imgSrc; + img.alt = "Image du projet"; + galleryContainer.appendChild(img); + }); + + // Update technologies + // Update technologies + const techContainer = document.getElementById("project-tech-icons"); + project.technologies.forEach(tech => { + const div = document.createElement("div"); + div.classList.add("tech-box", `${tech}-box`); // Ensure the correct class is added + + const img = document.createElement("img"); + img.src = `icons/${tech}.png`; + img.alt = tech.toUpperCase(); + + const text = document.createElement("span"); + text.innerText = tech.toUpperCase(); + + div.appendChild(img); + div.appendChild(text); + techContainer.appendChild(div); + }); + // Fade-in effect when page loads + document.body.classList.remove("fade-out"); +}); \ No newline at end of file diff --git a/httpdocs/style.css b/httpdocs/style.css index 265615d..7b7d661 100644 --- a/httpdocs/style.css +++ b/httpdocs/style.css @@ -1,797 +1,1053 @@ -/********************************************************************************/ -/*General css*/ + /********************************************************************************/ + /*General css*/ -a { - color: #0e6ab9; - text-decoration: none; -} + a { + color: #0e6ab9; + text-decoration: none; + } -section { - width: 80%; - margin-bottom: 40px; -} + section { + width: 80%; + margin-bottom: 40px; + } -aside { - float: right; - width: 20%; - height: 400px; + aside { + float: right; + width: 20%; + height: 400px; - -} + + } -#profile { - border-radius : 50%; - overflow: hidden; /* Ensures content fits the circular shape */ - width: 350px; /* Set a fixed width */ - height: 350px; /* Set the height equal to the width */ - object-fit: cover; /* Ensures the image scales correctly within the circle */ - border: 3px solid #fff; /* Dark line around the profile */ -} + #profile { + border-radius : 50%; + overflow: hidden; /* Ensures content fits the circular shape */ + width: 350px; /* Set a fixed width */ + height: 350px; /* Set the height equal to the width */ + object-fit: cover; /* Ensures the image scales correctly within the circle */ + border: 3px solid #fff; /* Dark line around the profile */ + } -@keyframes spin { - 0% { - transform: rotate(0deg); + @keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } } - 100% { - transform: rotate(360deg); + + /* Initial spin: 2 seconds per rotation */ + #profile:hover { + animation: spin 2s linear infinite; + transition: animation-duration 0.2s linear; + transform-origin: center center; } -} -/* Initial spin: 2 seconds per rotation */ -#profile:hover { - animation: spin 2s linear infinite; - transition: animation-duration 0.2s linear; - transform-origin: center center; -} + table, td, th { + border: solid; + border-collapse: collapse; + } -table, td, th { - border: solid; - border-collapse: collapse; -} + body.dark-mode { + font-family: Arial, sans-serif; + background-color: #323438; + color: #f1f1f1; + } -body.dark-mode { - font-family: Arial, sans-serif; - background-color: #323438; - color: #f1f1f1; -} + /* Light Mode Styles */ + body.light-mode { + background-color: #fcf0fa; /* Soft white background */ + color: #333333; /* Dark gray text for better readability */ + font-family: Arial, sans-serif; + } -/* Light Mode Styles */ -body.light-mode { - background-color: #fcf0fa; /* Soft white background */ - color: #333333; /* Dark gray text for better readability */ - font-family: Arial, sans-serif; -} + /* Light mode headings */ + body.light-mode h1, + body.light-mode h2:not(.exclude), + body.light-mode h3:not(.exclude) { + color: #222222; /* Slightly darker headings */ + } -/* Light mode headings */ -body.light-mode h1, -body.light-mode h2:not(.exclude), -body.light-mode h3:not(.exclude) { - color: #222222; /* Slightly darker headings */ -} + body.light-mode p { + color: #444444; + } -body.light-mode p { - color: #444444; -} + /* Light mode navbar */ + body.light-mode .navbar { + background: linear-gradient(135deg, #e0eaff, #d1eaff); /* Light blue gradient */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */ + } -/* Light mode navbar */ -body.light-mode .navbar { - background: linear-gradient(135deg, #e0eaff, #d1eaff); /* Light blue gradient */ - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */ -} + body.light-mode .navbar-list a { + color: #0056b3; /* Deep blue for links */ + } -body.light-mode .navbar-list a { - color: #0056b3; /* Deep blue for links */ -} + body.light-mode .navbar-list a:hover { + background-color: #f1f5ff; /* Pale blue hover */ + color: #004080; /* Darker blue */ + } -body.light-mode .navbar-list a:hover { - background-color: #f1f5ff; /* Pale blue hover */ - color: #004080; /* Darker blue */ -} + /* Dropdown content for light mode */ + body.light-mode .dropdown-content { + background-color: #ffffff; /* Clean white */ + border: 1px solid #dcdcdc; /* Subtle border */ + } -/* Dropdown content for light mode */ -body.light-mode .dropdown-content { - background-color: #ffffff; /* Clean white */ - border: 1px solid #dcdcdc; /* Subtle border */ -} + body.light-mode .dropdown-content a { + color: #0056b3; + } -body.light-mode .dropdown-content a { - color: #0056b3; -} + body.light-mode .dropdown-content a:hover { + background-color: #f1f5ff; + color: #004080; + } -body.light-mode .dropdown-content a:hover { - background-color: #f1f5ff; - color: #004080; -} + /* Light mode for gallery */ + body.light-mode .gallery a { + border-color: #e0e0e0; + } -/* Light mode for gallery */ -body.light-mode .gallery a { - border-color: #e0e0e0; -} + body.light-mode .gallery a:hover { + border-color: #004080; /* Highlight border */ + } -body.light-mode .gallery a:hover { - border-color: #004080; /* Highlight border */ -} + body.light-mode .gallery img { + border: 2px solid #e0eaff; + } -body.light-mode .gallery img { - border: 2px solid #e0eaff; -} + /* Light mode table */ + body.light-mode table, + body.light-mode td, + body.light-mode th { + border: 1px solid #dcdcdc; + color: #333333; + background-color: #ffffff; + } -/* Light mode table */ -body.light-mode table, -body.light-mode td, -body.light-mode th { - border: 1px solid #dcdcdc; - color: #333333; - background-color: #ffffff; -} + /* Light mode timeline */ + body.light-mode .timeline::after { + background-color: #cccccc; + } -/* Light mode timeline */ -body.light-mode .timeline::after { - background-color: #cccccc; -} + body.light-mode .container::after { + background-color: #ffffff; + border-color: #ffc107; /* Golden circles */ + } -body.light-mode .container::after { - background-color: #ffffff; - border-color: #ffc107; /* Golden circles */ -} + body.light-mode .content { + background-color: #ffffff; + color: #333333; + box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); + } -body.light-mode .content { - background-color: #ffffff; - color: #333333; - box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); -} + /* Light mode switch styling */ + body.light-mode .slider { + --background: #cce4ff; /* Light blue slider */ + background-color: var(--background); + } -/* Light mode switch styling */ -body.light-mode .slider { - --background: #cce4ff; /* Light blue slider */ - background-color: var(--background); -} + body.light-mode .slider:before { + box-shadow: inset 8px -4px 0px 0px #ffe066; /* Light yellow shadow */ + background: var(--background); + } -body.light-mode .slider:before { - box-shadow: inset 8px -4px 0px 0px #ffe066; /* Light yellow shadow */ - background: var(--background); -} + body.light-mode input:checked + .slider { + background-color: #99d4ff; /* Slightly darker blue */ + } -body.light-mode input:checked + .slider { - background-color: #99d4ff; /* Slightly darker blue */ -} + body.light-mode input:checked + .slider:before { + box-shadow: inset 15px -4px 0px 15px #ffc107; /* Golden shadow when active */ + } -body.light-mode input:checked + .slider:before { - box-shadow: inset 15px -4px 0px 15px #ffc107; /* Golden shadow when active */ -} + /* Footer Light mode */ + body.light-mode footer { + background-color: #f1f1f1; + color: #333333; + border-top: 1px solid #dcdcdc; + text-align: center; + padding: 10px; + } -/* Footer Light mode */ -body.light-mode footer { - background-color: #f1f1f1; - color: #333333; - border-top: 1px solid #dcdcdc; - text-align: center; - padding: 10px; -} + body.light-mode #profile { + border-radius: 50%; + /* Keeps the element circular */ + overflow: hidden; /* Ensures content fits the circular shape */ + width: 350px; /* Set a fixed width */ + height: 350px; /* Set the height equal to the width */ + object-fit: cover; /* Ensures the image scales correctly within the circle */ + border: 3px solid #333333; /* Dark line around the profile */ + } -body.light-mode #profile { - border-radius: 50%; - /* Keeps the element circular */ - overflow: hidden; /* Ensures content fits the circular shape */ - width: 350px; /* Set a fixed width */ - height: 350px; /* Set the height equal to the width */ - object-fit: cover; /* Ensures the image scales correctly within the circle */ - border: 3px solid #333333; /* Dark line around the profile */ -} + body.light-mode .example-2 .icon-content a { + position: relative; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + width: 50px; + height: 50px; + border-radius: 50%; + color: #fff; + background-color: #444; + transition: all 0.3s ease-in-out; + } -body.light-mode .example-2 .icon-content a { - position: relative; - overflow: hidden; - display: flex; - justify-content: center; - align-items: center; - width: 50px; - height: 50px; - border-radius: 50%; - color: #fff; - background-color: #444; - transition: all 0.3s ease-in-out; -} + /* Light Mode Contact Form */ + body.light-mode .bg-gray-800 { + background-color: #f9f9f9; /* Light gray background */ + color: #333333; /* Dark gray text */ + } -/* Light Mode Contact Form */ -body.light-mode .bg-gray-800 { - background-color: #f9f9f9; /* Light gray background */ - color: #333333; /* Dark gray text */ -} + body.light-mode .bg-gray-700 { + background-color: #e6e6e6; /* Light input fields */ + } -body.light-mode .bg-gray-700 { - background-color: #e6e6e6; /* Light input fields */ -} + body.light-mode .text-white { + color: #333333; /* Dark text for labels and headings */ + } -body.light-mode .text-white { - color: #333333; /* Dark text for labels and headings */ -} + body.light-mode .focus\:ring-yellow-300:focus { + --tw-ring-color: #ffd966; /* Light yellow focus ring */ + } -body.light-mode .focus\:ring-yellow-300:focus { - --tw-ring-color: #ffd966; /* Light yellow focus ring */ -} + body.light-mode .w-full.bg-yellow-300 { + background-color: #ffeb99; /* Lighter yellow button */ + color: #444444; /* Darker text */ + } -body.light-mode .w-full.bg-yellow-300 { - background-color: #ffeb99; /* Lighter yellow button */ - color: #444444; /* Darker text */ -} + body.light-mode .w-full.bg-yellow-300:hover { + background-color: #ffdd66; /* Slightly darker hover effect */ + } -body.light-mode .w-full.bg-yellow-300:hover { - background-color: #ffdd66; /* Slightly darker hover effect */ -} + body.light-mode .timeline::after { + background-color: #d1d1d1; /* Light gray vertical line */ + } + body.light-mode .content{ + background-color: #4444; + } -body.light-mode .timeline::after { - background-color: #d1d1d1; /* Light gray vertical line */ -} -body.light-mode .content{ - background-color: #4444; -} + body.light-mode .left::before { + border-color: transparent transparent transparent #cccccc; /* Light gray for left triangle */ + } -body.light-mode .left::before { - border-color: transparent transparent transparent #cccccc; /* Light gray for left triangle */ -} + body.light-mode .right::before { + border-color: transparent #cccccc transparent transparent; /* Light gray for right triangle */ + } -body.light-mode .right::before { - border-color: transparent #cccccc transparent transparent; /* Light gray for right triangle */ -} + h1, h2:not(.exclude), h3:not(.exclude) { + color: #ffffff; + } -h1, h2:not(.exclude), h3:not(.exclude) { - color: #ffffff; -} + p { + font-size: 1.1em; + line-height: 1.6; + } -p { - font-size: 1.1em; - line-height: 1.6; -} + figure { + text-align: center; + margin: 50px auto; + } -figure { - text-align: center; - margin: 50px auto; -} + figure img { + max-width: 100%; + height: auto; + border: 3px solid #333; + } -figure img { - max-width: 100%; - height: auto; - border: 3px solid #333; -} + figcaption { + font-size: 1.2em; + margin-top: 10px; + } + /********************************************************************************/ + /*Navbar css*/ + /* Style général de la navbar */ + .navbar { + background: linear-gradient(135deg, #0e6ab9, #4782b6); + padding: 15px; + display: flex; + justify-content: center; + position: sticky; + top: 0; + z-index: 1000; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); -figcaption { - font-size: 1.2em; - margin-top: 10px; -} -/********************************************************************************/ -/*Navbar css*/ -/* Style général de la navbar */ -.navbar { - background: linear-gradient(135deg, #0e6ab9, #4782b6); - padding: 15px; - display: flex; - justify-content: center; - position: sticky; - top: 0; - z-index: 1000; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + } -} + .navbar-list { + list-style-type: none; + margin: 0; + padding: 0; + display: flex; + gap: 20px; + } -.navbar-list { - list-style-type: none; - margin: 0; - padding: 0; - display: flex; - gap: 20px; -} + .navbar-list li { + position: relative; /* Permet à l'élément dropdown de se positionner par rapport au parent */ + } -.navbar-list li { - position: relative; /* Permet à l'élément dropdown de se positionner par rapport au parent */ -} + .navbar-list a { + color: white; + text-decoration: none; + font-size: 1.2em; + padding: 10px 15px; + border-radius: 5px; + transition: background-color 0.3s ease; + } -.navbar-list a { - color: white; - text-decoration: none; - font-size: 1.2em; - padding: 10px 15px; - border-radius: 5px; - transition: background-color 0.3s ease; -} + .navbar-list a:hover { + background-color: #fff; + color: #0e6ab9; + } -.navbar-list a:hover { - background-color: #fff; - color: #0e6ab9; -} + /* Style pour le menu déroulant */ + /* Espacement entre les éléments du menu déroulant */ + .dropdown-content li { + display: block; + margin: 10px 0; /* Ajoute de l'espace vertical entre les éléments */ + } -/* Style pour le menu déroulant */ -/* Espacement entre les éléments du menu déroulant */ -.dropdown-content li { - display: block; - margin: 10px 0; /* Ajoute de l'espace vertical entre les éléments */ -} + /* Ajuster la largeur du menu déroulant à celle de "Gallerie" */ + .dropdown-content { + display: none; + position: absolute; + background-color: #fff; + min-width: 100%; /* S'assure que la largeur correspond à celle du parent */ + border-radius: 8px; + box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3); + padding: 12px 0; + z-index: 10; + top: 130%; /* Pour le placer juste en dessous de l'élément parent */ + left: 0; /* Aligne le menu déroulant avec le parent */ + } -/* Ajuster la largeur du menu déroulant à celle de "Gallerie" */ -.dropdown-content { - display: none; - position: absolute; - background-color: #fff; - min-width: 100%; /* S'assure que la largeur correspond à celle du parent */ - border-radius: 8px; - box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3); - padding: 12px 0; - z-index: 10; - top: 130%; /* Pour le placer juste en dessous de l'élément parent */ - left: 0; /* Aligne le menu déroulant avec le parent */ -} + .dropdown-content a { + padding: 10px 20px; + color: #0e6ab9; + text-decoration: none; + font-size: 1em; + transition: background-color 0.3s ease; + } -.dropdown-content a { - padding: 10px 20px; - color: #0e6ab9; - text-decoration: none; - font-size: 1em; - transition: background-color 0.3s ease; -} + .dropdown-content a:hover { + background-color: #0e6ab9; + color: #fff; + } -.dropdown-content a:hover { - background-color: #0e6ab9; - color: #fff; -} + /* Montre le menu dropdown au survol */ + .dropdown:hover .dropdown-content { + display: block; + opacity: 0; + animation: dropdownFade 0.7s forwards ease-in-out; + } -/* Montre le menu dropdown au survol */ -.dropdown:hover .dropdown-content { - display: block; - opacity: 0; - animation: dropdownFade 0.7s forwards ease-in-out; -} + /* Ajout d'une animation douce */ + @keyframes dropdownFade { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } + } -/* Ajout d'une animation douce */ -@keyframes dropdownFade { - from { - opacity: 0; - transform: translateY(-10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} + /********************************************************************************/ + /* Css for the gallery (general) */ -/********************************************************************************/ -/* Css for the gallery (general) */ + .title_gallery { + font-size: 2rem; + color: #f0f0f0; + text-transform: uppercase; + letter-spacing: 2px; + text-align: center; + margin-bottom: 20px; + text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); + } -.title_gallery { - font-size: 2rem; - color: #f0f0f0; - text-transform: uppercase; - letter-spacing: 2px; - text-align: center; - margin-bottom: 20px; - text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); -} + .title_gallery::after { + content: ''; + display: block; + width: 80px; + height: 4px; + background-color: #f0f0f0; + margin: 10px auto 0; + } -.title_gallery::after { - content: ''; - display: block; - width: 80px; - height: 4px; - background-color: #f0f0f0; - margin: 10px auto 0; -} + .title_gallery { + background: rgba(184, 165, 165, 0.3); + padding: 10px 20px; + border-radius: 5px; + } + .gallery { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 15px; + padding: 20px; + } -.title_gallery { - background: rgba(0, 0, 0, 0.3); - padding: 10px 20px; - border-radius: 5px; -} -.gallery { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 15px; - padding: 20px; -} + .gallery_video { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + position: relative; + } -.gallery_video { - display: flex; - justify-content: space-around; - flex-wrap: wrap; - position: relative; -} + .gallery a { + display: inline-block; + border: 2px solid #ccc; + padding: 5px; + transition: transform 0.3s ease, border-color 0.3s ease; + } -.gallery a { - display: inline-block; - border: 2px solid #ccc; - padding: 5px; - transition: transform 0.3s ease, border-color 0.3s ease; -} + .gallery a:hover { + transform: scale(1.1); + border-color: #333; + } -.gallery a:hover { - transform: scale(1.1); - border-color: #333; -} + .gallery img { + display: block; + width: 150px; + height: 100px; + object-fit: cover; + } -.gallery img { - display: block; - width: 150px; - height: 100px; - object-fit: cover; -} + .video-item { + width: 400px; + height: 240px; + margin: 10px; + overflow: hidden; + position: relative; + z-index: 1; + } -.video-item { - width: 400px; - height: 240px; - margin: 10px; - overflow: hidden; - position: relative; - z-index: 1; -} + .video-item video { + width: 100%; + height: 100%; + transition: transform 0.3s ease, z-index 0.3s ease; + cursor: pointer; + position: relative; + z-index: 1; + } -.video-item video { - width: 100%; - height: 100%; - transition: transform 0.3s ease, z-index 0.3s ease; - cursor: pointer; - position: relative; - z-index: 1; -} + .video-item:hover video { + width: 1200px; + height: 700px; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 10; + box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); + } -.video-item:hover video { - width: 1200px; - height: 700px; - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - z-index: 10; - box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); -} + .video-item:not(:hover) { + z-index: 0; + } -.video-item:not(:hover) { - z-index: 0; -} + .gallery_video figcaption { + text-align: left; + color: white; + } -.gallery_video figcaption { - text-align: left; - color: white; -} + #video_categorie { + text-align: center; + margin-top: 20px; + } -#video_categorie { - text-align: center; - margin-top: 20px; -} + /********************************************************************************/ + /* Css for the timeline (general) */ -/********************************************************************************/ -/* Css for the timeline (general) */ + #titre_cursus { + text-align: center; + margin-top: 20px; + } -#titre_cursus { - text-align: center; - margin-top: 20px; -} + * { + box-sizing: border-box; + } + + /* Set a background color */ + body { + background-color: #474e5d; + font-family: Helvetica, sans-serif; + } + + /* The actual timeline (the vertical ruler) */ + .timeline { + position: relative; + max-width: 1200px; + margin: 0 auto; + } + + /* The actual timeline (the vertical ruler) */ + .timeline::after { + content: ''; + position: absolute; + width: 6px; + background-color: white; + top: 0; + bottom: 0; + left: 50%; + margin-left: -3px; + } + + /* Container around content */ + .container { + padding: 10px 40px; + position: relative; + background-color: inherit; + width: 50%; + } + + /* The circles on the timeline */ -* { - box-sizing: border-box; - } - - /* Set a background color */ - body { - background-color: #474e5d; - font-family: Helvetica, sans-serif; + + /* Place the container to the left */ + .left { + left: 0; + } + + /* Place the container to the right */ + .right { + left: 50%; + } + + /* Add arrows to the left container (pointing right) */ + .left::before { + content: " "; + height: 0; + position: absolute; + top: 22px; + width: 0; + z-index: 1; + right: 30px; + border: medium solid white; + border-width: 10px 0 10px 10px; + border-color: transparent transparent transparent white; + } + + /* Add arrows to the right container (pointing left) */ + .right::before { + content: " "; + height: 0; + position: absolute; + top: 22px; + width: 0; + z-index: 1; + left: 30px; + border: medium solid white; + border-width: 10px 10px 10px 0; + border-color: transparent white transparent transparent; + } + + /* Fix the circle for containers on the right side */ + .right::after { + left: -16px; + } + + /* The actual content */ + .content { + padding: 20px 30px; + background-color: white; + position: relative; + border-radius: 6px; + color: #333; + } + + /* Media queries - Responsive timeline on screens less than 600px wide */ + @media screen and (max-width: 600px) { + /* Place the timelime to the left */ + .timeline::after { + left: 31px; + } + + /* Full-width containers */ + .container { + width: 100%; + padding-left: 70px; + padding-right: 25px; + } + + /* Make sure that all arrows are pointing leftwards */ + .container::before { + left: 60px; + border: medium solid white; + border-width: 10px 10px 10px 0; + border-color: transparent white transparent transparent; + } + + /* Make sure all circles are at the same spot */ + .left::after, .right::after { + left: 15px; + } + + /* Make all right containers behave like the left ones */ + .right { + left: 0%; + } + } + + + + + + + + /* additional requests */ + + #planning{ + font-family: 'Roboto', Arial, sans-serif; } - - /* The actual timeline (the vertical ruler) */ - .timeline { + + + + /********************************************************************************/ + /* Dark mode switch */ + + + /* The switch - the box around the slider */ + .switch { + font-size: 17px; position: relative; - max-width: 1200px; - margin: 0 auto; + display: inline-block; + width: 3.5em; + height: 2em; } - - /* The actual timeline (the vertical ruler) */ - .timeline::after { - content: ''; + + /* Hide default HTML checkbox */ + .switch input { + opacity: 0; + width: 0; + height: 0; + } + + /* The slider */ + .slider { + --background: #28096b; position: absolute; - width: 6px; - background-color: white; + cursor: pointer; top: 0; + left: 0; + right: 0; bottom: 0; - left: 50%; - margin-left: -3px; + background-color: var(--background); + transition: .5s; + border-radius: 30px; } - - /* Container around content */ - .container { - padding: 10px 40px; - position: relative; - background-color: inherit; - width: 50%; + + .slider:before { + position: absolute; + content: ""; + height: 1.4em; + width: 1.4em; + border-radius: 50%; + left: 10%; + bottom: 15%; + box-shadow: inset 8px -4px 0px 0px #fff000; + background: var(--background); + transition: .5s; } - - /* The circles on the timeline */ - - /* Place the container to the left */ - .left { - left: 0; + input:checked + .slider { + background-color: #522ba7; } - - /* Place the container to the right */ - .right { - left: 50%; + + input:checked + .slider:before { + transform: translateX(100%); + box-shadow: inset 15px -4px 0px 15px #fff000; } - - /* Add arrows to the left container (pointing right) */ - .left::before { - content: " "; - height: 0; + + + + /*******************************************************************************/ + /* Social networks icons */ + + + ul { + list-style: none; + } + + .example-2 { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + } + .example-2 .icon-content { + margin: 0 10px; + position: relative; + padding: 0.5rem; + } + .example-2 .icon-content .tooltip { position: absolute; - top: 22px; - width: 0; + top: 100%; + right: 110%; + transform: translateY(200%); + color: #fff; + padding: 6px 10px; + border-radius: 5px; + opacity: 0; + visibility: hidden; + font-size: 14px; + transition: all 0.3s ease; + } + .example-2 .icon-content:hover .tooltip { + opacity: 1; + visibility: visible; + top: -50px; + } + .example-2 .icon-content a { + position: relative; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + width: 50px; + height: 50px; + border-radius: 50%; + color: #444; + background-color: #fff; + transition: all 0.3s ease-in-out; + } + .example-2 .icon-content a:hover { + box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%); + } + .example-2 .icon-content a svg { + position: relative; z-index: 1; - right: 30px; - border: medium solid white; - border-width: 10px 0 10px 10px; - border-color: transparent transparent transparent white; - } - - /* Add arrows to the right container (pointing left) */ - .right::before { - content: " "; - height: 0; + width: 30px; + height: 30px; + } + .example-2 .icon-content a:hover { + color: white; + } + .example-2 .icon-content a .filled { position: absolute; - top: 22px; - width: 0; - z-index: 1; - left: 30px; - border: medium solid white; - border-width: 10px 10px 10px 0; - border-color: transparent white transparent transparent; - } - - /* Fix the circle for containers on the right side */ - .right::after { - left: -16px; - } - - /* The actual content */ - .content { - padding: 20px 30px; + top: auto; + bottom: 0; + left: 0; + width: 100%; + height: 0; + background-color: #000; + transition: all 0.3s ease-in-out; + } + .example-2 .icon-content a:hover .filled { + height: 100%; + } + + .example-2 .icon-content a[data-social="linkedin"] .filled, + .example-2 .icon-content a[data-social="linkedin"] ~ .tooltip { + background-color: #0274b3; + } + + .example-2 .icon-content a[data-social="github"] .filled, + .example-2 .icon-content a[data-social="github"] ~ .tooltip { + background-color: #24262a; + } + .example-2 .icon-content a[data-social="instagram"] .filled, + .example-2 .icon-content a[data-social="instagram"] ~ .tooltip { + background: linear-gradient( + 45deg, + #405de6, + #5b51db, + #b33ab4, + #c135b4, + #e1306c, + #fd1f1f + ); + } + .example-2 .icon-content a[data-social="youtube"] .filled, + .example-2 .icon-content a[data-social="youtube"] ~ .tooltip { + background-color: #ff0000; + } + + + + /* Gallerie projet */ + + .article-wrapper { + width: 250px; + -webkit-transition: 0.15s all ease-in-out; + transition: 0.15s all ease-in-out; + border-radius: 10px; + padding: 5px; + border: 4px solid transparent; + cursor: pointer; background-color: white; - position: relative; - border-radius: 6px; - color: #333; } - - /* Media queries - Responsive timeline on screens less than 600px wide */ - @media screen and (max-width: 600px) { - /* Place the timelime to the left */ - .timeline::after { - left: 31px; - } - - /* Full-width containers */ - .container { - width: 100%; - padding-left: 70px; - padding-right: 25px; - } - - /* Make sure that all arrows are pointing leftwards */ - .container::before { - left: 60px; - border: medium solid white; - border-width: 10px 10px 10px 0; - border-color: transparent white transparent transparent; - } - - /* Make sure all circles are at the same spot */ - .left::after, .right::after { - left: 15px; - } - - /* Make all right containers behave like the left ones */ - .right { - left: 0%; - } + + .article-wrapper:hover { + -webkit-box-shadow: 10px 10px 0 #4e84ff, 20px 20px 0 #4444bd; + box-shadow: 10px 10px 0 #4e84ff, 20px 20px 0 #4444bd; + border-color: #0578c5; + -webkit-transform: translate(-20px, -20px); + -ms-transform: translate(-20px, -20px); + transform: translate(-20px, -20px); + } + + .article-wrapper:active { + -webkit-box-shadow: none; + box-shadow: none; + -webkit-transform: translate(0, 0); + -ms-transform: translate(0, 0); + transform: translate(0, 0); } + .types { + gap: 10px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + place-content: flex-start; + } + .rounded-lg { + /* class tailwind */ + border-radius: 10px; + } + .article-wrapper:hover .project-hover { + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + background-color: #a6c2f0; + } + .project-info { + padding-top: 20px; + padding: 10px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; + } + .project-title { + font-size: 2em; + margin: 0; + font-weight: 600; + /* depend de la font */ + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: black; + } + .flex-pr { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } - /* additional requests */ + .project-type { + background: #b2b2fd; + color: #1a41cd; + font-weight: bold; + padding: 0.3em 0.7em; + border-radius: 15px; + font-size: 12px; + letter-spacing: -0.6px + } -#planning{ - font-family: 'Roboto', Arial, sans-serif; -} + .project-hover { + border-radius: 50%; + width: 50px; + height: 50px; + padding: 9px; + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; + } + .container-project { + width: 100%; + height: 170px; + background: gray; + } -/********************************************************************************/ -/* Dark mode switch */ + /* Dark Mode for Project Gallery */ -/* The switch - the box around the slider */ -.switch { - font-size: 17px; - position: relative; - display: inline-block; - width: 3.5em; - height: 2em; +body.light-mode .article-wrapper { + background-color: #9c8d8d; + border-color: #555; } -/* Hide default HTML checkbox */ -.switch input { - opacity: 0; - width: 0; - height: 0; +body.light-mode .article-wrapper:hover { + box-shadow: 10px 10px 0 #6a5acd, 20px 20px 0 #483d8b; + border-color: #6a5acd; } -/* The slider */ -.slider { - --background: #28096b; - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: var(--background); - transition: .5s; - border-radius: 30px; +body.light-mode .project-info { + color: #f1f1f1; } -.slider:before { - position: absolute; - content: ""; - height: 1.4em; - width: 1.4em; - border-radius: 50%; - left: 10%; - bottom: 15%; - box-shadow: inset 8px -4px 0px 0px #fff000; - background: var(--background); - transition: .5s; +body.light-mode .project-title { + color: #fff; } -input:checked + .slider { - background-color: #522ba7; +body.light-mode .project-hover { + background-color: #444; } -input:checked + .slider:before { - transform: translateX(100%); - box-shadow: inset 15px -4px 0px 15px #fff000; -} +body.light-mode .project-type { + background: #555; + color: #bbb; +} -/*******************************************************************************/ -/* Social networks icons */ +/* Click effect */ +.article-wrapper.clicked { + transform: scale(0.9); + opacity: 0; + transition: transform 0.6s ease, opacity 0.6s ease; +} -ul { - list-style: none; +/* Smooth page fade-in */ +body { + opacity: 1; + transition: opacity 0.3s ease-in-out; } -.example-2 { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; +body.fade-out { + opacity: 0; } -.example-2 .icon-content { - margin: 0 10px; - position: relative; - padding: 0.5rem; + + +/* General Styling for Project Page */ +.project-header { + text-align: center; + margin: 40px auto; + animation: fadeIn 0.8s ease-in-out; } -.example-2 .icon-content .tooltip { - position: absolute; - top: 100%; - right: 110%; - transform: translateY(200%); - color: #fff; - padding: 6px 10px; - border-radius: 5px; - opacity: 0; - visibility: hidden; - font-size: 14px; - transition: all 0.3s ease; + +.project-subtitle { + font-size: 1.2em; + color: #aaa; + margin-bottom: 20px; } -.example-2 .icon-content:hover .tooltip { - opacity: 1; - visibility: visible; - top: -50px; + +.project-content, .project-gallery, .project-tech { + width: 80%; + margin: 20px auto; + text-align: center; + animation: slideUp 0.8s ease-in-out; } -.example-2 .icon-content a { - position: relative; - overflow: hidden; + +/* Center and style images */ +.project-gallery img { + width: 100%; + max-width: 600px; + height: auto; + border-radius: 10px; + transition: transform 0.3s ease, box-shadow 0.3s ease; + cursor: pointer; +} + +.project-gallery img:hover { + transform: scale(1.1); + box-shadow: 0 4px 10px rgba(255, 255, 255, 0.3); +} + + +.tech-icons { display: flex; + gap: 15px; justify-content: center; - align-items: center; - width: 50px; - height: 50px; - border-radius: 50%; - color: #444; - background-color: #fff; - transition: all 0.3s ease-in-out; + flex-wrap: wrap; + padding: 20px; } -.example-2 .icon-content a:hover { - box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%); + +/* Language/Tech Boxes */ +.tech-box { + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + padding: 10px 15px; + border-radius: 10px; + font-weight: bold; + color: white; + font-size: 1.1em; + transition: transform 0.3s ease, box-shadow 0.3s ease; + border: 2px solid rgba(255, 255, 255, 0.3); } -.example-2 .icon-content a svg { - position: relative; - z-index: 1; + +.tech-box img { width: 30px; height: 30px; -} -.example-2 .icon-content a:hover { - color: white; -} -.example-2 .icon-content a .filled { - position: absolute; - top: auto; - bottom: 0; - left: 0; - width: 100%; - height: 0; - background-color: #000; - transition: all 0.3s ease-in-out; -} -.example-2 .icon-content a:hover .filled { - height: 100%; + border-radius: 50%; + background: rgba(255, 255, 255, 0.2); + padding: 5px; } -.example-2 .icon-content a[data-social="linkedin"] .filled, -.example-2 .icon-content a[data-social="linkedin"] ~ .tooltip { - background-color: #0274b3; +.tech-box:hover { + transform: scale(1.1); + box-shadow: 0 4px 10px rgba(255, 255, 255, 0.5); } -.example-2 .icon-content a[data-social="github"] .filled, -.example-2 .icon-content a[data-social="github"] ~ .tooltip { - background-color: #24262a; -} -.example-2 .icon-content a[data-social="instagram"] .filled, -.example-2 .icon-content a[data-social="instagram"] ~ .tooltip { - background: linear-gradient( - 45deg, - #405de6, - #5b51db, - #b33ab4, - #c135b4, - #e1306c, - #fd1f1f - ); -} -.example-2 .icon-content a[data-social="youtube"] .filled, -.example-2 .icon-content a[data-social="youtube"] ~ .tooltip { - background-color: #ff0000; +/* Colors for Technologies */ +.html-box { background: #E34F26; border-color: #b3391d; } +.css-box { background: #1572B6; border-color: #0d5ea0; } +.js-box { background: #F7DF1E; color: #333; border-color: #c2b000; } +.react-box { background: #61DAFB; color: #000; border-color: #48bcd1; } +.nodejs-box { background: #83CD29; border-color: #639b1e; } +.python-box { background: #3776AB; border-color: #255680; } +.sql-box { background: #4479A1; border-color: #325d78; } + +/* Animations */ +@keyframes fadeIn { + from { opacity: 0; transform: translateY(-10px); } + to { opacity: 1; transform: translateY(0); } } +@keyframes slideUp { + from { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); } +}