From cc515e6d6105f8de9bfc66889cb1640e68fd8aed Mon Sep 17 00:00:00 2001 From: martial Date: Tue, 24 Dec 2024 19:47:55 +0100 Subject: feat: sticky header --- README | 32 +-- index.html | 460 ++++++++++++++++++------------------ style.css | 776 +++++++++++++++++++++++++++++++------------------------------ 3 files changed, 637 insertions(+), 631 deletions(-) diff --git a/README b/README index 72d5382..28b1e77 100644 --- a/README +++ b/README @@ -1,16 +1,16 @@ -# DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE # -# Version 2, December 2004 # -# # -# Copyright (C) 2004 Sam Hocevar # -# # -# 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 # +# # +# 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 diff --git a/index.html b/index.html index 16fbf93..6db9442 100644 --- a/index.html +++ b/index.html @@ -1,230 +1,230 @@ - - - - Martial Simon - - - - - - -
-

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 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 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.

-
-
-

Pet Sitter

-

Job d'été chez un particulier.

-

2 semaines.

-
-
-
2022
-
-
-

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

-

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 (2022-2023).

-
-
-

Président du club musique du campus

-

Gestion du club, organisation d'évènements, et recrutement

-

De 2022 à aujourd'hui

-
-
-

Staff pour les BDE successifs du campus

-

Gestion du club, organisation d'évènements

-

De 2022 à aujourd'hui

-
-
-
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.

-
-
-

Régie son et lumières

-

Atelier théâtre du lycée St Thomas d'Aquin Oullins

-

Bénévolat pour 3 pièces différentes, 2 mois et demi

-
-
-

Auxiliaire d'été

-

Société Générale - Agence de Saint-Genis-Laval

-

Accueil de clients & tâches administratives (gestion de dossiers client, entrées et sorties de stock...) (1 mois)

-
-
-

Assistant Salle Machine

-

CDD à l'EPITA Lyon

-

Assistance aux étudiants de 2è année, accompagnement lors des travaux pratiques

-
-
-

Vice-présidence du BDE

-

EPITA Lyon

-

- Organisation d'évènements, soirées, encadrement des clubs dépendant de l'association.
- Engagement pour la vie associative au sein de l'école, représentation de l'association auprès de l'administration et du BNEI. -

-
-
-
-
-
-

Compétences

-

Informatique (voir mon Github et mes autres repos)

-
-
-

Langages de programmation:

-
    -
  • C : Avancé
    • -
  • SQL : Avancé
    • -
  • Python : Avancé
    • -
  • HTML, CSS : Avancé (Ce site a été réalisée manuellement avec ces 2 langages, sans l'usage de frameworks)
    • -
  • shell : Avancé
    • -
  • C# : Intermédiaire
    • -
  • OCaml : Intermédiaire
    • -
  • JavaScript : Bases
    • -
-
-
-

Technologies

-
    -
  • Éditeurs de texte : [neo]vim, suite JetBrains, VSCode, Microsoft Visual Studio
    • -
  • AWS : suivi de la formation (en anglais) en ligne "AWS Academy Cloud Foundations sur le Cloud Computing avec AWS
    • -
  • Systèmes Unix
    • -
  • Serveur Web nginx
    • -
-
-
-

Autres

-
-
-

Langues

-
    -
  • Français : natif
    • -
  • Anglais : C1
    • -
  • Allemand : B1
    • -
  • Apprentissage autonome du japonais et suédois
    • -
-
-
-

Autres

-
    -
  • Permis B
    • -
  • Guitariste depuis 2013
    • -
  • Bassiste depuis 2018
    • -
  • Compétences en MAO
    • -
-
-
-
-
-

Contact

- -
-
-

Ouvertures culturelles

- -

Lectures (liste non exhaustive) :

-

Je suis un grand amateur d'Amélie Nothomb et de son style d'écriture. Je les ai découverts dans Métaphysique des tubes, 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 Hygiène de l'assassin au drame social japonais de Stupeur et Tremblements, en passant par Soif, Les Aérostats, et bien d'autres encore.

-

Bien entendu, je ne lis pas uniquement Amélie Nothomb, aussi j'ai beaucoup apprécié Scar Tissue, l'autobiographie d'Anthony Kiedis, chanteur des Red Hot Chili Peppers, le Journal de Kurt Cobain, leader de Nirvana, ainsi que la bande dessinée biographique d'Amy Winehouse, parue aux édition Petit à Petit.

-

Dans un autre registre, j'ai trouvé passionnant le Grand Roman des Mathématiques de Mickaël Launay (je trouve par ailleurs tout aussi passionnant le Dictionnaire Amoureux des Maths, de Mickaël Launay et André Deledicq, que je lis par petits morceaux).

-

Après Farenheit 451 de Ray Bradbury, la science fiction m'a mené à lire Les Robots, 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.

-
-

"Ce fut alors que je naquis, à l'âge de deux ans et demi, [...], par la grâce du chocolat blanc."

-

Amélie Nothomb, Métaphysique des tubes

-
-

Récemment, j'ai lu (et je recommande) :

-

Tant que le café est encore chaud 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.

-
-

Écoutes (toujours pas exhaustives) :

-

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.

-

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 Journal de Kurt Cobain.

-

Vous reprendrez bien une recommendation ?

-

Ou peut-être plus d'une : Commencez avec un album des Beatles, si vous voulez de l'énergie, écoutez Lover Boy de Supertramp. Puis, si ça vous a donné envie de tout casser, je vous conseille Hertz d'Amyl and The Sniffers, ou bien si vous voulez seulement bouger, partez sur 1612 de Vulfpeck. Pour des situations plus spécifiques, référez vous à ce diagramme.

-
-

"Je veux que toutes les filles du monde prennent une guitare et se mettent à crier"

-

Courtney Love

-
- -
-

Web Revival

-

Quésaco ?

-

Le mouvement du Web Revival 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.

-

GeoCities

-

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'Internet Archive et The Geocities Gallery. Ce dernier est un des projet de Kyle Drake, créateur du contemporain de GeoCities, Neocities, 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.

-

Yesterweb

-

Un autre acteur du Web Revival est la communauté Yesterweb, 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.

-

Melonland

-

Enfin, on peut citer la communauté Melonland, 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.

-

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.

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

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 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 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.

+
+
+

Pet Sitter

+

Job d'été chez un particulier.

+

2 semaines.

+
+
+
2022
+
+
+

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

+

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 (2022-2023).

+
+
+

Président du club musique du campus

+

Gestion du club, organisation d'évènements, et recrutement

+

De 2022 à aujourd'hui

+
+
+

Staff pour les BDE successifs du campus

+

Gestion du club, organisation d'évènements

+

De 2022 à aujourd'hui

+
+
+
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.

+
+
+

Régie son et lumières

+

Atelier théâtre du lycée St Thomas d'Aquin Oullins

+

Bénévolat pour 3 pièces différentes, 2 mois et demi

+
+
+

Auxiliaire d'été

+

Société Générale - Agence de Saint-Genis-Laval

+

Accueil de clients & tâches administratives (gestion de dossiers client, entrées et sorties de stock...) (1 mois)

+
+
+

Assistant Salle Machine

+

CDD à l'EPITA Lyon

+

Assistance aux étudiants de 2è année, accompagnement lors des travaux pratiques

+
+
+

Vice-présidence du BDE

+

EPITA Lyon

+

+ Organisation d'évènements, soirées, encadrement des clubs dépendant de l'association.
+ Engagement pour la vie associative au sein de l'école, représentation de l'association auprès de l'administration et du BNEI. +

+
+
+
+
+
+

Compétences

+

Informatique (voir mon Github et mes autres repos)

+
+
+

Langages de programmation:

+
    +
  • C : Avancé
    • +
  • SQL : Avancé
    • +
  • Python : Avancé
    • +
  • HTML, CSS : Avancé (Ce site a été réalisée manuellement avec ces 2 langages, sans l'usage de frameworks)
    • +
  • shell : Avancé
    • +
  • C# : Intermédiaire
    • +
  • OCaml : Intermédiaire
    • +
  • JavaScript : Bases
    • +
+
+
+

Technologies

+
    +
  • Éditeurs de texte : [neo]vim, suite JetBrains, VSCode, Microsoft Visual Studio
    • +
  • AWS : suivi de la formation (en anglais) en ligne "AWS Academy Cloud Foundations sur le Cloud Computing avec AWS
    • +
  • Systèmes Unix
    • +
  • Serveur Web nginx
    • +
+
+
+

Autres

+
+
+

Langues

+
    +
  • Français : natif
    • +
  • Anglais : C1
    • +
  • Allemand : B1
    • +
  • Apprentissage autonome du japonais et suédois
    • +
+
+
+

Autres

+
    +
  • Permis B
    • +
  • Guitariste depuis 2013
    • +
  • Bassiste depuis 2018
    • +
  • Compétences en MAO
    • +
+
+
+
+
+

Contact

+ +
+
+

Ouvertures culturelles

+ +

Lectures (liste non exhaustive) :

+

Je suis un grand amateur d'Amélie Nothomb et de son style d'écriture. Je les ai découverts dans Métaphysique des tubes, 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 Hygiène de l'assassin au drame social japonais de Stupeur et Tremblements, en passant par Soif, Les Aérostats, et bien d'autres encore.

+

Bien entendu, je ne lis pas uniquement Amélie Nothomb, aussi j'ai beaucoup apprécié Scar Tissue, l'autobiographie d'Anthony Kiedis, chanteur des Red Hot Chili Peppers, le Journal de Kurt Cobain, leader de Nirvana, ainsi que la bande dessinée biographique d'Amy Winehouse, parue aux édition Petit à Petit.

+

Dans un autre registre, j'ai trouvé passionnant le Grand Roman des Mathématiques de Mickaël Launay (je trouve par ailleurs tout aussi passionnant le Dictionnaire Amoureux des Maths, de Mickaël Launay et André Deledicq, que je lis par petits morceaux).

+

Après Farenheit 451 de Ray Bradbury, la science fiction m'a mené à lire Les Robots, 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.

+
+

"Ce fut alors que je naquis, à l'âge de deux ans et demi, [...], par la grâce du chocolat blanc."

+

Amélie Nothomb, Métaphysique des tubes

+
+

Récemment, j'ai lu (et je recommande) :

+

Tant que le café est encore chaud 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.

+
+

Écoutes (toujours pas exhaustives) :

+

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.

+

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 Journal de Kurt Cobain.

+

Vous reprendrez bien une recommendation ?

+

Ou peut-être plus d'une : Commencez avec un album des Beatles, si vous voulez de l'énergie, écoutez Lover Boy de Supertramp. Puis, si ça vous a donné envie de tout casser, je vous conseille Hertz d'Amyl and The Sniffers, ou bien si vous voulez seulement bouger, partez sur 1612 de Vulfpeck. Pour des situations plus spécifiques, référez vous à ce diagramme.

+
+

"Je veux que toutes les filles du monde prennent une guitare et se mettent à crier"

+

Courtney Love

+
+ +
+

Web Revival

+

Quésaco ?

+

Le mouvement du Web Revival 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.

+

GeoCities

+

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'Internet Archive et The Geocities Gallery. Ce dernier est un des projet de Kyle Drake, créateur du contemporain de GeoCities, Neocities, 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.

+

Yesterweb

+

Un autre acteur du Web Revival est la communauté Yesterweb, 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.

+

Melonland

+

Enfin, on peut citer la communauté Melonland, 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.

+

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.

+
+
+ + diff --git a/style.css b/style.css index cafe2df..cd6ac37 100644 --- a/style.css +++ b/style.css @@ -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); +} -- cgit v1.2.3