Update layout

src/index.html

@@ -30,30 +30,37 @@
 			<h2>Contact</h2>
 			<div class="block link-block">	
 				<a href="mailto:contact@edgarpierre.fr">
-					<img src="/static/svg/icons/Business/mail-send-fill.svg" alt="" />
-					<span>Email <em>contact@edgarpierre.fr</em></span>
+					<span class="i ri-mail-send-fill"></span>
+					<span class="desc">Email <em>contact@edgarpierre.fr</em></span>
 				</a>
 			</div>
 
 			<h2>Liens</h2>
 			<div class="block link-block">
 				<a href="https://git.edgarpierre.fr/edpibu">
-					<img src="/static/svg/icons/Development/git-repository-fill.svg" alt="" />
-					<span>Git<span>
-				</a>
-				<a href="https://github.com/edpiburkhart">
-					<img src="/static/svg/icons/Logos/github-fill.svg" alt="" />
-					<span>Github <em>edpiburkhart</em><span>
+					<span class="i ri-git-repository-fill"></span>
+					<span class="desc">Git</span>
 				</a>
 				<a href="https://www.komoot.fr/user/383887346799">
-					<img src="/static/svg/icons/Map/map-2-fill.svg" alt="" />
-					<span>Komoot <em>edpibu</em></span>
+					<span class="i ri-map-2-fill"></span>
+					<span class="desc">Komoot <em>edpibu</em></span>
+				</a>
+				<a href="https://m.edgarpierre.fr">
+					<span class="i ri-mastodon-fill"></span>
+					<span class="desc">Mastodon</span>
 				</a>
 			</div>
 		</div>
 
 		<div class="cv">
 			<h2>CV</h2>
+			<h3>Enseignement</h3>
+			<dl>
+				<dt>2022–2023</dt>
+				<dd><strong>STI2D et BTS Management Économique de la Construction</strong>,
+					<em>Lycée Le Corbusier</em>, Illkirch-Graffenstaden.</dd>
+			</dl>
+
 			<h3>Études</h3>
 			<dl>
 				<dt>2021–2022</dt>
@@ -77,7 +84,7 @@
 						Normale Supérieure Paris-Saclay</em>, Cachan. Niveau équivalent L3.</dd>
 
 				<dt>2018</dt>
-				<dd><strong>Concours d'entrée aux grandes écoles X-ENS</strong>. Rang: 13.</dd>
+				<dd><strong>Concours d'entrée aux grandes écoles X–ENS</strong>. Rang: 13.</dd>
 
 				<dt>2016–2018</dt>
 				<dd><strong>Classe Préparatoire aux Grandes Écoles PCSI–PSI*</strong>, <em>Lycée Polyvalent Louis
@@ -95,9 +102,9 @@
 					flow which generated the 50T concrete block displacement at the Artha breakwater on February 28, 2017. »,
 					dirigé par Pr. Stéphane Abadie.</dd>
 
-				<dt>2022</dt>
+				<dt>2021</dt>
 				<dd><strong>Stage d'enseignement</strong>, <em>IUT de Ville d'Avray</em>. Présentation d'une séquence
-					« Introduction au Génie Civil » en Licence Pro MGB; encadrement de 2h de cours–TD « Fondamentaux de la sécurité
+					« Introduction au Génie Civil » en Licence Pro MGB ; encadrement de 2h de cours « Fondamentaux de la sécurité
 					incendie » et 4h de Bureau d'Étude.</dd>
 
 				<dt>2020</dt>
@@ -107,7 +114,7 @@
 
 				<dt>2019</dt>
 				<dd><strong>Stage d'enseignement</strong>, <em>Lycée Viollet le Duc</em>, Villiers-Saint-Frédéric. Présentation
-					d'une séance « Introduction à la RDM » en STI2D; encadrement de 2h de cours–TD.</dd>
+					d'une séance « Introduction à la RDM » en STI2D ; encadrement de 2h de cours.</dd>
 			</dl>
 
 			<h3>Compétences</h3>
@@ -121,9 +128,6 @@
 
 				<dt>Allemand</dt>
 				<dd>Niveau B1. <em>Deutsches Sprachdiplom 1</em>.</dd>
-
-				<dt>Espagnol</dt>
-				<dd>Lu.</dd>
 			</dl>
 
 			<h4>Informatique</h4>
@@ -135,10 +139,13 @@
 				<dd>HTML, CSS, JS ; NodeJS, Django</dd>
 
 				<dt>Bureautique</dt>
-				<dd>LaTeX, LibreOffice</dd>
+				<dd>LaTeX, LibreOffice, Microsoft Office</dd>
 
-				<dt>Modélisation</dt>
-				<dd>SolidWorks, Siemens NX, OpenScad</dd>
+				<dt>CAO</dt>
+				<dd>SolidWorks, Autocad, OpenScad</dd>
+
+				<dt>BIM</dt>
+				<dd>Revit</dd>
 
 				<dt>Réalité Virtuelle</dt>
 				<dd>Réalité virtuelle avec Autodesk Revit</dd>

src/static/css/main.css

@@ -1,4 +1,5 @@
 @import "../fonts/inter/inter.css";
+@import "../fonts/remix/remixicon.css";
 
 *, *::before, *::after {
 	box-sizing: border-box;
@@ -17,9 +18,10 @@
 
 	--link: #0066ffde;
 
-	--colw: 20rem;
+	--colw: 18rem;
+	--colgap: 2rem;
 	--gap: 1rem;
-	--maxw: 90rem;
+	--maxw: 60rem;
 	--lh: 1.3rem;
 
 	--bl-lh: 2rem;
@@ -37,13 +39,13 @@ body {
 	font-feature-settings: "ss01", "ss02", "ss03", "cv05", "cv08";
 	max-width: var(--maxw);
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(var(--colw), 1fr));
-	grid-gap: var(--gap);
+	grid-template-columns: var(--colw) 1fr;
+	grid-gap: var(--colgap);
 }
-body > div {
+/* body > div {
 	column-width: var(--colw);
 	column-gap: var(--gap);
-}
+} */
 body > div.info {grid-column: 1}
 body > div.cv {grid-column: 2 / -1}
 @media (max-width: 40rem) {
@@ -111,30 +113,36 @@ li {padding-left: calc(var(--gap) / 2)}
 .block {
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);
+	grid-template-columns: 1fr;
 	grid-gap: .2rem;
 	grid-auto-rows: auto;
 }
 .img-block > img {
 	width: 100%;
-	aspect-ratio: 1;
+	height: 6rem;
 	object-fit: cover;
 }
 .link-block > a {
 	background: var(--bg-01);
 	color: inherit;
 	padding: var(--gap);
-	aspect-ratio: 1;
+	height: 6rem;
 	display: grid;
 	grid-template-columns: 1fr;
 	grid-template-rows: 1fr auto;
 }
 .link-block > a:hover {
 	background: var(--bg-02);
+	text-decoration: none;
 }
-.link-block > a > img {
-	width: 2rem;
+.link-block > a:hover > span.desc {
+	text-decoration: underline;
 }
-.link-block > a > span {
+.link-block > a > span.i {
+	font-size: 2rem;
+	text-align: right;
+}
+.link-block > a > span.desc {
 	grid-row: 2;
 	overflow: hidden;
 	text-overflow: ellipsis;

src/static/fonts/remix/remixicon.css

@@ -0,0 +1,42 @@
+
+/*
+* https://remixicon.com
+* https://github.com/Remix-Design/RemixIcon
+* Copyright RemixIcon.com
+* Released under the Apache License Version 2.0
+*/
+
+@font-face {
+    font-family: "remixicon";
+    url("remixicon.woff2?t=1678097420828") format("woff2"),
+    font-display: swap;
+}
+
+[class^="ri-"], [class*="ri-"] {
+    font-family: 'remixicon' !important;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.ri-lg { font-size: 1.3333em; line-height: 0.75em; vertical-align: -.0667em; }
+.ri-xl { font-size: 1.5em; line-height: 0.6666em; vertical-align: -.075em; }
+.ri-xxs { font-size: .5em; }
+.ri-xs { font-size: .75em; }
+.ri-sm { font-size: .875em }
+.ri-1x { font-size: 1em; }
+.ri-2x { font-size: 2em; }
+.ri-3x { font-size: 3em; }
+.ri-4x { font-size: 4em; }
+.ri-5x { font-size: 5em; }
+.ri-6x { font-size: 6em; }
+.ri-7x { font-size: 7em; }
+.ri-8x { font-size: 8em; }
+.ri-9x { font-size: 9em; }
+.ri-10x { font-size: 10em; }
+.ri-fw { text-align: center; width: 1.25em; }
+
+.ri-mastodon-fill:before { content: "\ef23"; }
+.ri-git-repository-fill:before { content: "\edc6"; }
+.ri-mail-send-fill:before { content: "\eefb"; }
+.ri-map-2-fill:before { content: "\ef05"; }

src/static/img/.gitignore

@@ -1 +0,0 @@
-*.jpg

src/static/img/convert.ps1

@@ -0,0 +1,7 @@
+magick .\pic1.jpg -geometry 608x96^ -gravity center -crop "608x96+0+0" pic1.webp
+magick .\pic2.jpg -geometry 608x96^ -gravity center -crop "608x96+0+0" pic2.webp
+magick .\pic3.jpg -geometry 608x96^ -gravity center -crop "608x96+0+0" pic3.webp
+
+magick .\pic1.jpg -geometry 1216x192^ -gravity center -crop "1216x192+0+0" pic1x2.webp
+magick .\pic2.jpg -geometry 1216x192^ -gravity center -crop "1216x192+0+0" pic2x2.webp
+magick .\pic3.jpg -geometry 1216x192^ -gravity center -crop "1216x192+0+0" pic3x2.webp