From 435f9b59373643a8a131ecbe324b81a21653e5f8 Mon Sep 17 00:00:00 2001 From: Joris Date: Tue, 3 May 2022 09:17:10 +0200 Subject: Improve design - Ease readability - Bring projects on the index page - Add contact --- public/index.html | 465 ++++++++++++++++++++++++++++------------- public/main.css | 238 +++++++++++---------- public/projects.html | 203 ------------------ public/projects/flashcards.png | Bin 9441 -> 13801 bytes 4 files changed, 449 insertions(+), 457 deletions(-) delete mode 100644 public/projects.html 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 @@ - + - + - Joris Guyonvarch -
- Resume - Projects -
- -
    -
  1. -

    Experience

    - -
      -
    1. -

      Dividat since 2019

      - -

      - Prevent falls with technology-based training therapy which promotes - autonomous mobility and functional independence in old age, after an - accident or illness: -

      - -
        -
      • - frontend application with games and assessments, -
          -
        • Elm -
        • Sass -
        - -
      • - web server API, -
          -
        • Scala -
        • Http4s -
        • PostgreSQL -
        • Ansible -
        - -
      • - auto-upgradable Operating System with a controller, a kiosk browser and drivers, -
          -
        • Nix -
        • Ocaml -
        • Python -
        - -
      • - WebSocket relay. -
          -
        • Rust -
        -
      -
      2. - -
    2. -

      Zengularity for 5 years

      - -

      - Web Oriented Architecture (WOA) for information systems: -

      - -
        -
      • training platform for the unemployed in Seine-Saint-Denis, -
      • file house insurance claims for Saretec, -
      • unit and automatic franking of Colissimo labels for La Poste, -
      • participant’s pages for the Mutuelle Nationale Territoriale (MNT), -
      • food sample analysis with results visualization for Adisseo. -
      - -
        -
      • Scala -
      • Scala.js -
      • Elm -
      • Akka -
      • Play! -
      • MongoDB -
      • PostgreSQL -
      • ElasticSearch -
      -
      3. - - -
    3. -

      IRISA Rennes for 5 months

      - -

      - Scalable query-based faceted search for guided and expressive - search on the semantic web. -

      - -
        -
      • Semantic Web -
      • Scala -
      • Java -
      • LaTeX -
      • GWT -
      • Jena -
      -
      4. - -
    4. -

      Mission Critical IT for 3 months

      - -

      - Guided querying and edition of semantic web information. -

      - -
        -
      • Semantic Web -
      • Mercury -
      -
      5. -
    -
  2. - -
  3. -

    Educational background

    - -
      -
    1. -

      Master of Science Computer Science at INSA Rennes

      - -
        -
      • Language -
      • System -
      • Network -
      -
      2. - -
    2. -

      Master of Research Computer Science at University of Rennes I

      - -
        -
      • Machine learning -
      • Modelisation -
      • Data indexation -
      -
      3. -
    -
  4. -
+
Joris Guyonvarch
+ +
+

Experience

+ +
+

Dividat

+ +

since 2019

+ +

+ Prevent falls with technology-based training therapy which promotes + autonomous mobility and functional independence in old age, after an + accident or illness. +

+ + + + + +
+ +
+

Zengularity

+ +

5 years

+ +

+ Develop Web Oriented Architecture (WOA) for Information Systems. +

+ + + + +
+ +
+

IRISA Rennes

+ +

5 months

+ +

+ Scale up guided query-based faceted search on the Semantic Web on any + SPARQL endpoints, including DBpedia. +

+ + +
+ +
+

Mission Critical IT

+ +

3 months

+ +

+ Guide querying and edition of Semantic Web data with query-based faceted + search. +

+ + +
+ +

Educational background

+ +
+

Master of Science in Computer Science

+ +

INSA Rennes

+ + +
+ +
+

Master of Research in Computer Science

+ +

University of Rennes I

+ + +
+ +

Personal Projects

+ +
+

Budget

+ +

+ Manage a budget with a group of people. +

+ + + +
+
    +
  • Rust +
  • SQLite +
  • Tera +
  • JavaScript +
  • CSS +
+ code +
+
+ +
+

Todo

+ +

Organize todos.

+ + + +
+
    +
  • Python +
  • Qt +
  • SQLite +
+ code +
+
+ +
+

Calendar

+ +

Organize events.

+ + + +
+
    +
  • Rust +
  • Gtk 4 +
  • SQLite +
+ code +
+
+ +
+

Flashcards

+ + + +

Learn with space repetition.

+ + + +
+
    +
  • Rust +
  • SQLite +
+ code +
+
+ +
+

Cooking

+ +

Show recipes with adjustable ingredient portions.

+ + + +
+
    +
  • HTML +
  • CSS +
  • JavaScript +
+
+ website, + code +
+
+
+ +
+

Reading

+ +

Guide students to find a book with faceted search.

+ + + +
+
    +
  • Scala +
  • Scala.js +
  • ScalaCSS +
  • Scalatags +
  • Scala.Rx +
+
+ app, + code +
+
+
+ +
+

Map

+ +

Put customized markers on a map.

+ + + +
+
    +
  • Ocaml +
  • BuckleScript +
  • Leaflet +
+
+ app, + code +
+
+
+ +
+

cAtchVoid

+ +

Catch the points of your color, avoid the others.

+ + + +
+
    +
  • Elm +
+
+ game, + code +
+
+
+ +
+

Tabata

+ +

Configure and run a tabata timer.

+ + + +
+
    +
  • TypeScript +
  • CSS +
+
+ app, + code +
+
+
+ +

Contact

+ +
+ + + guyonvarch + + + + + guyonvarch + + + + + contact@guyonvarch.me + +
+
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 @@ - - - - - - - - - -Joris Guyonvarch – Projects - -
- Resume - Projects -
- -
    -
  1. -

    - Budget (code) -

    - -

    - Manage a budget, letting people to pay depending on their income. -

    - - - - -
    2. - -
  2. -

    Todo (code)

    - -

    - Manage a context-based next-action list. -

    - - - - -
    3. - -
  3. -

    Calendar (code)

    - -

    - Manage events and repeated events. Also get today’s events with a CLI interface. -

    - - - - -
    4. - -
  4. -

    Flashcards (code)

    - -

    - Learn with space repetition. -

    - - - - -
    5. - -
  5. -

    - Cooking - (website, - code) -

    - -

    - Show recipes with adjustable ingredient portions. -

    - - - - -
    6. - -
  6. -

    - Reading - (app, - code) -

    - -

    - Guide students to find a book by refining the result set with faceted search. -

    - - - - -
    7. - -
  7. -

    - Map - (app, - code) -

    - -

    - Add customized markers on a map. -

    - - - - -
    8. - -
  8. -

    - cAtchVoid - (game, - code) -

    - -

    - Catch the points of your color, avoid the others. You can switch colors - in order to reverse the game mechanic. Get the best score. -

    - - - - -
    9. - -
  9. -

    - Tabata - (app, - code) -

    - -

    - Configure and run a tabata timer. -

    - - - - -
    10. - -
  10. -

    - Timer - (app, - code) -

    - -

    - Create and manage timers. -

    - - - - -
    11. - - diff --git a/public/projects/flashcards.png b/public/projects/flashcards.png index c7ec2e5..5188c3f 100644 Binary files a/public/projects/flashcards.png and b/public/projects/flashcards.png differ -- cgit v1.2.3