generated from Templates_CodeFirst/templateHtmlCss
new plan
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
parent
7955d58807
commit
6271b8da46
@ -1,85 +1,133 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Portfolio </title>
|
||||
<link rel="stylesheet" href="https://codefirst.iut.uca.fr/git/francois.yousse/portfolio/src/branch/master/mycoolstyle.css">
|
||||
<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/git/francois.yousse/portfolio/src/branch/master/mycoolstyle.css"> -->
|
||||
<link rel="stylesheet" href="mycoolstyle.css">
|
||||
</head>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
<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>
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction:column;
|
||||
<section id="experience-perso">
|
||||
<h2>Expériences personnelles</h2>
|
||||
<p>Contenu à venir...</p>
|
||||
</section>
|
||||
|
||||
}
|
||||
h1, h2, div{
|
||||
text-align:center
|
||||
}
|
||||
<section id="contact">
|
||||
<h2>Me contacter</h2>
|
||||
<p>Contenu à venir...</p>
|
||||
</section>
|
||||
|
||||
.text{
|
||||
width: 80%;
|
||||
}
|
||||
.centered{
|
||||
padding-top: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction:column;
|
||||
<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;
|
||||
}
|
||||
.navbar {
|
||||
background-color: #333;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
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;
|
||||
}
|
||||
.navbar a {
|
||||
float: left;
|
||||
display: block;
|
||||
color: #f2f2f2;
|
||||
text-align: center;
|
||||
padding: 14px 20px;
|
||||
text-decoration: none;
|
||||
|
||||
currentIndex += direction;
|
||||
slider.style.transform = `translateX(-${currentIndex * 100}%)`;
|
||||
}
|
||||
|
||||
function startAutoSlide() {
|
||||
autoSlideInterval = setInterval(() => {
|
||||
const now = Date.now();
|
||||
if (now - lastInteractionTime >= autoSlideDelay) {
|
||||
moveSlide(1);
|
||||
}
|
||||
.navbar a:hover {
|
||||
background-color: #ddd;
|
||||
color: black;
|
||||
}, 1000);
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="navbar">
|
||||
<a class="active" href="#home">Accueil</a>
|
||||
<a href="#apropos">A propos</a>
|
||||
<a href="#cv">CV</a>
|
||||
<a href="#sae">SAE</a>
|
||||
</div>
|
||||
<div class=centered>
|
||||
<div id=home>
|
||||
<h1>Portfolio de Yousse François</h1>
|
||||
<p>Bienvenue dans mon portfolio </p>
|
||||
<p>EN TRAVAUX</p>
|
||||
</div>
|
||||
<div id=apropos class=text>
|
||||
<h1> A propos</h1>
|
||||
<div>Etudiant redoublant ma deuxième année, je souhaite me réorienter en info-communication. J'ai déjà réalisé un stage l'année dernière dans l'entreprise Cikaba. Ce stage m'a permi de prendre conscience des avantages et inconvegniants du métier de développeur. J'ai aussi pu découvrir comment fonctionnait le travail en entreprise avec ce stage, ce qui m'a permis de gagner en expérience. L'iut m'a permis d'améliorer ma capacité d'adaptation, et de résolution de problèmes en général. </div>
|
||||
</div>
|
||||
|
||||
<div id=cv>
|
||||
<h1>CV</h1>
|
||||
<img src="https://codefirst.iut.uca.fr/git/francois.yousse/portfolio/raw/branch/master/cv.png" width="400" height="600">
|
||||
</div>
|
||||
<div id=sae class=text>
|
||||
<h1>SAE</h1>
|
||||
<div> Mon projet de SAE cette année était Timeline. L'objectif était de reproduire le jeu timeline sous un format numérique. Nous avons ainsi crée un jeu multijoueur jouable sur pc.</div>
|
||||
<div>Cependant, ce n'est pas la partie où j'ai le plus fournis le plus d'effort. </div>
|
||||
<div> Au début de la SAE, avec l'expérience accumulée avec le stage ainsi qu'avec l'année précédente, j'aidais beaucoup le reste de l'équipe dans les choix importants, comme les méthodes de travail, la réaliasation des diaporama, et la conception. Cela m'a permis d'améliorer ma capacité à travailler en équipe et utiliser les outils de gestion de projet. (UE 5 et 6)</div>
|
||||
<div> Par la suite, j'ai décider de me focaliser sur la création de l'application admin. J'étais à l'aise avec le blazor, le c#, et possédais plus de notions sur les API. Il fallait avec ce site proposer une interface agréable à utiliser, tout en faisant en sorte qu'elle soit entretenable facilement dans le temps. J'ai donc du connecter l'api à la base de donnée, et utiliser le systeme de DTO pour avoir des données controlées. C'était enrichissant d'approfondir les connaissances vues l'année précédente pour les implémenter dans un autre projet. </div>
|
||||
</div>
|
||||
startAutoSlide();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,34 +1,101 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: red;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
flex-direction:row
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
}
|
||||
.centered{
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-bottom: 2px solid #000;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
nav a {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
.navbar {
|
||||
background-color: #333;
|
||||
|
||||
section {
|
||||
min-height: 100vh;
|
||||
padding-top: 100px;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* Slider */
|
||||
.slider-container {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
margin: 100px auto;
|
||||
border: 4px solid black;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
}
|
||||
.navbar a {
|
||||
float: left;
|
||||
display: block;
|
||||
color: #f2f2f2;
|
||||
text-align: center;
|
||||
padding: 14px 20px;
|
||||
text-decoration: none;
|
||||
|
||||
.slider {
|
||||
display: flex;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
}
|
||||
.navbar a:hover {
|
||||
background-color: #ddd;
|
||||
color: black;
|
||||
|
||||
.slide {
|
||||
min-width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.slide h2 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 2rem;
|
||||
background: white;
|
||||
border: 2px solid black;
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.slider-container:hover .arrow {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.slider-container:hover .arrow:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.arrow.left {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.arrow.right {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.go-button {
|
||||
margin-top: 2rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 2px solid black;
|
||||
background-color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color:gray;
|
||||
}
|
||||
Loading…
Reference in new issue