From 359047663605447a161715c26cf01b02ed7b9eb0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9ophile=20Bastian?= <contact@tobast.fr>
Date: Thu, 14 Nov 2024 19:34:40 +0100
Subject: [PATCH] =?UTF-8?q?Ajout=20:=20abstract,=20quelques=20d=C3=A9tails?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mainsite/scss/style.scss         | 81 ++++++++++++++++++++++++++++++++
 mainsite/static/css/style.css    | 58 +++++++++++++++++++++++
 mainsite/templates/base.html     | 19 +++++++-
 mainsite/templates/phd/home.html | 43 ++++++++++++++++-
 4 files changed, 199 insertions(+), 2 deletions(-)

diff --git a/mainsite/scss/style.scss b/mainsite/scss/style.scss
index 2c8ef99..cb890fc 100644
--- a/mainsite/scss/style.scss
+++ b/mainsite/scss/style.scss
@@ -3,6 +3,10 @@
 @import url('fonts.css');
 @import 'params';
 
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+
 html {
   background-color: $bg_color;
 }
@@ -233,3 +237,80 @@ form {
     }
   }
 }
+
+a.button {
+  padding: 10px;
+  background: #ccc;
+  border: 0 none;
+  border-radius: 10px;
+  cursor: pointer;
+  width: 100%;
+  line-height: 25px;
+  font-size: 18px;
+  color: black;
+  margin: 10px 0;
+  display: block;
+  text-align: center;
+
+  &:focus, &:hover {
+    background-color: $active_color;
+  }
+  &:active {
+    background-color: darken($active_color, 15%);
+  }
+}
+
+.collapsible {
+  margin: 10px 0;
+  border-radius: 10px;
+  background-color: #eee;
+  width: 100%;
+
+  .collapsible-toggle {
+    padding: 10px;
+    background-color: #ccc;
+    font-size: 18px;
+    line-height: 25px;
+
+    cursor: pointer;
+    width: 100%;
+    border: none;
+    text-align: center;
+    outline: none;
+
+    border-radius: 10px;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    text-align: center;
+
+    &>span {
+      display: block;
+      width: 100%;
+      flex-basis: 100%;
+    }
+
+    &:hover {
+      background-color: $active_color;
+    }
+    &:after {
+      content: "\2795";
+
+      //float: right;
+      font-size: 13px;
+    }
+
+    &.active {
+      border-radius: 10px 10px 0 0;
+      &:after {
+        content: "\2796";
+      }
+    }
+
+  }
+  .collapsible-content {
+    padding: 10px 20px;
+    display: none;
+  }
+}
diff --git a/mainsite/static/css/style.css b/mainsite/static/css/style.css
index a99cdd5..c50795c 100644
--- a/mainsite/static/css/style.css
+++ b/mainsite/static/css/style.css
@@ -1,4 +1,7 @@
 @import url("fonts.css");
+*, *:before, *:after {
+  box-sizing: border-box; }
+
 html {
   background-color: white; }
 
@@ -171,3 +174,58 @@ form input[type=submit] {
     background-color: #9593c6; }
   form input[type=submit]:active {
     background-color: #6461ac; }
+
+a.button {
+  padding: 10px;
+  background: #ccc;
+  border: 0 none;
+  border-radius: 10px;
+  cursor: pointer;
+  width: 100%;
+  line-height: 25px;
+  font-size: 18px;
+  color: black;
+  margin: 10px 0;
+  display: block;
+  text-align: center; }
+  a.button:focus, a.button:hover {
+    background-color: #9593c6; }
+  a.button:active {
+    background-color: #6461ac; }
+
+.collapsible {
+  margin: 10px 0;
+  border-radius: 10px;
+  background-color: #eee;
+  width: 100%; }
+  .collapsible .collapsible-toggle {
+    padding: 10px;
+    background-color: #ccc;
+    font-size: 18px;
+    line-height: 25px;
+    cursor: pointer;
+    width: 100%;
+    border: none;
+    text-align: center;
+    outline: none;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    text-align: center; }
+    .collapsible .collapsible-toggle > span {
+      display: block;
+      width: 100%;
+      flex-basis: 100%; }
+    .collapsible .collapsible-toggle:hover {
+      background-color: #9593c6; }
+    .collapsible .collapsible-toggle:after {
+      content: "\2795";
+      font-size: 13px; }
+    .collapsible .collapsible-toggle.active {
+      border-radius: 10px 10px 0 0; }
+      .collapsible .collapsible-toggle.active:after {
+        content: "\2796"; }
+  .collapsible .collapsible-content {
+    padding: 10px 20px;
+    display: none; }
diff --git a/mainsite/templates/base.html b/mainsite/templates/base.html
index 27d3b62..e16d7f0 100644
--- a/mainsite/templates/base.html
+++ b/mainsite/templates/base.html
@@ -32,5 +32,22 @@
           <main>
       </div>
   </body>
-</html>
 
+  <script>
+      /* Shamelessly adapted from w3schools */
+      var coll = document.getElementsByClassName("collapsible-toggle");
+      var i;
+
+      for (i = 0; i < coll.length; i++) {
+          coll[i].addEventListener("click", function() {
+              this.classList.toggle("active");
+              var content = this.nextElementSibling;
+              if (content.style.display === "block") {
+                  content.style.display = "none";
+              } else {
+                  content.style.display = "block";
+              }
+          });
+      }
+  </script>
+</html>
diff --git a/mainsite/templates/phd/home.html b/mainsite/templates/phd/home.html
index d0f6bde..7514055 100644
--- a/mainsite/templates/phd/home.html
+++ b/mainsite/templates/phd/home.html
@@ -7,7 +7,8 @@
 
 <p>
 Le <b>lundi 9 décembre 2024</b> prochain, je vais soutenir ma thèse de doctorat
-d'informatique à l'Université Grenoble Alpes, intitulée
+d'informatique à l'Université Grenoble Alpes, préparée dans l'équipe Inria
+CORSE sous la direction de Fabrice Rastello et intitulée
 </p>
 
 <div class="phdtitle">
@@ -20,6 +21,46 @@ prochainement disponible), une partie du jury étant à distance.</p>
 
 <p>Toute personne qui le souhaite est bienvenue pour y assister !</p>
 
+<div class="collapsible">
+    <button type="button" class="collapsible-toggle"><span>Résumé de la thèse</span></button>
+    <div class="abstract collapsible-content">
+        <p>
+        Qu'il s'agisse de calculs massifs distribués sur plusieurs baies, de
+        calculs en environnement contraint —&nbsp;comme de l'embarqué ou de
+        l'<i>edge computing</i>&nbsp;— ou encore de tentatives de réduire l'empreinte
+        écologique d'un programme fréquemment utilisé, de nombreux cas d'usage
+        justifient l'optimisation poussée d'un programme. Celle-ci s'arrête souvent
+        à l'optimisation de haut niveau (algorithmique, parallélisme, …), mais
+        il est possible de la pousser jusqu'à une optimisation bas-niveau,
+        s'intéressant à l'assembleur généré en regard de la microarchitecture du
+        processeur précis utilisé.
+        </p>
+
+        <p>
+        Une telle optimisation demande une compréhension fine des aspects à la fois
+        logiciels et matériels en jeu, et n'est bien souvent accessible qu'aux
+        experts du domaine.  Les <i>code analyzers</i> (analyseurs de code),
+        cependant, permettent d'abaisser le niveau d'expertise nécessaire pour
+        accomplir de telles optimisations, en automatisant une partie du travail de
+        compréhension des problèmes de performance rencontrés.  Ces mêmes outils
+        permettent également aux experts d'être plus efficaces dans leur travail.
+        </p>
+
+        <p>
+        Dans ce manuscrit, nous étudierons les principaux facteurs limitants de
+        la performance d'un processeur, sur lesquels la précision des outils de
+        l'état de l'art est bien souvent inégale.  Nous apportons, sur chacun
+        de ces facteurs limitants, une contribution nouvelle&nbsp;:
+        automatisation de l'obtention d'un modèle du <i>backend</i>, étude
+        manuelle du <i>frontend</i> en vue de l'automatisation de son modèle,
+        et extraction automatique des dépendances </i>à travers la mémoire</i> d'un
+        noyau de calcul. Nous apportons également une étude systématique et automatisée
+        des performances de prédiction de différents <i>code analyzers</i> de l'état de
+        l'art.
+        </p>
+    </div>
+</div>
+
 <h2>Informations pratiques</h2>
 
 <dl>