From 210f01460b81c19f677c47c4a206df6237703e87 Mon Sep 17 00:00:00 2001 From: Martial Simon Date: Mon, 22 Jul 2024 00:17:22 +0200 Subject: misc: changed the pic of me, updated a ton of colors --- img/PI.png | Bin 308235 -> 231899 bytes index.html | 79 +++++++++++++++++++++++++++++------- style.css | 134 ++++++++++++++++++++++++++++++++++++++++++++++++++++--------- 3 files changed, 181 insertions(+), 32 deletions(-) diff --git a/img/PI.png b/img/PI.png index 6d8a593..9ca4570 100644 Binary files a/img/PI.png and b/img/PI.png differ diff --git a/index.html b/index.html index 0a20d02..30dacb8 100644 --- a/index.html +++ b/index.html @@ -11,46 +11,97 @@

Martial Simon

+

Qui donc ?

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).
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 site du groupe).

+ membre actif actuellement d’un groupe de musique (voir le site du groupe).
Fort de plusieurs expériences internationales, je communique aisément en anglais et suis capable de comprendre assez globalement l'allemand.

photo de moi

Mon parcours

+
+ Expériences professionnelles
+ Études
+ Diplômes +
+
2019
+
+
+

Stage d'observation

+

Service ICAP de l'université Lyon 1.

+

1 semaine.

+

+
2020
-
+

Brevet d'initiation à l'aéronautique

-

Formation réalisée pendant mon année de 2nde.

-

Mention Très Bien

+

Formation réalisée pendant mon année de 2nde.

+

Mention Très Bien.

+
+
+

Pet Sitter

+

Job d'été chez un particulier.

+

2 semaines.

2022
-
+

Diplôme du Baccalauréat général

-

Spécialités: Mathématiques, Numérique et Sciences de l'Informatique.

-

Mention Très Bien

+

Spécialités: Mathématiques, NSI.

+

Options: Musique, Maths Expertes, DNL Physique, Grec ancien (jusqu'en classe de 1ère).

+

Mention Très Bien.

+
+
+

1ère année à l'EPITA (Info SUP)

+

Année validée (2023-2024).

+
+
+
2023
+
+
+

Stage ouvrier

+

Service Innovation Informatique des HCL.

+

Stage d'été (7 semaines).

+
+
+

2ème année à l'EPITA (Info SPE)

+

Semestre d'automne 2023.

+

Semestre validé.

+
+
+
2024
+
+
+

Mobilité académique Erasmus à Centria UAS

+

Semestre de printemps 2024 effectué à Kokkola en Finlande.

+

Validée par equivalence de crédits ECTS.

-
Site réalisé à la 󱠡   et avec 󰩖   par Martial
+
+

Compétences

+

Permis B

+
+
+ 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; } -- cgit v1.2.3