proto: work on the fonts

6 files changed, 60 insertions, 20 deletions

diff --git a/fonts/FinkHeavy.ttf b/fonts/FinkHeavy.ttf
new file mode 100644
index 0000000..8788c2c
--- /dev/null
+++ b/fonts/FinkHeavy.ttf
diff --git a/fonts/MartianMonoNerdFont-Regular.ttf b/fonts/MartianMonoNerdFont-Regular.ttf
new file mode 100644
index 0000000..e2d58a6
--- /dev/null
+++ b/fonts/MartianMonoNerdFont-Regular.ttf
diff --git a/fonts/TinosNerdFont-Bold.ttf b/fonts/TinosNerdFont-Bold.ttf
new file mode 100644
index 0000000..e99aaa5
--- /dev/null
+++ b/fonts/TinosNerdFont-Bold.ttf
diff --git a/fonts/TinosNerdFont-Regular.ttf b/fonts/TinosNerdFont-Regular.ttf
new file mode 100644
index 0000000..231dd7e
--- /dev/null
+++ b/fonts/TinosNerdFont-Regular.ttf
diff --git a/index.html b/index.html
index 7402c90..89cd92f 100644
--- a/index.html
+++ b/index.html
@@ -36,10 +36,10 @@
 		<div id="timeline">
 			<div id="labels">
 				<span class="work">Expériences professionnelles</span><br>
-				<span class="studies">Études</style><br>
+				<span class="studies" style="margin: 0.5em 0">Études</span><br>
 				<span class="degree">Diplômes</span>
 			</div>
-			<div class="timestamp">2019</div>
+			<div class="timestamp"><span>2019</span></div>
 			<div class="events">
 				<div class="event work">
 					<h4>Stage d'observation</h4>
@@ -47,7 +47,7 @@
 					<p>1 semaine.<p/>
 				</div>
 			</div>
-			<div class="timestamp">2020</div>
+			<div class="timestamp"><span>2020</span></div>
 			<div class="events">
 				<div class="event degree">
 					<h4>Brevet d'initiation à l'aéronautique</h4>
@@ -60,7 +60,7 @@
 					<p>2 semaines.</p>
 				</div>
 			</div>
-			<div class="timestamp">2022</div>
+			<div class="timestamp"><span>2022</span></div>
 			<div class="events">
 				<div class="event degree">
 					<h4>Diplôme du Baccalauréat général</h4>
@@ -70,10 +70,20 @@
 				</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>
+										<p>Année validée (2022-2023).</p>
+				</div>
+				<div class="event work">
+					<h4>Président du <a class="text-link" href="https://rtfm.marcellus.cc" style="color: #ff3333">club musique</a> du campus</h4>
+					<p>Gestion du club, organisation d'évènements, et recrutement</p>
+					<p>De 2022 à aujourd'hui</p>
+				</div>
+				<div class="event work">
+					<h4>Staff pour les <abbr title="Bureau Des Étudiants">BDE</abbr> successifs du campus</h4>
+					<p>Gestion du club, organisation d'évènements</p>
+					<p>De 2022 à aujourd'hui</p>
 				</div>
 			</div>
-			<div class="timestamp">2023</div>
+			<div class="timestamp"><span>2023</span></div>
 			<div class="events">
 				<div class="event work">
 					<h4>Stage ouvrier</h4>
@@ -86,7 +96,7 @@
 					<p>Semestre validé.</p>
 				</div>
 			</div>
-			<div class="timestamp">2024</div>
+			<div class="timestamp"><span>2024</span></div>
 			<div class="events">
 				<div class="event degree">
 					<h4>Mobilité académique Erasmus à <abbr title="Centria University of Applied Sciences">Centria UAS</abbr></h4>
@@ -96,7 +106,7 @@
 				<div class="event work">
 					<h4>Régie son et lumières</h4>
 					<p>Atelier théâtre du lycée St Thomas d'Aquin Oullins</p>
-					<p>Bénévolat dans 3 pièces différentes</p>
+					<p>Bénévolat pour 3 pièces différentes, 2 mois et demi</p>
 				</div>
 			</div>
 		</div>
diff --git a/style.css b/style.css
index b5b125a..00d65b7 100644
--- a/style.css
+++ b/style.css
@@ -12,8 +12,12 @@
 body {
 	background: linear-gradient(74deg, skyblue, pink 65%, salmon);
 	padding: 0 12vw;
-	font-size: 1em;
-	font-family: serif, Cousine;
+	font-size: 1.1em;
+	font-family: tinos;
+}
+
+h1, h2, h3, h4 {
+	font-family: martian;
 }
 
 header {
@@ -67,7 +71,7 @@ section>span>p {
 
 @media screen and (max-width: 600px) {
 	body {
-		padding: 10px 5vw;
+		padding: 10px 0;
 	}
 
 	section>span>p {
@@ -117,7 +121,7 @@ h1:hover,h2:hover {
 	position: absolute;
 	content: '';
 	width: 4px;
-	height: 100%;
+	height: calc(15px + 100%);
 	background: #add8e6;
 	left: 14px;
 	border: 1px solid grey;
@@ -128,7 +132,7 @@ h1:hover,h2:hover {
 .timestamp {
 	position: relative;
 	padding: 5px 15px 5px 35px;
-	background-color: salmon;
+	background: repeating-radial-gradient(circle farthest-corner at calc(0.5em + 8px) 50%, #8db6ff, #8db600 60%);
 	display: inline-block;
 	width: auto;
 	border-radius: 40px;
@@ -136,14 +140,19 @@ h1:hover,h2:hover {
 	margin-bottom: 30px;
 }
 
+.timestamp span {
+	font-family: Finkheavy;
+	filter: drop-shadow(2px 2px #fff1d0);
+}
+
 .timestamp::before {
 	position: absolute;
 	content: '';
 	width: 1em;
 	height: 1em;
-	background: green;
+	background: #8db600;
 	border-radius: 100%;
-	border: 1px solid #8db600;
+	border: 1px solid #8db6ff;
 	left: 7px;
 }
 
@@ -153,8 +162,10 @@ h1:hover,h2:hover {
 	flex-direction: row;
 	justify-content: start;
 	align-items: start;
+	flex-wrap: wrap;
 	position: relative;
 	margin-bottom: 30px;
+	width: calc(100% - 35px);
 }
 
 .events::before {
@@ -172,13 +183,18 @@ h1:hover,h2:hover {
 	position: absolute;
 	width: 10px;
 	height: 10px;
-	background: purple;
+	background: #2c778f;
 	top: 7px;
 	left: 11px;
-	border: 1px solid black;
+	border: 1px solid #1e5262;
 	border-radius: 100%;
 }
 
+.events:hover::after {
+	background: #1e5262;
+	border: 1px solid #2c778f;
+}
+
 .event {
 	position: relative;
 	border-radius: 0 15px 0 15px;
@@ -186,8 +202,8 @@ h1:hover,h2:hover {
 	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 	overflow: hidden;
 	padding: 0;
-	width: 25vw;
-	margin: 0 10px;
+	max-width: 25vw;
+	margin: 5px 10px;
 	background-color: #fff1d060;
 	box-shadow: 1px 1px black;
 }
@@ -237,7 +253,6 @@ h1:hover,h2:hover {
 	border-radius: 15px 0 15px 0;
 	border: 1px solid black;
 	padding: 1em;
-	width: 10vw;
 	background-color: #fff1d060;
 	color: #fff1d0;
 }
@@ -322,3 +337,18 @@ footer {
 	font-family:Cousine;
 	src:url(./fonts/CousineNerdFont-Regular.ttf);
 }
+
+@font-face {
+	font-family:finkheavy;
+	src:url(./fonts/FinkHeavy.ttf);
+}
+
+@font-face {
+	font-family: tinos;
+	src: url(fonts/TinosNerdFont-Regular.ttf);
+}
+
+@font-face {
+	font-family: martian;
+	src: url(fonts/MartianMonoNerdFont-Regular.ttf);
+}