corentin.caillot
/
site_web
generated from Templates_CodeFirst/templateHtmlCss
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adding project page
continuous-integration/drone/push Build is failing Details

Browse Source
master
cocaillot 5 months ago
parent 35c9f8842b
commit 9345ed9519
6 changed files with 1154 additions and 743 deletions
Show Stats Download Patch File Download Diff File

70
httpdocs/effect.js
Unescape View File

@ -1,55 +1,9 @@
const disk = document.getElementById('profile'); const disk = document.getElementById('profile');
const audio = document.getElementById('disk-audio');
let hovering = false; let hovering = false;
let startTime = 0; let startTime = 0;
let speedInterval = null; 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);
});
});
});

195
httpdocs/images.html
Unescape View File

@ -1,82 +1,137 @@
<!DOCTYPE html> <!DOCTYPE html>
<!-- Doctype HTML5 --> <!-- Doctype HTML5 -->
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="style.css"> <link type="text/css" rel="stylesheet" href="style.css">
<title>Corentin</title> <script src="effect.js" defer></script>
<nav class="navbar"></nav> <title>Corentin</title>
<ul class="navbar-list"> <nav class="navbar">
<li> <ul class="navbar-list">
<a href="index.html">Accueil</a> <li><a href="index.html">Accueil</a></li>
</li> <li><a href="cursus.html">Cursus</a></li>
<li> <li><a href="planning.html">Planning</a></li>
<a href="cursus.html">Cursus</a> <li class="dropdown">
</li> <a href="#">Gallerie</a>
<li> <ul class="dropdown-content">
<a href="planning.html">Planning</a> <li><a href="images.html">Images</a></li>
</li> <li><a href="videos.html">Vidéos</a></li>
<li class="dropdown"> </ul>
<a href="#">Gallerie</a> </li>
<ul class="dropdown-content"> <li><a href="form.html">Contact</a></li>
<li> <label class="switch">
<a href="images.html">Images</a> <input type="checkbox" id="theme-switch">
</li> <span class="slider"></span>
<li> </label>
<a href="videos.html">Vidéos</a> </ul>
</li> </nav>
</ul> </head>
</li>
<li>
<a href="form.php">Formulaire</a>
</li>
<label class="switch">
<input type="checkbox" id="theme-switch">
<span class="slider"></span>
</label>
</ul>
</nav>
</head>
<body> <body>
<h1>Galerie d'Images</h1> <h1>Galerie de Projets</h1>
<h3 class="title_gallery">Espace</h3>
<div class="gallery">
<a href="space1.html">
<img src="img/space1.jpg" alt="Espace" />
</a>
<a href="space2.html">
<img src="img/space2.jpg" alt="Espace" />
</a>
<a href="space2.html">
<img src="img/space3.jpg" alt="Espace" />
</a>
</div>
<h3 class="title_gallery">Jeux video</h3> <h3 class="title_gallery">Projets Personnels</h3>
<div class="gallery"> <div class="gallery">
<a href="video_game1.html"> <article class="article-wrapper">
<img src="img/video_game1.jpg" alt="Rocket league" /> <div class="rounded-lg container-project">
</a> </div>
<a href="video_game2.html"> <div class="project-info">
<img src="img/video_game2.jpg" alt="Valorant" /> <div class="flex-pr">
</a> <div class="project-title text-nowrap">Project</div>
<a href="video_game3.html"> <div class="project-hover">
<img src="img/video_game3.jpeg" alt="Fortnite" /> <svg style="color: black;" xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" color="black" stroke-linejoin="round" stroke-linecap="round" viewBox="0 0 24 24" stroke-width="2" fill="none" stroke="currentColor"><line y2="12" x2="19" y1="12" x1="5"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</a> </div>
</div>
<div class="types">
<span style="background-color: rgba(165, 96, 247, 0.43); color: rgb(85, 27, 177);" class="project-type">• Analytics</span>
<span class="project-type">• Dashboards</span>
</div>
</div>
</article>
<article class="article-wrapper">
<div class="rounded-lg container-project">
</div>
<div class="project-info">
<div class="flex-pr">
<div class="project-title text-nowrap">Project</div>
<div class="project-hover">
<svg style="color: black;" xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" color="black" stroke-linejoin="round" stroke-linecap="round" viewBox="0 0 24 24" stroke-width="2" fill="none" stroke="currentColor"><line y2="12" x2="19" y1="12" x1="5"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</div>
</div>
<div class="types">
<span style="background-color: rgba(165, 96, 247, 0.43); color: rgb(85, 27, 177);" class="project-type">• Analytics</span>
<span class="project-type">• Dashboards</span>
</div>
</div>
</article>
<article class="article-wrapper">
<div class="rounded-lg container-project">
</div>
<div class="project-info">
<div class="flex-pr">
<div class="project-title text-nowrap">Project</div>
<div class="project-hover">
<svg style="color: black;" xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" color="black" stroke-linejoin="round" stroke-linecap="round" viewBox="0 0 24 24" stroke-width="2" fill="none" stroke="currentColor"><line y2="12" x2="19" y1="12" x1="5"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</div>
</div>
<div class="types">
<span style="background-color: rgba(165, 96, 247, 0.43); color: rgb(85, 27, 177);" class="project-type">• Analytics</span>
<span class="project-type">• Dashboards</span>
</div>
</div>
</article>
</div> </div>
<h3 class="title_gallery">Sport</h3> <h3 class="title_gallery">Projets Scolaires</h3>
<div class="gallery"> <div class="gallery">
<a href="sport1.html"> <article class="article-wrapper">
<img src="img/sport1.jpg" alt="Paintball" /> <div class="rounded-lg container-project">
</a> </div>
<a href="sport2.html"> <div class="project-info">
<img src="img/sport2.jpg" alt="Ping-pong" /> <div class="flex-pr">
</a> <div class="project-title text-nowrap">analytics</div>
<a href="sport3.html"> <div class="project-hover">
<img src="img/sport3.jpg" alt="Natation" /> <svg style="color: black;" xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" color="black" stroke-linejoin="round" stroke-linecap="round" viewBox="0 0 24 24" stroke-width="2" fill="none" stroke="currentColor"><line y2="12" x2="19" y1="12" x1="5"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</a> </div>
</div>
<div class="types">
<span style="background-color: rgba(165, 96, 247, 0.43); color: rgb(85, 27, 177);" class="project-type">• Analytics</span>
<span class="project-type">• Dashboards</span>
</div>
</div>
</article>
<article class="article-wrapper">
<div class="rounded-lg container-project">
</div>
<div class="project-info">
<div class="flex-pr">
<div class="project-title text-nowrap">Project</div>
<div class="project-hover">
<svg style="color: black;" xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" color="black" stroke-linejoin="round" stroke-linecap="round" viewBox="0 0 24 24" stroke-width="2" fill="none" stroke="currentColor"><line y2="12" x2="19" y1="12" x1="5"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</div>
</div>
<div class="types">
<span style="background-color: rgba(165, 96, 247, 0.43); color: rgb(85, 27, 177);" class="project-type">• Analytics</span>
<span class="project-type">• Dashboards</span>
</div>
</div>
</article>
<article class="article-wrapper">
<div class="rounded-lg container-project">
</div>
<div class="project-info">
<div class="flex-pr">
<div class="project-title text-nowrap">Project</div>
<div class="project-hover">
<svg style="color: black;" xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" color="black" stroke-linejoin="round" stroke-linecap="round" viewBox="0 0 24 24" stroke-width="2" fill="none" stroke="currentColor"><line y2="12" x2="19" y1="12" x1="5"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</div>
</div>
<div class="types">
<span style="background-color: rgba(165, 96, 247, 0.43); color: rgb(85, 27, 177);" class="project-type">• Analytics</span>
<span class="project-type">• Dashboards</span>
</div>
</div>
</article>
</div> </div>
</body> </body>
</html> </html>

BIN
httpdocs/img/project/scolaire/mastermind_menu.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 312 KiB

55
httpdocs/project.html
Unescape View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="style.css">
<script src="effect.js" defer></script>
<script src="project.js" defer></script> <!-- Load dynamic content -->
<title>Projet</title>
</head>
<body>
<nav class="navbar">
<ul class="navbar-list">
<li><a href="index.html">Accueil</a></li>
<li><a href="cursus.html">Cursus</a></li>
<li><a href="planning.html">Planning</a></li>
<li class="dropdown">
<a href="#">Galerie</a>
<ul class="dropdown-content">
<li><a href="images.html">Images</a></li>
<li><a href="videos.html">Vidéos</a></li>
</ul>
</li>
<li><a href="form.html">Contact</a></li>
<label class="switch">
<input type="checkbox" id="theme-switch">
<span class="slider"></span>
</label>
</ul>
</nav>
<header class="project-header">
<h1 id="project-title">Nom du Projet</h1>
<p id="project-subtitle" class="project-subtitle">Description courte.</p>
</header>
<section class="project-content">
<h2>Description</h2>
<p id="project-description">Chargement...</p>
</section>
<section class="project-gallery">
<h2>Galerie</h2>
<div id="project-gallery" class="gallery"></div>
</section>
<section class="project-tech">
<h2>Technologies utilisées</h2>
<div id="project-tech-icons" class="tech-icons"></div>
</section>
<footer>
<p>Pied de page</p>
</footer>
</body>
</html>

67
httpdocs/project.js
Unescape View File

@ -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");
});

1472
httpdocs/style.css
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save