generated from Templates_CodeFirst/templateHtmlCss
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
4.2 KiB
134 lines
4.2 KiB
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Portfolio</title>
|
|
<link rel="stylesheet" href="https://codefirst.iut.uca.fr/francois.yousse/portfolio/src/branch/master/mycoolstyle.css">
|
|
<!-- <link rel="stylesheet" href="mycoolstyle.css"> -->
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<a href="#accueil">Accueil</a>
|
|
<a href="#projets">Projets universitaires</a>
|
|
<a href="#experience-pro">Expériences professionnelles</a>
|
|
<a href="#cv">CV</a>
|
|
<a href="#experience-perso">Expériences personnelles</a>
|
|
<a href="#contact">Me contacter</a>
|
|
</nav>
|
|
|
|
<section id="accueil">
|
|
<div class="slider-container" id="sliderContainer">
|
|
<div class="arrow left" onclick="moveSlide(-1)">◀</div>
|
|
<div class="slider" id="slider">
|
|
<div class="slide">
|
|
<h2>Projet universitaire</h2>
|
|
<p>Courte description</p>
|
|
<button class="go-button" onclick="location.href='#projets'">Y aller</button>
|
|
</div>
|
|
<div class="slide">
|
|
<h2>Expérience professionnelle</h2>
|
|
<p>Courte description</p>
|
|
<button class="go-button" onclick="location.href='#experience-pro'">Y aller</button>
|
|
</div>
|
|
<div class="slide">
|
|
<h2>Mon CV</h2>
|
|
<p>Consultez mon CV</p>
|
|
<button class="go-button" onclick="location.href='#cv'">Y aller</button>
|
|
</div>
|
|
<div class="slide">
|
|
<h2>Expériences personnelles</h2>
|
|
<p>Courte description</p>
|
|
<button class="go-button" onclick="location.href='#experience-perso'">Y aller</button>
|
|
</div>
|
|
<div class="slide">
|
|
<h2>Contact</h2>
|
|
<p>Me contacter</p>
|
|
<button class="go-button" onclick="location.href='#contact'">Y aller</button>
|
|
</div>
|
|
<div class="slide">
|
|
<h2>Projet universitaire</h2>
|
|
<p>Courte description</p>
|
|
<button class="go-button" onclick="location.href='#projets'">Y aller</button>
|
|
</div>
|
|
</div>
|
|
<div class="arrow right" onclick="moveSlide(1)">▶</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="projets">
|
|
<h2>Projets universitaires</h2>
|
|
<p>Contenu à venir...</p>
|
|
</section>
|
|
|
|
<section id="experience-pro">
|
|
<h2>Expériences professionnelles</h2>
|
|
<p>Contenu à venir...</p>
|
|
</section>
|
|
|
|
<section id="cv">
|
|
<h2>CV</h2>
|
|
<p>Contenu à venir...</p>
|
|
</section>
|
|
|
|
<section id="experience-perso">
|
|
<h2>Expériences personnelles</h2>
|
|
<p>Contenu à venir...</p>
|
|
</section>
|
|
|
|
<section id="contact">
|
|
<h2>Me contacter</h2>
|
|
<p>Contenu à venir...</p>
|
|
</section>
|
|
|
|
<script>
|
|
const slider = document.getElementById('slider');
|
|
const slides = document.querySelectorAll('.slide');
|
|
let currentIndex = 0;
|
|
const totalSlides = slides.length;
|
|
|
|
let autoSlideDelay = 5000;
|
|
let lastInteractionTime = Date.now();
|
|
let autoSlideInterval;
|
|
|
|
function moveSlide(direction) {
|
|
lastInteractionTime = Date.now();
|
|
if (direction === 1 && currentIndex >= totalSlides - 1) {
|
|
currentIndex = 1;
|
|
slider.style.transition = 'none';
|
|
slider.style.transform = 'translateX(0%)';
|
|
setTimeout(() => {
|
|
slider.style.transition = 'transform 0.5s ease-in-out';
|
|
slider.style.transform = `translateX(-${currentIndex * 100}%)`;
|
|
}, 20);
|
|
return;
|
|
}
|
|
if (direction === -1 && currentIndex <= 0) {
|
|
currentIndex = totalSlides - 2;
|
|
slider.style.transition = 'none';
|
|
slider.style.transform = `translateX(-${(totalSlides - 1) * 100}%)`;
|
|
setTimeout(() => {
|
|
slider.style.transition = 'transform 0.5s ease-in-out';
|
|
slider.style.transform = `translateX(-${currentIndex * 100}%)`;
|
|
}, 20);
|
|
return;
|
|
}
|
|
|
|
currentIndex += direction;
|
|
slider.style.transform = `translateX(-${currentIndex * 100}%)`;
|
|
}
|
|
|
|
function startAutoSlide() {
|
|
autoSlideInterval = setInterval(() => {
|
|
const now = Date.now();
|
|
if (now - lastInteractionTime >= autoSlideDelay) {
|
|
moveSlide(1);
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
startAutoSlide();
|
|
</script>
|
|
</body>
|
|
</html>
|