11 files changed, 675 insertions, 0 deletions
diff --git a/public/icon.png b/public/icon.png
new file mode 100644
index 0000000..115a297
--- /dev/null
+++ b/public/icon.png
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..9aac4ed
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,203 @@
+<!DOCTYPE html>
+<html>
+  <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. Here are my resume and projects.">
+    <title>Joris Guyonvarch</title>
+    <link rel="stylesheet" href="style.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>
+        </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>
+        </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>
+        </ul>
+      </section>
+
+      <section class="g-Section">
+        <h1 class="g-Section__Title">Hobbies</h1>
+
+        <ul class="g-Section__Entries">
+          <li class="g-Resume">
+
+            <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>
+      </section>
+    </main>
+  </body>
+</html>
diff --git a/public/projects.html b/public/projects.html
new file mode 100644
index 0000000..476b152
--- /dev/null
+++ b/public/projects.html
@@ -0,0 +1,302 @@
+<!DOCTYPE html>
+<html>
+  <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’m a developer using functional programming. View my resume and projects.">
+    <title>Joris Guyonvarch</title>
+    <link rel="stylesheet" href="style.css" />
+    <link rel="icon" href="icon.png" />
+  </head>
+
+  <body>
+    <header class="g-Header">
+      <a href="index.html" 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">Shared Cost</h1>
+
+          <div>
+            <a class="g-IconLink__Link" href="https://gitlab.com/guyonvarch/shared-cost">
+              <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/shared-cost
+            </a>
+          </div>
+
+          <p class="g-Paragraph">
+            Share costs with a group of people with a Rich Internet
+            Application (RIA).
+          </p>
+
+          <img class="g-Image" src="projects/shared-cost.png" />
+
+          <ul class="g-Skills">
+            <li class="g-Skills__Item">Haskell</li>
+            <li class="g-Skills__Item">Scotty</li>
+            <li class="g-Skills__Item">Clay</li>
+            <li class="g-Skills__Item">GHCJS</li>
+            <li class="g-Skills__Item">reflex-frp</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 class="g-Skills__Item">Python</li>
+            <li class="g-Skills__Item">Qt</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 class="g-Skills__Item">Scala</li>
+            <li class="g-Skills__Item">Scala.js</li>
+            <li class="g-Skills__Item">ScalaCSS</li>
+            <li class="g-Skills__Item">Scalatags</li>
+            <li class="g-Skills__Item">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 class="g-Skills__Item">Ocaml</li>
+            <li class="g-Skills__Item">BuckleScript</li>
+            <li class="g-Skills__Item">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 class="g-Skills__Item">Elm</li>
+            <li class="g-Skills__Item">Game development</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 class="g-Skills__Item">Elm</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 as a blog from markdown files.</p>
+
+          <img class="g-Image" src="projects/cooking.png" />
+
+          <ul class="g-Skills">
+            <li class="g-Skills__Item">Zola</li>
+            <li class="g-Skills__Item">Ocaml</li>
+            <li class="g-Skills__Item">BuckleScript</li>
+          </ul>
+        </li>
+
+        <li class="g-Section">
+          <h1 class="g-Section__Title">ad-listener</h1>
+
+          <div>
+            <a class="g-IconLink__Link" href="https://gitlab.com/guyonvarch/ad-listener">
+              <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/ad-listener
+            </a>
+          </div>
+
+          <p class="g-Paragraph">
+            Watch for new ads according to custom search criteria and send an
+            email notification each time a new ad is available.
+          </p>
+
+          <ul class="g-Skills">
+            <li class="g-Skills__Item">Haskell</li>
+            <li class="g-Skills__Item">TagSoup</li>
+          </ul>
+        </li>
+
+        <li class="g-Section">
+          <h1 class="g-Section__Title">nixos-config</h1>
+
+          <div>
+            <a class="g-IconLink__Link" href="https://gitlab.com/guyonvarch/nixos-config">
+              <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/nixos-config
+            </a>
+          </div>
+
+          <p class="g-Paragraph">Configure declaratively my NixOS system.</p>
+
+          <ul class="g-Skills">
+            <li class="g-Skills__Item">Nix</li>
+          </ul>
+        </li>
+
+        <li class="g-Section">
+          <h1 class="g-Section__Title">dotfiles</h1>
+
+          <div>
+            <a class="g-IconLink__Link" href="https://gitlab.com/guyonvarch/dotfiles">
+              <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/dotfiles
+            </a>
+          </div>
+
+          <p class="g-Paragraph">
+            Configure my tools.
+          </p>
+        </li>
+      </ul>
+    </main>
+  </body>
+</html>
diff --git a/public/projects/catchvoid.png b/public/projects/catchvoid.png
new file mode 100644
index 0000000..bc05c6b
--- /dev/null
+++ b/public/projects/catchvoid.png
diff --git a/public/projects/cooking.png b/public/projects/cooking.png
new file mode 100644
index 0000000..2d2bcc9
--- /dev/null
+++ b/public/projects/cooking.png
diff --git a/public/projects/map.png b/public/projects/map.png
new file mode 100644
index 0000000..dcc83e4
--- /dev/null
+++ b/public/projects/map.png
diff --git a/public/projects/reading.png b/public/projects/reading.png
new file mode 100644
index 0000000..4b58f0e
--- /dev/null
+++ b/public/projects/reading.png
diff --git a/public/projects/shared-cost.png b/public/projects/shared-cost.png
new file mode 100644
index 0000000..e0101cb
--- /dev/null
+++ b/public/projects/shared-cost.png
diff --git a/public/projects/timer.png b/public/projects/timer.png
new file mode 100644
index 0000000..dd37a2d
--- /dev/null
+++ b/public/projects/timer.png
diff --git a/public/projects/todo.png b/public/projects/todo.png
new file mode 100644
index 0000000..763f1bb
--- /dev/null
+++ b/public/projects/todo.png
diff --git a/public/style.css b/public/style.css
new file mode 100644
index 0000000..999fb7c
--- /dev/null
+++ b/public/style.css
@@ -0,0 +1,170 @@
+@keyframes appear {
+    0.0% {
+        transform: translateX(0.8rem);
+        opacity: 0;
+    }
+    100.0% {
+        transform: translateX(0);
+    }
+}
+
+@media screen and (max-width: 500px) {
+    html {
+        font-size: 90%;
+    }
+}
+
+@media screen and (min-width: 500px) and (max-width: 900px) {
+    html {
+        font-size: 100%;
+    }
+}
+
+@media screen and (min-width: 900px) {
+    html {
+        font-size: 110%;
+    }
+}
+
+body {
+    overflow-x: hidden;
+    margin: 0;
+    line-height: 1.8rem;
+}
+
+.g-Main {
+    animation-name: appear;
+    animation-duration: 0.2s;
+    animation-timing-function: ease-in;
+    animation-iteration-count: 1;
+    width: 80%;
+    margin: 0 auto;
+}
+
+svg {
+    width: inherit;
+    height: inherit;
+}
+
+ul {
+    list-style-type: none;
+    padding-left: 0;
+}
+
+.g-Paragraph {
+    margin-bottom: 1rem;
+}
+
+.g-List {
+    padding-left: 0;
+    margin: 0.5rem 0 1rem 0.5rem;
+}
+
+.g-List__Item::before {
+    content: "•";
+    color: #bf7f3f;
+    display: inline-block;
+    margin-right: 0.5rem;
+}
+
+.g-List__Item {
+    padding: 0.2rem 0;
+}
+
+.g-Image {
+    border: solid 1px #646464;
+    border-radius: 0.5rem;
+    margin-bottom: 1rem;
+    width: 100%;
+    max-width: 900px;
+}
+
+.g-Header {
+    background-color: #bf7f3f;
+    font-size: 2.5rem;
+    display: flex;
+    font-variant: small-caps;
+}
+
+.g-Header__Link {
+    display: flex;
+    font-size: 0.6em;
+    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;
+}
+
+.g-Header__Link:hover,
+.g-Header__Link:focus,
+.g-Header__Link--Current {
+    border-bottom: #9a5f20 solid 0.6rem;
+}
+
+.g-IconLink__Link {
+    text-decoration: none;
+    color: #515170;
+    transition: color 0.3s ease-out 0.0s;
+    display: inline-flex;
+    align-items: center;
+}
+
+.g-IconLink__Link:focus {
+    outline: solid 0 #ffffff;
+}
+
+.g-IconLink__Link:hover,
+.g-IconLink__Link:focus {
+    text-decoration: underline;
+}
+
+.g-IconLink__Icon {
+    margin-right: 1rem;
+    height: 1.2rem;
+}
+
+.g-Resume__Title {
+    margin: 2.5rem 0 0.5rem;
+}
+
+.g-Resume__Title > em {
+    font-style: normal;
+    border-bottom: solid 0.2rem #bf7f3f;
+}
+
+.g-Section__Title {
+    color: #bf7f3f;
+    font-size: 1.8rem;
+    font-weight: lighter;
+    margin-bottom: 2rem;
+    margin-top: 3.5rem;
+    border-bottom: 0.1rem solid #bf7f3f;
+    padding-bottom: 0.5rem;
+    font-variant: small-caps;
+    letter-spacing: 0.1rem;
+}
+
+.g-Section__Entries {
+    padding-left: 0;
+}
+
+.g-Skills {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 1rem;
+    padding-left: 0;
+}
+
+.g-Skills__Item {
+    font-size: 0.8rem;
+    margin-right: 1rem;
+    margin-bottom: 0.5rem;
+    background-color: #EEEEEE;
+    border-radius: 0.1rem;
+    padding: 0 0.5rem;
+}