proto: added a bunch of content to the skills, fiddled with the layout, and changed the colors of the box-shadows in the timeline

2 files changed, 103 insertions, 24 deletions

diff --git a/index.html b/index.html
index 2bc7ce8..7402c90 100644
--- a/index.html
+++ b/index.html
@@ -103,24 +103,54 @@
 	</section>
 	<section>
 		<h2 id="skills">Compétences</h2>
-		<h3>Informatique <small>(voir mon <a class="text-link" style="color: darkgrey" href="https://github.com/Laitram31">Github</a> et mes <a class="text-link" style="color: lime" href="https://git.marcellus.cc">autres repos</a>)</small></h3>
-		<h4>Langages de programmation:</h4>
-		<ul>
-			<li>C : Avancé</li>
-			<li>Python : Avancé</li>
-			<li>HTML, CSS : Avancé</li>
-			<li>shell : Intermédiaire</li>
-			<li>C# : Intermédiaire</li>
-			<li>OCaml : Intermédiaire</li>
-			<li>JavaScript : Bases</li>
-
-
-		<h3>Langues</h3>
-		<h3>Autres</h3>
-		<p>Permis B</p>
+		<h3 class="skill">Informatique <small>(voir mon <a class="text-link" style="color: darkgrey" href="https://github.com/Laitram31">Github</a> et mes <a class="text-link" style="color: lime" href="https://git.marcellus.cc">autres repos</a>)</small></h3>
+		<div class="skill-cats">
+			<div>
+				<h4>Langages de programmation:</h4>
+				<ul>
+					<li>C : Avancé</li>
+					<li>Python : Avancé</li>
+					<li>HTML, CSS : Avancé</li>
+					<li>shell : Intermédiaire</li>
+					<li>C# : Intermédiaire</li>
+					<li>OCaml : Intermédiaire</li>
+					<li>JavaScript : Bases</li>
+				</ul>
+			</div>
+			<div>
+				<h4>Outils</h4>
+				<ul>
+					<li><abbr title="Amazon Web Service">AWS</abbr> : suivi de la formation en ligne "AWS Academy Cloud Foundations sur le Cloud Computing avec AWS</li>
+					<li>Éditeurs de texte : (neo)vim, suite JetBrains, VSCode, Microsoft Visual Studio</li>
+				</ul>
+			</div>
+		</div>
+		<h3 class="skill">Autres</h3>
+		<div class="skill-cats">
+			<div>
+				<h4>Langues</h4>
+				<ul>
+					<li>Français : natif</li>
+					<li>Anglais : C1</li>
+					<li>Allemand : B1</li>
+				</ul>
+			</div>
+			<div>
+				<h4>Autres</h4> 
+				<ul>
+					<li>Permis B</li>
+					<li>Président du <a class="text-link" href="https://rtfm.marcellus.cc" style="color: #ff3333">club musique</a> de mon campus</li>
+					<li>Staff pour le <abbr title="Bureau Des Étudiants">BDE</abbr></li>
+				</ul>
+			</div>
+		</div>
+	</section>
+	<section>
+		<h2>Ouvertures culturelles</h2>
+		<!-- Récemment, j'ai lu / j'écoute gnagnagna -->
 	</section>
 	</div>
-	<footer>Site réalisé à la <span style="color: beige;">󱠡</span> &nbsp; et avec <span style="color: red">󰩖</span> &nbsp; par <a href="marcellus.cc">Martial</a><br>
+	<footer>Site réalisé à la &nbsp;<span style="color: beige;">󱠡</span> &nbsp; et avec &nbsp;<span style="color: red">󰩖</span> &nbsp; par <a href="https://marcellus.cc">Martial</a><br>
 		<a href="http://www.wtfpl.net/"><img
        src="http://www.wtfpl.net/wp-content/uploads/2012/12/wtfpl-badge-4.png"
        width="80" height="15" alt="WTFPL" /></a></footer>
diff --git a/style.css b/style.css
index b122dfc..b5b125a 100644
--- a/style.css
+++ b/style.css
@@ -1,5 +1,12 @@
 :root {
-	--blue: #1414FF;
+	--lblue: rgb(20, 20, 255);
+	--dblue: rgb(157, 157, 255);
+	--ddegree: #960e29;
+	--ldegree: #dc153c;
+	--lwork: #dc15a0;
+	--dwork: #960e6d;
+	--dstudies: #93370e;
+	--lstudies: #d95115;
 }
 
 body {
@@ -76,10 +83,12 @@ section#presentation {
 	display: flex;
 	flex-direction: row-reverse;
 	justify-content: end;
-	height: 50vh;
+	align-items: center;
+	min-height: 50vh;
 }
 
 #id-pic {
+	max-height: 50vh;
 	height: auto;
 	filter: drop-shadow(#ff7676 0 0 20px);
 	transition: filter 1s ease-in;
@@ -189,6 +198,21 @@ h1:hover,h2:hover {
 	animation: 1s ease-in-out alternate infinite blue-shift;
 }
 
+.degree:hover {
+	--lblue: var(--ldegree);
+	--dblue: var(--ddegree);
+}
+
+.work:hover {
+	--lblue: var(--lwork);
+	--dblue: var(--dwork);
+}
+
+.studies:hover {
+	--lblue: var(--lstudies);
+	--dblue: var(--dstudies);
+}
+
 .event p {
 	margin: 1em;
 }
@@ -210,7 +234,7 @@ h1:hover,h2:hover {
 	position: absolute;
 	right: 0;
 	text-align: right;
-	border-radius: 0 15px 0 15px;
+	border-radius: 15px 0 15px 0;
 	border: 1px solid black;
 	padding: 1em;
 	width: 10vw;
@@ -219,7 +243,7 @@ h1:hover,h2:hover {
 }
 
 span.degree, .degree h4 {
-	background-color: #960e29;
+	background-color: var(--ddegree);
 }
 
 div.degree::before {
@@ -231,7 +255,7 @@ div.degree::before {
 }
 
 span.work, .work h4 {
-	background-color: #960e6d;
+	background-color: var(--dwork);
 }
 
 div.work::before {
@@ -243,7 +267,7 @@ div.work::before {
 }
 
 span.studies, .studies h4 {
-	background-color: #93370e;
+	background-color: var(--dstudies);
 }
 
 div.studies::before {
@@ -254,13 +278,38 @@ div.studies::before {
 	color: #fff1d0;
 }
 
+.skill {
+	text-align: center;
+}
+
+.skill-cats {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+}
+
+.skill-cats div {
+	text-align: center;
+	width: 50%;
+}
+
+.skill-cats li {
+	width: 100%;
+	text-align: left;
+	margin: 0.25em auto;
+}
+
+h3.skill, .skill-cats h4 {
+	text-decoration: underline;
+}
+
 @keyframes blue-shift {
 	from {
-		box-shadow: 2px 2px rgb(20, 20, 255);
+		box-shadow: 2px 2px var(--lblue, rgb(20, 20, 255));
 
 	}
 	to {
-		box-shadow: 2px 2px rgb(157, 157, 255);
+		box-shadow: 2px 2px var(--dblue, rgb(157, 157, 255));
 	}
 }