From 6682ff4644ab422da760b90934ee42dc62df9bb6 Mon Sep 17 00:00:00 2001 From: Joris Date: Sun, 10 Jan 2021 10:59:02 +0100 Subject: Simplify HTML tags --- public/icon.png | Bin 701 -> 0 bytes public/images/gitlab.svg | 3 + public/images/icon.png | Bin 0 -> 701 bytes public/images/link.svg | 5 + public/index.html | 366 ++++++++++++++++++--------------------- public/main.css | 263 ++++++++++++++++------------ public/projects.html | 443 +++++++++++++++++++++-------------------------- 7 files changed, 527 insertions(+), 553 deletions(-) delete mode 100644 public/icon.png create mode 100644 public/images/gitlab.svg create mode 100644 public/images/icon.png create mode 100644 public/images/link.svg diff --git a/public/icon.png b/public/icon.png deleted file mode 100644 index 115a297..0000000 Binary files a/public/icon.png and /dev/null differ 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 @@ + + + diff --git a/public/images/icon.png b/public/images/icon.png new file mode 100644 index 0000000..115a297 Binary files /dev/null and b/public/images/icon.png differ 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 @@ + + + + + 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 @@ - - - - - - - - Joris Guyonvarch - - - - - -
- Resume - Projects -
- -
-
-

Experience

- -
- -
-

Educational background

- -
- -
-

Skills

- -
+ + +
  • + +
  • +

    Skills

    -
    -

    Hobbies

    +
      +
    1. +

      Technical lead

      + +
        +
      • Create tasks and subtasks from functional needs. +
      • Optimise task order for the development team. +
      +
      2. + +
    2. +

      Developer

      + +
        +
      • Program with functional languages (Haskell, Scala, Elm). +
      • Build web applications (HTTP protocol; HTML, CSS, Javascript and JSON languages). +
      • Interact with data (SQL, MongoDB, SPARQL). +
      • Work with versioning (Git). +
      • Review code and test functionalities. +
      • Write bash and Python scripts. +
      +
      3. -
        -
      • +
      • +

        Researcher

        -
          -
        • Tune my workstation (NixOS, i3, bépo keyboard layout).
          • -
        • Create video games (SDL, Elm).
          • -
        -
        • +
          +
        • Conduct a bibliographic research. +
        • Build a prototype and experiment from it. +
        • Analyse the results from an experimentation and check the hypotheses. +
        • Present a research study through an article and a slideshow (LaTeX).
        -
    -
    • - - + + +
  • + +
  • +

    Hobbies

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

      Budget

      + + + +

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

      + + + +
        +
      • Rust +
      • Sqlite +
      • Tera +
      • JavaScript +
      • CSS +
      +
      2. + +
    2. +

      Todo

      + + + +

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

      + + + +
        +
      • Python +
      • Qt +
      +
      3. + +
    3. +

      Cooking

      + + + +

      + Show recipes with adjustable ingredient portions. +

      + + + +
        +
      • HTML +
      • CSS +
      • JavaScript +
      +
      4. + +
    4. +

      Reading

      + + + +

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

      + + + +
        +
      • Scala +
      • Scala.js +
      • ScalaCSS +
      • Scalatags +
      • Scala.Rx +
      +
      5. + +
    5. +

      Map

      + + + +

      + Add customized markers on a map. +

      + + + +
        +
      • Ocaml +
      • BuckleScript +
      • Leaflet +
      +
      6. + +
    6. +

      cAtchVoid

      + + + +

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

      + + + +
        +
      • Elm +
      +
      7. + +
    7. +

      Timer

      + + + +

      + Create and manage timers. +

      + + + +
        +
      • Elm +
      +
      8. + + -- cgit v1.2.3