feat: intro, projects pages and many ohers things

README.md

@@ -1,3 +1,6 @@
+## Credits
+
+https://tabler-icons.io/
 
 ## Structure
 

assets/locales/en.yaml

@@ -1,29 +1,56 @@
+localeId: en
+french: French
+english: English
+
+view-more: See more
+go-back-to-main: Go back to the main page 
 external-website: External website
 
 last-update: "Last update :"
 about-website: "About this website"
 
 page:
-  title: Matthieu Bessat - Web developer
+  title: Matthieu Bessat
 
 profile:
-  intro:
+  main: Hi, I'm Matthieu!
-    main: Hi! I'm Matthieu
+  secondary: I like to program stuff
-    secondary: I like to program stuff
+
+intro:
+  title: About me
+  description: |
+    Welcome to my little piece of the web! My name is Matthieu Bessat aka lefuturiste, My life is complex and full of things but for now this page is mostly about my experience as a freelance web developer. My skillset is various enough that I can manage the creation of an app/website from start to finish: from defining the customer needs to hosting the website or app. If you have any projects that is linked to programming and you think that I can help you, don't hesitate to [contact me](#contact).
+  age: I'm %d years old
+  speak: I speak:
+  location: I live in 
+  transport: I mainly use my bike to get around.
+  interests: What I love:
 
 technologies:
+  name: Technologies
   title: Some of the technologies that I'm currently working with
 
 projects:
+  name: Projects
+  title: Projects
+  project: Project:
   pro:
     title: Highlighted professional projects
+    description: Some projects that I've developed or participated in as a freelancer or as an employee
   side:
     title: Highlighted side projects
+    description: Entrepreneurship projects, volunteering projects or just for fun projects.
+  background: Background
+  solution: Solutions
+  technologies: Technologies used
+  images: Gallery
   
 links:
+  name: Links
   title: Find me on...
 
 contact:
+  name: Contact
   no-script: If you want to use the contact form, you will need to enable javascript to run free-ish software
   title: Contact me
   use-email: "You can contact me via e-mail:"

assets/locales/fr.yaml

@@ -1,3 +1,8 @@
+localeId: fr
+french: Français
+english: Anglais
+
+view-more: Voir plus
 go-back-to-main: Revenir à la page principale
 external-website: Site web externe
 
@@ -5,32 +10,47 @@ last-update: Dernière mise à jour le
 about-website: A propos de ce site
 
 page:
-  title: Matthieu Bessat - Développeur web
+  title: Matthieu Bessat
 
 profile:
-  intro:
+  main: Salut, je m'appelle Matthieu !
-    main: Salut, je m'appelle Matthieu
+  secondary: J'aime bien programmer des trucs
-    secondary: J'aime bien programmer des trucs
+
+intro:
+  title: Un peu sur moi
+  description: |
+    Bienvenue sur mon petit coin du web ! Je m'appelle Matthieu Bessat également connu sous le pseudonyme de *lefuturiste* sur internet ! En autre chose dans la vie je suis développeur freelance et capable de créer un site web/application de A à Z : de la définition des besoins clients, du modèle des données à la mise en production et à la maintenance. Si vous avez un projet n'hésitez pas à [me contacter](#contact) !
+  age: J'ai %d ans
+  speak: Je parle :
+  location: J'habite la 
+  transport: J'aime utiliser mon vélo !
+  interests: Mes centres d'intérêts :
 
 technologies:
+  name: Technologies
   title: Quelques des technologies avec lesquelles je travaille en ce moment
 
 projects:
+  name: Projets
   title: Projets
-  project: Projet
+  project: Projet : 
   pro:
     title: Projets professionels
+    description: Voici quelques projets que j'ai développé ou participé soit dans le cadre de l'auto-entreprenariat (freelancing) soit en tant qu'employé.
   side:
     title: Autres projets
+    description: Des projets d'entreprenariat, associatif, open source ou juste pour le fun !
   background: Contexte
   solution: Solutions
   technologies: Technologies utilisées
-  
+  images: Gallerie
 
 links:
+  name: Liens
   title: Retrouvez moi sur...
 
 contact:
+  name: Contact
   no-script: Si vous voulez utiliser le formulaire de contact, vous devez activer le javascript (le site propose un code libre)
   title: Me contacter
   use-email: "Vous pouvez me contacter par e-mail :"

assets/scripts/contact.js

@@ -8,6 +8,8 @@ function contactFormSetup() {
     const postURL = "https://contact-form.thingmill.fr"
 
     const form = document.getElementById('contact-form')
+    if (form == null) return;
+
     const formName = document.getElementById('contact-form-name')
     const formEmail = document.getElementById('contact-form-email')
     const formSubject = document.getElementById('contact-form-subject')

assets/scripts/main.js

@@ -1,6 +1,10 @@
 import axios from 'axios'
 
 import { contactFormSetup } from './contact'
+import { technologiesMosaicSetup } from './technologiesMosaic'
+import { mediaModalSetup } from './mediaModal'
 
 contactFormSetup()
+technologiesMosaicSetup()
+mediaModalSetup()
 

assets/scripts/mediaModal.js

@@ -0,0 +1,99 @@
+function mediaModalSetup() {
+/**
+ * Gallery modal to view media in large
+ */
+const mediaDataRaw = document.getElementById('project-images-data')
+if (mediaDataRaw == null) return;
+const mediaData = JSON.parse(mediaDataRaw.textContent)
+console.log('mediaData', mediaData)
+
+
+let mediaModal = document.querySelector('#media-modal')
+let mediaModalContent = document.querySelector('#media-modal-content')
+// let mediaModalImage = document.querySelector('#media-modal img')
+// let mediaModalVideo = document.querySelector('#media-modal video')
+// let mediaModalSource = document.querySelector('#media-modal video source')
+
+// function disableScroll() { 
+//     // Get the current page scroll position 
+//     scrollTop = window.pageYOffset || document.documentElement.scrollTop; 
+//     scrollLeft = window.pageXOffset || document.documentElement.scrollLeft, 
+  
+//         // if any scroll is attempted, set this to the previous value 
+//         window.onscroll = function() { 
+//             window.scrollTo(scrollLeft, scrollTop); 
+//         }; 
+// } 
+  
+// function enableScroll() { 
+//     window.onscroll = function() {}; 
+// }
+let modalCaption = document.getElementById('caption')
+let media = {}
+
+let fillModal = (m) => {
+  mediaModalContent.innerHTML = ""
+  let attr = document.createAttribute('src')
+  attr.value = m.image
+  let el = null
+  el = document.createElement('img')
+  el.attributes.setNamedItem(attr)
+  mediaModalContent.appendChild(el)
+  modalCaption.innerText = m.description
+}
+
+setTimeout(() => {
+  mediaModal.style = ''
+}, 500)
+
+window.openModal = (id) =>  {
+
+  mediaModal.style.visibility = 'visible'
+  mediaModal.style.opacity = 1
+
+  media = mediaData.filter(m => m.id === id)[0]
+
+  fillModal(media)
+
+  //document.body.style.height = '100vh'
+  document.body.style.overflow = 'hidden'
+  document.body.style.touchAction = 'none'
+
+  setTimeout(() => {
+
+    // const outsideClickListener = event => {
+    //   if (!mediaModalContent.contains(event.target) && isVisible(mediaModalContent)) {
+    //     closeModal()
+    //     document.removeEventListener('click', outsideClickListener)
+    //   }
+    // }
+    // document.addEventListener('click', outsideClickListener)
+  
+  }, 100)
+}
+
+const isVisible = elem => !!elem && !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length )
+
+window.closeModal = () =>  {
+  mediaModal.style.visibility = 'hidden'
+  mediaModal.style.opacity = 0
+  document.body.style.overflow = 'initial'
+  document.body.style.height = 'initial'
+  document.body.style.touchAction = 'initial'
+}
+
+window.navLeft = () => {
+  if (mediaData.indexOf(media) === 0) { return; }
+  media = mediaData[mediaData.indexOf(media) - 1]
+  fillModal(media)
+}
+
+window.navRight = () => {
+  if (mediaData.indexOf(media) + 1 === mediaData.length) { return; }
+  media = mediaData[mediaData.indexOf(media) + 1]
+  fillModal(media)
+}
+
+}
+
+export { mediaModalSetup };

assets/scripts/technologiesMosaic.js

@@ -0,0 +1,19 @@
+let opened = false
+
+function technologiesMosaicSetup() {
+    const mosaic = document.getElementById('tech-mosaic')
+    const mosaicContainer = document.getElementById('tech-mosaic-container')
+    const btnContainer = document.getElementById('tech-mosaic-btn-container')
+
+    window.openTechMosaic = () => {
+        if (!opened) {
+          mosaicContainer.className = mosaicContainer.className.replace(' closed', ' opened')
+        } else {
+          mosaicContainer.className = mosaicContainer.className.replace(' opened', ' closed')
+        }
+        opened = !opened
+    }
+}
+
+export { technologiesMosaicSetup }
+

assets/styles/components/chips.scss

@@ -4,10 +4,26 @@
 
     .chip {
         margin-right: .5em;
+        margin-bottom: .5em;
         padding: 0.5em 0.9em;
         background: $primary;
         color: white;
         font-size: .9em;
         border-radius: 10rem;
     }
+    .chip-outline {
+        border: 1px solid $primary;
+        background: transparent;
+        color: $primary;
+    }
+    .chip-with-icon {
+        display: flex;
+        align-items: center;
+        .chip-icon {
+            display: flex;
+            align-items: center;
+            margin-right: 0.6em;
+        }
+    }
 }
+

assets/styles/components/contact.scss

@@ -108,7 +108,7 @@
 }
 
 @media (max-width: $sm-breakpoint) {
-    .contact-form {
+    .contact-form-container {
         .contact-form-first-group {
             display: block;
             .contact-form-input {

assets/styles/components/footer.scss

@@ -3,9 +3,15 @@
 }
 
 footer {
+    // color from the profile gradient
+    background-color: #3ea643;
     margin-top: auto;
-    border-top: 1px solid gray;
+    color: white;
-    border-color: rgb(84, 91, 94) !important;
+    // border-top: 1px solid gray;
+    // border-color: rgb(84, 91, 94) !important;
+    a {
+        color: #212121;
+    }
 }
 
 .footer-container {
@@ -18,6 +24,11 @@ footer {
     margin-bottom: .5em;
 }
 
+.footer-right {
+    display: flex;
+    align-content: center;
+}
+
 .locale-switch-large {
     display: flex;
     align-items: center;

assets/styles/components/intro.scss

@@ -0,0 +1,67 @@
+.intro {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 2em;
+}
+
+.intro-text {
+
+} 
+
+.intro-items {
+    border: 1px dashed gray;
+    padding: 1em;
+    .intro-item {
+        display: flex;
+        // margin: .4em 0em;
+        margin-bottom: .4em;
+        &:last-of-type {
+            margin-bottom: 0;
+        }
+    }
+    .item-icon {
+        margin-right: 1em;
+        color: $primary; 
+    }
+
+    .item-content {
+        display: flex;
+        align-items: center; 
+        ul {
+            margin-left: .5em;
+            display: flex;
+            li {
+                margin-right: 0.5em;
+            }
+        }
+    }
+}
+
+.intro-interests {
+   .chip {
+        font-size: .8em !important;
+        padding: .3em 1em !important;
+   }
+   .chip-icon {
+        svg {
+            width: 1.5em;
+        }
+   }
+}
+
+.intro-interests-header {
+    width: 100%;
+    p {
+        margin-bottom: 0.5em;
+    }
+}
+
+@media (max-width: 1200px) {
+    .intro {
+        display: block;
+    }
+    .intro-items {
+        margin-top: 1em;
+    }
+}
+

assets/styles/components/projects.scss

@@ -67,3 +67,161 @@
     }
 }
 
+.project-page {
+    .project-header {
+        div {
+            display: flex;
+            align-items: center;
+            margin-bottom: 0.4em;
+            svg {
+                margin-right: 0.6em;
+            }
+        }
+    }
+}
+
+
+.project-images-container {
+    width: 100%;
+
+    .project-images {
+        display:flex;
+        overflow-x: scroll;
+    }
+    .img {
+        display: block;
+        overflow-y: hidden;
+        height: 199px;
+        min-width: 295px;
+        margin-right: 1em;
+        margin-bottom: 1em;
+        img { width: 100%; }
+    }
+}
+
+.project-images {
+    display: grid;
+    width: 100%;
+}
+
+
+/* Media modal */
+/**
+* Media modal
+*/
+.media-modal-container {
+  position: fixed;
+  width: 100%;
+  height: 100vh;
+  z-index: 99;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .80);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0.1s linear,opacity 0.1s linear;
+}
+
+.media-modal {
+  position: relative;
+  width: 50%;
+}
+
+.media-modal .media-modal-content {
+  border-radius: 4px;
+  width: 100%;
+
+  /** crop not very cool images in modal **/
+  max-height: 80vh;
+  overflow-y: scroll;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.media-modal img, .media-modal video {
+  width: 100%;
+}
+
+.media-close {
+  filter: drop-shadow(2px 4px 6px black);
+  position: absolute;
+  width: 1.5em;
+  height: 1.5em;
+  right: -.75em;
+  top: -.75em;
+  color: white;
+  cursor: pointer;
+  opacity: 0.9;
+  transition: all 0.2s;
+}
+
+.media-close:hover {
+  transform: scale(1.2);
+  opacity: 1;
+}
+
+.media-nav {
+  position: absolute;
+  top: 50%;
+  color: white;
+  cursor: pointer;
+  font-size: 2em;
+}
+
+
+.media-left-nav {
+  left: 2em !important;
+}
+
+.media-right-nav {
+  right: 2em !important;
+}
+
+.media-caption {
+  position: absolute;
+  bottom: 1.5em;
+  color: wheat;
+  padding: 0.5em 1em;
+  line-height: 1.3em;
+}
+
+
+@media (max-width: $md-breakpoint) {
+  .project-page {
+    
+    .media-modal {
+      width: 90%;
+      margin-top: 2em;
+    }
+
+    .media-nav {
+      bottom: 0;
+      top: initial;
+      margin-bottom: 0.5em;
+    }
+
+    .media-modal-content {
+      max-height: 60vh;
+    }
+    .media-caption {
+      font-size: .9em;
+      margin-bottom: .5em !important;
+      bottom: 4em;
+      text-align: center;
+    }
+
+    .media-modal-container {
+      align-items: flex-start;
+    }
+  }
+}
+
+
+
+

assets/styles/components/technologies.scss

@@ -3,6 +3,7 @@
 .tech-mosaic {
     display: flex;
     flex-wrap: wrap;
+    overflow: hidden;
 
     .item {
         position: relative;
@@ -71,6 +72,34 @@
 
 }
 
+.tech-mosaic-btn-container {
+
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 1em;
+  .btn {
+    margin-bottom: 1em;
+  }
+}
+
+.tech-mosaic-container {
+    position: relative;
+&.opened .tech-mosaic-btn-container {
+  display: none;
+}
+   &.closed .tech-mosaic-btn-container {
+      @include scrimGradient(white, 0deg);
+      height: 11em;
+  }
+  &.closed .tech-mosaic {
+      max-height: 20em;    
+  }
+}
+
 @media (min-width: 400px) {
     .item-bg {
         padding: 1em !important;

assets/styles/components/typography.scss

@@ -1,8 +1,16 @@
+a:hover {
+  opacity: .8;
+}
+
 p {
   line-height: 1.45em;
   margin-bottom: 1em;
 }
 
+p.indent, .indent p {
+  text-indent: 3em;
+}
+
 h1 {
   font-size: xx-large;
   margin-bottom: 1em;
@@ -10,7 +18,8 @@ h1 {
 
 h2 {
   font-size: x-large;
-  margin-bottom: .5em;
+  margin-top: 1.5em;
+  margin-bottom: .8em;
 }
 
 h3 {

assets/styles/main.scss

@@ -1,5 +1,8 @@
-@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');
+@use 'sass:math';
-
+@font-face {
+  font-family: LibreBaskervilleRegular;
+  src: url('/LibreBaskerville-Regular.woff');
+}
 $lg-breakpoint: 1500px;
 $md-breakpoint: 1000px;
 $sm-breakpoint: 900px;
@@ -8,7 +11,42 @@ $xs-breakpoint: 400px;
 $primary: #4ba05f;
 $secondary: #a04b8c;
 
+
+@mixin scrimGradient($startColor: $color-black, $direction: 180deg) {
+
+  $scrimCoordinates: (
+    0: 1,
+    19: 0.738,
+    34: 0.541,
+    47: 0.382,
+    56.5: 0.278,
+    65: 0.194,
+    73: 0.126,
+    80.2: 0.075,
+    86.1: 0.042,
+    91: 0.021,
+    95.2: 0.008,
+    98.2: 0.002,
+    100: 0
+  );
+
+  $hue: hue($startColor);
+  $saturation: saturation($startColor);
+  $lightness: lightness($startColor);
+  $stops: ();
+
+  @each $colorStop, $alphaValue in $scrimCoordinates {
+    $stop: hsla($hue, $saturation, $lightness, $alphaValue) percentage(math.div($colorStop,100));
+    $stops: append($stops, $stop, comma);
+  }
+
+  background: linear-gradient($direction, $stops);
+
+}
+
+
 @import './reset.scss';
+@import './components/intro.scss';
 @import './components/profile.scss';
 @import './components/projects.scss';
 @import './components/technologies.scss';
@@ -20,6 +58,7 @@ $secondary: #a04b8c;
 @import './components/chips.scss';
 
 body {
+  font-family: LibreBaskervilleRegular, sans-serif;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
@@ -38,7 +77,7 @@ body {
 
 
 .typo, body {
-    font-family: 'Libre Baskerville', serif;
+    font-family: 'LibreBaskervilleRegular', serif;
 }
 
 
@@ -51,11 +90,24 @@ section:last-of-type {
   border-bottom: 0;
 }
 
+section h2 {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
 .about-header {
   margin: 2em 0;
 }
 
 
+.profile-nav {
+   a {
+    color: white;
+    opacity: 0.8;
+    margin-right: .6em;
+   } 
+}
+
 @media (min-width: $lg-breakpoint) {
   .container {
     width: 58%;

composer.json

@@ -7,7 +7,8 @@
         "php-di/slim-bridge": "^3.2",
         "symfony/var-dumper": "^6.0",
         "adbario/php-dot-notation": "^3.1",
-        "boronczyk/localization-middleware": "^2.0"
+        "boronczyk/localization-middleware": "^2.0",
+        "erusev/parsedown": "^1.7"
     },
     "autoload": {
       "psr-4": {

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "cec518bea90ee444e31994b065bc4f79",
+    "content-hash": "95b3297abd88a7b2c01e52f12d2bf950",
     "packages": [
         {
             "name": "adbario/php-dot-notation",
@@ -112,6 +112,56 @@
             },
             "time": "2021-04-15T02:46:25+00:00"
         },
+        {
+            "name": "erusev/parsedown",
+            "version": "1.7.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/erusev/parsedown.git",
+                "reference": "cb17b6477dfff935958ba01325f2e8a2bfa6dab3"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/erusev/parsedown/zipball/cb17b6477dfff935958ba01325f2e8a2bfa6dab3",
+                "reference": "cb17b6477dfff935958ba01325f2e8a2bfa6dab3",
+                "shasum": ""
+            },
+            "require": {
+                "ext-mbstring": "*",
+                "php": ">=5.3.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^4.8.35"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-0": {
+                    "Parsedown": ""
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Emanuil Rusev",
+                    "email": "hello@erusev.com",
+                    "homepage": "http://erusev.com"
+                }
+            ],
+            "description": "Parser for Markdown.",
+            "homepage": "http://parsedown.org",
+            "keywords": [
+                "markdown",
+                "parser"
+            ],
+            "support": {
+                "issues": "https://github.com/erusev/parsedown/issues",
+                "source": "https://github.com/erusev/parsedown/tree/1.7.x"
+            },
+            "time": "2019-12-30T22:54:17+00:00"
+        },
         {
             "name": "fig/http-message-util",
             "version": "1.1.5",

config/intro.yaml

@@ -0,0 +1,39 @@
+email: mail@matthieubessat.fr
+firstName: Matthieu
+secondName: Bessat
+bornDate: '2002-10-17'
+location:
+  region:
+    fr: Normandie, France
+    en: Normandy, France
+timezone: UTC+2
+languages:
+  - french
+  - english
+transport: bike
+interests:
+  # opensource, free software, robots, données colaboratives (opendata) 
+  - id: opensource
+    name: Open Source
+    icon: opensource.svg
+  - id: freesoftware
+    name:
+      fr: Logiciel libre
+      en: Free Sofware
+    icon: copyleft.svg
+  - id: robots
+    name:
+      fr: Robotique
+      en: Robots
+    icon: robot.svg
+  - id: opendata
+    name:
+      fr: Données ouvertes
+      en: Open Data
+    icon: database.svg
+  - id: geodata
+    name:
+      fr: Données géographiques
+      en: Geographical data
+    icon: map.svg
+

config/links.yaml

@@ -41,7 +41,9 @@ links:
   - id: osm
     name: OpenStreetMap
     url: https://openstreetmap.org/user/lefuturiste
-  # - id: osm_wiki
+    thumbnail:
+      src: osm-150.png
+ # - id: osm_wiki
   #   name:
   #     en: OpenStreetMap wiki
   #     fr: Le wiki d'OpenStreetMap
@@ -50,7 +52,7 @@ links:
     name: Wikipedia
     url: https://fr.wikipedia.org/wiki/Utilisateur:Matthieu2743
     thumbnail:
-      src: wikipedia.svg
+      src: wikipedia-150.png
       alt: Wikipedia logo
   - id: wikidata
     name: Wikidata

config/misc.yaml

@@ -1,4 +1,3 @@
-email: bonjour@matthieubessat.fr
 updated_at: '2022-07-04'
 
 

config/projects.yaml

@@ -1,5 +1,6 @@
 pro_projects:
   - id: forum_asso
+    main: true
     detailled_page: true
     date: 2020-07
     link: https://associations.espacecondorcet.org
@@ -58,19 +59,19 @@ pro_projects:
       en: Administered association directory
     description:
       fr: |
-        Application web de gestion de fiche associative avec interface administrative.
+        Application web de gestion de fiche associative collaborative avec interface administrative pour l'Espace Condorcet.
       en: |
-        Web application of association management with administration interface.
+        Web application of collaborative association management with administration interface for the Espace Condorcet
     background:
       fr: |
-        En Juin 2020, l'Espace condorcet cherchait un moyen numérique afin de substituer le forum associatif physique qui était compromis pour cause sanitaire, ils voulait un moyen simple pour que les associations puissent se décrire et en même temps que le personnel de l'espace condorcet puissent valider le contenu facilement sans d'étapes manuelle pour la publication.
+        En Juin 2020, [l'Espace Condorcet](https://www.espacecondorcet.org/) (association qui promeut la vie associative locale de Gaillon) cherchait un moyen numérique afin de substituer le forum associatif physique qui était compromis pour cause sanitaire, ils voulait un moyen simple pour que les associations puissent se décrire et en même temps que l'administrateur du site puissent valider le contenu facilement sans d'étapes manuelle pour la publication.
       en: |
-        In June of 2020, the Espace Condorcet wanted a way to have the public discover associations around them in around the town.
+        In June of 2020, [the Espace Condorcet](https://www.espacecondorcet.org/) (association to promote local associative life around Gaillon) wanted a way to substitute the traditional meeting (allowing the public to discover associations around the town) which was compromised because of the COVID crisis. They wanted a simple way for associations to input details about them in a structured manner. And then a way for the administrator of the website to approve the changes before publication.
     solution:
       fr: |
-        Afin de répondre aux besoins du client, j'ai développé pendant l'été le logiciel qui se compose en plusieurs parties : une partie accessible par tous qui permet de naviguer dans les associations basé sur un serveur Node.js et une interface d'administration et d'édition par les associations qui communique avec une API web en Node.js qui va ensuite mettre à jour la base de données MongoDB. 
+        Afin de répondre aux besoins du client, j'ai développé pendant l'été 2020 le logiciel qui se compose en trois parties : une partie accessible par tous qui permet de naviguer dans les associations basé sur un serveur Node.js et une interface d'administration et d'édition par les associations qui communique avec une API web en Node.js qui constitue la troisième partie, c'est cette partie qui va mettre à jour la base de données MongoDB. 
       en: |
-        Foo bar
+        In order to answer the customer needs, I've developped during the summer of 2020 the software that is composed of many parts : a public page where everyone can browse the directory based on a Node.js server, a web interface for the administration of the site and on which the associations can input their details which communicate with the third part: the web API that update the database accordingly.
     action:
       fr: Site web externe
       en: External website
@@ -80,29 +81,82 @@ pro_projects:
         fr: Un dessin enfantin représentant le soleil éclairant un chemin
         en: A childish drawing representing the sun lighting up a footway.
   - id: tracklift
-    detailled_page: false
+    main: true
+    detailled_page: true
     date: 2022-01
     link: https://tracklift.fr
     name: Tracklift
-    # En 2021 Socobat Environnement avait le besoin d'une application web afin de modéliser la gestion des déchets sur des chantiers d'ascenseurs (collecte, retraitement, revalorisation) et de partager le résultat à des clients. J'ai démarré le développement à partir d'une base et j'ai mit en production le site web.
     description:
-      fr: |
+      fr: "Application web pour entreprise, gestion de la récupération, le traitement et la revalorisation des déchets issues des chantiers d'ascenseurs."
-        Gestion de la récupération, le traitement et la revalorisation des déchets issues des chantiers d'ascenseurs.
       # De façon plus général, logiciel de gestion de l'activité d'une entreprise.
+      en: "Business management application: management of the recovering, the processing and the revaluation of wastes from elevator's worksite."
+    background:
+      fr: |
+       En 2021 [Socobat Environnement](https://www.socobat-environnement.fr/) avait besoin d'une application web afin de modéliser la gestion des déchets sur des chantiers d'ascenseurs (collecte, retraitement, revalorisation), l'application devait intégrer un système de gestion de compte, de génération de document PDF à partir de formulaire et doit gérer les relations complexes entre les entitées (entreprises, chantiers, ascenseurs, bennes, audits...) pour correspondre exactement aux besoins métiers spécifiques de Socobat. La partie intéréssante et la plus complexe de ce projet est le besoin de connaitre à tout moment la quantité de matériaux de chaque benne à partir des "déchargements" effectués par les utilisateurs dans telle ou telle benne (la fonctionnalité "suivie de la masse")
       en: |
-        Management of the recovering, the processing and the revaluation of wastes from elevator's worksite
+        In 2021 [Socobat Environnement](https://www.socobat-environnement.fr/) had the need of a web app to model their waste management on worksite with elevators (to manage the collection, the recycling and the refurbishement), more over the app would need to integrate a user account manager, a document PDF generator from user-form and must manage the complex relationship between entities of the databases (compagnies, worksites, elevator, containers, audits...) to suit the specifics business needs of the customer. A quite challenging feature of the app was the need to known the state of each container at any time from the "unloading" records of the users. 
+    solution:
+      fr: |
+        La majorité des fonctionnalités demandés pour Tracklift sont de la gestion d'entité classique, j'ai donc utilisé [Api Platform](https://api-platform.com/) afin de facilement créer une API REST qui peut être consommé ensuite par l'application web. J'ai structuré le code du frontend pour qui soit le plus évolutif possible et permette la réutilisation facile de composants. La fonction du suivie de la masse de chaque benne demande une implémentation précise de la propagation des mise à jour dans la base de donnée relationelle. Pour générer les documents PDF ou les archives ZIP, j'ai mit en place un système de tâches asyncrone. Également, pour plus de réactivité dans l'application et une meilleure expérience utilisateur, j'ai ajouté un système de mise à jour en temps réel : [Mercure](https://mercure.rocks/).
+      en: |
+        Because the main features of the app was to do CRUD (Create, Read, Update, Delete) I used [Api Platform](https://api-platform.com/) to easily create a REST API that can be consumed by the Vue Web App The challenging feature described is an example of a tight dependency model between entities in the DB that needed propagation.
     thumbnail:
       src: logo_square.svg
-      alt: A 'T' letter encapsulated into brackets
+      alt:
+        fr: Une lettre 'T' encapsulé dans des crochets
+        en: A 'T' letter encapsulated into brackets
     technologies:
       - vue
       - vuetify
       - symfony
       - api-platform
       - php
-      - mysql
+      - mariadb
+    images:
+      - id: admin_dashboard_home
+        name:
+          fr: Page d'accueil pour l'administrateur
+          en: Home page for the administrator
+      - id: admin_edit_site
+        name:
+          fr: Menu d'édition des chantiers
+          en: Worksite edition menu
+        description:
+          fr: Le menu d'édition des chantiers dispose d'un moyen de rechercher rapidement des entreprises ou des utilisateurs dans la base de donnée afin de les associers au chantier.
+          en: The worksite edition menu have a quick way to search and grab compagnies or users in the data base to associate them to the worksite.
+      - id: admin_containers
+        name:
+          fr: Gestion des bennes
+          en: Container management
+      - id: admin_view_container
+        name:
+          fr: Visualiser le status d'un benne
+          en: Vizualize the state of a container
+      - id: admin_audit_form
+        name:
+          fr: Formulaire d'audit
+          en: Audit form
+        description:
+          fr: Formulaire permettant de savoir quel pièces et matiériaux vont être traités par Socobat
+          en: Form to get the knownledge of what hardware will be treated by Socobat 
+      - id: admin_users
+        name:
+          fr: Gestion des utilisateurs
+          en: User management
+      - id: user_details
+        name:
+          fr: Détails utilisateurs
+          en: User details
+      # - id: login_screen
+      #   name:
+      #     fr: e
+      #     en: e
+      #   description:
+      #     fr: e
+      #     en: e
 side_projects:
   - id: werobot
+    main: true
     detailled_page: false
     date: 2018-11
     link: https://werobot.fr
@@ -122,6 +176,7 @@ side_projects:
       en: A presentation website along with a blog for the robotic club We Robot.
       fr: Un site vitrine accompagné d'un blog pour l'association de robotique locale We Robot.
   - id: retrobox
+    main: true
     detailled_page: false
     name: RetroBox
     description:
@@ -145,10 +200,15 @@ side_projects:
       - paypal
       - electron
   - id: jobatator
+    main: true
     name: Jobatator
     date: 2020-06
     link: https://github.com/jobatator
-    logo: logo.png
+    thumbnail:
+      src: logo.png
+      alt:
+        fr: Le logo de jobatator montrant une pile aligné.
+        en: Jobatator logo showing an aligned stack.
     description:
       fr: |
         Un serveur TCP développé comme alternative simplifié à RabbitMQ afin de dispatcher des tâches à des processus.
@@ -160,6 +220,7 @@ side_projects:
       fr: GitHub du projet
       en: GitHub page
   - id: keyvaluer
+    main: false
     detailled_page: false
     name: KeyValuer
     date: 2020-04
@@ -175,6 +236,7 @@ side_projects:
       fr: GitHub du projet
       en: GitHub page
   - id: discord-monolog-handler
+    main: true
     detailled_page: false
     name: Discord Monolog handler
     date: 2017-08
@@ -190,15 +252,16 @@ side_projects:
       fr: GitHub du projet
       en: GitHub page
   - id: langatator
+    main: true
     detailled_page: false
     name: Langatator
     date: 2022-05
     link: https://gitlab.com/lefuturiste/langatator
     description:
       fr: |
-        Développement d'un langage de programmation impératif interprété afin de découvrir le fonctionnement d'un interpréteur.
+        Développement d'un langage de programmation impératif interprété en C afin de découvrir le fonctionnement d'un interpréteur.
       en: |
-        Creation of an impérative interpreted langage, trying to enforce a grammar with a lexer, a parser and an evaluator.
+        Programming of an imperative interpreted langage in C, trying to enforce a grammar with a lexer, a parser and an evaluator.
     technologies:
       - c
     action:
@@ -211,4 +274,31 @@ side_projects:
   #   technologies:
   #     - python
   #     - latex
-
+  - id: eurobot2020
+    main: yes
+    detailled_page: false
+    date: 2020-10
+    link: https://github.com/werobot-france/eurobot2020-main
+    thumbnail:
+      src: sailtheworld-150.png
+      alt:
+        fr: "Logo de la saison 2020 : Naviguer le monde"
+        en: "2020 season logo: Sail The World"
+      # alt:
+      #   fr: Logo de la coupe de france de robotique représentant un droid antropomorphe voulant jouer
+      #   en: French cup logo representing a human-like droid wanting to play
+    name:
+      fr: Coupe de France de robotique
+      en: French robotics cup
+    description:
+      fr: |
+         Conception d'un robot holonome autonome pour participer à l'édition 2020 de la coupe. J'ai travaillé sur l'électronique et le logiciel embarqué.
+      en: |
+        Design of an holonomic autonomus robot to participate in the 2020 edition of the cup, I worked on the electronic and on-board software.
+    technologies:
+      - python
+      - c
+      - arduino
+    action:
+      fr: GitHub du projet
+      en: GitHub page

config/technologies.yaml

@@ -80,7 +80,7 @@ technologies:
     wikidata: Q15206305
 
   - id: caddy
-    image: caddy.png
+    image: caddy-150.png
     name: Caddy
     website: https://caddyserver.com/
     wikidata: Q24008327
@@ -122,7 +122,7 @@ technologies:
     wikidata: Q1165204
 
   - id: elasticsearch
-    image: elasticsearch.png
+    image: elasticsearch-150.png
     name: Elastic Search
     website: https://www.elastic.co/elasticsearch/
     wikidata: Q3050461
@@ -150,7 +150,7 @@ technologies:
     wikidata: Q108740058
 
   - id: composer
-    image: composer.svg
+    image: composer-150.png
     name: Composer
     height: stretch
     website: https://getcomposer.org/
@@ -208,5 +208,6 @@ technologies:
     image: express.svg
     name: Express.js
     wikidata: Q16878131
+    hidden: true
 
 

public/dist/app.min.js.LICENSE.txt

@@ -82,8 +82,12 @@
 
 /*! ./lib/axios */
 
+/*! ./mediaModal */
+
 /*! ./mergeConfig */
 
+/*! ./technologiesMosaic */
+
 /*! ./transformData */
 
 /*! ./transitional */
@@ -108,6 +112,10 @@
   !*** ./node_modules/axios/index.js ***!
   \*************************************/
 
+/*!**************************************!*\
+  !*** ./assets/scripts/mediaModal.js ***!
+  \**************************************/
+
 /*!*****************************************!*\
   !*** ./node_modules/axios/lib/axios.js ***!
   \*****************************************/
@@ -120,6 +128,10 @@
   !*** ./node_modules/axios/lib/env/data.js ***!
   \********************************************/
 
+/*!**********************************************!*\
+  !*** ./assets/scripts/technologiesMosaic.js ***!
+  \**********************************************/
+
 /*!**********************************************!*\
   !*** ./node_modules/axios/lib/core/Axios.js ***!
   \**********************************************/

public/imgs/icons/bike.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bike" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <circle cx="5" cy="18" r="3"></circle>
+   <circle cx="19" cy="18" r="3"></circle>
+   <polyline points="12 19 12 15 9 12 14 8 16 11 19 11"></polyline>
+   <circle cx="17" cy="5" r="1"></circle>
+</svg>

public/imgs/icons/bolt.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bolt" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <polyline points="13 3 13 10 19 10 11 21 11 14 5 14 13 3" />
+</svg>
+
+

public/imgs/icons/cake.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-cake" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <path d="M3 20h18v-8a3 3 0 0 0 -3 -3h-12a3 3 0 0 0 -3 3v8z"></path>
+   <path d="M2.996 14.803c.312 .135 .654 .204 1.004 .197a2.4 2.4 0 0 0 2 -1a2.4 2.4 0 0 1 2 -1a2.4 2.4 0 0 1 2 1a2.4 2.4 0 0 0 2 1a2.4 2.4 0 0 0 2 -1a2.4 2.4 0 0 1 2 -1a2.4 2.4 0 0 1 2 1a2.4 2.4 0 0 0 2 1c.35 .007 .692 -.062 1.004 -.197"></path>
+   <path d="M12 4l1.465 1.638a2 2 0 1 1 -3.015 .099l1.55 -1.737z"></path>
+</svg>

public/imgs/icons/chart-arcs-3.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chart-arcs-3" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <circle cx="12" cy="12" r="1" />
+  <path d="M7 12a5 5 0 1 0 5 -5" />
+  <path d="M6.29 18.957a9 9 0 1 0 5.71 -15.957" />
+</svg>
+
+

public/imgs/icons/copyleft.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-copyleft" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <circle cx="12" cy="12" r="9" />
+  <path d="M10 9.75a3.016 3.016 0 0 1 4.163 .173a2.993 2.993 0 0 1 0 4.154a3.016 3.016 0 0 1 -4.163 .173" />
+</svg>
+
+

public/imgs/icons/database.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-database" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <ellipse cx="12" cy="6" rx="8" ry="3"></ellipse>
+  <path d="M4 6v6a8 3 0 0 0 16 0v-6" />
+  <path d="M4 12v6a8 3 0 0 0 16 0v-6" />
+</svg>
+
+

public/imgs/icons/device-desktop.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-desktop" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <rect x="3" y="4" width="18" height="12" rx="1"></rect>
+   <line x1="7" y1="20" x2="17" y2="20"></line>
+   <line x1="9" y1="16" x2="9" y2="20"></line>
+   <line x1="15" y1="16" x2="15" y2="20"></line>
+</svg>

public/imgs/icons/flag.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-flag" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <line x1="5" y1="5" x2="5" y2="21"/>
+  <line x1="19" y1="5" x2="19" y2="14"/>
+  <path d="M5 5a5 5 0 0 1 7 0a5 5 0 0 0 7 0"/>
+  <path d="M5 14a5 5 0 0 1 7 0a5 5 0 0 0 7 0"/>
+</svg>

public/imgs/icons/grid-dots.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-grid-dots" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <circle cx="5" cy="5" r="1" />
+  <circle cx="12" cy="5" r="1" />
+  <circle cx="19" cy="5" r="1" />
+  <circle cx="5" cy="12" r="1" />
+  <circle cx="12" cy="12" r="1" />
+  <circle cx="19" cy="12" r="1" />
+  <circle cx="5" cy="19" r="1" />
+  <circle cx="12" cy="19" r="1" />
+  <circle cx="19" cy="19" r="1" />
+</svg>
+
+

public/imgs/icons/language.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-language" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M4 5h7"/>
+  <path d="M9 3v2c0 4.418 -2.239 8 -5 8"/>
+  <path d="M5 9c-.003 2.144 2.952 3.908 6.7 4"/>
+  <path d="M12 20l4 -9l4 9"/>
+  <path d="M19.1 18h-6.2"/>
+</svg>

public/imgs/icons/map-pin.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-map-pin" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <circle cx="12" cy="11" r="3"></circle>
+   <path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z"></path>
+</svg>

public/imgs/icons/map.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-map" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <polyline points="3 7 9 4 15 7 21 4 21 17 15 20 9 17 3 20 3 7"/>
+  <line x1="9" y1="4" x2="9" y2="17"/>
+  <line x1="15" y1="7" x2="15" y2="20"/>
+</svg>

public/imgs/icons/opensource.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-open-source" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <path d="M12 3a9 9 0 0 1 3.618 17.243l-2.193 -5.602a3 3 0 1 0 -2.849 0l-2.193 5.603a9 9 0 0 1 3.617 -17.244z"></path>
+</svg>

public/imgs/icons/robot.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-robot" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <path d="M7 7h10a2 2 0 0 1 2 2v1l1 1v3l-1 1v3a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-3l-1 -1v-3l1 -1v-1a2 2 0 0 1 2 -2z"></path>
+   <path d="M10 16h4"></path>
+   <circle cx="8.5" cy="11.5" r=".5" fill="currentColor"></circle>
+   <circle cx="15.5" cy="11.5" r=".5" fill="currentColor"></circle>
+   <path d="M9 7l-1 -4"></path>
+   <path d="M15 7l1 -4"></path>
+</svg>

public/imgs/icons/users.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-users" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <circle cx="9" cy="7" r="4"></circle>
+   <path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
+   <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+   <path d="M21 21v-2a4 4 0 0 0 -3 -3.85"></path>
+</svg>