Simplify HTML tags

author: Joris 2021-01-10 10:59:02 +0100
committer: Joris 2021-01-10 10:59:02 +0100
commit: 6682ff4644ab422da760b90934ee42dc62df9bb6 (patch)
tree: c77113910cd83ec72866125c03b6bf61380825ff /public
parent: 6a3eee77b0b15aca115d4ba4eb49035b94d63259 (diff)
6 files changed, 527 insertions, 553 deletions
diff --git a/public/images/gitlab.svg b/public/images/gitlab.svg
new file mode 100644
index 0000000..9998e48
--- /dev/null
+++ b/public/images/gitlab.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#515170" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z"></path>
+</svg>
diff --git a/public/icon.png b/public/images/icon.png
index 115a297..115a297 100644
--- a/public/icon.png
+++ b/public/images/icon.png
diff --git a/public/images/link.svg b/public/images/link.svg
new file mode 100644
index 0000000..919ef5b
--- /dev/null
+++ b/public/images/link.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#515170" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+  <polyline points="15 3 21 3 21 9"></polyline>
+  <line x1="10" y1="14" x2="21" y2="3"></line>
+</svg>
diff --git a/public/index.html b/public/index.html
index 05e2f35..48487fa 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,203 +1,177 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="author" content="Joris Guyonvarch">
-    <meta name="description" content="I am a developer using functional programming. View my resume and projects.">
-    <title>Joris Guyonvarch</title>
-    <link rel="stylesheet" href="main.css" />
-    <link rel="icon" href="icon.png" />
-  </head>
-
-  <body>
-    <header class="g-Header">
-      <a href="/" class="g-Header__Link g-Header__Link--Current">Resume</a>
-      <a href="projects.html" class="g-Header__Link ">Projects</a>
-    </header>
-
-    <main class="g-Main">
-      <section class="g-Section">
-        <h1 class="g-Section__Title">Experience</h1>
-
-        <ul class="g-Section__Entries">
-
-          <li class="g-Resume">
-            <div class="g-Resume__Title">
-              <em>Dividat</em> since 2019
-            </div>
-
-            <p class="g-Paragraph">
-              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="g-Skills">
-              <li class="g-Skills__Item">Elm</li>
-              <li class="g-Skills__Item">Scala</li>
-              <li class="g-Skills__Item">Nix</li>
-              <li class="g-Skills__Item">Python</li>
-              <li class="g-Skills__Item">Ocaml</li>
-              <li class="g-Skills__Item">Rust</li>
-              <li class="g-Skills__Item">PostgreSQL</li>
-            </ul>
-          </li>
-
-          <li class="g-Resume">
-            <div class="g-Resume__Title">
-              <em>Zengularity</em> for 5 years
-            </div>
-
-            <p class="g-Paragraph">
-              Web Oriented Architecture (WOA) for information systems :
-            </p>
-
-            <ul class="g-List">
-              <li class="g-List__Item">Training platform for the unemployed in Seine-Saint-Denis.</li>
-              <li class="g-List__Item">File house insurance claims for Saretec.</li>
-              <li class="g-List__Item">Unit and automatic franking of Colissimo labels for La Poste.</li>
-              <li class="g-List__Item">Participant’s pages for the Mutuelle Nationale Territoriale (MNT).</li>
-              <li class="g-List__Item">Food sample analysis with results visualization for Adisseo.</li>
-            </ul>
-
-            <ul class="g-Skills">
-              <li class="g-Skills__Item">Scala</li>
-              <li class="g-Skills__Item">Scala.js</li>
-              <li class="g-Skills__Item">Elm</li>
-              <li class="g-Skills__Item">Akka</li>
-              <li class="g-Skills__Item">Play!</li>
-              <li class="g-Skills__Item">MongoDB</li>
-              <li class="g-Skills__Item">PostgreSQL</li>
-              <li class="g-Skills__Item">ElasticSearch</li>
-            </ul>
-          </li>
-
-          <li class="g-Resume">
-            <div class="g-Resume__Title">
-              <em>IRISA Rennes</em> for 5 months
-            </div>
-
-            <p class="g-Paragraph">
-              Scalable query-based faceted search for guided and expressive
-              search on the semantic web.
-            </p>
-
-            <ul class="g-Skills">
-              <li class="g-Skills__Item">Semantic Web</li>
-              <li class="g-Skills__Item">Scala</li>
-              <li class="g-Skills__Item">Java</li>
-              <li class="g-Skills__Item">LaTeX</li>
-              <li class="g-Skills__Item">GWT</li>
-              <li class="g-Skills__Item">Jena</li>
-            </ul>
-          </li>
-
-          <li class="g-Resume">
-            <div class="g-Resume__Title">
-              <em>Mission Critical IT</em> for 3 months
-            </div>
-
-            <p class="g-Paragraph">
-              Guided querying and edition of semantic web information.
-            </p>
-
-            <ul class="g-Skills">
-              <li class="g-Skills__Item">Semantic Web</li>
-              <li class="g-Skills__Item">Mercury</li>
-            </ul>
-          </li>
+<!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="I am a developer using functional programming. View my resume and projects.">
+<link rel="stylesheet" href="/main.css">
+<link rel="icon" href="/icon.png">
+<script src="/main.js"></script>
+
+<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="technos">
+          <li>Elm
+          <li>Scala
+          <li>Nix
+          <li>Python
+          <li>Ocaml
+          <li>Rust
+          <li>PostgreSQL
         </ul>
-      </section>
-
-      <section class="g-Section">
-        <h1 class="g-Section__Title">Educational background</h1>
-
-        <ul class="g-Section__Entries">
-          <li class="g-Resume">
-            <div class="g-Resume__Title">
-              <em>Master of Science Computer Science</em> at INSA Rennes
-            </div>
-
-            <ul class="g-List">
-              <li class="g-List__Item">Language</li>
-              <li class="g-List__Item">System</li>
-              <li class="g-List__Item">Network</li>
-            </ul>
-          </li>
-
-          <li class="g-Resume">
-            <div class="g-Resume__Title">
-              <em>Master of Research Computer Science</em> at University of Rennes I
-            </div>
-
-            <ul class="g-List">
-              <li class="g-List__Item">Machine learning</li>
-              <li class="g-List__Item">Modelisation</li>
-              <li class="g-List__Item">Data indexation</li>
-            </ul>
-          </li>
+      </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>
-      </section>
-
-      <section class="g-Section">
-        <h1 class="g-Section__Title">Skills</h1>
-
-        <ul class="g-Section__Entries">
-          <li class="g-Resume">
-            <div class="g-Resume__Title">
-              <em>Technical lead</em>
-            </div>
-
-            <ul class="g-List">
-              <li class="g-List__Item">Create tasks and subtasks from functional needs.</li>
-              <li class="g-List__Item">Optimise task order for the development team.</li>
-            </ul>
-          </li>
-
-          <li class="g-Resume">
-            <div class="g-Resume__Title">
-              <em>Developer</em>
-            </div>
-
-            <ul class="g-List">
-              <li class="g-List__Item">Program with functional languages (Haskell, Scala, Elm).</li>
-              <li class="g-List__Item">Build web applications (HTTP protocol; HTML, CSS, Javascript and JSON languages).</li>
-              <li class="g-List__Item">Interact with data (SQL, MongoDB, SPARQL).</li>
-              <li class="g-List__Item">Work with versioning (Git).</li>
-              <li class="g-List__Item">Review code and test functionalities.</li>
-              <li class="g-List__Item">Write bash and Python scripts.</li>
-            </ul>
-          </li>
-
-          <li class="g-Resume">
-            <div class="g-Resume__Title">
-              <em>Researcher</em>
-            </div>
-
-            <ul class="g-List">
-              <li class="g-List__Item">Conduct a bibliographic research.</li>
-              <li class="g-List__Item">Build a prototype and experiment from it.</li>
-              <li class="g-List__Item">Analyse the results from an experimentation and check the hypotheses.</li>
-              <li class="g-List__Item">Present a research study through an article and a slideshow (LaTeX).</li>
-            </ul>
-          </li>
+      </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>
-      </section>
+      </li>
+    </ol>
+  <li>
+
+  <li>
+    <h1>Skills</h1>
 
-      <section class="g-Section">
-        <h1 class="g-Section__Title">Hobbies</h1>
+    <ol class="sub-sections">
+      <li>
+        <h2>Technical lead</h2>
+
+        <ul class="bullets">
+          <li>Create tasks and subtasks from functional needs.
+          <li>Optimise task order for the development team.
+        </ul>
+      </li>
+
+      <li>
+        <h2>Developer</h2>
+
+        <ul class="bullets">
+          <li>Program with functional languages (Haskell, Scala, Elm).
+          <li>Build web applications (HTTP protocol; HTML, CSS, Javascript and JSON languages).
+          <li>Interact with data (SQL, MongoDB, SPARQL).
+          <li>Work with versioning (Git).
+          <li>Review code and test functionalities.
+          <li>Write bash and Python scripts.
+        </ul>
+      </li>
 
-        <ul class="g-Section__Entries">
-          <li class="g-Resume">
+      <li>
+        <h2>Researcher</h2>
 
-            <ul class="g-List">
-              <li class="g-List__Item">Tune my workstation (NixOS, i3, bépo keyboard layout).</li>
-              <li class="g-List__Item">Create video games (SDL, Elm).</li>
-            </ul>
-          </li>
+        <ul class="bullets">
+          <li>Conduct a bibliographic research.
+          <li>Build a prototype and experiment from it.
+          <li>Analyse the results from an experimentation and check the hypotheses.
+          <li>Present a research study through an article and a slideshow (LaTeX).
         </ul>
-      </section>
-    </main>
-  </body>
-</html>
+      </li>
+    </ol>
+  <li>
+
+  <li>
+    <h1>Hobbies</h1>
+
+    <ul class="bullets">
+      <li>Tune my workstation (NixOS, i3, bépo keyboard layout).
+      <li>Create video games (SDL, Elm).
+    </ul>
+  <li>
+</ol>
diff --git a/public/main.css b/public/main.css
index a6a68e5..3a0d3f4 100644
--- a/public/main.css
+++ b/public/main.css
@@ -1,185 +1,220 @@
 /* Constants */
 
 :root {
-  /* Colors */
   --color-brown: #A56D35;
   --color-dark-brown: #6A4115;
   --color-blue: #515170;
   --color-light-gray: #EEEEEE;
   --color-dark-gray: #666666;
+
+  --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(0.8rem);
-        opacity: 0;
-    }
-    100.0% {
-        transform: translateX(0);
-    }
+  0.0% {
+    transform: translateX(var(--size-cat));
+    opacity: 0;
+  }
+  100.0% {
+    transform: translateX(0);
+  }
 }
 
 /* Media */
 
 @media screen and (max-width: 500px) {
-    html {
-        font-size: 90%;
-    }
+  html { font-size: 15px; }
 }
 
 @media screen and (min-width: 500px) and (max-width: 900px) {
-    html {
-        font-size: 100%;
-    }
+  html { font-size: 16px; }
 }
 
 @media screen and (min-width: 900px) {
-    html {
-        font-size: 110%;
-    }
+  html { font-size: 17px; }
 }
 
-/* Style */
+/* Body */
 
 body {
-    overflow-x: hidden;
-    margin: 0;
-    line-height: 1.8rem;
+  margin: 0;
+  line-height: var(--size-bear);
 }
 
-.g-Main {
-    animation-name: appear;
-    animation-duration: 0.2s;
-    animation-timing-function: ease-in;
-    animation-iteration-count: 1;
-    width: 80%;
-    margin: 0 auto;
+/* Header */
+
+header {
+  display: flex;
+  background-color: var(--color-brown);
+  margin-bottom: var(--size-camel);
 }
 
-svg {
-    width: inherit;
-    height: inherit;
+header > a {
+  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;
 }
 
-ul {
-    list-style-type: none;
-    padding-left: 0;
+header > a:hover,
+header > a:focus,
+header > a.current {
+  border-bottom: var(--color-dark-brown) solid var(--size-mouse);
+}
+
+/* Sections */
+
+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;
+}
+
+ol.sections > li {
+  margin-bottom: var(--size-camel);
 }
 
-.g-Paragraph {
-    margin-bottom: 1rem;
+/* Sub-sections */
+
+ol.sub-sections {
+  list-style-type: none;
+  padding-left: 0;
+}
+
+ol.sub-sections > li {
+  margin-bottom: var(--size-lion);
 }
 
-.g-List {
-    padding-left: 0;
-    margin: 0.5rem 0 1rem 0.5rem;
+/* Images */
+
+img:not(.icon) {
+  border: solid 1px var(--color-dark-gray);
+  border-radius: var(--size-mouse);
+  margin-bottom: var(--size-dog);
+  width: 100%;
+  max-width: 800px;
 }
 
-.g-List__Item::before {
-    content: "•";
-    color: var(--color-brown);
-    display: inline-block;
-    margin-right: 0.5rem;
+img.icon {
+  margin-right: var(--size-cat);
 }
 
-.g-List__Item {
-    padding: 0.2rem 0;
+/* Paragraphs */
+
+p {
+  margin-bottom: var(--size-bear);
 }
 
-.g-Image {
-    border: solid 1px var(--color-dark-gray);
-    border-radius: 0.5rem;
-    margin-bottom: 1rem;
-    width: 100%;
-    max-width: 900px;
+/* Title */
+
+h1 {
+  color: var(--color-brown);
+  font-size: var(--size-horse);
+  font-weight: lighter;
+  border-bottom: var(--size-bee) solid var(--color-brown);
+  margin-bottom: var(--size-horse);
+  padding-bottom: var(--size-mouse);
 }
 
-.g-Header {
-    background-color: var(--color-brown);
-    display: flex;
+h2 {
+  font-size: var(--size-dog);
+  margin-top: 0;
+  margin-bottom: var(--size-lion);
+  font-weight: normal;
+  text-decoration: underline;
+  color: var(--color-brown);
 }
 
-.g-Header__Link {
-    display: flex;
-    font-size: 1.5rem;
-    font-weight: bold;
-    justify-content: center;
-    align-items: center;
-    flex-grow: 1;
-    flex-basis: 0;
-    height: 3.5rem;
-    text-decoration: none;
-    padding: 0;
-    text-align: center;
-    color: #ffffff;
+/* Lists */
+
+ul {
+  list-style-type: none;
+  padding-left: 0;
 }
 
-.g-Header__Link:hover,
-.g-Header__Link:focus,
-.g-Header__Link--Current {
-    border-bottom: var(--color-dark-brown) solid 0.6rem;
+ul.bullets {
+  margin-bottom: var(--size-dog);
 }
 
-.g-IconLink__Link {
-    text-decoration: none;
-    color: var(--color-blue);
-    transition: color 0.3s ease-out 0.0s;
-    display: inline-flex;
-    align-items: center;
+ul.bullets > li::before {
+  content: "•";
+  color: var(--color-brown);
+  display: inline-block;
+  margin-right: var(--size-mouse);
 }
 
-.g-IconLink__Link:focus {
-    outline: solid 0 #ffffff;
+ul.bullets > li {
+  padding: var(--size-bee) 0;
 }
 
-.g-IconLink__Link:hover,
-.g-IconLink__Link:focus {
-    text-decoration: underline;
+ul.technos {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: var(--size-dog);
+  padding-left: 0;
 }
 
-.g-IconLink__Icon {
-    margin-right: 1rem;
-    height: 1.2rem;
+ul.technos > li {
+  margin-right: var(--size-dog);
+  margin-bottom: var(--size-mouse);
+  background-color: var(--color-light-gray);
+  border-radius: var(--size-bee);
+  padding: 0 var(--size-mouse);
+  font-size: 80%;
 }
 
-.g-Resume__Title {
-    margin: 2.5rem 0 0.5rem;
+ul.links {
+  margin-bottom: var(--size-lion);
 }
 
-.g-Resume__Title > em {
-    font-style: normal;
-    border-bottom: solid 0.2rem var(--color-brown);
+ul.links > li {
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--size-cat);
 }
 
-.g-Section__Title {
-    color: var(--color-brown);
-    font-size: 1.8rem;
-    font-weight: lighter;
-    margin-bottom: 2rem;
-    margin-top: 3.5rem;
-    border-bottom: 0.2rem solid var(--color-brown);
-    padding-bottom: 0.5rem;
-    letter-spacing: 0.1rem;
+ul.links a {
+  text-decoration: none;
+  color: var(--color-blue);
+  transition: color 0.3s ease-out 0.0s;
+  align-items: center;
 }
 
-.g-Section__Entries {
-    padding-left: 0;
+ul.links a:focus {
+  outline: solid 0 #ffffff;
 }
 
-.g-Skills {
-    display: flex;
-    flex-wrap: wrap;
-    margin-bottom: 1rem;
-    padding-left: 0;
+ul.links a:hover,
+ul.links a:focus {
+  text-decoration: underline;
 }
 
-.g-Skills > li {
-    font-size: 0.8rem;
-    margin-right: 1rem;
-    margin-bottom: 0.5rem;
-    background-color: var(--color-light-gray);
-    border-radius: 0.1rem;
-    padding: 0 0.5rem;
+ul.links svg {
+  margin-right: var(--size-dog);
+  height: var(--size-lion);
 }
diff --git a/public/projects.html b/public/projects.html
index ff9aeb4..baa2216 100644
--- a/public/projects.html
+++ b/public/projects.html
@@ -1,243 +1,200 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="author" content="Joris Guyonvarch">
-    <meta name="description" content="I am a developer using functional programming. View my resume and projects.">
-    <title>Joris Guyonvarch</title>
-    <link rel="stylesheet" href="main.css" />
-    <link rel="icon" href="icon.png" />
-  </head>
-
-  <body>
-    <header class="g-Header">
-      <a href="/" class="g-Header__Link ">Resume</a>
-      <a href="projects.html" class="g-Header__Link g-Header__Link--Current">Projects</a>
-    </header>
-
-    <main class="g-Main">
-      <ul class="g-Projects__List">
-
-        <li class="g-Section">
-          <h1 class="g-Section__Title">Budget</h1>
-
-          <div>
-            <a class="g-IconLink__Link" href="https://gitlab.com/guyonvarch/budget">
-              <span class="g-IconLink__Icon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z"></path></svg>
-              </span>
-              guyonvarch/budget
-            </a>
-          </div>
-
-          <p class="g-Paragraph">
-            Manage a budget, letting people to pay depending on their income.
-          </p>
-
-          <img class="g-Image" src="projects/budget.png" />
-
-          <ul class="g-Skills">
-            <li>Rust</li>
-            <li>Sqlite</li>
-            <li>Tera</li>
-            <li>JavaScript</li>
-            <li>CSS</li>
-          </ul>
-        </li>
-
-        <li class="g-Section">
-          <h1 class="g-Section__Title">Todo</h1>
-
-          <div>
-            <a class="g-IconLink__Link" href="https://gitlab.com/guyonvarch/todo">
-              <span class="g-IconLink__Icon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z"></path></svg>
-              </span>
-              guyonvarch/todo
-            </a>
-          </div>
-
-          <p class="g-Paragraph">Manage a context-based next-action list.</p>
-
-          <img class="g-Image" src="projects/todo.png" />
-
-          <ul class="g-Skills">
-            <li>Python</li>
-            <li>Qt</li>
-          </ul>
-        </li>
-
-        <li class="g-Section">
-          <h1 class="g-Section__Title">Cooking</h1>
-
-          <div>
-            <a class="g-IconLink__Link" href="https://gitlab.com/guyonvarch/cooking">
-              <span class="g-IconLink__Icon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z"></path></svg>
-              </span>
-              guyonvarch/cooking
-            </a>
-          </div>
-
-          <div>
-              <a class="g-IconLink__Link" href="https://cooking.guyonvarch.me">
-                <span class="g-IconLink__Icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
-
-                </span>
-                https://cooking.guyonvarch.me
-              </a>
-          </div>
-
-          <p class="g-Paragraph">Show recipes with adjustable ingredient portions.</p>
-
-          <img class="g-Image" src="projects/cooking.png" />
-
-          <ul class="g-Skills">
-            <li>HTML</li>
-            <li>CSS</li>
-            <li>JavaScript</li>
-          </ul>
-        </li>
-
-        <li class="g-Section">
-          <h1 class="g-Section__Title">Reading</h1>
-
-          <div>
-            <a class="g-IconLink__Link" href="https://gitlab.com/guyonvarch/reading">
-              <span class="g-IconLink__Icon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z"></path></svg>
-              </span>
-              guyonvarch/reading
-            </a>
-          </div>
-
-          <div>
-            <a class="g-IconLink__Link" href="https://guyonvarch.gitlab.io/reading">
-              <span class="g-IconLink__Icon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
-
-              </span>
-              https://guyonvarch.gitlab.io/reading
-            </a>
-          </div>
-
-          <p class="g-Paragraph">
-            Guide students to find a book by refining the result set with faceted search.
-          </p>
-
-          <img class="g-Image" src="projects/reading.png" />
-
-          <ul class="g-Skills">
-            <li>Scala</li>
-            <li>Scala.js</li>
-            <li>ScalaCSS</li>
-            <li>Scalatags</li>
-            <li>Scala.Rx</li>
-          </ul>
-        </li>
-
-        <li class="g-Section">
-          <h1 class="g-Section__Title">Map</h1>
-
-          <div>
-            <a class="g-IconLink__Link" href="https://gitlab.com/guyonvarch/map">
-              <span class="g-IconLink__Icon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z"></path></svg>
-              </span>
-              guyonvarch/map
-            </a>
-          </div>
-
-          <div>
-              <a class="g-IconLink__Link" href="https://guyonvarch.gitlab.io/map">
-                <span class="g-IconLink__Icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
-
-                </span>
-                https://guyonvarch.gitlab.io/map
-              </a>
-          </div>
-
-          <p class="g-Paragraph">Add customized markers on a map.</p>
-
-          <img class="g-Image" src="projects/map.png" />
-
-          <ul class="g-Skills">
-            <li>Ocaml</li>
-            <li>BuckleScript</li>
-            <li>Leaflet</li>
-          </ul>
-        </li>
-
-        <li class="g-Section">
-          <h1 class="g-Section__Title">cAtchVoid</h1>
-
-          <div>
-            <a class="g-IconLink__Link" href="https://gitlab.com/guyonvarch/catchvoid">
-              <span class="g-IconLink__Icon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z"></path></svg>
-              </span>
-              guyonvarch/catchvoid
-            </a>
-          </div>
-
-          <div>
-              <a class="g-IconLink__Link" href="http://guyonvarch.gitlab.io/catchvoid">
-                <span class="g-IconLink__Icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
-
-                </span>
-                http://guyonvarch.gitlab.io/catchvoid
-              </a>
-          </div>
-
-          <p class="g-Paragraph">
-            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 class="g-Image" src="projects/catchvoid.png" />
-
-          <ul class="g-Skills">
-            <li>Elm</li>
-          </ul>
-        </li>
-
-        <li class="g-Section">
-          <h1 class="g-Section__Title">Timer</h1>
-
-          <div>
-            <a class="g-IconLink__Link" href="https://gitlab.com/guyonvarch/timer">
-              <span class="g-IconLink__Icon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z"></path></svg>
-              </span>
-              guyonvarch/timer
-            </a>
-          </div>
-
-          <div>
-              <a class="g-IconLink__Link" href="http://guyonvarch.gitlab.io/timer">
-                <span class="g-IconLink__Icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
-
-                </span>
-                http://guyonvarch.gitlab.io/timer
-              </a>
-          </div>
-
-          <p class="g-Paragraph">
-            Create and manage timers with a Rich Internet Application (RIA).
-          </p>
-
-          <img class="g-Image" src="projects/timer.png" />
-
-          <ul class="g-Skills">
-            <li>Elm</li>
-          </ul>
-        </li>
-
-      </ul>
-    </main>
-  </body>
-</html>
+<!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="I am a developer using functional programming. View my resume and projects.">
+<link rel="stylesheet" href="/main.css">
+<link rel="icon" href="/icon.png">
+<script src="/main.js"></script>
+
+<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</h1>
+
+    <ul class="links">
+      <li>
+        <img class="icon" src="/images/gitlab.svg">
+        <a href="https://gitlab.com/guyonvarch/budget">guyonvarch/budget</a>
+      </li>
+    </ul>
+
+    <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</h1>
+
+    <ul class="links">
+      <li>
+        <img class="icon" src="/images/gitlab.svg">
+        <a href="https://gitlab.com/guyonvarch/todo">guyonvarch/todo</a>
+      </li>
+    </ul>
+
+    <p>
+      Manage a context-based next-action list.
+    </p>
+
+    <img src="projects/todo.png">
+
+    <ul class="technos">
+      <li>Python
+      <li>Qt
+    </ul>
+  </li>
+
+  <li>
+    <h1>Cooking</h1>
+
+    <ul class="links">
+      <li>
+        <img class="icon" src="/images/gitlab.svg">
+        <a href="https://gitlab.com/guyonvarch/cooking">guyonvarch/cooking</a>
+      </li>
+      <li>
+        <img class="icon" src="/images/link.svg">
+        <a href="https://cooking.guyonvarch.me">https://cooking.guyonvarch.me</a>
+      </li>
+    </ul>
+
+    <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</h1>
+
+    <ul class="links">
+      <li>
+        <img class="icon" src="/images/gitlab.svg">
+        <a href="https://gitlab.com/guyonvarch/reading">guyonvarch/reading</a>
+      </li>
+      <li>
+        <img class="icon" src="/images/link.svg">
+        <a href="https://guyonvarch.gitlab.io/reading">https://guyonvarch.gitlab.io/reading</a>
+      </li>
+    </ul>
+
+    <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</h1>
+
+    <ul class="links">
+      <li>
+        <img class="icon" src="/images/gitlab.svg">
+        <a href="https://gitlab.com/guyonvarch/map">guyonvarch/map</a>
+      </li>
+      <li>
+        <img class="icon" src="/images/link.svg">
+        <a href="https://guyonvarch.gitlab.io/map">https://guyonvarch.gitlab.io/map</a>
+      </li>
+    </ul>
+
+    <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</h1>
+
+    <ul class="links">
+      <li>
+        <img class="icon" src="/images/gitlab.svg">
+        <a href="https://gitlab.com/guyonvarch/catchvoid">guyonvarch/catchvoid</a>
+      </li>
+      <li>
+        <img class="icon" src="/images/link.svg">
+        <a href="http://guyonvarch.gitlab.io/catchvoid">http://guyonvarch.gitlab.io/catchvoid</a>
+      </li>
+    </ul>
+
+    <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>Timer</h1>
+
+    <ul class="links">
+      <li>
+        <img class="icon" src="/images/gitlab.svg">
+        <a href="https://gitlab.com/guyonvarch/timer">guyonvarch/timer</a>
+      </li>
+      <li>
+        <img class="icon" src="/images/link.svg">
+        <a href="http://guyonvarch.gitlab.io/timer">http://guyonvarch.gitlab.io/timer</a>
+      </li>
+    </ul>
+
+    <p>
+      Create and manage timers.
+    </p>
+
+    <img src="projects/timer.png">
+
+    <ul class="technos">
+      <li>Elm
+    </ul>
+  </li>
+
+</ul>
author	Joris	2021-01-10 10:59:02 +0100
committer	Joris	2021-01-10 10:59:02 +0100
commit	6682ff4644ab422da760b90934ee42dc62df9bb6 (patch)
tree	c77113910cd83ec72866125c03b6bf61380825ff /public
parent	6a3eee77b0b15aca115d4ba4eb49035b94d63259 (diff)