diff options
| author | martial <msimon_fr@hotmail.com> | 2024-12-24 19:47:55 +0100 |
|---|---|---|
| committer | martial <msimon_fr@hotmail.com> | 2024-12-24 19:47:55 +0100 |
| commit | cc515e6d6105f8de9bfc66889cb1640e68fd8aed (patch) | |
| tree | 624608d542840332379535f90d8ea29211045dab | |
| parent | 6a210e54cbcf7cc26e9a36188b55b01a86e32826 (diff) | |
feat: sticky header
| -rw-r--r-- | README | 32 | ||||
| -rw-r--r-- | index.html | 460 | ||||
| -rw-r--r-- | style.css | 776 |
3 files changed, 637 insertions, 631 deletions
@@ -1,16 +1,16 @@ -# DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE # -# Version 2, December 2004 # -# # -# Copyright (C) 2004 Sam Hocevar <sam@hocevar.net> # -# # -# Everyone is permitted to copy and distribute verbatim or modified # -# copies of this license document, and changing it is allowed as long # -# as the name is changed. # -# # -# DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE # -# TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION # -# # -# 0. You just DO WHAT THE FUCK YOU WANT TO. # - - -My professional website / Mon site pro +# DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE #
+# Version 2, December 2004 #
+# #
+# Copyright (C) 2004 Sam Hocevar <sam@hocevar.net> #
+# #
+# Everyone is permitted to copy and distribute verbatim or modified #
+# copies of this license document, and changing it is allowed as long #
+# as the name is changed. #
+# #
+# DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE #
+# TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION #
+# #
+# 0. You just DO WHAT THE FUCK YOU WANT TO. #
+
+
+My professional website / Mon site pro
@@ -1,230 +1,230 @@ -<!-- !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> - <header> - <h1><a href="#">Martial Simon</a></h1> - <nav> - <sep> ~ </sep> - <a href="#skills"><h2>Compétences</h2></a> - <sep> ~ </sep> - <a href="#contact"><h2>Contact</h2></a> - <sep> ~ </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 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 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" style="margin: 0.5em 0">Études</span><br> - <span class="degree">Diplômes</span> - </div> - <div class="timestamp"><span>2019</span></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"><span>2020</span></div> - <div class="events"> - <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> - </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"><span>2022</span></div> - <div class="events"> - <div class="event degree"> - <h4>Diplôme du Baccalauréat général</h4> - <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 (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"><span>2023</span></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"><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> - <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 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 pour 3 pièces différentes, 2 mois et demi</p> - </div> - <div class="event work"> - <h4>Auxiliaire d'été</h4> - <p>Société Générale - Agence de Saint-Genis-Laval</p> - <p>Accueil de clients & tâches administratives (gestion de dossiers client, entrées et sorties de stock...) (1 mois)</p> - </div> - <div class="event work"> - <h4>Assistant Salle Machine</h4> - <p>CDD à l'EPITA Lyon</p> - <p>Assistance aux étudiants de 2è année, accompagnement lors des travaux pratiques</p> - </div> - <div class="event work"> - <h4>Vice-présidence du <abbr title="Bureau Des Etudiants">BDE</abbr></h4> - <p>EPITA Lyon</p> - <p> - Organisation d'évènements, soirées, encadrement des clubs dépendant de l'association.<br> - Engagement pour la vie associative au sein de l'école, représentation de l'association auprès de l'administration et du <abbr title="Bureau National des Elèves Ingénieurs.">BNEI</abbr>. - </p> - </div> - </div> - </div> - </section> - <section> - <h2 id="skills">Compétences</h2> - <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>SQL : Avancé</li> - <li>Python : Avancé</li> - <li>HTML, CSS : Avancé (Ce site a été réalisée manuellement avec ces 2 langages, sans l'usage de frameworks)</li> - <li>shell : Avancé</li> - <li>C# : Intermédiaire</li> - <li>OCaml : Intermédiaire</li> - <li>JavaScript : Bases</li> - </ul> - </div> - <div> - <h4>Technologies</h4> - <ul> - <li>Éditeurs de texte : [neo]vim, suite JetBrains, VSCode, Microsoft Visual Studio</li> - <li><abbr title="Amazon Web Service">AWS</abbr> : suivi de la formation (en anglais) en ligne "AWS Academy Cloud Foundations sur le Cloud Computing avec AWS</li> - <li>Systèmes Unix</li> - <li>Serveur Web nginx</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> - <li>Apprentissage autonome du japonais et suédois</li> - </ul> - </div> - <div> - <h4>Autres</h4> - <ul> - <li>Permis B</li> - <li>Guitariste depuis 2013</li> - <li>Bassiste depuis 2018</li> - <li>Compétences en <abbr title="Musique Assistée par Ordinateur">MAO</abbr></li> - </ul> - </div> - </div> - </section> - <section> - <h2 id="contact">Contact</h2> - <ul> - <li><a href="mailto:msimon_fr@hotmail.com">Mail</a></li> - <li><a href="https://www.linkedin.com/in/martial-simon">Linkedin</a></li> - </ul> - </section> - <section> - <h2>Ouvertures culturelles</h2> - <!--TODO: <hr>--> - <h3>Lectures (liste non exhaustive) :</h3> - <p>Je suis un grand amateur d'Amélie Nothomb et de son style d'écriture. Je les ai découverts dans <u>Métaphysique des tubes</u>, que j'ai grandement apprécié et qui m'a donné envie de plus. J'ai donc lu nombre de ses livres, de la joute verbale spectaculairement malsaine de <u>Hygiène de l'assassin</u> au drame social japonais de <u>Stupeur et Tremblements</u>, en passant par <u>Soif</u>, <u>Les Aérostats</u>, et bien d'autres encore.</p> - <p>Bien entendu, je ne lis pas uniquement Amélie Nothomb, aussi j'ai beaucoup apprécié <u>Scar Tissue</u>, l'autobiographie d'Anthony Kiedis, chanteur des <em>Red Hot Chili Peppers</em>, le <u>Journal</u> de Kurt Cobain, leader de <em>Nirvana</em>, ainsi que la bande dessinée biographique d'Amy Winehouse, parue aux édition <em>Petit à Petit</em>.</p> - <p>Dans un autre registre, j'ai trouvé passionnant le <u>Grand Roman des Mathématiques</u> de Mickaël Launay (je trouve par ailleurs tout aussi passionnant le <u>Dictionnaire Amoureux des Maths</u>, de Mickaël Launay et André Deledicq, que je lis par petits morceaux).</p> - <p>Après <u>Farenheit 451</u> de Ray Bradbury, la science fiction m'a mené à lire <u>Les Robots</u>, trilogie mythique d'Isaac Asimov, qui en plus d'être une excellente lecture s'inscrit de façon très pertinente dans mes études en informatique, en traitant de problématiques éthiques liées à la robotique et l'intelligence artificielle à travers une dystopie passionnante.</p> - <div class="citation"> - <p>"Ce fut alors que je naquis, à l'âge de deux ans et demi, [...], par la grâce du chocolat blanc."<p> - <p class="author">Amélie Nothomb, <u>Métaphysique des tubes</u></p> - </div> - <h4>Récemment, j'ai lu (et je recommande) :</h4> - <p><u>Tant que le café est encore chaud</u> est un roman de Toshikazu Kawaguchi, qui parle de voyage dans le temps. Voyage dans le temps qui s'effectue en buvant une tasse de café, mais soumis à de nombreuses règles, notamment la règle eponyme dictant que le voyage ne dure que tant que le café est encore chaud. Les règles tendent à repousser la plupart des curieux, mais certains sont prèt à tout pour changer leur vie, et l'auteur montre de multiples façon comment un voyage dans le temps qui se veut observateur peut tout changer.</p> - <hr> - <h3>Écoutes (toujours pas exhaustives) :</h3> - <p>Mon éducation musicale s'est faîte à partir des classiques du rock et des standards de jazz: d'un côté Pink Floyd, Led Zeppelin et les solos de guitare lunaires, de l'autre Dave Brubeck, John Coltrane et Jaco Pastorius.</p> - <p>Ces 2 directions sont bien distinctes mais souvent guidées par mon parcours de musicien: en apprenant la guitare basse, j'ai immédiatement préféré le jazz et ses voisins funk et soul, inspiré par Jaco Pastorius, Marcus Miller, Victor Wooten, et Joe Dart dans le groupe Vulfpeck. Autrement, après des années de guitare, je me suis orienté vers des influences découlant du rock, m'essayant au metal et à ses variations, puis en découvrant le punk à travers le <u>Journal</u> de Kurt Cobain.</p> - <h4>Vous reprendrez bien une recommendation ?</h4> - <p>Ou peut-être plus d'une : Commencez avec un album des Beatles, si vous voulez de l'énergie, écoutez <u>Lover Boy</u> de Supertramp. Puis, si ça vous a donné envie de tout casser, je vous conseille <u>Hertz</u> d'Amyl and The Sniffers, ou bien si vous voulez seulement bouger, partez sur <u>1612</u> de Vulfpeck. Pour des situations plus spécifiques, référez vous à <a href="img/music flowchart.svg" alt="flowchart" class="text-link" style="color:#9370db" target="_blank">ce diagramme</a>.</p> - <div class="citation"> - <p>"Je veux que toutes les filles du monde prennent une guitare et se mettent à crier"</p> - <p class="author">Courtney Love</p> - </div> - <!-- Courtney Love : I want every girl in the world to pick up a guitar and start screaming --> - <hr> - <h3>Web Revival</h3> - <h4>Quésaco ?</h4> - <p>Le mouvement du <i>Web Revival</i> est une initiative virtuelle soutenue par diverses communautées sur Internet. L'origine et les motivations initiales sont assez floues, et chaque acteur du mouvement en a sa propre vision, mais dans les grandes lignes, l'objectif du Web Revival est de lutter contre un Internet régi par les grandes entreprises, et contre la centralisation des réseaux sociaux. C'est une cause que j'ai à coeur de soutenir en ajoutant ma contribution à travers mon propre site web.</p> - <h4>GeoCities</h4> - <p>En 1994, avant l'ubiquité informatique, est né GeoCities, un service gratuit d'hébergement de sites web. Jusqu'en 2009, des utilisateurs pouvaient créer des sites pour tout et n'importe quoi et surtout créer des liens vers les sites d'autres utilisateurs, principe même du World Wide Web. À la fermeture de GeoCities en 2009, au moins 38 millions de pages étaient disponible à travers le service. Depuis, plusieurs entités cherchent à sauvegarder ce patrimoine virtuel, dont l'<a class="text-link link-color" href="https://archive.org">Internet Archive</a> et <a class="text-link link-color" href=https://geocities.restorativland.org">The Geocities Gallery</a>. Ce dernier est un des projet de Kyle Drake, créateur du contemporain de GeoCities, <a class="text-link link-color" href="https://neocities.org">Neocities</a>, lancé en 2013. Neocities est aussi un service d'hébergement gratuit et open source, qui offre (pour la version gratuite) 1Go de stockage par site web. En avril 2024, il héberge près de 765 600 sites (source: Wikipedia), la plupart du temps rattachés au mouvement du Web Revival.</p> - <h4>Yesterweb</h4> - <p>Un autre acteur du Web Revival est la communauté <a class="text-link link-color" href="https://yesterweb.org">Yesterweb</a>, active de 2021 à 2023. Bien que les forums soient fermés depuis mai 2023, Yesterweb a posé de solides bases dans son manifeste au sujet d'Internet, des communautés virtuelles, et des enjeux sociaux au sein de ces communautés. En plus de promouvoir les communautés indépendantes et décentralisées, Yesterweb critique le "Web 3.0", une bulle spéculative autour des cryptomonnaies, de la blockchain, et des NFT.</p> - <h4>Melonland</h4> - <p>Enfin, on peut citer la communauté <a class="text-link link-color" href="https://melonland.net">Melonland</a>, menée par l'artiste irlandais Daniel Murray. À travers une sorte d'annuaire de sites, Melonland sert la décentralisation du web : en guise de profil, chaque utilisateur a son site personnel, personnalisable à souhait. Un des problèmes des réseaux sociaux contemporains, c'est le manque de liberté d'expression laissée aux utilisateurs dans leur page de profil. Souvent, l'utilisateur est limité à un pseudonyme, une image de profil, et une courte biographie, ce qui est bien peu comparé à un site entier qui le représente.</p> - <p>Je crois que le Web Revival n'a pas pour but de changer la façon dont le monde entier utilise Internet, mais plutôt de permettre l'existence d'un Internet indépendant et libéré des grandes entreprises. Inciter les utilisateurs à créer leur propre site permet de leur faire prendre conscience de l'outil qu'ils emploient tous les jours, et de les rendre plus responsables dans leur usage du web.</p> - </section> - </div> - <footer>Site réalisé à la <span style="color: beige;"></span> et avec <span style="color: red"></span> par <a href="https://marcellus.cc">Martial</a><br> - <a href="https://www.wtfpl.net/"><img - src="img/wtfpl.png" - width="80" height="15" alt="WTFPL" /></a></footer> -</body> +<!-- !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>
+ <header>
+ <h1><a href="#">Martial Simon</a></h1>
+ <nav>
+ <sep> </sep>
+ <a href="#skills"><h2>Compétences</h2></a>
+ <sep> </sep>
+ <a href="#contact"><h2>Contact</h2></a>
+ <sep> </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 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 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" style="margin: 0.5em 0">Études</span><br>
+ <span class="degree">Diplômes</span>
+ </div>
+ <div class="timestamp"><span>2019</span></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"><span>2020</span></div>
+ <div class="events">
+ <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>
+ </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"><span>2022</span></div>
+ <div class="events">
+ <div class="event degree">
+ <h4>Diplôme du Baccalauréat général</h4>
+ <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 (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"><span>2023</span></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"><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>
+ <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 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 pour 3 pièces différentes, 2 mois et demi</p>
+ </div>
+ <div class="event work">
+ <h4>Auxiliaire d'été</h4>
+ <p>Société Générale - Agence de Saint-Genis-Laval</p>
+ <p>Accueil de clients & tâches administratives (gestion de dossiers client, entrées et sorties de stock...) (1 mois)</p>
+ </div>
+ <div class="event work">
+ <h4>Assistant Salle Machine</h4>
+ <p>CDD à l'EPITA Lyon</p>
+ <p>Assistance aux étudiants de 2è année, accompagnement lors des travaux pratiques</p>
+ </div>
+ <div class="event work">
+ <h4>Vice-présidence du <abbr title="Bureau Des Etudiants">BDE</abbr></h4>
+ <p>EPITA Lyon</p>
+ <p>
+ Organisation d'évènements, soirées, encadrement des clubs dépendant de l'association.<br>
+ Engagement pour la vie associative au sein de l'école, représentation de l'association auprès de l'administration et du <abbr title="Bureau National des Elèves Ingénieurs.">BNEI</abbr>.
+ </p>
+ </div>
+ </div>
+ </div>
+ </section>
+ <section>
+ <h2 id="skills">Compétences</h2>
+ <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>SQL : Avancé</li>
+ <li>Python : Avancé</li>
+ <li>HTML, CSS : Avancé (Ce site a été réalisée manuellement avec ces 2 langages, sans l'usage de frameworks)</li>
+ <li>shell : Avancé</li>
+ <li>C# : Intermédiaire</li>
+ <li>OCaml : Intermédiaire</li>
+ <li>JavaScript : Bases</li>
+ </ul>
+ </div>
+ <div>
+ <h4>Technologies</h4>
+ <ul>
+ <li>Éditeurs de texte : [neo]vim, suite JetBrains, VSCode, Microsoft Visual Studio</li>
+ <li><abbr title="Amazon Web Service">AWS</abbr> : suivi de la formation (en anglais) en ligne "AWS Academy Cloud Foundations sur le Cloud Computing avec AWS</li>
+ <li>Systèmes Unix</li>
+ <li>Serveur Web nginx</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>
+ <li>Apprentissage autonome du japonais et suédois</li>
+ </ul>
+ </div>
+ <div>
+ <h4>Autres</h4>
+ <ul>
+ <li>Permis B</li>
+ <li>Guitariste depuis 2013</li>
+ <li>Bassiste depuis 2018</li>
+ <li>Compétences en <abbr title="Musique Assistée par Ordinateur">MAO</abbr></li>
+ </ul>
+ </div>
+ </div>
+ </section>
+ <section>
+ <h2 id="contact">Contact</h2>
+ <ul>
+ <li><a href="mailto:msimon_fr@hotmail.com">Mail</a></li>
+ <li><a href="https://www.linkedin.com/in/martial-simon">Linkedin</a></li>
+ </ul>
+ </section>
+ <section>
+ <h2>Ouvertures culturelles</h2>
+ <!--TODO: <hr>-->
+ <h3>Lectures (liste non exhaustive) :</h3>
+ <p>Je suis un grand amateur d'Amélie Nothomb et de son style d'écriture. Je les ai découverts dans <u>Métaphysique des tubes</u>, que j'ai grandement apprécié et qui m'a donné envie de plus. J'ai donc lu nombre de ses livres, de la joute verbale spectaculairement malsaine de <u>Hygiène de l'assassin</u> au drame social japonais de <u>Stupeur et Tremblements</u>, en passant par <u>Soif</u>, <u>Les Aérostats</u>, et bien d'autres encore.</p>
+ <p>Bien entendu, je ne lis pas uniquement Amélie Nothomb, aussi j'ai beaucoup apprécié <u>Scar Tissue</u>, l'autobiographie d'Anthony Kiedis, chanteur des <em>Red Hot Chili Peppers</em>, le <u>Journal</u> de Kurt Cobain, leader de <em>Nirvana</em>, ainsi que la bande dessinée biographique d'Amy Winehouse, parue aux édition <em>Petit à Petit</em>.</p>
+ <p>Dans un autre registre, j'ai trouvé passionnant le <u>Grand Roman des Mathématiques</u> de Mickaël Launay (je trouve par ailleurs tout aussi passionnant le <u>Dictionnaire Amoureux des Maths</u>, de Mickaël Launay et André Deledicq, que je lis par petits morceaux).</p>
+ <p>Après <u>Farenheit 451</u> de Ray Bradbury, la science fiction m'a mené à lire <u>Les Robots</u>, trilogie mythique d'Isaac Asimov, qui en plus d'être une excellente lecture s'inscrit de façon très pertinente dans mes études en informatique, en traitant de problématiques éthiques liées à la robotique et l'intelligence artificielle à travers une dystopie passionnante.</p>
+ <div class="citation">
+ <p>"Ce fut alors que je naquis, à l'âge de deux ans et demi, [...], par la grâce du chocolat blanc."<p>
+ <p class="author">Amélie Nothomb, <u>Métaphysique des tubes</u></p>
+ </div>
+ <h4>Récemment, j'ai lu (et je recommande) :</h4>
+ <p><u>Tant que le café est encore chaud</u> est un roman de Toshikazu Kawaguchi, qui parle de voyage dans le temps. Voyage dans le temps qui s'effectue en buvant une tasse de café, mais soumis à de nombreuses règles, notamment la règle eponyme dictant que le voyage ne dure que tant que le café est encore chaud. Les règles tendent à repousser la plupart des curieux, mais certains sont prèt à tout pour changer leur vie, et l'auteur montre de multiples façon comment un voyage dans le temps qui se veut observateur peut tout changer.</p>
+ <hr>
+ <h3>Écoutes (toujours pas exhaustives) :</h3>
+ <p>Mon éducation musicale s'est faîte à partir des classiques du rock et des standards de jazz: d'un côté Pink Floyd, Led Zeppelin et les solos de guitare lunaires, de l'autre Dave Brubeck, John Coltrane et Jaco Pastorius.</p>
+ <p>Ces 2 directions sont bien distinctes mais souvent guidées par mon parcours de musicien: en apprenant la guitare basse, j'ai immédiatement préféré le jazz et ses voisins funk et soul, inspiré par Jaco Pastorius, Marcus Miller, Victor Wooten, et Joe Dart dans le groupe Vulfpeck. Autrement, après des années de guitare, je me suis orienté vers des influences découlant du rock, m'essayant au metal et à ses variations, puis en découvrant le punk à travers le <u>Journal</u> de Kurt Cobain.</p>
+ <h4>Vous reprendrez bien une recommendation ?</h4>
+ <p>Ou peut-être plus d'une : Commencez avec un album des Beatles, si vous voulez de l'énergie, écoutez <u>Lover Boy</u> de Supertramp. Puis, si ça vous a donné envie de tout casser, je vous conseille <u>Hertz</u> d'Amyl and The Sniffers, ou bien si vous voulez seulement bouger, partez sur <u>1612</u> de Vulfpeck. Pour des situations plus spécifiques, référez vous à <a href="img/music flowchart.svg" alt="flowchart" class="text-link" style="color:#9370db" target="_blank">ce diagramme</a>.</p>
+ <div class="citation">
+ <p>"Je veux que toutes les filles du monde prennent une guitare et se mettent à crier"</p>
+ <p class="author">Courtney Love</p>
+ </div>
+ <!-- Courtney Love : I want every girl in the world to pick up a guitar and start screaming -->
+ <hr>
+ <h3>Web Revival</h3>
+ <h4>Quésaco ?</h4>
+ <p>Le mouvement du <i>Web Revival</i> est une initiative virtuelle soutenue par diverses communautées sur Internet. L'origine et les motivations initiales sont assez floues, et chaque acteur du mouvement en a sa propre vision, mais dans les grandes lignes, l'objectif du Web Revival est de lutter contre un Internet régi par les grandes entreprises, et contre la centralisation des réseaux sociaux. C'est une cause que j'ai à coeur de soutenir en ajoutant ma contribution à travers mon propre site web.</p>
+ <h4>GeoCities</h4>
+ <p>En 1994, avant l'ubiquité informatique, est né GeoCities, un service gratuit d'hébergement de sites web. Jusqu'en 2009, des utilisateurs pouvaient créer des sites pour tout et n'importe quoi et surtout créer des liens vers les sites d'autres utilisateurs, principe même du World Wide Web. À la fermeture de GeoCities en 2009, au moins 38 millions de pages étaient disponible à travers le service. Depuis, plusieurs entités cherchent à sauvegarder ce patrimoine virtuel, dont l'<a class="text-link link-color" href="https://archive.org">Internet Archive</a> et <a class="text-link link-color" href=https://geocities.restorativland.org">The Geocities Gallery</a>. Ce dernier est un des projet de Kyle Drake, créateur du contemporain de GeoCities, <a class="text-link link-color" href="https://neocities.org">Neocities</a>, lancé en 2013. Neocities est aussi un service d'hébergement gratuit et open source, qui offre (pour la version gratuite) 1Go de stockage par site web. En avril 2024, il héberge près de 765 600 sites (source: Wikipedia), la plupart du temps rattachés au mouvement du Web Revival.</p>
+ <h4>Yesterweb</h4>
+ <p>Un autre acteur du Web Revival est la communauté <a class="text-link link-color" href="https://yesterweb.org">Yesterweb</a>, active de 2021 à 2023. Bien que les forums soient fermés depuis mai 2023, Yesterweb a posé de solides bases dans son manifeste au sujet d'Internet, des communautés virtuelles, et des enjeux sociaux au sein de ces communautés. En plus de promouvoir les communautés indépendantes et décentralisées, Yesterweb critique le "Web 3.0", une bulle spéculative autour des cryptomonnaies, de la blockchain, et des NFT.</p>
+ <h4>Melonland</h4>
+ <p>Enfin, on peut citer la communauté <a class="text-link link-color" href="https://melonland.net">Melonland</a>, menée par l'artiste irlandais Daniel Murray. À travers une sorte d'annuaire de sites, Melonland sert la décentralisation du web : en guise de profil, chaque utilisateur a son site personnel, personnalisable à souhait. Un des problèmes des réseaux sociaux contemporains, c'est le manque de liberté d'expression laissée aux utilisateurs dans leur page de profil. Souvent, l'utilisateur est limité à un pseudonyme, une image de profil, et une courte biographie, ce qui est bien peu comparé à un site entier qui le représente.</p>
+ <p>Je crois que le Web Revival n'a pas pour but de changer la façon dont le monde entier utilise Internet, mais plutôt de permettre l'existence d'un Internet indépendant et libéré des grandes entreprises. Inciter les utilisateurs à créer leur propre site permet de leur faire prendre conscience de l'outil qu'ils emploient tous les jours, et de les rendre plus responsables dans leur usage du web.</p>
+ </section>
+ </div>
+ <footer>Site réalisé à la <span style="color: beige;"></span> et avec <span style="color: red"></span> par <a href="https://marcellus.cc">Martial</a><br>
+ <a href="https://www.wtfpl.net/"><img
+ src="img/wtfpl.png"
+ width="80" height="15" alt="WTFPL" /></a></footer>
+</body>
@@ -1,385 +1,391 @@ -:root { - --lblue: rgb(20, 20, 255); - --dblue: rgb(157, 157, 255); - --ddegree: #960e29; - --ldegree: #dc153c; - --lwork: #dc15a0; - --dwork: #960e6d; - --dstudies: #93370e; - --lstudies: #d95115; -} - -body { - background: linear-gradient(74deg, skyblue, pink 65%, salmon); - padding: 0 12vw; - font-size: 1.1em; - font-family: tinos; -} - -h1, h2, h3, h4 { - font-family: martian; -} - -header { - display: flex; - justify-content: space-evenly; - align-items: center; -} - -h1::before, h1::after { - content: " - "; -} - -section h2 { - font-style: italic; -} - -a { - color: black; - text-decoration: none; -} - -nav { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; - position: relative; - padding: default 3vw; - height: 100%; -} - -nav a, nav sep { - display: inline-block; -} - -nav sep { - margin: auto 0; -} - -.text-link:hover { - font-weight: bold; -} - -.text-link::after { - content: '<'; -} - -.text-link::before { - content: '>'; -} - -.link-color { - color: var(--lblue); -} - -section>span>p { - padding-left: 30vw; -} - -@media screen and (max-width: 600px) { - body { - padding: 10px 0; - } - - section>span>p { - padding-left: 10vw; - } -} - -section:nth-of-type(odd) { - text-align: end; -} - -section#presentation { - display: flex; - flex-direction: row-reverse; - justify-content: end; - 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; -} - -#id-pic:hover { - filter: drop-shadow(#f62c2c 0 0 50px); -} - -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: 4px; - height: calc(15px + 100%); - background: #add8e6; - left: 14px; - border: 1px solid grey; - box-shadow: 1px 1px 1px #696969; - border-radius: 3px; -} - -.timestamp { - position: relative; - padding: 5px 15px 5px 35px; - background: repeating-radial-gradient(circle farthest-corner at calc(0.5em + 8px) 50%, pink, salmon, #f04040); - display: inline-block; - width: auto; - border-radius: 40px; - border: 1px solid pink; - margin-bottom: 30px; -} - -.timestamp span { - font-family: Finkheavy; - filter: drop-shadow(2px 2px #fff1d0); -} - -.timestamp::before { - position: absolute; - content: ''; - width: 1em; - height: 1em; - background: salmon; - border-radius: 100%; - border: 1px solid pink; - left: 7px; -} - -.events { - padding-left:35px; - display:flex; - flex-direction: row; - justify-content: start; - align-items: start; - flex-wrap: wrap; - position: relative; - margin-bottom: 30px; - width: calc(100% - 35px); -} - -.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: #2c778f; - top: 7px; - left: 11px; - 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; - border: 1px solid black; - transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; - overflow: hidden; - padding: 0; - max-width: 25vw; - margin: 5px 10px; - background-color: #fff1d060; - box-shadow: 1px 1px black; -} - -.event:hover { - border-right: none; - box-shadow: 2px 2px rgb(20, 20, 255); - transform: translate(-2px, -2px); - 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; -} - -.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: 15px 0 15px 0; - border: 1px solid black; - padding: 1em; - background-color: #fff1d060; - color: #fff1d0; -} - -span.degree, .degree h4 { - background-color: var(--ddegree); -} - -div.degree::before { - content: ""; - position: absolute; - top: 1em; - left: 1em; - color: #fff1d0; -} - -span.work, .work h4 { - background-color: var(--dwork); -} - -div.work::before { - content: ""; - position: absolute; - top: 1em; - left: 1em; - color: #fff1d0; -} - -span.studies, .studies h4 { - background-color: var(--dstudies); -} - -div.studies::before { - content: ""; - position: absolute; - top: 1em; - left: 1em; - 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 var(--lblue, rgb(20, 20, 255)); - - } - to { - box-shadow: 2px 2px var(--dblue, rgb(157, 157, 255)); - } -} - -hr { - border: none; - border-top: 2px dashed #f62c2c; -} - -.citation { - text-align: center; - font-weight: bold; - font-size: 1.3em; -} - -.citation p { - margin: 0; -} - -.author { - text-align: right; - font-weight: normal; - font-style: italic; - font-size: smaller; -} - -footer { - font-size: small; - text-align: right; -} - -@font-face{ - 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); -} +:root {
+ --lblue: rgb(20, 20, 255);
+ --dblue: rgb(157, 157, 255);
+ --ddegree: #960e29;
+ --ldegree: #dc153c;
+ --lwork: #dc15a0;
+ --dwork: #960e6d;
+ --dstudies: #93370e;
+ --lstudies: #d95115;
+}
+
+body {
+ background: linear-gradient(74deg, skyblue, pink 65%, salmon);
+ padding: 0 12vw;
+ font-size: 1.1em;
+ font-family: tinos;
+}
+
+header {
+ position: sticky;
+ top: 5px;
+ z-index: 10;
+}
+
+h1, h2, h3, h4 {
+ font-family: martian;
+}
+
+header {
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+}
+
+h1::before, h1::after {
+ content: " - ";
+}
+
+section h2 {
+ font-style: italic;
+}
+
+a {
+ color: black;
+ text-decoration: none;
+}
+
+nav {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ position: relative;
+ padding: default 3vw;
+ height: 100%;
+}
+
+nav a, nav sep {
+ display: inline-block;
+}
+
+nav sep {
+ margin: auto 0;
+}
+
+.text-link:hover {
+ font-weight: bold;
+}
+
+.text-link::after {
+ content: '<';
+}
+
+.text-link::before {
+ content: '>';
+}
+
+.link-color {
+ color: var(--lblue);
+}
+
+section>span>p {
+ padding-left: 30vw;
+}
+
+@media screen and (max-width: 600px) {
+ body {
+ padding: 10px 0;
+ }
+
+ section>span>p {
+ padding-left: 10vw;
+ }
+}
+
+section:nth-of-type(odd) {
+ text-align: end;
+}
+
+section#presentation {
+ display: flex;
+ flex-direction: row-reverse;
+ justify-content: end;
+ 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;
+}
+
+#id-pic:hover {
+ filter: drop-shadow(#f62c2c 0 0 50px);
+}
+
+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: 4px;
+ height: calc(15px + 100%);
+ background: #add8e6;
+ left: 14px;
+ border: 1px solid grey;
+ box-shadow: 1px 1px 1px #696969;
+ border-radius: 3px;
+}
+
+.timestamp {
+ position: relative;
+ padding: 5px 15px 5px 35px;
+ background: repeating-radial-gradient(circle farthest-corner at calc(0.5em + 8px) 50%, pink, salmon, #f04040);
+ display: inline-block;
+ width: auto;
+ border-radius: 40px;
+ border: 1px solid pink;
+ margin-bottom: 30px;
+}
+
+.timestamp span {
+ font-family: Finkheavy;
+ filter: drop-shadow(2px 2px #fff1d0);
+}
+
+.timestamp::before {
+ position: absolute;
+ content: '';
+ width: 1em;
+ height: 1em;
+ background: salmon;
+ border-radius: 100%;
+ border: 1px solid pink;
+ left: 7px;
+}
+
+.events {
+ padding-left:35px;
+ display:flex;
+ flex-direction: row;
+ justify-content: start;
+ align-items: start;
+ flex-wrap: wrap;
+ position: relative;
+ margin-bottom: 30px;
+ width: calc(100% - 35px);
+}
+
+.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: #2c778f;
+ top: 7px;
+ left: 11px;
+ 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;
+ border: 1px solid black;
+ transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+ overflow: hidden;
+ padding: 0;
+ max-width: 25vw;
+ margin: 5px 10px;
+ background-color: #fff1d060;
+ box-shadow: 1px 1px black;
+}
+
+.event:hover {
+ border-right: none;
+ box-shadow: 2px 2px rgb(20, 20, 255);
+ transform: translate(-2px, -2px);
+ 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;
+}
+
+.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: 15px 0 15px 0;
+ border: 1px solid black;
+ padding: 1em;
+ background-color: #fff1d060;
+ color: #fff1d0;
+}
+
+span.degree, .degree h4 {
+ background-color: var(--ddegree);
+}
+
+div.degree::before {
+ content: "";
+ position: absolute;
+ top: 1em;
+ left: 1em;
+ color: #fff1d0;
+}
+
+span.work, .work h4 {
+ background-color: var(--dwork);
+}
+
+div.work::before {
+ content: "";
+ position: absolute;
+ top: 1em;
+ left: 1em;
+ color: #fff1d0;
+}
+
+span.studies, .studies h4 {
+ background-color: var(--dstudies);
+}
+
+div.studies::before {
+ content: "";
+ position: absolute;
+ top: 1em;
+ left: 1em;
+ 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 var(--lblue, rgb(20, 20, 255));
+
+ }
+ to {
+ box-shadow: 2px 2px var(--dblue, rgb(157, 157, 255));
+ }
+}
+
+hr {
+ border: none;
+ border-top: 2px dashed #f62c2c;
+}
+
+.citation {
+ text-align: center;
+ font-weight: bold;
+ font-size: 1.3em;
+}
+
+.citation p {
+ margin: 0;
+}
+
+.author {
+ text-align: right;
+ font-weight: normal;
+ font-style: italic;
+ font-size: smaller;
+}
+
+footer {
+ font-size: small;
+ text-align: right;
+}
+
+@font-face{
+ 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);
+}
|