misc: changed the pic of me, updated a ton of colors

3 files changed, 181 insertions, 32 deletions

diff --git a/img/PI.png b/img/PI.png
index 6d8a593..9ca4570 100644
--- a/img/PI.png
+++ b/img/PI.png
diff --git a/index.html b/index.html
index 0a20d02..30dacb8 100644
--- a/index.html
+++ b/index.html
@@ -11,46 +11,97 @@
 	<header>
 		<h1><a href="#">Martial Simon</a></h1>
 		<nav>
-			<test>&nbsp;~&nbsp;</test>
-			<a href="skills.html"><h2>Compétences</h2></a>
-			<a href="contact.html"><h2>Contact</h2></a>
-			<test>&nbsp;~&nbsp;</test>
+			<sep>&nbsp;~&nbsp;</sep>
+			<a href="#skills"><h2>Compétences</h2></a>
+			<sep>&nbsp;~&nbsp;</sep>
+			<a href="#contact"><h2>Contact</h2></a>
+			<sep>&nbsp;~&nbsp;</sep>
 		</nav>
 	</header>
+	<div id="content">
 	<section id="presentation">
 		<div>
 			<h2>Qui donc ?</h2>
 			<p>Féru d'informatique, je suis étudiant en classe préparatoire à l’Ecole Pour l’Informatique et les
 	Techniques Avancées (EPITA) à Lyon. Consciencieux et travailleur, je me sers de ces compétences
-	pour mes études mais aussi dans mes loisirs que sont la pratique du modélisme, de la musique (guitare
-	et basse) et du sport (escalade, cyclisme). J’aime également le travail en équipe comme j’ai pu
+	pour mes études mais aussi dans mes loisirs que sont la pratique de la musique (guitare
+	et basse) et du sport (escalade, cyclisme).<br>J’aime également le travail en équipe comme j’ai pu
 	l’expérimenter dès le lycée avec un projet collaboratif de ballon sonde stratosphérique, puis au cours de projets de groupe au sein de mes études supérieures (réalisation d'un jeu vidéo et logiciel d'OCR), ou encore en étant
-	membre actif actuellement d’un groupe de musique (voir le <a class="text-link" style="color: rgb(124, 246, 187)" href="lesrunninggags.marcellus.cc">site du groupe</a>).</p>
+	membre actif actuellement d’un groupe de musique (voir le <a class="text-link" style="color: #400080" href="lesrunninggags.marcellus.cc">site du groupe</a>).<br>Fort de plusieurs expériences internationales, je communique aisément en anglais et suis capable de comprendre assez globalement l'allemand.</p>
 		</div>
 		<img id="id-pic" src="img/PI.png" alt="photo de moi">
 </section>
 	<section>
 		<h2 id="formation">Mon parcours</h2>
 		<div id="timeline">
+			<div id="labels">
+				<span class="work">Expériences professionnelles</span><br>
+				<span class="studies">Études</style><br>
+				<span class="degree">Diplômes</span>
+			</div>
+			<div class="timestamp">2019</div>
+			<div class="events">
+				<div class="event work">
+					<h4>Stage d'observation</h4>
+										<p>Service <abbr title="Innovation Conception et Accompagnement à la Pédagogie">ICAP</abbr> de l'université Lyon 1.</p>
+					<p>1 semaine.<p/>
+				</div>
+			</div>
 			<div class="timestamp">2020</div>
 			<div class="events">
-				<div class="event">
+				<div class="event degree">
 					<h4>Brevet d'initiation à l'aéronautique</h4>
-					<p>Formation réalisée pendant mon année de 2nde.</p>
-					<p>Mention <i>Très Bien</i></p>
+										<p>Formation réalisée pendant mon année de 2nde.</p>
+					<p>Mention <i>Très Bien</i>.</p>
+				</div>
+				<div class="event work">
+					<h4>Pet Sitter</h4>
+										<p>Job d'été chez un particulier.</p>
+					<p>2 semaines.</p>
 				</div>
 			</div>
 			<div class="timestamp">2022</div>
 			<div class="events">
-				<div class="event">
+				<div class="event degree">
 					<h4>Diplôme du Baccalauréat général</h4>
-					<p>Spécialités: Mathématiques, Numérique et Sciences de l'Informatique.</p>
-					<p>Mention <i>Très Bien</i></p>
+										<p>Spécialités: Mathématiques, <abbr title="Numérique et Sciences de l'Informatique">NSI</abbr>.</p>
+					<p>Options: Musique, Maths Expertes, <abbr title="Discipline Non Linguistique">DNL</abbr> Physique, Grec ancien (jusqu'en classe de 1<sup>ère</sup>).</p>
+					<p>Mention <i>Très Bien</i>.</p>
+				</div>
+				<div class="event studies">
+					<h4>1<sup>ère</sup> année à l'<abbr title="École pour l'Informatique et les Techniques Avancées"><a href="https://epita.fr">EPITA</a></abbr> (Info SUP)</h4>
+										<p>Année validée (2023-2024).</p>
+				</div>
+			</div>
+			<div class="timestamp">2023</div>
+			<div class="events">
+				<div class="event work">
+					<h4>Stage ouvrier</h4>
+										<p>Service Innovation Informatique des <abbr title="Hospices Civils de Lyon">HCL</abbr>.</p>
+					<p>Stage d'été (7 semaines).</p>
+				</div>
+				<div class="event studies">
+					<h4>2<sup>ème</sup> année à l'<abbr title="École pour l'Informatique et les Techniques Avancées"><a href="https://epita.fr">EPITA</a></abbr> (Info SPE)</h4>
+										<p>Semestre d'automne 2023.</p>
+					<p>Semestre validé.</p>
+				</div>
+			</div>
+			<div class="timestamp">2024</div>
+			<div class="events">
+				<div class="event degree">
+					<h4>Mobilité académique Erasmus à <abbr title="Centria University of Applied Sciences">Centria UAS</abbr></h4>
+										<p>Semestre de printemps 2024 effectué à Kokkola en Finlande.</p>
+					<p>Validée par equivalence de crédits <abbr title="European Credits Transfer & Accumulation System">ECTS</abbr>.</p>
 				</div>
 			</div>
 		</div>
 	</section>
-	<footer>Site réalisé à la <span style="color: beige;">󱠡</span> &nbsp; et avec <span style="color: red">󰩖</span> &nbsp; par Martial<br>
+	<section>
+		<h2 id="skills">Compétences</h2>
+		<p>Permis B</p>
+	</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>
 		<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 721617f..b122dfc 100644
--- a/style.css
+++ b/style.css
@@ -1,12 +1,18 @@
+:root {
+	--blue: #1414FF;
+}
+
 body {
-	background: linear-gradient(74deg, skyblue, pink 60%, salmon);
+	background: linear-gradient(74deg, skyblue, pink 65%, salmon);
 	padding: 0 12vw;
+	font-size: 1em;
+	font-family: serif, Cousine;
 }
 
 header {
 	display: flex;
 	justify-content: space-evenly;
-	align-content: baseline;
+	align-items: center;
 }
 
 h1::before, h1::after {
@@ -26,17 +32,17 @@ nav {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	justify-content: space-evenly;
+	justify-content: space-between;
 	position: relative;
 	padding: default 3vw;
 	height: 100%;
 }
 
-nav a, nav test {
+nav a, nav sep {
 	display: inline-block;
 }
 
-nav test {
+nav sep {
 	margin: auto 0;
 }
 
@@ -74,7 +80,13 @@ section#presentation {
 }
 
 #id-pic {
-	height: auto;	
+	height: auto;
+	filter: drop-shadow(#ff7676 0 0 20px);
+	transition: filter 1s ease-in;
+}
+
+#id-pic:hover {
+	filter: drop-shadow(#ff7676 0 0 50px);
 }
 
 h1, h2 {
@@ -106,7 +118,7 @@ h1:hover,h2:hover {
 
 .timestamp {
 	position: relative;
-	padding: 4px 15px 4px 35px;
+	padding: 5px 15px 5px 35px;
 	background-color: salmon;
 	display: inline-block;
 	width: auto;
@@ -118,18 +130,20 @@ h1:hover,h2:hover {
 .timestamp::before {
 	position: absolute;
 	content: '';
-	width: 20px;
-	height: 20px;
-	background-color: green;
+	width: 1em;
+	height: 1em;
+	background: green;
 	border-radius: 100%;
 	border: 1px solid #8db600;
-	left: 5px;
-	/*top: 3px;*/
+	left: 7px;
 }
 
 .events {
 	padding-left:35px;
-	display:block;
+	display:flex;
+	flex-direction: row;
+	justify-content: start;
+	align-items: start;
 	position: relative;
 	margin-bottom: 30px;
 }
@@ -159,15 +173,99 @@ h1:hover,h2:hover {
 .event {
 	position: relative;
 	border-radius: 0 15px 0 15px;
-	border: 1px solid gray;
-	transition: all 0.3s ease-in-out;
+	border: 1px solid black;
+	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 	overflow: hidden;
-	padding: 0 2%;
-	max-width: 30vw;
+	padding: 0;
+	width: 25vw;
+	margin: 0 10px;
+	background-color: #fff1d060;
+	box-shadow: 1px 1px black;
+}
+
+.event:hover {
+	box-shadow: 2px 2px rgb(20, 20, 255);
+	transform: translate(-2px, -2px);
+	animation: 1s ease-in-out alternate infinite blue-shift;
+}
+
+.event p {
+	margin: 1em;
+}
+
+.event a {
+	color: #fff1d0;
+}
+
+.event h4 {
+	margin: 0;
+	padding: 1em 0.5em;
+	padding-left: 2.5em;
+	color: #fff1d0;
+	background-color: salmon;
+	border-bottom: 1px solid black;
+}
+
+#labels {
+	position: absolute;
+	right: 0;
+	text-align: right;
+	border-radius: 0 15px 0 15px;
+	border: 1px solid black;
+	padding: 1em;
+	width: 10vw;
+	background-color: #fff1d060;
+	color: #fff1d0;
+}
+
+span.degree, .degree h4 {
+	background-color: #960e29;
+}
+
+div.degree::before {
+	content: "";
+	position: absolute;
+	top: 1em;
+	left: 1em;
+	color: #fff1d0;
+}
+
+span.work, .work h4 {
+	background-color: #960e6d;
+}
+
+div.work::before {
+	content: "󰌢";
+	position: absolute;
+	top: 1em;
+	left: 1em;
+	color: #fff1d0;
+}
+
+span.studies, .studies h4 {
+	background-color: #93370e;
+}
+
+div.studies::before {
+	content: "";
+	position: absolute;
+	top: 1em;
+	left: 1em;
+	color: #fff1d0;
+}
+
+@keyframes blue-shift {
+	from {
+		box-shadow: 2px 2px rgb(20, 20, 255);
+
+	}
+	to {
+		box-shadow: 2px 2px rgb(157, 157, 255);
+	}
 }
 
 footer {
-	font-family: serif, Cousine;
+	font-size: small;
 	text-align: right;
 }