Change color theme
This commit is contained in:
parent
07538fa10d
commit
f82286f129
225
index.html
225
index.html
|
|
@ -12,8 +12,8 @@
|
|||
<header class="wrapper-full">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#projects" aria-current="page">Projects</a></li>
|
||||
<li><a href="#about">About me</a></li>
|
||||
<li><a href="#about" aria-current="page">About me</a></li>
|
||||
<li><a href="#projects">Projects</a></li>
|
||||
<li><a href="#experience">Experiece</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
@ -23,107 +23,8 @@
|
|||
<h1>Hi! I'm Thomas</h1>
|
||||
<p>Welcome to my website</p>
|
||||
</section>
|
||||
|
||||
<section class="wrapper-full projects-section">
|
||||
<h2 id="projects">My projects</h2>
|
||||
<ul>
|
||||
<!-- <li>
|
||||
<article>
|
||||
<div class="top">
|
||||
<span></span>
|
||||
<div class="links">
|
||||
<a href="#" title="Checkout the website"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>web</title><path d="M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
|
||||
<a href="#" title="Source on Github"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>github</title><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h3>Title</h3>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo voluptatum expedita, cum odio odit, similique.</p>
|
||||
</div>
|
||||
<img class="background" src="https://placehold.co/200x150" alt="Placeholder image">
|
||||
</article>
|
||||
</li> -->
|
||||
<li>
|
||||
<article>
|
||||
<div class="top">
|
||||
<span></span>
|
||||
<div class="links">
|
||||
<a href="#" title="Source on Github"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>github</title><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h3>Cancre Simulator</h3>
|
||||
<p>Un jeu fait pour les Portes Ouvertes 2020</p>
|
||||
</div>
|
||||
<img class="background" src="https://placehold.co/200x150" alt="Placeholder image">
|
||||
</article>
|
||||
</li>
|
||||
<li>
|
||||
<article>
|
||||
<div class="top">
|
||||
<span></span>
|
||||
<div class="links">
|
||||
<a href="#" title="Checkout the website"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>web</title><path d="M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
|
||||
<a href="#" title="Source on Github"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>github</title><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h3>Sigfox Temperature</h3>
|
||||
<p>Des capteurs de température affichés sur un tableau de bord</p>
|
||||
</div>
|
||||
<img class="background" src="https://placehold.co/200x150" alt="Placeholder image">
|
||||
</article>
|
||||
</li>
|
||||
<li>
|
||||
<article>
|
||||
<div class="top">
|
||||
<span></span>
|
||||
<div class="links">
|
||||
<a href="#" title="Source on Github"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>github</title><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h3>Snake</h3>
|
||||
<p>Un snake réalisé en Java</p>
|
||||
</div>
|
||||
<img class="background" src="https://placehold.co/200x150" alt="Placeholder image">
|
||||
</article>
|
||||
</li>
|
||||
<li>
|
||||
<article>
|
||||
<div class="top">
|
||||
<span></span>
|
||||
<div class="links">
|
||||
<a href="#" title="Checkout the website"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>web</title><path d="M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
|
||||
<a href="#" title="Source on Github"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>github</title><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h3>LDAP</h3>
|
||||
<p>Ajouter, voir et se connecter à des utilisateurs LDAP depuis un site</p>
|
||||
</div>
|
||||
<img class="background" src="https://placehold.co/200x150" alt="Placeholder image">
|
||||
</article>
|
||||
</li>
|
||||
<li>
|
||||
<article>
|
||||
<div class="top">
|
||||
<span></span>
|
||||
<div class="links">
|
||||
<a href="#" title="Source on Github"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>github</title><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h3>Qui est-ce ?</h3>
|
||||
<p>Un "Qui est-ce ?" fait en Python et avec des LEGO Mindstorms</p>
|
||||
</div>
|
||||
<img class="background" src="https://placehold.co/200x150" alt="Placeholder image">
|
||||
</article>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="wrapper-full about-section">
|
||||
|
||||
<section class="wrapper about-section">
|
||||
<div class="about">
|
||||
<div>
|
||||
<img src="https://placehold.co/400" alt="Placeholder image">
|
||||
|
|
@ -147,26 +48,124 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wrapper-full projects-section">
|
||||
<h2 id="projects">My projects</h2>
|
||||
<ul>
|
||||
<!-- <li>
|
||||
<article>
|
||||
<div class="top">
|
||||
<span></span>
|
||||
<div class="links">
|
||||
<a href="#" title="Checkout the website"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>web</title><path d="M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
|
||||
<a href="#" title="Source on Github"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>github</title><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h3>Title</h3>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo voluptatum expedita, cum odio odit, similique.</p>
|
||||
</div>
|
||||
</article>
|
||||
</li> -->
|
||||
<li>
|
||||
<article>
|
||||
<div class="top">
|
||||
<span></span>
|
||||
<div class="links">
|
||||
<a href="#" title="Source on Github"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>github</title><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h3>Cancre Simulator</h3>
|
||||
<p>Un jeu fait pour les Portes Ouvertes 2020</p>
|
||||
</div>
|
||||
</article>
|
||||
</li>
|
||||
<li>
|
||||
<article style="--background: rgb(255, 143, 143);">
|
||||
<div class="top">
|
||||
<span></span>
|
||||
<div class="links">
|
||||
<a href="#" title="Checkout the website"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>web</title><path d="M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
|
||||
<a href="#" title="Source on Github"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>github</title><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h3>Sigfox Temperature</h3>
|
||||
<p>Des capteurs de température affichés sur un tableau de bord</p>
|
||||
</div>
|
||||
</article>
|
||||
</li>
|
||||
<li>
|
||||
<article>
|
||||
<div class="top">
|
||||
<span></span>
|
||||
<div class="links">
|
||||
<a href="#" title="Source on Github"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>github</title><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h3>Snake</h3>
|
||||
<p>Un snake réalisé en Java</p>
|
||||
</div>
|
||||
</article>
|
||||
</li>
|
||||
<li>
|
||||
<article>
|
||||
<div class="top">
|
||||
<span></span>
|
||||
<div class="links">
|
||||
<a href="#" title="Checkout the website"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>web</title><path d="M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
|
||||
<a href="#" title="Source on Github"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>github</title><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h3>LDAP</h3>
|
||||
<p>Ajouter, voir et se connecter à des utilisateurs LDAP depuis un site</p>
|
||||
</div>
|
||||
</article>
|
||||
</li>
|
||||
<li>
|
||||
<article>
|
||||
<div class="top">
|
||||
<span></span>
|
||||
<div class="links">
|
||||
<a href="#" title="Source on Github"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>github</title><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h3>Qui est-ce ?</h3>
|
||||
<p>Un "Qui est-ce ?" fait en Python et avec des LEGO Mindstorms</p>
|
||||
</div>
|
||||
</article>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="wrapper-full experiences-section">
|
||||
<h2 id="experience">My experiences</h2>
|
||||
<ol class="timeline">
|
||||
<li>
|
||||
<h3>School 1</h3>
|
||||
<h4>Lorem ipsum</h4>
|
||||
<div><time datetime="2023">2023</time><span>-</span><time datetime="2023">2023</time></div>
|
||||
<h3><time datetime="2023">2023</time><span>-</span><time datetime="2023">2023</time></h3>
|
||||
<p>Lorem ipsum, School 1</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>School 2</h3>
|
||||
<h4>Lorem ipsum</h4>
|
||||
<div><time datetime="2023">2023</time><span>-</span><time datetime="2023">2023</time></div>
|
||||
<h3><time datetime="2023">2023</time><span>-</span><time datetime="2023">2023</time></h3>
|
||||
<p>Lorem ipsum, School 2</p>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<section class="download-section">
|
||||
<a href="#" download class="btn icon">
|
||||
<i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>tray-arrow-down</title><path d="M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 15L17.55 9.54L16.13 8.13L13 11.25V2H11V11.25L7.88 8.13L6.46 9.55L12 15Z" /></svg></i><span>Download as PDF</span>
|
||||
</a>
|
||||
<section class="wrapper-full download-section">
|
||||
<div class="content">
|
||||
<div class="flex-container column">
|
||||
<p>You want to print this document ?</p>
|
||||
<i></i>
|
||||
<a href="#" download class="btn icon--download">
|
||||
Download as PDF
|
||||
<!-- <i></i><span>Download as PDF</span> -->
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer class="wrapper-full">
|
||||
|
|
|
|||
150
main.scss
150
main.scss
|
|
@ -48,9 +48,9 @@
|
|||
:where(html) {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
:where(html, body) {
|
||||
block-size: 100%;
|
||||
}
|
||||
// :where(html, body) {
|
||||
// block-size: 100%;
|
||||
// }
|
||||
:where(body) {
|
||||
text-rendering: optimizeSpeed;
|
||||
line-height: 1.5;
|
||||
|
|
@ -123,6 +123,15 @@
|
|||
background-color: var(--background-color, none);
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
&.column {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -595,12 +604,17 @@ details[open] summary + * {
|
|||
|
||||
|
||||
body {
|
||||
--start: var(--primary-light);
|
||||
--end: var(--secondary);
|
||||
background: var(--start);
|
||||
background: linear-gradient(180deg, var(--start) 0%, var(--end) 100%);
|
||||
|
||||
header, footer {
|
||||
background-color: var(--primary);
|
||||
padding: .5rem clamp(.2rem, 3vw, 2rem);
|
||||
}
|
||||
}
|
||||
header {
|
||||
background-color: var(--primary);
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
inset-block-start: 0;
|
||||
|
|
@ -617,7 +631,7 @@ header {
|
|||
nav {
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
justify-content: flex-end;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
|
|
@ -667,6 +681,7 @@ main {
|
|||
}
|
||||
}
|
||||
footer {
|
||||
background-color: var(--secondary);
|
||||
justify-items: center;
|
||||
margin-block-start: 1.5rem;
|
||||
.list-inline {
|
||||
|
|
@ -691,7 +706,6 @@ i {
|
|||
}
|
||||
|
||||
.hero-section {
|
||||
background-color: var(--primary);
|
||||
height: 65vh;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
|
|
@ -713,6 +727,7 @@ i {
|
|||
}
|
||||
|
||||
article {
|
||||
--background: url('https://placehold.co/200x150');
|
||||
position: relative;
|
||||
height: 100%;
|
||||
padding: .4rem;
|
||||
|
|
@ -720,27 +735,23 @@ i {
|
|||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
.background {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
object-fit: cover;
|
||||
z-index: 1;
|
||||
background: var(--background);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
a {
|
||||
&:hover {
|
||||
i {
|
||||
--fill-color: var(--text-2);
|
||||
fill: #3a3a3a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
--fill-color: var(--text);
|
||||
transition: fill .2s ease-in-out;
|
||||
}
|
||||
|
||||
.top {
|
||||
|
|
@ -760,10 +771,10 @@ i {
|
|||
}
|
||||
}
|
||||
|
||||
.about-section {
|
||||
background-color: var(--primary);
|
||||
.about-section,
|
||||
.projects-section,
|
||||
.experiences-section {
|
||||
padding-block: 2rem;
|
||||
margin-block: 2.5rem;
|
||||
}
|
||||
.about {
|
||||
display: flex;
|
||||
|
|
@ -819,56 +830,97 @@ i {
|
|||
}
|
||||
|
||||
li {
|
||||
--size: 3rem;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 10px 40px;
|
||||
padding: 1rem 0 1rem 3.5rem;
|
||||
margin: 1.4rem 0;
|
||||
padding: 0 0 0 calc(var(--size) + .8rem);
|
||||
|
||||
&:first-child {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
aspect-ratio: 1;
|
||||
inline-size: 26px;
|
||||
inline-size: var(--size);
|
||||
background-color: var(--light-1);
|
||||
border: 4px solid var(--secondary-dark);
|
||||
inset-inline-start: .9rem;
|
||||
inset-block-start: 1.5rem;
|
||||
border: 6px solid var(--secondary-dark);
|
||||
inset-inline-start: 0;
|
||||
// inset-inline-start: .9rem;
|
||||
inset-block-end: 50%;
|
||||
transform: translateY(50%);
|
||||
// inset-block-end: 0;
|
||||
// inset-block-start: 1.5rem;
|
||||
border-radius: 50%;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.download-section {
|
||||
text-align: center;
|
||||
margin-block: 2rem 1.5rem;
|
||||
.experiences-section {
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: .4rem .8rem;
|
||||
--hover: var(--dark-2);
|
||||
--active: var(--dark-2);
|
||||
text-decoration: none;
|
||||
transition: background-color .2s ease-in-out, text-decoration .2s ease-in-out;
|
||||
transition: background-color .1s ease-in-out;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
min-height: 2.5rem;
|
||||
padding: .5rem 1rem;
|
||||
width: fit-content;
|
||||
align-items: center;
|
||||
max-height: none;
|
||||
max-width: 100%;
|
||||
|
||||
&[class*="icon"]:before {
|
||||
--icon-size: 1.4rem;
|
||||
content: '';
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
background-color: currentColor;
|
||||
mask-size: 100% 100%;
|
||||
height: var(--icon-size);
|
||||
width: var(--icon-size);
|
||||
margin-left: -.125rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
&:has(> i) { padding-inline-start: .6rem; }
|
||||
&.icon { padding-inline-start: .6rem; }
|
||||
|
||||
i {
|
||||
// vertical-align: text-top;
|
||||
// fill: var(--primary-light);
|
||||
// display: inline-block;
|
||||
margin-inline-end: .4rem;
|
||||
// block-size: 1.5rem;
|
||||
// aspect-ratio: 1;
|
||||
|
||||
// svg {
|
||||
// aspect-ratio: 1;
|
||||
// block-size: 1.5rem;
|
||||
// }
|
||||
&.icon--download:before {
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Etray-arrow-down%3C/title%3E%3Cpath d='M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 15L17.55 9.54L16.13 8.13L13 11.25V2H11V11.25L7.88 8.13L6.46 9.55L12 15Z' /%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--dark-2);
|
||||
text-decoration: underline;
|
||||
background-color: var(--hover);
|
||||
}
|
||||
&:active {
|
||||
background-color: var(--active);
|
||||
}
|
||||
}
|
||||
|
||||
.download-section {
|
||||
text-align: center;
|
||||
margin-block: 3.5rem;
|
||||
|
||||
.btn {
|
||||
color: var(--secondary-light);
|
||||
}
|
||||
|
||||
.content {
|
||||
p {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue