diff options
| -rw-r--r-- | public/images/gitlab.svg | 3 | ||||
| -rw-r--r-- | public/images/icon.png (renamed from public/icon.png) | bin | 701 -> 701 bytes | |||
| -rw-r--r-- | public/images/link.svg | 5 | ||||
| -rw-r--r-- | public/index.html | 366 | ||||
| -rw-r--r-- | public/main.css | 263 | ||||
| -rw-r--r-- | public/projects.html | 443 |
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 Binary files differindex 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> |
