feat(pages+content): semantic html

- Larger fonts
- Flexbox nav
- 65ch textbox width
- box shadow

content/_index.md

@@ -1,7 +1,6 @@
 +++
 title = "Home"
 template = "index.html"
-date = 2023-11-01
 sort_by = "weight"
 +++
 
@@ -9,8 +8,9 @@ sort_by = "weight"
 
 Hello,
 
-I'm Fabrice Mouhartem, currently working as a R&D Engineer at
-[XWiki](https://xwiki.org) on the [Cryptpad](https://cryptpad.org) project.
+I'm Fabrice Mouhartem (`/fa.bʁis mu.aʁ.tεm/`), currently working as a R&D
+Engineer at [XWiki](https://xwiki.org) on the [Cryptpad](https://cryptpad.org)
+project.
 
 I defended a PhD in 2018 at ÉNS de Lyon about privacy preserving cryptography
 from pairings and lattice assumptions under the supervision of Benoît Libert.
@@ -27,6 +27,6 @@ post-quantum signatures.
 
 # Contact
 
-You can join me by email at “fabrice • mouhartem (at) xwiki • com”.
+You can join me by email at “`fabrice • mouhartem (at) xwiki • com`”.
 
 # News

content/research/_index.md

@@ -1,6 +1,5 @@
 +++
 title = "Research"
-date = 2023-11-01
 weight = 10
 +++
 

content/teaching/2018-LIFProj.md

@@ -0,0 +1,88 @@
++++
+title = "UCBL: Projets de Licence"
+date = 2018-03-13
+slug = "lifproj-18"
+lang = "fr"
++++
+
+Projets de Licence 1 à l'UCBL. Trois sujets autour de l'implémentation de
+primitives cryptographiques.
+
+<!-- more -->
+
+**Travaux pratiques:** Lundi ou mardi.
+
+Une description plus détaillée du cours, organisé par Fabien Rico (✝) n’est plus disponible.
+
+Le but de ce cours est de mener à bien un projet collaboratif. Les sujets que je propose sont principalement orientés autour de la cryptologie : cryptographie et cryptanalyse.
+
+### FM1. Chiffrement fondé sur l'identité
+
+**Six groupes :** 2, 11, 21, 27, 33, 44
+
+[[Sujet Complet]](documents/FM1.pdf)  
+[[Exemple jouet pour Cocks]](documents/cocks-test.txt)
+
+Le but de ce projet est de coder une infrastructure de chiffrement sur l'identité (**IBE**) pour une possible intégration à un client mail lourd (par exemple thunderbird).
+
+Un chiffrement fondé sur l'identité est une infrastructure qui s'articule autour de plusieurs acteurs :
+
+* une autorité qui délivre les clefs secrètes ;
+* les utilisateurs autorisés à déchiffrer à l'aide de leur clef secrète ;
+* tout le monde, en mesure de chiffrer pour n'importe qui à l'aide de son identifiant (par exemple une adresse e-mail).
+
+Un exemple d'interface pour la cryptographie est gpg, qui même si elle n'est pas nécessairement très _user friendly_, ça reste un exemple pour les premières interfaces du programme.
+
+Au delà de l'interface d'utilisation et de déboggage, il reste la question des méthodes cryptographiques à utiliser. Pour cela, je propose aux groupes de choisir parmi les schémas qui suivent :
+
+* L'[IBE de Cocks](https://www.iacr.org/archive/pkc2016/96140177/96140177.pdf). Qui repose sur de l'arithmétique modulaire (comme [RSA](https://fr.wikipedia.org/wiki/Chiffrement_RSA) par exemple). Nécessite de manipuler des grands entiers, et donc de passer par une bibliothèque de calcul multiprécision, comme [GMP](https://gmplib.org/).
+* L'[IBE de Boneh et Franklin](https://crypto.stanford.edu/~dabo/papers/bfibe.pdf). Qui repose sur une structure un peu plus velue que l'arithmétique modulaire : les couplages. Ceux-ci reposent sur des calculs un peu poussés sur les courbes elliptiques. Une bibliothèque pour la manipulation des couplages serait [Relic](https://github.com/relic-toolkit).
+* L'[IBE de Gentry, Peikert et Vaikuntanathan](https://people.csail.mit.edu/vinodv/GentryPeikertV-STOC2008.pdf). Qui est construit sur les réseaux euclidiens. La partie technique est la manipulation des distributions de probabilités sur les réseaux. Une bibliothèque pour manipuler les réseaux pourrait être [HElib](https://github.com/shaih/HElib).
+
+
+Quel que soit le choix du protocole de chiffrement, celui-ci sera utilisé -- pour des raisons d'efficacité -- dans le cadre d'un chiffrement hybride. C'est-à-dire que le chiffrement fondé sur l'identité sera utilisé pour chiffrer une *clef de session* pour un schéma symétrique (par exemple [AES](https://fr.wikipedia.org/wiki/Advanced_Encryption_Standard) déjà implémenté à [plusieurs reprises](https://wiki.openssl.org/index.php/EVP_Symmetric_Encryption_and_Decryption)) qui chiffrera le message.
+
+Parmi ces choix, la manipulation des opérations de base sur les différentes structures pourra être effectuée à l'aide de bibliothèques (GMP pour les grands entiers par exemple). En revanche, l'implantation des algorithmes cryptographiques devra être faite « à la main ».
+
+**Autres ressources** :
+
+* [Comment écrire une extension pour thunderbird](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Developing_WebExtensions_for_Thunderbird).
+* Répertoire <tt>git</tt> d'enigmail: <git://git.code.sf.net/p/enigmail/source>
+* [rfc5408 – Identity-Based Encryption Architecture and Supporting Data Structures](https://tools.ietf.org/html/rfc5408)
+
+
+### FM2. Cryptanalyse de schémas asymétriques
+
+**Un groupe :** 8
+
+[[Sujet Complet]](documents/FM2.pdf)
+
+Le but de ce projet est l'implantation d'un algorithme de calcul de factorisation de grands nombres.
+
+Un premier échauffement consiste à implanter le [crible quadratique](https://fr.wikipedia.org/wiki/Crible_quadratique), qui est une méthode simple de calcul de la factorisation d'un grand nombre, et qui repose sur la relation $$(x+y)(x-y) = x^2 - y^2.$$
+
+Un autre algorithme classique pour la factorisation d'entiers de taille moyenne est la [factorisation sur les courbes elliptiques](https://en.wikipedia.org/wiki/Lenstra_elliptic-curve_factorization) (ou **ECM** en anglais pour *Elliptic-Curve Method*). Soit $N$ notre nombre à factoriser, l'idée consiste à construire une courbe sur $\mathbb{Z}_{/N \mathbb{Z}}$ (qui n'est pas un groupe, puisqu'il existe des éléments non inversibles, qui sont les facteurs de $N$) et de parcourir cette courbe jusqu'à trouver un « problème », qui indique la présence d'un élément non inversible, et donc nous donne des informations sur un facteur de $N$.  
+Cette méthode probabiliste a pour avantage d'être facilement parallélisable, par exemple en parcourant sur différents cœurs des courbes différentes.
+
+Une fois ceci fait, et s'il reste du temps, une implantation du [crible algébrique](http://www.ams.org/notices/199612/pomerance.pdf) pourra être faite. Elle nécessite l'utilisation d'une algèbre linéaire creuse efficace que vous implémenterez vous-même.
+
+Le but de ce projet sera donc de factoriser des grands nombres (par exemple les challenges RSA) après avoir parallélisé le code (par exemple en utilisant <tt>MPI</tt>).
+
+La manipulation de grands entiers pourra être fait par le biais d'une bibliothèque ([GMP](https://gmplib.org/) par exemple), des batteries de tests unitaires et leur vérification pourra être faite par le biais de [sage](https://sagemath.org/).
+
+### FM3. Système de sondage anonyme
+
+**Un groupe :** 41
+
+[[Sujet (*presque*) Complet]](documents/FM3.pdf)
+
+Dans ce projet, vous devrez implanter une interface web connectée à un moteur cryptographique codé dans un langage suffisamment bas-niveau pour éviter les attaques par canaux cachés par exemple. 
+
+L'ergonomie de l'interface sera aussi importante que la réalisation du *backend*.
+
+L'idée sera d'implanter un mécanisme d'[accréditation anonyme](https://courses.cs.washington.edu/courses/csep590a/11wi/slides/CSEP590a-anoncredsv3.pdf) pour gérer les droits d'accès au sondage.  
+Les votes seront ensuite agrégées via un chiffrement additivement homomorphe (comme le [chiffrement de Paillier](https://fr.wikipedia.org/wiki/Cryptosyst%C3%A8me_de_Paillier) par exemple). 
+
+Dans ce projet, les structures de données (manipulation de gros entiers pourront être gérées par une bibliothèque. Le reste devra être codé à la main, en faisant attention autant que possible à la sécurité générale du système.
+
+L'interface web pourra être gérée par python (via [django](https://fr.wikipedia.org/wiki/Django_(framework)) ou [flask](https://fr.wikipedia.org/wiki/Flask_(framework)) par exemple) pour permettre un branchement au programme cœur plus aisé.

content/teaching/2021-CySec.md

@@ -0,0 +1,23 @@
++++
+title = "M2 Cysec: Advanced Cryptography"
+date = 2022-01-13
+lang = "en"
+slug = "cysec-21"
++++
+
+This course aims at presenting the recent advances in privacy-preserving cryptography.
+More precisely, it covers the topics of advanced cryptographic primitives to protect the privacy of their users.
+
+<!-- more -->
+
+**Lectures**: Wednesdays from 2PM to 5PM.
+
+Lecture notes are available [here](https://fmouhart.epheme.re/documents/M2CySec.Adv.Crypto.pdf).
+
+### Useful Resources
+
+* About cryptography in general (will not be covered by the course, but it is still useful in general to understand the topics covered during the course:
+    * Jonathan Katz and Yehuda Lindell,
+  [Introduction to Modern Cryptography](http://www.cs.umd.edu/~jkatz/imc.html): A very resourceful book about cryptography.
+    * The lectures of Dan Boneh on [coursera](https://fr.coursera.org/learn/crypto), also available on [youtube](https://www.youtube.com/playlist?list=PL58C6Q25sEEHXvACYxiav_lC2DqSlC7Og).
+* M. Bellare, D. Micciancio, B. Warinschi. Foundations of group signatures: formal definitions, simplified requirements, and a construction based of general assumptions. [[pdf]](https://cseweb.ucsd.edu/~daniele/papers/BMW.pdf)

content/teaching/_index.md

@@ -1,9 +1,11 @@
 +++
 title="Teaching"
-date = 2023-11-01
 weight = 30
+sort_by = "date"
 +++
 
 # Teaching
 
-Hello world!
+This page presents a list of the classes I gave as a teacher or as a teaching
+assistant. As they are mostly intended for the student of these past courses,
+the full page and summary are in the corresponding language of the class.

sass/_base.scss

@@ -1,12 +1,14 @@
 $light-fonts: "Fira Sans Light", sans-serif;
 $normal-fonts: "Fira Sans", sans-serif;
-$page-width: 800px;
+$mono-fonts: "Fira Mono", monospace;
+$page-width: 65ch;
 $primary-color: #333;
 $bg-color: #eee;
 $page-color: #ddd;
 $header-bg: #1d3c67;
 $header-fg: #ffffff;
 $link-color: #33f;
+$footer-link-color: #3455db;
 $link-hover: #00d;
 $menu-bg: #231d67;
 $menu-fg: #e8e9f3;
@@ -16,28 +18,31 @@ $menu_btn-size: 10px;
 html {
   background-color: $page-color;
 }
-@media only screen and (min-width: $page-width){
-    html {
-        padding:10px;
-    }
+@font-face {
+  font-family: "Fira Sans Light";
+  font-style: normal;
+  font-weight: 300;
+  src: local("Fira Sans Light"), local("FiraSans-Light"), url("fonts/Fira Sans Light.woff2") format("woff2");
 }
 @font-face {
-    font-family: "Fira Sans Light";
-    font-style: normal;
-    font-weight: 300;
-    src: local("Fira Sans Light"), local("FiraSans-Light"), url("fonts/Fira Sans Light.woff2") format("woff2");
+  font-family: "Fira Sans";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Fira Sans"), local("FiraSans-Regular"), url("fonts/Fira Sans.woff2") format("woff2");
 }
 @font-face {
-    font-family: "Fira Sans";
-    font-style: normal;
-    font-weight: 400;
-    src: local("Fira Sans"), local("FiraSans-Regular"), url("fonts/Fira Sans.woff2") format("woff2");
+  font-family: "Fira Mono";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Fira Mono"), local("FiraMono-Regular"), url("fonts/FiraMono-Regular.woff2") format("woff2");
 }
 body {
-    max-width: $page-width;
-    margin: auto;
-    font-family: $light-fonts;
-    background-color: $bg-color;
+  font-size: 16pt;
+  max-width: $page-width;
+  margin: auto;
+  font-family: $light-fonts;
+  background-color: $bg-color;
+  box-shadow: 0 1px 10px #888;
 }
 header {
   height: 150px;
@@ -52,6 +57,19 @@ header {
     color: $header-fg;
     text-shadow: black 0px 0px 0.1em;
   }
+  h1 {
+    font-size: 20pt;
+  }
+}
+@media only screen and (min-width: $page-width){
+  html {
+    padding:10px;
+  }
+  header {
+    h1 {
+      font-size: 32pt;
+    }
+  }
 }
 #header-logo {
   background: url('img/logo.png') top;
@@ -62,33 +80,35 @@ header {
   background-position: bottom;
 }
 h1 {
-  font-size: 28pt;
+  font-size: 32pt;
 }
 h2 {
-  font-size: 22pt;
+  font-size: 26pt;
 }
 h3 {
-  font-size: 18pt;
+  font-size: 22pt;
 }
 p, h1, h2, h3, pre {
   padding: 0px 10px 3px 10px;
 }
 p, ul {
-  font-size: 14pt;
   color: $primary-color;
 }
 p {
   text-align: justify;
 }
+ul {
+  width:90%;
+}
 footer {
-  font-size: 8pt;
+  font-size: 12pt;
   text-align: center;
   color: #555;
   padding: 10px;
 }
 footer a,
 footer a:visited {
-  color: #66f;
+  color: $footer-link-color; 
 }
 a,
 a:visited {
@@ -106,12 +126,14 @@ li {
 }
 nav {
   display: flex;
+  flex-direction: column;
   background-color: $menu-bg;
   menu {
     padding: 0px;
-    display:block;
     margin: 0px;
     width: 100%;
+    display: flex;
+    flex-direction: row;
   }
   li {
     a {
@@ -134,6 +156,27 @@ nav {
     margin: 0px;
     padding: $menu_btn-size 0px $menu_btn-size 0px;
     list-style-type: none;
-    float: left;
+  }
+}
+strong {
+  font-family: $normal-fonts;
+}
+code {
+  font-family: $mono-fonts;
+  font-size:14px;
+}
+.post {
+  margin: 10px;
+  background-color: #ddd;
+  font-size: 20px;
+  .post_title {
+    background-color: #ccc;
+    padding: 5px;
+  }
+  .post_title a {
+    font-family: $normal-fonts;
+  }
+  .post_summary {
+    padding: 5px;
   }
 }

templates/footer.html

@@ -1,3 +1,3 @@
 <footer>
-  fmouhart.epheme.re
+  fmouhart.epheme.re | Powered by <a href="https://getzola.org/">Zola</a> (<a href="https://git.epheme.re/fmouhart/fmouhart.epheme.re">source</a>)
 </footer>

templates/nav.html

@@ -1,9 +1,12 @@
+{% if page %}
+{% set page_section = get_section(path=page.ancestors[1], metadata_only = true) %}
+{% endif %}
 <nav>
   <menu>
     <li><a {% if section and section == root %} class="nav_current" {% endif %} href="/">Home</a></li>
     {% for subsection in root.subsections %}
     {% set subsection = get_section(path=subsection, metadata_only=true) %}
-    <li><a href="{{ subsection.permalink }}" {% if section and section == subsection %} class="nav_current" {% endif %}>{{ subsection.title }}</a></li>
+    <li><a href="{{ subsection.permalink }}" {% if section and section.title == subsection.title or page and page_section.title == subsection.title %} class="nav_current" {% endif %}>{{ subsection.title }}</a></li>
     {% endfor %}
   </menu>
 </nav>

templates/page.html

@@ -2,13 +2,15 @@
 
 {% block header %}
 <header id="title-block-header">
-  <h1 class="title">Fabrice Mouhartem's Webpage</h1>
-	<p class="date">{{ page.date }}</p>
+  <div id="header-logo"></div>
+  <h1 class="title">Fabrice Mouhartem</h1>
+  <p class="date">{{ page.date }}</p>
 </header>
 {% endblock %}
 
 {% block main %}
-<h1>{{ section.extra.hero.title | markdown(inline = true) | safe }}</h1>
-<p>{{ section.extra.hero.description | markdown(inline = true) | safe }}</p>
-<h1>{{ section.extra.news.title | safe }}</h1>
+<article>
+<h1>{{ page.title | safe }}</h1>
+<p>{{ page.content | safe }}</p>
+</article>
 {% endblock %}

templates/section.html

@@ -1,5 +1,17 @@
 {% extends "base.html" %}
 
 {% block main %}
+<main>
 {{ section.content | markdown(inline = true) | safe }}
+<div class="pages">
+{% for sub in section.pages %}
+<article class="post">
+  <div class="post_title">
+    <a href="{{ sub.path }}">{{ sub.title }}</a>
+  </div>
+  {% if sub.summary %}<div class="post_summary">{{ sub.summary | markdown(inline=true) | safe }}</div>{% endif %}
+</article>
+{% endfor %}
+</div>
+</main>
 {% endblock %}