Improve design

- Ease readability - Bring projects on the index page - Add contact
author: Joris 2022-05-03 09:17:10 +0200
committer: Joris 2022-05-03 09:17:10 +0200
commit: 435f9b59373643a8a131ecbe324b81a21653e5f8 (patch)
tree: 7a36918c142e67815c4c8f25694354703f49020a
parent: c6015b0c2741334ec298f72140c08965020ac493 (diff)
download: personal-page-435f9b59373643a8a131ecbe324b81a21653e5f8.tar.gz
personal-page-435f9b59373643a8a131ecbe324b81a21653e5f8.tar.bz2
personal-page-435f9b59373643a8a131ecbe324b81a21653e5f8.zip
4 files changed, 449 insertions, 457 deletions
diff --git a/public/index.html b/public/index.html
index 21adc8b..587d23f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,150 +1,331 @@
 <!doctype html>
-<html lang="fr">
+<html lang="en">
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <meta name="author" content="Joris Guyonvarch">
-<meta name="description" content="See my resume and projects.">
+<meta name="description" content="See my experience, educational background and projects.">
 <link rel="stylesheet" href="/main.css">
-<link rel="icon" href="data:,">
 
 <title>Joris Guyonvarch</title>
 
-<header>
-  <a href="/" class="current">Resume</a>
-  <a href="/projects.html">Projects</a>
-</header>
-
-<ol class="sections">
-  <li>
-    <h1>Experience</h1>
-
-    <ol class="sub-sections">
-      <li>
-        <h2>Dividat since 2019</h2>
-
-        <p>
-          Prevent falls with technology-based training therapy which promotes
-          autonomous mobility and functional independence in old age, after an
-          accident or illness:
-        </p>
-
-        <ul class="bullets">
-          <li>
-            frontend application with games and assessments,
-            <ul class="technos">
-              <li>Elm
-              <li>Sass
-            </ul>
-
-          <li>
-            web server API,
-            <ul class="technos">
-              <li>Scala
-              <li>Http4s
-              <li>PostgreSQL
-              <li>Ansible
-            </ul>
-
-          <li>
-            auto-upgradable Operating System with a controller, a kiosk browser and drivers,
-            <ul class="technos">
-              <li>Nix
-              <li>Ocaml
-              <li>Python
-            </ul>
-
-          <li>
-            WebSocket relay.
-            <ul class="technos">
-              <li>Rust
-            </ul>
-        </ul>
-      </li>
-
-      <li>
-        <h2>Zengularity for 5 years</h2>
-
-        <p>
-          Web Oriented Architecture (WOA) for information systems:
-        </p>
-
-        <ul class="bullets">
-          <li>training platform for the unemployed in Seine-Saint-Denis,
-          <li>file house insurance claims for Saretec,
-          <li>unit and automatic franking of Colissimo labels for La Poste,
-          <li>participant’s pages for the Mutuelle Nationale Territoriale (MNT),
-          <li>food sample analysis with results visualization for Adisseo.
-        </ul>
-
-        <ul class="technos">
-          <li>Scala
-          <li>Scala.js
-          <li>Elm
-          <li>Akka
-          <li>Play!
-          <li>MongoDB
-          <li>PostgreSQL
-          <li>ElasticSearch
-        </ul>
-      </li>
-
-
-      <li>
-        <h2>IRISA Rennes for 5 months</h2>
-
-        <p>
-          Scalable query-based faceted search for guided and expressive
-          search on the semantic web.
-        </p>
-
-        <ul class="technos">
-          <li>Semantic Web
-          <li>Scala
-          <li>Java
-          <li>LaTeX
-          <li>GWT
-          <li>Jena
-        </ul>
-      </li>
-
-      <li>
-        <h2>Mission Critical IT for 3 months</h2>
-
-        <p>
-          Guided querying and edition of semantic web information.
-        </p>
-
-        <ul class="technos">
-          <li>Semantic Web
-          <li>Mercury
-        </ul>
-      </li>
-    </ol>
-  <li>
-
-  <li>
-    <h1>Educational background</h1>
-
-    <ol class="sub-sections">
-      <li>
-        <h2>Master of Science Computer Science at INSA Rennes</h2>
-
-        <ul class="bullets">
-          <li>Language
-          <li>System
-          <li>Network
-        </ul>
-      </li>
-
-      <li>
-        <h2>Master of Research Computer Science at University of Rennes I</h2>
-
-        <ul class="bullets">
-          <li>Machine learning
-          <li>Modelisation
-          <li>Data indexation
-        </ul>
-      </li>
-    </ol>
-  <li>
-</ol>
+<header>Joris Guyonvarch</header>
+
+<main>
+  <h1>Experience</h1>
+
+  <section>
+    <h2>Dividat</h2>
+
+    <p class="subtitle">since 2019</p>
+
+    <p>
+      Prevent falls with technology-based training therapy which promotes
+      autonomous mobility and functional independence in old age, after an
+      accident or illness.
+    </p>
+
+    <ul class="bullets">
+      <li>Frontend application with games and assessments
+      <li>Web server API
+      <li>Auto-upgradable Operating System with a controller, a kiosk browser and drivers
+      <li>WebSocket relay
+    </ul>
+
+    <ul class="technos">
+      <li>Elm
+      <li>Scala
+      <li>Http4s
+      <li>PostgreSQL
+      <li>Ansible
+      <li>Nix
+      <li>Ocaml
+      <li>Python
+      <li>Rust
+    </ul>
+
+  </section>
+
+  <section>
+    <h2>Zengularity</h2>
+
+    <p class="subtitle">5 years</p>
+
+    <p>
+      Develop Web Oriented Architecture (WOA) for Information Systems.
+    </p>
+
+    <ul class="bullets">
+      <li>Training platform for the unemployed in Seine-Saint-Denis
+      <li>File house insurance claims for Saretec
+      <li>Unit and automatic franking of Colissimo labels for La Poste
+      <li>Participant’s pages for the Mutuelle Nationale Territoriale (MNT)
+      <li>Food sample analysis with results visualization for Adisseo
+    </ul>
+
+    <ul class="technos">
+      <li>Scala
+      <li>Scala.js
+      <li>Elm
+      <li>Akka
+      <li>Play!
+      <li>MongoDB
+      <li>PostgreSQL
+      <li>ElasticSearch
+    </ul>
+  </section>
+
+  <section>
+    <h2>IRISA Rennes</h2>
+
+    <p class="subtitle">5 months</p>
+
+    <p>
+      Scale up guided query-based faceted search on the Semantic Web on any
+      SPARQL endpoints, including DBpedia.
+    </p>
+
+    <ul class="technos">
+      <li>Semantic Web
+      <li>Scala
+      <li>Java
+      <li>LaTeX
+      <li>GWT
+      <li>Jena
+    </ul>
+  </section>
+
+  <section>
+    <h2>Mission Critical IT</h2>
+
+    <p class="subtitle">3 months</p>
+
+    <p>
+      Guide querying and edition of Semantic Web data with query-based faceted
+      search.
+    </p>
+
+    <ul class="technos">
+      <li>Semantic Web
+      <li>Mercury
+    </ul>
+  </section>
+
+  <h1>Educational background</h1>
+
+  <section>
+    <h2>Master of Science in Computer Science</h2>
+
+    <p class="subtitle">INSA Rennes</p>
+
+    <ul class="bullets">
+      <li>Language
+      <li>System
+      <li>Network
+    </ul>
+  </section>
+
+  <section>
+    <h2>Master of Research in Computer Science</h2>
+
+    <p class="subtitle">University of Rennes I</p>
+
+    <ul class="bullets">
+      <li>Machine learning
+      <li>Modelisation
+      <li>Data indexation
+    </ul>
+  </section>
+
+  <h1>Personal Projects</h1>
+
+  <section>
+    <h2>Budget</h2>
+
+    <p class="subtitle">
+      Manage a budget with a group of people.
+    </p>
+
+    <img src="projects/budget.png">
+
+    <div class="project-footer">
+      <ul class="technos">
+        <li>Rust
+        <li>SQLite
+        <li>Tera
+        <li>JavaScript
+        <li>CSS
+      </ul>
+      <a href="https://gitlab.com/guyonvarch/budget" target="_blank">code</a>
+    </div>
+  </section>
+
+  <section>
+    <h2>Todo</h2>
+
+    <p class="subtitle">Organize todos.</p>
+
+    <img src="projects/todo.png">
+
+    <div class="project-footer">
+      <ul class="technos">
+        <li>Python
+        <li>Qt
+        <li>SQLite
+      </ul>
+      <a href="https://gitlab.com/guyonvarch/todo" target="_blank">code</a>
+    </div>
+  </section>
+
+  <section>
+    <h2>Calendar</h2>
+
+    <p class="subtitle">Organize events.</p>
+
+    <img src="projects/calendar.png">
+
+    <div class="project-footer">
+      <ul class="technos">
+        <li>Rust
+        <li>Gtk 4
+        <li>SQLite
+      </ul>
+      <a href="https://gitlab.com/guyonvarch/calendar" target="_blank">code</a>
+    </div>
+  </section>
+
+  <section>
+    <h2>Flashcards</h2>
+
+    </div>
+
+    <p class="subtitle">Learn with space repetition.</p>
+
+    <img src="projects/flashcards.png">
+
+    <div class="project-footer">
+      <ul class="technos">
+        <li>Rust
+        <li>SQLite
+      </ul>
+      <a href="https://gitlab.com/guyonvarch/flashcards" target="_blank">code</a>
+    </div>
+  </section>
+
+  <section>
+    <h2>Cooking</h2>
+
+    <p class="subtitle">Show recipes with adjustable ingredient portions.</p>
+
+    <img src="projects/cooking.png">
+
+    <div class="project-footer">
+      <ul class="technos">
+        <li>HTML
+        <li>CSS
+        <li>JavaScript
+      </ul>
+      <div>
+        <a href="https://cooking.guyonvarch.me" target="_blank">website</a>,
+        <a href="https://gitlab.com/guyonvarch/cooking" target="_blank">code</a>
+      </div>
+    </div>
+  </section>
+
+  <section>
+    <h2>Reading</h2>
+
+    <p class="subtitle">Guide students to find a book with faceted search.</p>
+
+    <img src="projects/reading.png">
+
+    <div class="project-footer">
+      <ul class="technos">
+        <li>Scala
+        <li>Scala.js
+        <li>ScalaCSS
+        <li>Scalatags
+        <li>Scala.Rx
+      </ul>
+      <div>
+        <a href="https://guyonvarch.gitlab.io/reading" target="_blank">app</a>,
+        <a href="https://gitlab.com/guyonvarch/reading" target="_blank">code</a>
+      </div>
+    </div>
+  </section>
+
+  <section>
+    <h2>Map</h2>
+
+    <p class="subtitle">Put customized markers on a map.</p>
+
+    <img src="projects/map.png">
+
+    <div class="project-footer">
+      <ul class="technos">
+        <li>Ocaml
+        <li>BuckleScript
+        <li>Leaflet
+      </ul>
+      <div>
+        <a href="https://guyonvarch.gitlab.io/map" target="_blank">app</a>,
+        <a href="https://gitlab.com/guyonvarch/map" target="_blank">code</a>
+      </div>
+    </div>
+  </section>
+
+  <section>
+    <h2>cAtchVoid</h2>
+
+    <p class="subtitle">Catch the points of your color, avoid the others.</p>
+
+    <img src="projects/catchvoid.png">
+
+    <div class="project-footer">
+      <ul class="technos">
+        <li>Elm
+      </ul>
+      <div>
+        <a href="http://guyonvarch.gitlab.io/catchvoid" target="_blank">game</a>,
+        <a href="https://gitlab.com/guyonvarch/catchvoid" target="_blank">code</a>
+      </div>
+    </div>
+  </section>
+
+  <section>
+    <h2>Tabata</h2>
+
+    <p class="subtitle">Configure and run a tabata timer.</p>
+
+    <img src="projects/tabata.png">
+
+    <div class="project-footer">
+      <ul class="technos">
+        <li>TypeScript
+        <li>CSS
+      </ul>
+      <div>
+        <a href="http://tabata.guyonvarch.me" target="_blank">app</a>,
+        <a href="https://gitlab.com/guyonvarch/tabata" target="_blank">code</a>
+      </div>
+    </div>
+  </section>
+
+  <h1>Contact</h1>
+
+  <section class="contact">
+    <a href="https://github.com/guyonvarch">
+      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0 1 38.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"></path></svg>
+      guyonvarch
+    </a>
+
+    <a href="https://gitlab.com/guyonvarch">
+      <svg width="20" height="20" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="m31.462 12.779-.045-.115-4.35-11.35a1.137 1.137 0 0 0-.447-.541 1.163 1.163 0 0 0-1.343.071c-.187.15-.322.356-.386.587l-2.94 9.001h-11.9l-2.941-9A1.138 1.138 0 0 0 6.065.592a1.153 1.153 0 0 0-1.13.72L.579 12.68l-.045.113a8.09 8.09 0 0 0 2.68 9.34l.016.012.038.03 6.635 4.967 3.28 2.484 1.994 1.51a1.35 1.35 0 0 0 1.627 0l1.994-1.51 3.282-2.484 6.673-4.997.018-.013a8.088 8.088 0 0 0 2.69-9.352z" fill="#E24329"/><path d="m31.462 12.779-.045-.115a14.748 14.748 0 0 0-5.856 2.634l-9.553 7.24A11225.6 11225.6 0 0 0 22.1 27.14l6.673-4.997.019-.013a8.09 8.09 0 0 0 2.67-9.352z" fill="#FC6D26"/><path d="m9.908 27.14 3.275 2.485 1.994 1.51a1.35 1.35 0 0 0 1.627 0l1.994-1.51 3.282-2.484s-2.835-2.14-6.092-4.603l-6.08 4.603z" fill="#FCA326"/><path d="M6.435 15.305A14.712 14.712 0 0 0 .58 12.672l-.045.113a8.09 8.09 0 0 0 2.68 9.347l.016.012.038.03 6.635 4.967 6.105-4.603-9.573-7.233z" fill="#FC6D26"/></svg>
+      guyonvarch
+    </a>
+
+    <a href="mailto:contact@guyonvarch.me">
+      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0 0 68.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg>
+      contact@guyonvarch.me
+    </a>
+  </section>
+</main>
diff --git a/public/main.css b/public/main.css
index 02572aa..cf80c8e 100644
--- a/public/main.css
+++ b/public/main.css
@@ -1,46 +1,45 @@
 /* Constants */
 
 :root {
-  --color-brown: #915f2d;
-  --color-dark-brown: #6A4115;
-  --color-blue: #1F6F9E;
-
-  --size-bee: 0.2rem;
-  --size-mouse: 0.5rem;
-  --size-cat: 0.75rem;
-  --size-dog: 1rem;
-  --size-lion: 1.25rem;
-  --size-bear: 1.5rem;
-  --size-horse: 2rem;
-  --size-camel: 2.625rem;
-  --size-rhino: 3.375rem;
-  --size-elephant: 4.25rem;
-  --size-mammoth: 5.25rem;
-}
-
-/* Animation */
-
-@keyframes appear {
-  0.0% {
-    transform: translateX(var(--size-cat));
-    opacity: 0;
-  }
-  100.0% {
-    transform: translateX(0);
-  }
+  --color-header: #68c64e;
+  --color-title: #68c64e;
+  --color-bullet: #68c64e;
+  --color-border: #bebebe;
+  --color-light-background: #eee;
+  --color-link: #0377bb;
+
+  --font-size-cat: 0.75rem;
+  --font-size-dog: 1rem;
+  --font-size-lion: 1.25rem;
+  --font-size-bear: 1.5rem;
+  --font-size-cow: 1.75rem;
+
+  --spacing-mouse: 0.25rem;
+  --spacing-cat: 0.5rem;
+  --spacing-dog: 1rem;
+  --spacing-horse: 2rem;
+  --spacing-elephant: 4rem;
+
+  --border-radius-bee: 0.2rem;
+  --border-radius-mouse: 0.4rem;
+  --border-radius-cat: 0.8rem;
+
+  --border-width-ant: 0.1rem;
+  --border-width-beetle: 0.2rem;
+  --border-width-mouse: 0.4rem;
 }
 
 /* Media */
 
-@media screen and (max-width: 500px) {
+@media screen and (max-width: 499px) {
   html { font-size: 16px; }
 }
 
-@media screen and (min-width: 500px) and (max-width: 900px) {
+@media screen and (min-width: 500px) and (max-width: 799px) {
   html { font-size: 18px; }
 }
 
-@media screen and (min-width: 900px) {
+@media screen and (min-width: 800px) {
   html { font-size: 20px; }
 }
 
@@ -48,102 +47,84 @@
 
 body {
   margin: 0;
-  line-height: var(--size-bear);
+  line-height: var(--font-size-bear);
+  font-family: sans-serif;
+  max-width: 800px;
+  margin: 0 auto;
 }
 
 /* Header */
 
 header {
   display: flex;
-  background-color: var(--color-brown);
-  margin-bottom: var(--size-camel);
-}
-
-header > a {
+  background-color: var(--color-header);
+  color: white;
+  margin-bottom: var(--spacing-horse);
+  padding: var(--spacing-dog);
+  font-size: var(--font-size-lion);
   display: flex;
-  font-size: var(--size-bear);
-  font-weight: bold;
   justify-content: center;
-  align-items: center;
-  flex-grow: 1;
-  flex-basis: 0;
-  height: var(--size-rhino);
-  text-decoration: none;
-  padding: 0;
-  text-align: center;
-  color: #ffffff;
 }
 
-header > a:hover,
-header > a:focus,
-header > a.current {
-  border-bottom: var(--color-dark-brown) solid var(--size-mouse);
+@media screen and (min-width: 800px) {
+  header { 
+    border-bottom-left-radius: var(--border-radius-bee);
+    border-bottom-right-radius: var(--border-radius-bee);
+  }
 }
 
-/* Sections */
+/* Main */
 
-ol.sections {
-  animation-name: appear;
-  animation-duration: 0.2s;
-  animation-timing-function: ease-in;
-  animation-iteration-count: 1;
-  width: 80%;
-  margin: 0 auto;
-  list-style-type: none;
-  padding-left: 0;
+@media screen and (max-width: 799px) {
+  main { 
+    margin-left: var(--spacing-dog);
+    margin-right: var(--spacing-dog);
+  }
 }
 
-ol.sections > li {
-  margin-bottom: var(--size-camel);
+/* Sections */
+
+section {
+  margin-bottom: var(--spacing-horse);
 }
 
-/* Sub-sections */
+/* Contact */
 
-ol.sub-sections {
-  list-style-type: none;
-  padding-left: 0;
+.contact {
+  font-size: var(--font-size-cat);
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.contact a {
+  display: flex;
+  align-items: center;
+  margin-right: var(--spacing-dog);
 }
 
-ol.sub-sections > li {
-  margin-bottom: var(--size-lion);
+.contact svg {
+  margin-right: var(--spacing-mouse);
 }
 
 /* Images */
 
-img:not(.icon) {
-  border: solid 1px var(--color-dark-brown);
-  border-radius: var(--size-mouse);
-  margin-bottom: var(--size-dog);
+img {
+  border: solid 1px var(--color-border);
+  border-radius: var(--border-radius-mouse);
+  margin-bottom: var(--spacing-dog);
   width: 100%;
   max-width: 800px;
 }
 
-img.icon {
-  margin-right: var(--size-cat);
-}
-
-/* Paragraphs */
-
-p {
-  margin-bottom: var(--size-bear);
-}
-
 /* Title */
 
 h1 {
-  color: var(--color-dark-brown);
-  font-size: var(--size-bear);
+  color: var(--color-title);
+  font-size: var(--font-size-lion);
   font-weight: bold;
-  border-bottom: 0.1rem solid var(--color-dark-brown);
-  margin-bottom: var(--size-horse);
-  padding-bottom: var(--size-mouse);
-}
-
-h1 a {
-  color: var(--color-blue);
-  text-decoration: none;
-  font-weight: normal;
-  font-size: 75%;
+  border-bottom: 0.1rem solid var(--color-title);
+  margin: 0 0 var(--spacing-horse);
 }
 
 h1 a:hover {
@@ -152,12 +133,33 @@ h1 a:hover {
 
 h2 {
   display: inline-block;
-  font-size: var(--size-dog);
-  margin-top: var(--size-dog);
-  margin-bottom: var(--size-lion);
-  font-weight: normal;
-  border-bottom: 0.1rem solid var(--color-brown);
-  color: var(--color-brown);
+  font-size: var(--font-size-lion);
+  margin: 0;
+  font-weight: bold;
+}
+
+/* Paragraphs */
+
+p {
+  margin: 0 0 var(--spacing-dog);
+  font-family: serif;
+}
+
+.subtitle {
+  font-style: italic;
+  font-size: var(--font-size-cat);
+  font-family: sans-serif;
+}
+
+/* Links */
+
+a {
+  font-style: normal;
+  color: var(--color-link);
+}
+
+a:hover {
+  filter: brightness(150%);
 }
 
 /* Lists */
@@ -165,38 +167,50 @@ h2 {
 ul {
   list-style-type: none;
   padding-left: 0;
+  font-family: serif;
+  margin: 0;
 }
 
-ul.bullets {
-  margin-bottom: var(--size-dog);
+ul:not(.technos) {
+  margin-bottom: var(--spacing-dog);
 }
 
 ul.bullets > li {
   position: relative;
-  padding: var(--size-bee) 0 var(--size-bee) var(--size-lion);
+  padding-left: var(--spacing-dog);
 }
 
 ul.bullets > li::before {
   position: absolute;
   left: 0;
   content: "•";
-  color: var(--color-brown);
+  color: var(--color-bullet);
   display: inline-block;
-  margin-right: var(--size-mouse);
 }
 
 ul.technos {
   display: flex;
   flex-wrap: wrap;
   padding-left: 0;
+  font-family: sans-serif;
 }
 
-
 ul.technos > li {
-  margin: var(--size-bee) var(--size-cat) var(--size-mouse) 0;
-  border: 1px solid var(--color-brown);
-  color: var(--color-dark-brown);
-  border-radius: var(--size-bee);
-  padding: 0 var(--size-mouse);
-  font-size: 80%;
+  background-color: var(--color-light-background);
+  margin: var(--spacing-mouse) var(--spacing-cat) var(--spacing-mouse) 0;
+  border-radius: var(--border-radius-bee);
+  padding: 0 var(--spacing-mouse);
+  font-size: 0.7rem;
+}
+
+/* Project footer */
+
+.project-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.project-footer a {
+  font-size: var(--font-size-cat);
 }
diff --git a/public/projects.html b/public/projects.html
deleted file mode 100644
index c8e6b02..0000000
--- a/public/projects.html
+++ /dev/null
@@ -1,203 +0,0 @@
-<!doctype html>
-<html lang="fr">
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width">
-<meta name="author" content="Joris Guyonvarch">
-<meta name="description" content="See my resume and projects.">
-<link rel="stylesheet" href="/main.css">
-<link rel="icon" href="/icon.png">
-
-<title>Joris Guyonvarch – Projects</title>
-
-<header>
-  <a href="/">Resume</a>
-  <a href="/projects.html" class="current">Projects</a>
-</header>
-
-<ol class="sections">
-  <li>
-    <h1>
-      Budget (<a href="https://gitlab.com/guyonvarch/budget" target="_blank">code</a>)
-    </h1>
-
-    <p>
-      Manage a budget, letting people to pay depending on their income.
-    </p>
-
-    <img src="projects/budget.png">
-
-    <ul class="technos">
-      <li>Rust
-      <li>SQLite
-      <li>Tera
-      <li>JavaScript
-      <li>CSS
-    </ul>
-  </li>
-
-  <li>
-    <h1>Todo (<a href="https://gitlab.com/guyonvarch/todo" target="_blank">code</a>)</h1>
-
-    <p>
-      Manage a context-based next-action list.
-    </p>
-
-    <img src="projects/todo.png">
-
-    <ul class="technos">
-      <li>Python
-      <li>Qt
-      <li>SQLite
-    </ul>
-  </li>
-
-  <li>
-    <h1>Calendar (<a href="https://gitlab.com/guyonvarch/calendar" target="_blank">code</a>)</h1>
-
-    <p>
-      Manage events and repeated events. Also get today’s events with a CLI interface.
-    </p>
-
-    <img src="projects/calendar.png">
-
-    <ul class="technos">
-      <li>Rust
-      <li>Gtk 4
-      <li>SQLite
-    </ul>
-  </li>
-
-  <li>
-    <h1>Flashcards (<a href="https://gitlab.com/guyonvarch/flashcards" target="_blank">code</a>)</h1>
-
-    <p>
-      Learn with space repetition.
-    </p>
-
-    <img src="projects/flashcards.png">
-
-    <ul class="technos">
-      <li>Rust
-      <li>SQLite
-    </ul>
-  </li>
-
-  <li>
-    <h1>
-      Cooking
-      (<a href="https://cooking.guyonvarch.me" target="_blank">website</a>,
-      <a href="https://gitlab.com/guyonvarch/cooking" target="_blank">code</a>)
-    </h1>
-
-    <p>
-      Show recipes with adjustable ingredient portions.
-    </p>
-
-    <img src="projects/cooking.png">
-
-    <ul class="technos">
-      <li>HTML
-      <li>CSS
-      <li>JavaScript
-    </ul>
-  </li>
-
-  <li>
-    <h1>
-      Reading
-      (<a href="https://guyonvarch.gitlab.io/reading" target="_blank">app</a>,
-      <a href="https://gitlab.com/guyonvarch/reading" target="_blank">code</a>)
-    </h1>
-
-    <p>
-      Guide students to find a book by refining the result set with faceted search.
-    </p>
-
-    <img src="projects/reading.png">
-
-    <ul class="technos">
-      <li>Scala
-      <li>Scala.js
-      <li>ScalaCSS
-      <li>Scalatags
-      <li>Scala.Rx
-    </ul>
-  </li>
-
-  <li>
-    <h1>
-      Map
-      (<a href="https://guyonvarch.gitlab.io/map" target="_blank">app</a>,
-      <a href="https://gitlab.com/guyonvarch/map" target="_blank">code</a>)
-    </h1>
-
-    <p>
-      Add customized markers on a map.
-    </p>
-
-    <img src="projects/map.png">
-
-    <ul class="technos">
-      <li>Ocaml
-      <li>BuckleScript
-      <li>Leaflet
-    </ul>
-  </li>
-
-  <li>
-    <h1>
-      cAtchVoid
-      (<a href="http://guyonvarch.gitlab.io/catchvoid" target="_blank">game</a>,
-      <a href="https://gitlab.com/guyonvarch/catchvoid" target="_blank">code</a>)
-    </h1>
-
-    <p>
-      Catch the points of your color, avoid the others. You can switch colors
-      in order to reverse the game mechanic. Get the best score.
-    </p>
-
-    <img src="projects/catchvoid.png">
-
-    <ul class="technos">
-      <li>Elm
-    </ul>
-  </li>
-
-  <li>
-    <h1>
-      Tabata
-      (<a href="http://tabata.guyonvarch.me" target="_blank">app</a>,
-      <a href="https://gitlab.com/guyonvarch/tabata" target="_blank">code</a>)
-    </h1>
-
-    <p>
-      Configure and run a tabata timer.
-    </p>
-
-    <img src="projects/tabata.png">
-
-    <ul class="technos">
-      <li>TypeScript
-      <li>CSS
-    </ul>
-  </li>
-
-  <li>
-    <h1>
-      Timer
-      (<a href="http://guyonvarch.gitlab.io/timer" target="_blank">app</a>,
-      <a href="https://gitlab.com/guyonvarch/timer" target="_blank">code</a>)
-    </h1>
-
-    <p>
-      Create and manage timers.
-    </p>
-
-    <img src="projects/timer.png">
-
-    <ul class="technos">
-      <li>Elm
-    </ul>
-  </li>
-
-</ul>
diff --git a/public/projects/flashcards.png b/public/projects/flashcards.png
index c7ec2e5..5188c3f 100644
--- a/public/projects/flashcards.png
+++ b/public/projects/flashcards.png
author	Joris	2022-05-03 09:17:10 +0200
committer	Joris	2022-05-03 09:17:10 +0200
commit	435f9b59373643a8a131ecbe324b81a21653e5f8 (patch)
tree	7a36918c142e67815c4c8f25694354703f49020a
parent	c6015b0c2741334ec298f72140c08965020ac493 (diff)
download	personal-page-435f9b59373643a8a131ecbe324b81a21653e5f8.tar.gz personal-page-435f9b59373643a8a131ecbe324b81a21653e5f8.tar.bz2 personal-page-435f9b59373643a8a131ecbe324b81a21653e5f8.zip