diff options
| author | Martial Simon <msimon_fr@hotmail.com> | 2024-07-09 23:05:04 +0200 |
|---|---|---|
| committer | Martial Simon <msimon_fr@hotmail.com> | 2024-07-09 23:05:04 +0200 |
| commit | 0fd3c14fbbc797638ff1714d68e361b2822fad36 (patch) | |
| tree | d3da73add0a5e123f7fd53b11ffd31a9bff705c2 | |
| parent | abb369e22e9d2b7201f2a2b0835740130d6a7745 (diff) | |
proto: homepage draft
| -rw-r--r-- | fonts/CousineNerdFont-Regular.ttf | bin | 0 -> 2205336 bytes | |||
| -rw-r--r-- | index.html | 46 | ||||
| -rw-r--r-- | style.css | 135 |
3 files changed, 181 insertions, 0 deletions
diff --git a/fonts/CousineNerdFont-Regular.ttf b/fonts/CousineNerdFont-Regular.ttf Binary files differnew file mode 100644 index 0000000..5ba4b51 --- /dev/null +++ b/fonts/CousineNerdFont-Regular.ttf diff --git a/index.html b/index.html new file mode 100644 index 0000000..bbd286c --- /dev/null +++ b/index.html @@ -0,0 +1,46 @@ +<!-- !TODO: Trouver des icônes--> +<!DOCTYPE html> +<head> + <title>Martial Simon</title> + <meta content="text/html; charset='utf-8'" http-equiv="content-type"> + <meta name="description" content="Mon site portfolio"> + <meta name="author" content="Martial Simon"> + <link rel="stylesheet" type="text/css" href="style.css"> +</head> +<body> + <h1>Martial Simon</h1> + <section> + <h2>Qui ça ?</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 +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> + </section> + <section> + <h2 id="formation">Formation</h2> + <div id="timeline"> + <div class="timestamp">2020</div> + <div class="events"> + <div class="event"> + <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> + </div> + </div> + <div class="timestamp">2022</div> + <div class="events"> + <div class="event"> + <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> + </div> + </div> + </div> + </section> + <footer>Site réalisé à la <span style="color: beige;"></span> et avec <span style="color: red"></span> par Martial<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> +</body> diff --git a/style.css b/style.css new file mode 100644 index 0000000..aeabbea --- /dev/null +++ b/style.css @@ -0,0 +1,135 @@ +body { + background: linear-gradient(74deg, skyblue, pink 60%, salmon); + padding: 0 10vh +} + +h1::before, h1::after { + content: " - "; +} +/*h2::before, h2::after { + content: " ~ "; +}*/ + +h2 { + font-style: italic; +} + +.text-link::after { + content: '<'; +} + +.text-link::before { + content: '>'; +} + +section p { + max-width: 500px; +} + +@media screen and (max-width: 600px) { + section p { + max-width: 90vw; + } +} + +section:nth-of-type(odd) { + justify-items: end; + text-align: end; +} + +h1, h2 { + transition-property: text-decoration; + transition-duration: 0.7s; + transition-timing-function: ease-out; +} + +h1:hover,h2:hover { + text-decoration: underline; +} + +#timeline { + margin-top: 20px; + position: relative; +} + +#timeline::before { + position: absolute; + content: ''; + width: 5px; + height: 100%; + background: skyblue; + left: 14px; + border-radius: 3px; +} + +.timestamp { + position: relative; + padding: 4px 15px 4px 35px; + background-color: salmon; + display: inline-block; + width: auto; + border-radius: 40px; + border: 1px solid pink; + margin-bottom: 30px; +} + +.timestamp::before { + position: absolute; + content: ''; + width: 20px; + height: 20px; + background-color: green; + border-radius: 100%; + border: 1px solid #8db600; + left: 5px; + /*top: 3px;*/ +} + +.events { + padding-left:35px; + display:block; + position: relative; + margin-bottom: 30px; +} + +.events::before { + content: ''; + position: absolute; + width: 30px; + height: 0; + border: 0.8px dashed red; + top: 12px; + left: 20px; +} + +.events::after { + content: ''; + position: absolute; + width: 10px; + height: 10px; + background: purple; + top: 7px; + left: 11px; + border: 1px solid black; + border-radius: 100%; +} + +.event { + position: relative; + border-radius: 0 15px 0 15px; + border: 1px solid gray; + transition: all 0.3s ease-in-out; + overflow: hidden; + padding: 0 2%; + max-width: 30vw; +} + +footer { + font-family: serif, Cousine; + text-align: right; +} + +@font-face{ + font-family:Cousine; + src:url(./fonts/CousineNerdFont-Regular.ttf); +} |