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