feat: better project page

src/_css/project.css

@@ -8,3 +8,14 @@
   display: flex;
   align-items: center;
 }
+
+.franklin-content h1 {
+  font-size: 2rem !important;
+}
+
+.franklin-content img,
+.franklin-content video {
+  width: 100% !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}

src/_data/personnal_projects.yml

@@ -2,7 +2,8 @@ Personnal website:
   year: 2022-2023
   description: Simple website built with [Franklin.jl](https://franklinjl.org/).
   repository: https://git.inpt.fr/fainsil/personnal-website/
-  website: https://fainsin.bzh/
+  website: https://laurent.fainsin.bzh/
+  image: /assets/projects/personnal-website.png
 
 B00 plays GBA:
   year: 2021-2023
@@ -20,9 +21,30 @@ net7 (treasurer):
   description: Active member of my school's computer association which provides many services to over 1,000 students each year.
   website: https://www.bde.inp-toulouse.fr/clubs/inp-net/
   repository: https://git.inpt.fr/net7/
+  image: https://www.bde.enseeiht.fr/clubs/net7/images/net7-2022.jpg
+
+Git micro-training:
+  year: October 2022
+  description: Git micro-training for the INP-net association, taught to ~60 students.
+  pdf: https://git.inpt.fr/inp-net/formations/-/raw/master/git/2022-2023/slides.pdf?inline=false
+  repository: https://git.inpt.fr/inp-net/formations/-/blob/master/git/2022-2023/
+  image: /assets/projects/formation-git.png
+
+Markdown micro-training:
+  year: October 2022
+  description: Markdown micro-training for the INP-net association, taught to ~60 students.
+  pdf: https://git.inpt.fr/inp-net/formations/-/raw/master/markdown/2022-2023/slides.pdf?inline=false
+  repository: https://git.inpt.fr/inp-net/formations/-/tree/master/markdown/2022-2023
+
+Git micro-training (old):
+  year: November 2021
+  description: Git micro-training for the INP-net association, taught to ~30 students.
+  pdf: https://git.inpt.fr/inp-net/formations/-/raw/master/git/2021-2022/support.pdf?inline=false
+  repository: https://git.inpt.fr/inp-net/formations/-/raw/master/git/2021-2022/
 
 Personnal website (old):
   year: 2020-2022
   description: Simple website built with the static site generator [11ty.js](https://www.11ty.dev/). Made with [Nunjucks](https://mozilla.github.io/nunjucks/), [SCSS](https://sass-lang.com/), [Javascript](https://developer.mozilla.org/fr/docs/Web/JavaScript), [Yarn](https://yarnpkg.com/) and autodeployed with a [GitLab pipeline](https://git.inpt.fr/fainsil/personnal-website-old/-/pipelines).
   repository: https://git.inpt.fr/fainsil/personnal-website-old/
   website: https://fainsil.users.inpt.fr/
+  image: /assets/projects/personnal-website-old.png

src/_data/school_projects.yml

@@ -3,75 +3,89 @@ Deep Learning Project:
   description: A simple [CNN](https://en.wikipedia.org/wiki/Convolutional_neural_network) [image classifier](https://en.wikipedia.org/wiki/Computer_vision#Recognition), trained on a custom dataset, to recognize car models in [Rocket League Sideswipe](https://sideswipe.rocketleague.com/). Built using [Python](https://en.wikipedia.org/wiki/Python_(programming_language)), [Tensorflow](https://www.tensorflow.org/), [Keras](https://keras.io/) and [adb](https://developer.android.com/studio/command-line/adb).
   repository: https://github.com/Tocard-Inc/Deep-Learning
   pdf: https://github.com/Tocard-Inc/Deep-Learning/blob/master/docs/rapport2.md
+  image: https://github.com/Tocard-Inc/Deep-Learning/raw/master/docs/demo_datas.gif
 
 Audio-Visual Data Processing:
   year: June 2022
   description: End of semester report on numerous practical works in [Matlab](https://en.wikipedia.org/wiki/MATLAB). Wrote the report using [Pluto.jl](https://github.com/fonsp/Pluto.jl).
-  website: https://fainsin.bzh/assets/TAV/
+  website: https://laurent.fainsin.bzh/assets/TAV/
+  image: https://fainsil.users.inpt.fr/content/TAV/TP4/recuit_MAP_4N_2B_0.99A.webp
 
 Sagittarius:
   year: May 2021
   description: From an object oriented programming project in [Java](https://en.wikipedia.org/wiki/Java_(programming_language)), a little 2D turn-based game inspired by [a game under the same name by George Prosser](https://gprosser.itch.io/sagittarius).
   repository: https://git.inpt.fr/fainsil/sagittarius
   pdf: https://git.inpt.fr/fainsil/sagittarius/-/blob/master/docs/iteration3/rapport3.pdf
+  video: /assets/projects/sagittarius.mp4
 
 Minishell:
   year: May 2021
   description: Implementation of a basic [shell program](https://en.wikipedia.org/wiki/Shell_(computing)) in [C](https://en.wikipedia.org/wiki/C_(programming_language)), capable of launching programs, [piping](https://en.wikipedia.org/wiki/Pipeline_(Unix)) their streams and sending them [signals](https://en.wikipedia.org/wiki/Signal_(IPC)).
   repository: https://git.inpt.fr/fainsil/minishell
+  video: /assets/projects/minishell.webm
 
 Pagerank:
   year: December 2020
   description: Implementation of an iterative algorithm in [Ada](https://en.wikipedia.org/wiki/Ada_(programming_language)) to compute the [pagerank](https://en.wikipedia.org/wiki/PageRank) of a given network as quickly and efficiently as possible.
   repository: https://git.inpt.fr/fainsil/pagerank
   pdf: https://git.inpt.fr/fainsil/pagerank/-/blob/master/doc/rapport.pdf
+  image: /assets/projects/pagerank.png
 
 Graphs:
   year: January 2022
   description: Studied [Compartmental models in epidemiology](https://en.wikipedia.org/wiki/Compartmental_models_in_epidemiology) using [Julia](https://julialang.org/) and [Graphs](https://github.com/JuliaGraphs/Graphs.jl).
   repository: https://git.inpt.fr/tocard-inc/enseeiht/projet-graphes/
+  image: /assets/projects/graph.png
 
 Geometric Modeling:
   year: May 2022
   description: Built a camera travelling system using [B-splines](https://en.wikipedia.org/wiki/Composite_B%C3%A9zier_curve) and [Slerps](https://en.wikipedia.org/wiki/Slerp), in [Minecraft](https://www.minecraft.net/) by coding a [Java](https://en.wikipedia.org/wiki/Java_(programming_language)) plugin for [SpigotMC](https://www.spigotmc.org/).
   repository: https://git.inpt.fr/tocard-inc/enseeiht/porjet-modelisation-geometrique
   pdf: https://guillod.users.inpt.fr/ModeGeom/
+  video: https://fainsil.users.inpt.fr/content/Mod%C3%A9G%C3%A9om/full_show.webm
 
 Image processing:
   year: April 2022
   description: Applied image processing techniques, like [k-means](https://en.wikipedia.org/wiki/K-means_clustering) and [meanshift](https://en.wikipedia.org/wiki/Mean_shift), to images.
   repository: https://git.inpt.fr/tocard-inc/enseeiht/ti
+  image: /assets/projects/TI.png
 
 Rendering Engine:
   year: April 2022
   description: Built a minimal renderer using [Java OpenGL (JOGL)](https://en.wikipedia.org/wiki/Java_OpenGL) and GLUT.
   repository: https://git.inpt.fr/fainsil/projet-rendu
+  video: /assets/projects/rendu.webm
 
 WebApp:
   year: June 2022
   description: Inspired by [r/place](https://reddit.com/r/place), this (poc) webapp allows several people to buy and sell pixels on a grid. Built using [Wildfly](https://www.wildfly.org/), [MariaDB](https://mariadb.org/), [Docker](https://www.docker.com/), [Gradle](https://gradle.org/), [J2EE](https://en.wikipedia.org/wiki/Jakarta_EE) and the [REST principles](https://en.wikipedia.org/wiki/Representational_state_transfer).
   repository: https://git.inpt.fr/tocard-inc/enseeiht/projet-web
+  image: /assets/projects/webapp.png
 
 ISP Modeling:
   year: May 2020
   description: Simulation of an internet ISP network, configuration of different servers for [routing](https://en.wikipedia.org/wiki/Routing_Information_Protocol), [NAT](https://en.wikipedia.org/wiki/Network_address_translation), [DHCP](https://en.wikipedia.org/wiki/DHCPD), [DNS](https://en.wikipedia.org/wiki/BIND), [WEB](https://en.wikipedia.org/wiki/Apache_HTTP_Server), [FTP](https://en.wikipedia.org/wiki/Vsftpd)...
+  image: /assets/projects/ISP.svg
 
 Functional programming and language translation:
   year: 2021
   repository: https://git.inpt.fr/tocard-inc/enseeiht/tdl/tp2/
   pdf: https://git.inpt.fr/tocard-inc/enseeiht/tdl/tp2/-/blob/master/rapport.pdf
   description: "Wrote a simple compiler, including the Lexical & Syntax analyzer, the Abstract Syntax Tree Generator, the Target Code Generator."
+  image: /assets/projects/compiler.png
 
 Telecommunication:
   year: 2020
   description: Impact of a frequency selective propagation channel and introduction to equalization.
   repository: https://git.inpt.fr/fainsil/projet-telecom
   pdf: https://git.inpt.fr/fainsil/projet-telecom/-/blob/master/rapport.pdf
+  image: /assets/projects/telecom.png
 
 Numerical Optimization:
   year: 2021
   description: Studied (complicated) numerical optimization methods in [Julia](https://julialang.org/).
   repository: https://git.inpt.fr/fainsil/optinum
+  video: /assets/projects/optinum.webm
 
 Distributed Data Project:
   year: 2021

src/_layout/head.html

@@ -9,7 +9,13 @@
   <link rel="stylesheet" href="/css/franklin.css">
   <link rel="stylesheet" href="/css/basic.css">
   <link rel="icon" href="/assets/favicon.png">
+  <script defer data-domain="laurent.fainsin.bzh" src="http://stats.fainsin.bzh/js/plausible.js"></script>
   {{isdef title}} <title>{{fill title}}</title>    {{end}}
+  <meta name="description" content="Laurent Fainsin's personnal website">
+  <meta property="og:title" content="{{fill title}}">
+  <meta property="og:description" content="Laurent Fainsin's personnal website">
+  <!-- <meta property="og:image" content="https://your-website.com/og-image.png"> -->
+  <meta property="og:url" content="https://laurent.fainsin.bzh/">
 </head>
 <body>
   {{insert header.html}}

src/_layout/header.html

@@ -5,6 +5,6 @@
       <li><a href="/">Whoami</a></li>
       <li><a href="/projects">Projects</a></li>
     </ul>
-    <img src="/assets/hamburger.svg" id="menu-icon" />
+    <img src="/assets/hamburger.svg" id="menu-icon" alt="menu-icon" />
   </nav>
 </header>

src/config.md

@@ -6,7 +6,6 @@ ignore = ["node_modules/", "_data/"]
 
 hasicons = false
 
-robots_disallow = ["/"]
 generate_sitemap = false
 generate_rss = false
 +++

src/projects.md

@@ -1,7 +1,8 @@
 @def title = "Projects"
 @def hasicons = true
 
-Here is a non-exhaustive list of my projects. Most of them are in French 🇫🇷 🥖 🥐.
+Here is a non-exhaustive list of my projects.
+Most of them are in French 🇫🇷 🥖 🥐.
 
 # Personnal projects
 

src/utils.jl

@@ -12,10 +12,14 @@ function hfun_print_projects(yaml_files)
     website = haskey(project, "website") ? """<a href="$(project["website"])"><i class="icon las la-globe"></i></a>""" : ""
     pdf = haskey(project, "pdf") ? """<a href="$(project["pdf"])"><i class="icon las la-file-pdf"></i></a>""" : ""
     year = """<span class="year">$(project["year"])</span>"""
+    image = haskey(project, "image") ? """<img src="$(project["image"])">""" : ""
+    video = haskey(project, "video") ? """<video controls autoplay loop><source src="$(project["video"])"></video>""" : ""
 
     html_string = """
     $(html_string)
       <h2>$(project_name), <small>$(year)</small></h2>
+      $(video)
+      $(image)
       $(description)
       <span class="icons">
       $(repository)