feat(interests): add interests section

bmeurant · bmeurant · commit a6459dc8b68b · 2023-12-19T00:24:50.000+01:00
diff --git a/index.html b/index.html
@@ -23,8 +23,8 @@
     <div id="wrapper">
         <div id="header">
             <span id="actions">
-                <button class="action"><i class="fa-solid fa-at"></i></button>
-                <button class="action" OnClick="javascript:window.print()" title="Print"><i class="fa-solid fa-print"></i></button>
+                <a id="email" class="action"><i class="fa-solid fa-at"></i></button>
+                <a id="download" class="action" href="/files/resume-baptiste-meurant-en.pdf" download="baptiste-meurant.pdf"><i class="fa-solid fa-download"></i></a>
             </span>
             <span id="langs">
                 <button class="langSelector" name="fr" title="Français"></button>
@@ -50,8 +50,8 @@ <h1 id="name">Baptiste Meurant</h1>
                     <h2 id="contactMe" class="title"><span class="label"><i class="fa-solid fa-circle-user"></i>&nbsp;<span data-i18n="contact-me" class="i18nelement">Contact Me</span></span></h2>
                     <ul class="inline-list flex-list">
                         <li class="email list-item"><a href="mailto:baptiste.meurant@gmail.com" title="mail"
-                            target="new"><i class="fa-solid fa-envelope"></i></a><span class="social-link">baptiste.meurant@gmail.com</span></li>
-                        <li class="phone list-item"><i class="fa-solid fa-phone"></i><span class="social-link">(+33)6 16 98 52 71</span></li>
+                            target="new"><i class="fa-solid fa-envelope"></i></a><span class="social-link"></span></li>
+                        <li class="phone list-item"><i class="fa-solid fa-phone"></i><span class="social-link"></span></li>
                         <li class="website list-item"><a href="https://bmeurant.github.io" title="personal website"
                             target="new"><i class="fa-solid fa-globe"></i></a><span class="social-link">https://bmeurant.github.io</span></li> 
                         <li class="github list-item"><a href="https://github.com/bmeurant" title="@bmeurant on GitHub"
@@ -288,6 +288,8 @@ <h3 class="timeline-item-title i18nelement" data-i18n="soft-arch">Software Archi
                                 </div>
                             </div>
                         </li>
+                    </ul>
+                    <ul class="timeline page-break">
                         <li class="timeline-item">
                             <div class="timeline-item-logo">
                                 <i class="fa-regular fa-circle-dot"></i>
@@ -510,30 +512,31 @@ <h2 class="title">
                     </ul>
                 </div>
             </div>
+            <div id="interests">
+                <div class="section-full">
+                    <h2 class="title">
+                        <span class="label">
+                            <i class="fa-solid fa-eye"></i>&nbsp;<span data-i18n="interests" class="i18nelement">Interests</span>
+                        </span>
+                    </h2>
+                    <ul class="inline-list">
+                        <li class="interest">
+                            <i class="fa-solid fa-puzzle-piece"></i><span class="i18nelement" data-i18n="puzzles">Puzzles</span>
+                        </li>
+                        <li class="interest">
+                            <i class="fa-solid fa-music"></i><span class="i18nelement" data-i18n="music">Music</span>
+                        </li>
+                        <li class="interest">
+                            <i class="fa-solid fa-person-hiking"></i><span class="i18nelement" data-i18n="outdoor">Outdoor activities</span>
+                        </li>
+                        <li class="interest">
+                            <i class="fa-solid fa-ankh"></i><span class="i18nelement" data-i18n="egypt">Egyptian civilization</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
         </div>
     </div>
     <script type="module" src="/main.js"></script>
-
-<!--
-                    <div class="skills-cat languages">
-                        <h3>Languages</h3>
-
-                        <div class="skill">
-                            <span style="width: 100%;">French</span>
-                        </div>
-                        <div class="skill">
-                            <span style="width: 75%;">English</span>
-                        </div>
-                        <div class="skill">
-                            <span style="width: 30%;">Spanish</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </article>
-    </section>
-</div>
-</div-->
-
 </body>
 </html>
diff --git a/main.js b/main.js
@@ -66,6 +66,18 @@ function updateXP(birthdate) {
   document.getElementById("xpNum").innerHTML = getYears(birthdate);
 }
 
-i18Loader(getLangFromLocale(locale));
+function updateDownloadPath(lang) {
+  document.getElementById("download").href = `files/resume-baptiste-meurant-${lang}.pdf`;
+}
+
+function updateEmail() {
+  document.getElementById("email").href = "mailto:baptiste.meurant@gmail.com";
+}
+
+let lang=getLangFromLocale(locale);
+
+i18Loader(lang);
 updateAge("01/17/1980");
-updateXP("10/01/2005");
+updateXP("10/01/2005");
+updateDownloadPath(lang);
+updateEmail();
diff --git a/public/files/resume-baptiste-meurant-en.pdf b/public/files/resume-baptiste-meurant-en.pdf
diff --git a/public/files/resume-baptiste-meurant-fr.pdf b/public/files/resume-baptiste-meurant-fr.pdf
diff --git a/public/translations/en.json b/public/translations/en.json
@@ -65,11 +65,17 @@
     "translations-desc": "Contribution to the <strong>french translation of <a href=\"https://github.com/progit/progit2-fr/commits?author=bmeurant\">Git probook v2</a></strong>.<br>Translation of an article about<a href=\"https://www.infoq.com/fr/articles/ember-en-entreprise\"> emberjs in enterprise on InfoQ</a>",
     "articles": "Articles & Tutorials",
     "articles-desc": "<a href=\"http://baptiste-meurant.developpez.com/\">Spring, Tapestry & Hibernate tutorials</a> (in french), <a href=\"https://cwiki.apache.org/confluence/display/TAPESTRY5/Tapstry5First+project+with+Tapestry5%2C+Spring+and+Hibernate\">translated</a> by the Apache Tapestry team, <a href=\"http://putaindecode.io/fr/articles/js/ember/\"><strong>articles about ember</strong></a>(in french) and <a href=\"https://medium.com/@bmeurant/enhance-your-ember-apps-with-fastboot-b693f1a66793\">SPA</a>. Various contributions on <a href=\"https://blog.worldline.tech/authors/#baptiste-meurant\">Worldline Tech Blog</a>",
+    "languages": "Languages",
     "french": "French",
     "english": "English",
     "spanish": "Spanish",
     "lvl-mother-tongue": "Mother tongue",
     "lvl-proficient-c1": "Proficient (C1)",
     "lvl-intermediate": "Intermediate",
-    "lvl-learning": "Learning"
+    "lvl-learning": "Learning",
+    "interests": "Interests",
+    "puzzles": "puzzles, especially the more complex ones",
+    "music": "music, occasional singing lessons",
+    "outdoor": "outdoor activities, hikes, trips",
+    "egypt": "passion for ancient Egypt, learning hieroglyphic Egyptian"
 }
diff --git a/public/translations/fr.json b/public/translations/fr.json
@@ -65,11 +65,17 @@
     "translations-desc": "Contribution à la <strong>traduction française de <a href=\"https://github.com/progit/progit2-fr/commits?author=bmeurant\">Git probook v2</a></strong>.<br>Traduction d'un article à propos<a href=\"https://www.infoq.com/fr/articles/ember-en-entreprise\"> ember en enterprise sur InfoQ</a>",
     "articles": "Articles & Tutoriels",
     "articles-desc": "<a href=\"http://baptiste-meurant.developpez.com/\">Tutoriels Spring, Tapestry & Hibernate</a>, <a href=\"https://cwiki.apache.org/confluence/display/TAPESTRY5/Tapstry5First+project+with+Tapestry5%2C+Spring+and+Hibernate\">traduits en anglais</a> par l'équipe Tapestry, <a href=\"http://putaindecode.io/fr/articles/js/ember/\"><strong>articles à propos d'ember</strong></a> et des <a href=\"https://medium.com/@bmeurant/enhance-your-ember-apps-with-fastboot-b693f1a66793\">SPAs</a>. Contributions diverses au <a href=\"https://blog.worldline.tech/authors/#baptiste-meurant\">blog technique Worldline</a>",
+    "languages": "Langues",
     "french": "Français",
     "english": "Anglais",
     "spanish": "Espagnol",
     "lvl-mother-tongue": "Langue maternelle",
     "lvl-proficient-c1": "Professionnel (C1)",
     "lvl-intermediate": "Intermédiaire",
-    "lvl-learning": "En apprentissage"
+    "lvl-learning": "En apprentissage",
+    "interests": "centres d'intérêts",
+    "puzzles": "puzzles, en particulier les plus complexes",
+    "music": "musique, cours de chant occasionnels",
+    "outdoor": "activités en extérieur, randonnées, voyages",
+    "egypt": "passion pour l'Egypte ancienne, apprentissage de l'égyptien hieroglyphique"
 }
diff --git a/styles/resume.scss b/styles/resume.scss
@@ -297,7 +297,7 @@ body {
         display: none;
     }
 
-    .email, .website, .phone {
+    .email, .phone {
         display: none;
     }
 }
@@ -550,7 +550,7 @@ body {
     }
 
     .language {
-        width: 45%;
+        width: 40%;
         margin: 0 0.5rem;
         margin-top: 0.5rem;
         text-align: center;
@@ -574,7 +574,7 @@ body {
             text-indent: 100%;
             white-space: nowrap;
             overflow: hidden;
-            background-image: url("/public/images/mdw-ntr.png");
+            background-image: url("/images/mdw-ntr.png");
             background-repeat: no-repeat;
             background-size: contain;
             font-size: 1em;
@@ -587,6 +587,22 @@ body {
     }
 }
 
+#interests {
+    font-size: 0.9rem;
+    
+    .inline-list {
+        padding-left: 1.5rem;
+    }
+
+    .interest {
+        i {
+            padding-right: 0.5rem;
+            width: 0.8rem;
+            color: $strong-emphasize-color;
+        }
+    }
+}
+
 @media screen and (max-width: 450px) {
 
     #profile {
@@ -791,7 +807,6 @@ body {
 
         .section-light {
             line-height: 1.2;
-            margin-top: 1rem;
         }
     }
 
@@ -807,6 +822,8 @@ body {
 
 @media screen and (min-width: 992px) {
     #resume {
+        justify-content: space-between;
+
         & > * {
             padding-bottom: 0.5em;
         }
@@ -873,7 +890,16 @@ body {
             width: 25%;
         }
     }
-  }
+
+    #languages {
+        width: 55%;
+    }
+  
+    #interests {
+        width: 40%;
+    }
+
+}
 
 @media screen and (min-width: 1200px) {
 
@@ -908,7 +934,7 @@ body {
 
     .section-full {
         & > .title {
-            font-size: 0.7rem;
+            font-size: 0.8rem;
         }
     }
 
@@ -938,6 +964,7 @@ body {
         box-shadow: none;
         padding-top: 0;
         padding-bottom: 0;
+        justify-content: space-between;
 
         & > * {
             padding: 0.3rem 0.5rem;
@@ -975,7 +1002,7 @@ body {
         }
 
         #description {
-            font-size: 0.7rem;
+            font-size: 0.8rem;
             margin: 0.5rem 0 0;
         }
     }
@@ -994,6 +1021,7 @@ body {
         order: 3;
         font-size: 0.7rem;
         margin: 0.25rem 0;
+        width: 100%;
 
         .title {
             font-size: 0.7rem;
@@ -1043,33 +1071,41 @@ body {
     }
 
     #skills {
+        #main-skills {
+            margin-bottom: 0.5rem;
+        }
+
         .skill-name, .skill-exp {
-            font-size: 0.6rem;
+            font-size: 0.65rem;
         }
 
         .section-light {
-            margin-top: 0;
-            line-height: 0.4;
+            margin-top: 0.5rem;
+            margin-bottom: 0.5rem;
+            line-height: 1;
+
+            i {
+                width: 0.5rem;
+            }
 
             .title {
                 font-size: 0.6em;
-                width: 25%;
             }
         }
 
         .skill-list {
-            margin-left: 0;
-            font-size: 0.6em;
+            font-size: 0.7em;
+            display: block;
         }
 
         .flex-list {
             height: 115px;
             text-align: center;
             display: block;
-            margin-bottom: 0.2rem;
+            margin-bottom: 0.8rem;
 
             .list-item {
-                font-size: 0.65rem;
+                font-size: 0.7rem;
                 text-align: left;
                 width: 22%;
                 margin: 0 0.5rem;
@@ -1092,7 +1128,7 @@ body {
         }
 
         .timeline-item-content {
-            margin: 0.3rem 0;
+            margin: 0.45rem 0;
         }
 
         .timeline-item-date-content {
@@ -1130,7 +1166,7 @@ body {
         .timeline-item-content-body {
             order: 5;
             margin-top: 0.2rem;
-            font-size: 0.6rem;
+            font-size: 0.7rem;
         }
 
         .timeline-item-sub-titles {
@@ -1166,12 +1202,59 @@ body {
     }
 
     #projects {
+        margin-top: 0.7rem;
+
         .flex-list {
             flex-direction: row;
             flex-wrap: wrap;
             justify-content: space-around;
             align-items: normal;
         }
     }
+
+    #education {
+        .timeline {
+            .timeline-item-title {
+                font-size: 0.9rem;
+            }
+
+            .timeline-item-content {
+                margin-top: 0;
+            }
+        }
+    }
+
+    #languages { 
+
+        .flex-list {
+            margin-top: 0;
+            margin-bottom: 0.3rem;
+        }
+
+        .language {
+            width: auto;
+
+            .pie {
+                --b: 6px;
+                width: 75px;
+                font-size: 17px;
+            }
+
+            .title {
+                font-size: 0.75rem;
+            }
+
+            .level {
+                font-size: 0.65rem;
+                margin-top: 0.3rem;
+            }
+        }
+    }
+
+    #interests {
+        .inline-list {
+            font-size: 0.7rem;
+        }
+    }
 }
 
