<html lang="fr">
<head>
<meta charset ="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Loading -->
<section id="loading">
<div class="loading">
<div class=nav-loading>
<img src="1.png">
<img src="2.png">
<img src="3.png">
</div>
</div>
<section>
<!-- Fin loading -->
<!-- Bloc -->
<div class="bloc">
<div class="nav-bloc">
<img src="Logo Jérémie.png">
</div>
</div>
<!-- Fin bloc -->
<!-- Header -->
<section id="header" class="header">
<div class="navigation">
<div class="hamburger"><div class="bar"></div></div>
<ul class="menu">
<li class="menu-item">
<span><a class="menu-item_00" href="#presentation">QUI SUIS-JE ?</a></span>
</li>
<li class="menu-item">
<span><a class="menu-item_00" href="#bloc_3">FORMATIONS PROFESSIONNELLES</a></span>
</li>
<li class="menu-item">
<span><a class="menu-item_00" href="#compagnons">MES COMPÉTENCES</a></span>
</li>
<li class="menu-item">
<span><a class="menu-item_00" href="#portfolio">PORTFOLIO</a></span>
</li>
</ul>
</div>
</section>
<!-- Fin header -->
<!-- Home page -->
<div class="hero">
<div class="nav-hero">
<h1>JEREMIE LABORDE</h1> <br>
<h2>GRAPHISTE - INFOGRAPHISTE - MULTIMEDIA - CHEF DE PROJET</h2>
</div>
<video autoplay="autoplay" muted="" loop="infinite" src="Offre graphiste.mp4"></video>
</div>
<!-- Fin home page -->
<!-- Bloc 2 -->
<div class="bloc_2">
<div class="nav-bloc_2">
<div class="colum_1">
<img src="maison-silhouette-noire-sans-porte.png">
<p>BOUCAU</p>
</div>
<div class="colum_2">
<img src="appel-telephonique.png">
<p>06.82.80.22.23</p>
</div>
<div class="colum_3">
<img src="enveloppe-de-courrier-electronique.png">
<p>LABORDE.GRAPHISTE@GMAIL.COM</p>
</div>
</div>
</div>
<!-- Fin bloc 2 -->
<!-- Presentation -->
<section id="presentation">
<div class="presentation">
<div class="nav-presentation">
<div class="colum_1">
</div>
<div class="colum_2">
<div class="nav_colum">
<h3>Qui suis-je ?</h3><span></span>
</div>
<h2>Je m’appelle Jérémie Laborde et je suis graphiste designer et animation.</h2>
<p>Je suis une personne minutieuse, patiente et constamment à la recherche de nouvelles idées. J’ai des compétences également dans le développement.
Polyvalent et créatif, je travaille autour de la communication print et web. <br><br>
De la création de logo, plaquette commerciale à l’animation vidéo 2D & 3D, en passant par le site web...
</p>
</div>
</div>
<img src="Jeremie symetrie.jpg">
</div>
</section>
<!-- Fin Presentation -->
<!-- Bloc -->
<section id="bloc_3">
<div class="bloc_3">
<div class="nav-bloc_3">
<p>"Le design est dans les <span class="detail">détails</span>" <br> <h4>Paul Bennet</h4></p>
</div>
</div>
</section>
<!-- Fin bloc -->
<!-- Compagnons -->
<section id="compagnons">
<div class=compagnons>
<div class="nav-compagnons">
<div class="colum_1">
<div class="nav_colum">
<h3>Formations professionnelles</h3><span></span>
</div>
<h2>Dessinateur projeteur - <br> Les compagnons du tour de france</h2>
<p>En tant que dessinateur projeteur, j'ai réalisé des études d’avant projets sommaires et détaillés mais également de la création des plans de permis de construire. Ce métier m'a permis de développer le côté artistique et créatif.</p> <br><br>
<h2>Chef de projet marketing et création de site web - <br> CCI</h2>
<p>Je suis infographiste, graphiste, développeur et chef de projet. Cette polyvalence me permet de travailler aussi bien dans le graphisme que dans la création de site web et son écosystème.</p>
</p>
</div>
<div class="colum_2">
</div>
<img src="Chef de projet.jpg">
</div>
</div>
</section>
<!-- Fin compagnons -->
<!-- Competences -->
<section id="assurance">
<div class="image">
<img src="geek illustration.jpg">
</div>
<div class="swiper-container-4">
<div class="swiper-wrapper">
<div style="width: 100%;" class="swiper-slide">
<div class="founder">
<div class="nav-founder">
<div class="nav-founder-column">
<h3>Adobe After Effects</h3>
<span class="ext1"><span class="int1"></span></span>
</div>
</div>
</div>
</div>
<div style="width: 100%;" class="swiper-slide">
<div class="founder">
<div class="nav-founder">
<div class="nav-founder-column">
<h3>Adobe Illustrator</h3>
<span class="ext1"><span class="int1"></span></span>
</div>
</div>
</div>
</div>
<div style="width: 100%;" class="swiper-slide">
<div class="founder">
<div class="nav-founder">
<div class="nav-founder-column">
<h3>Adobe Photoshop</h3>
<span class="ext1"><span class="int1"></span></span>
</div>
</div>
</div>
</div>
<div style="width: 100%;" class="swiper-slide">
<div class="founder">
<div class="nav-founder">
<div class="nav-founder-column">
<h3>Adobe Lightroom</h3>
<span class="ext1"><span class="int1"></span></span>
</div>
</div>
</div>
</div>
<div style="width: 100%;" class="swiper-slide">
<div class="founder">
<div class="nav-founder">
<div class="nav-founder-column">
<h3>Maxon Cinéma 4D</h3>
<span class="ext1"><span class="int1"></span></span>
</div>
</div>
</div>
</div>
<div style="width: 100%;" class="swiper-slide">
<div class="founder">
<div class="nav-founder">
<div class="nav-founder-column">
<h3>HTML5, CSS3 & JAVASCRIPT</h3>
<span class="ext1"><span class="int2"></span></span>
</div>
</div>
</div>
</div>
<div style="width: 100%;" class="swiper-slide">
<div class="founder">
<div class="nav-founder">
<div class="nav-founder-column">
<h3>Wordpress</h3>
<span class="ext1"><span class="int2"></span></span>
</div>
</div>
</div>
</div>
<div style="width: 100%;" class="swiper-slide">
<div class="founder">
<div class="nav-founder">
<div class="nav-founder-column">
<h3>Illustration</h3>
<span class="ext2"><span class="int3"></span></span>
</div>
</div>
</div>
</div>
<div style="width: 100%;" class="swiper-slide">
<div class="founder">
<div class="nav-founder">
<div class="nav-founder-column">
<h3>Branding</h3>
<span class="ext2"><span class="int3"></span></span>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</section>
<!-- Fin competences -->
<!-- Portfolio -->
<section id="portfolio">
<div class="portfolio">
<h3>CE PORTFOLIO<br>
est (toujours) en cours de mise à jour....</h3>
<div class="nav-portfolio">
<div class="colum_1">
<img src="Servane Burel - Background.jpg">
<div class="before_1">
<p>Carte de visite<p>
</div>
</div>
<div class="colum_2">
<img src="Presentation du logo.jpg">
<div class="before_2">
<p>Logo<p>
</div>
</div>
<div class="colum_3">
<img src="Sites responsives.jpg">
<div class="before_3">
<p>Site Web<p>
</div>
</div>
<div class="colum_5">
<video autoplay="autoplay" muted="" loop="infinite" src="2D.mp4"></video>
<div class="before_5">
<p>Vidéo 2D<p>
</div>
</div>
<div class="colum_6">
<video autoplay="autoplay" muted="" loop="infinite" src="vidéo-menu-hiver-2-optimisé.mp4"></video>
<div class="before_6">
<p>Vidéo 3D<p>
</div>
</div>
<div class="colum_4">
<img src="Maison.jpg">
<div class="before_4">
<p>Dessin bâtiment<p>
</div>
</div>
</div>
</div>
</section>
<!-- Fin portfolio -->
<!-- Footer -->
<div class="footer">
<div class="nav-footer">
<h3>Jérémie LABORDE</h3>
</div>
</div>
<!-- Fin footer -->
<script src="./app.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container-4', {
spaceBetween: 0,
centeredSlides: true,
autoplay: {
delay:2500,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
</script>
<script defer>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.querySelector('.bloc').style.opacity = "1";
} else if (prevScrollpos < 400) {
document.querySelector('.bloc').style.opacity = "1";
} else {
document.querySelector('.bloc').style.opacity = "0";
}
prevScrollpos = currentScrollPos;
}
</script>
</body>
</html>
