Add files via upload
This commit is contained in:
Thomas
GitHub
parent
e3a4fe1c5b
commit
6b4e9a0d71
125
index.html
125
index.html
|
|
@ -11,7 +11,7 @@
|
|||
<body>
|
||||
<header class="wrapper-full">
|
||||
<nav>
|
||||
<ul class="list-inline">
|
||||
<ul>
|
||||
<li><a href="#projects" aria-current="page">Projects</a></li>
|
||||
<li><a href="#about">About me</a></li>
|
||||
<li><a href="#experience">Experiece</a></li>
|
||||
|
|
@ -19,61 +19,114 @@
|
|||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<div class="wrapper-full hero-section">
|
||||
<section class="wrapper-full hero-section">
|
||||
<h1>Hi! I'm Thomas</h1>
|
||||
<p>Welcome to my website</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="wrapper-full projects-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>
|
||||
<img src="https://placehold.co/200x150" alt="Placeholder image">
|
||||
<div>
|
||||
<h3>Title</h3>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo voluptatum expedita, cum odio odit, similique, ipsa quidem dolor amet consequuntur unde officia fugit atque.</p>
|
||||
<a href="#">Link</a>
|
||||
<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>
|
||||
<img src="https://placehold.co/200x150" alt="Placeholder image">
|
||||
<div>
|
||||
<h3>Title</h3>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo voluptatum expedita, cum odio odit, similique, ipsa quidem dolor amet consequuntur unde officia fugit atque.</p>
|
||||
<a href="#">Link</a>
|
||||
<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>
|
||||
<img src="https://placehold.co/200x150" alt="Placeholder image">
|
||||
<div>
|
||||
<h3>Title</h3>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo voluptatum expedita, cum odio odit, similique, ipsa quidem dolor amet consequuntur unde officia fugit atque.</p>
|
||||
<a href="#">Link</a>
|
||||
<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>
|
||||
<img src="https://placehold.co/200x150" alt="Placeholder image">
|
||||
<div>
|
||||
<h3>Title</h3>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo voluptatum expedita, cum odio odit, similique, ipsa quidem dolor amet consequuntur unde officia fugit atque.</p>
|
||||
<a href="#">Link</a>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="wrapper-full">
|
||||
<div class="about-section">
|
||||
<section class="wrapper-full about-section">
|
||||
<div class="about">
|
||||
<div>
|
||||
<img src="https://placehold.co/200" alt="Placeholder image">
|
||||
<img src="https://placehold.co/400" alt="Placeholder image">
|
||||
</div>
|
||||
<div>
|
||||
<h2 id="about">About me</h2>
|
||||
|
|
@ -92,11 +145,11 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="wrapper-full studies-section">
|
||||
<section class="wrapper-full experiences-section">
|
||||
<h2 id="experience">My experiences</h2>
|
||||
<ol class="list-inline timeline">
|
||||
<ol class="timeline">
|
||||
<li>
|
||||
<h3>School 1</h3>
|
||||
<h4>Lorem ipsum</h4>
|
||||
|
|
@ -108,11 +161,13 @@
|
|||
<div><time datetime="2023">2023</time><span>-</span><time datetime="2023">2023</time></div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="download-section">
|
||||
<a href="#" download class="btn">Download as PDF</a>
|
||||
</div>
|
||||
<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>
|
||||
</main>
|
||||
<footer class="wrapper-full">
|
||||
<ul class="list-inline">
|
||||
|
|
|
|||
190
main.scss
190
main.scss
|
|
@ -594,22 +594,42 @@ details[open] summary + * {
|
|||
|
||||
|
||||
|
||||
|
||||
header, footer {
|
||||
body {
|
||||
header, footer {
|
||||
background-color: var(--primary);
|
||||
padding: 1rem 2rem;
|
||||
padding: .5rem clamp(.2rem, 3vw, 2rem);
|
||||
}
|
||||
}
|
||||
header {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
inset-block-start: 0;
|
||||
inset-inline: 0;
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
&.wrapper-full {
|
||||
nav {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
justify-content: start;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 6px 20px;
|
||||
--item-separator: none;
|
||||
padding: 6px clamp(10px, 3vw, 20px);
|
||||
margin: 0;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
display: inline-block;
|
||||
|
|
@ -648,6 +668,7 @@ main {
|
|||
}
|
||||
footer {
|
||||
justify-items: center;
|
||||
margin-block-start: 1.5rem;
|
||||
.list-inline {
|
||||
a {
|
||||
text-decoration: underline;
|
||||
|
|
@ -656,6 +677,19 @@ footer {
|
|||
}
|
||||
}
|
||||
|
||||
i {
|
||||
vertical-align: text-top;
|
||||
fill: var(--fill-color, var(--primary-light));
|
||||
display: inline-block;
|
||||
block-size: 1.5rem;
|
||||
aspect-ratio: 1;
|
||||
|
||||
svg {
|
||||
aspect-ratio: 1;
|
||||
block-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
background-color: var(--primary);
|
||||
height: 65vh;
|
||||
|
|
@ -665,51 +699,77 @@ footer {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.projects-section {
|
||||
margin-block: 1rem;
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: var(--gutter);
|
||||
overflow-y: scroll;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
li {
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
article {
|
||||
width: clamp(9rem, 20vw, 13rem);
|
||||
// width: 14rem;
|
||||
// min-width: 200px;
|
||||
// max-width: 250px;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
padding: .4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--primary);
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
img {
|
||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||
justify-content: space-between;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
div {
|
||||
padding: .5rem 1rem .8rem 1rem;
|
||||
.background {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
a {
|
||||
float: inline-end;
|
||||
border-radius: var(--border-radius);
|
||||
border: var(--border-width) solid var(--text);
|
||||
margin-block-start: 1rem;
|
||||
padding: .1rem .5rem;
|
||||
transition: background-color .2s ease-in-out, color .2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--text);
|
||||
color: var(--background);
|
||||
i {
|
||||
--fill-color: var(--text-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
--fill-color: var(--text);
|
||||
}
|
||||
|
||||
.top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
gap: .2rem;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 1rem .4rem 0 .4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.about-section {
|
||||
background-color: var(--primary);
|
||||
padding-block: 2rem;
|
||||
margin-block: 2.5rem;
|
||||
}
|
||||
.about {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
|
||||
& > div:first-child {
|
||||
inline-size: 30%;
|
||||
}
|
||||
|
|
@ -719,8 +779,7 @@ footer {
|
|||
img {
|
||||
margin: 1rem auto;
|
||||
inline-size: 100%;
|
||||
min-inline-size: 150px;
|
||||
max-inline-size: 300px;
|
||||
inline-size: clamp(200px, 100%, 400px);
|
||||
aspect-ratio: 1;
|
||||
border-radius: 100%;
|
||||
border: 4px solid var(--primary-dark)
|
||||
|
|
@ -729,18 +788,85 @@ footer {
|
|||
margin-block-start: 1rem;
|
||||
gap: .2rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
flex-direction: column;
|
||||
|
||||
& > div:first-child, & > div:last-child {
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
inline-size: clamp(200px, 50vw, 300px);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inline-size: 6px;
|
||||
background-color: var(--light-1);
|
||||
inset: 0 0 0 1.5rem;
|
||||
margin-inline-start: -3px;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 10px 40px;
|
||||
padding: 1rem 0 1rem 3.5rem;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
aspect-ratio: 1;
|
||||
inline-size: 26px;
|
||||
background-color: var(--light-1);
|
||||
border: 4px solid var(--secondary-dark);
|
||||
inset-inline-start: .9rem;
|
||||
inset-block-start: 1.5rem;
|
||||
border-radius: 50%;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.download-section {
|
||||
text-align: center;
|
||||
margin-block: 2rem 1rem;
|
||||
margin-block: 2rem 1.5rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: .4rem .8rem;
|
||||
text-decoration: none;
|
||||
transition: background-color .2s ease-in-out, text-decoration .2s ease-in-out;
|
||||
|
||||
&: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;
|
||||
// }
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--dark-2);
|
||||
text-decoration: underline;
|
||||
|
|
|
|||
Loading…
Reference in a new issue