Skip to content

Commit 3175951

Browse files
bmeurantbmeurant
committed
feat(navigation): add navigation for large screens & translate attributes
1 parent a6459dc commit 3175951

5 files changed

Lines changed: 123 additions & 26 deletions

File tree

‎index.html‎

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,23 @@
2323
<div id="wrapper">
2424
<div id="header">
2525
<span id="actions">
26-
<a id="email" class="action"><i class="fa-solid fa-at"></i></button>
27-
<a id="download" class="action" href="/files/resume-baptiste-meurant-en.pdf" download="baptiste-meurant.pdf"><i class="fa-solid fa-download"></i></a>
26+
<a id="email" class="action i18nattribute" data-i18n="title:contact-me-mail"><i class="fa-solid fa-at"></i></a>
27+
<a id="download" class="action i18nattribute" data-i18n="title:download" href="/files/resume-baptiste-meurant-en.pdf" download="baptiste-meurant.pdf"><i class="fa-solid fa-download"></i></a>
2828
</span>
2929
<span id="langs">
30-
<button class="langSelector" name="fr" title="Français"></button>
31-
<button class="langSelector" name="en" title="English"></button>
30+
<button class="langSelector i18nattribute" data-i18n="title:french" name="fr" title="Français"></button>
31+
<button class="langSelector i18nattribute" data-i18n="title:english" name="en" title="English"></button>
3232
</span>
3333
</div>
34+
<nav id="nav-menu" role="navigation">
35+
<a class="inverse i18nattribute" href="#identity" data-i18n="title:identity"><i class="fa-solid fa-address-card"></i></a>
36+
<a class="i18nattribute" href="#skills" data-i18n="title:skills"><i class="fa-solid fa-user-gear"></i></a>
37+
<a class="inverse i18nattribute" href="#work" data-i18n="title:work-experience"><i class="fa-solid fa-briefcase"></i></a>
38+
<a class="i18nattribute" href="#projects" data-i18n="title:projects"><i class="fa-solid fa-play"></i></a>
39+
<a class="inverse i18nattribute" href="#education" data-i18n="title:education"><i class="fa-solid fa-graduation-cap"></i></a>
40+
<a class="i18nattribute" href="#languages" data-i18n="title:languages"><i class="fa-solid fa-comment"></i></a>
41+
<a class="inverse i18nattribute" href="#interests" data-i18n="title:interests"><i class="fa-solid fa-eye"></i></a>
42+
</nav>
3443
<div id="resume">
3544
<div id="summary">
3645
<div id="profile">
@@ -43,8 +52,8 @@ <h1 id="name">Baptiste Meurant</h1>
4352
<div id="age"><i class="fa-solid fa-cake-candles"></i><span id="ageNum">43</span> <span data-i18n="age-years" class="i18nelement">years</span></div>
4453
<div id="xp"><i class="fa-solid fa-stopwatch"></i><span id="xpNum">12</span> <span data-i18n="xp-years" class="i18nelement">years of experience</span></div>
4554
</div>
46-
<div id="jobTitle" data-i18n="title" class="i18nelement">title</div>
47-
<p id="description" data-i18n="description" class="i18nelement">description</p>
55+
<div id="jobTitle" data-i18n="title" class="i18nelement">Software <b>developer</b>, <b>Architect</b>, <b>Technical Director</b> at <b><a href='https://twitter.com/WorldlineFrance'>Worldline</a></b></div>
56+
<p id="description" data-i18n="description" class="i18nelement">Experienced <b>full-stack developer</b> and software <b>architect</b>. I am <b>rigorous</b>, <b>pragmatism</b> and commited to the principles of <b>software craftsmanship</b>. I like working in a <b>team</b>, with <b>motivated and passionate</b> people. I like <b>learning</b> from people, <b>sharing</b>, <b>leading</b>, <b>discussing</b> technologies, designs, architectures, etc. I try to maintain a <b>balance</b> between development and technical management.</p>
4857
</div>
4958
<div id="contact">
5059
<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>
@@ -140,24 +149,12 @@ <h2 id="otherSkills" class="title"><span class="label"><i class="fa-solid fa-lig
140149
<p class="skill-list i18nelement" data-i18n="other-skills-list">Tech lead, Production, PreSales, Budget, Team leading, Teaching & Mentoring, Communication</p>
141150
</div>
142151
</div>
143-
<!--nav>
144-
<p class="scroll"><i class="fa fa-fw fa-caret-down"></i>&nbsp;<i><b>Scroll</b> or <b>select</b> a
145-
section
146-
below
147-
to learn more about me.</i>&nbsp;<i class="fa fa-fw fa-caret-down"></i></p>
148-
<ul>
149-
<li><a href="#about"><i class="fa fa-5x fa-fw fa-user"></i><br/>About me</a></li>
150-
<li><a href="#expertise"><i class="fa fa-5x fa-fw fa-code"></i><br/>Expertise</a></li>
151-
<li><a href="#experience"><i class="fa fa-5x fa-fw fa-suitcase"></i><br/>Experience</a></li>
152-
<li><a href="#education"><i class="fa fa-5x fa-fw fa-graduation-cap"></i><br/>Education</a></li>
153-
</ul>
154-
</nav-->
155152
<div id="work">
156153
<div class="section-full">
157154
<h2 class="title"><span class="label">
158155
<i class="fa-solid fa-briefcase"></i>&nbsp;<span data-i18n="work-experience" class="i18nelement">Work experience</span>
159156
</span></h2>
160-
<ul class="timeline">
157+
<ul class="timeline first">
161158
<li class="timeline-item">
162159
<div class="timeline-item-logo">
163160
<i class="fa-regular fa-circle-dot"></i>
@@ -341,7 +338,7 @@ <h3 class="timeline-item-title i18nelement" data-i18n="soft-engineer">Software e
341338
<div class="section-full">
342339
<h2 class="title">
343340
<span class="label">
344-
<i class="fa-solid fa-graduation-cap"></i>&nbsp;<span data-i18n="projects" class="i18nelement">Things I have done</span>
341+
<i class="fa-solid fa-play"></i>&nbsp;<span data-i18n="projects" class="i18nelement">Things I have done</span>
345342
</span>
346343
</h2>
347344
<ul class="inline-list flex-list">

‎main.js‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ async function i18Loader(lang) {
2626
updateContent();
2727
});
2828

29-
function updateContent() {
29+
function updateElements() {
3030
const elements = document.getElementsByClassName("i18nelement");
3131
for (let i = 0; i < elements.length; i++) {
3232
const element = elements[i];
@@ -43,6 +43,29 @@ async function i18Loader(lang) {
4343
}
4444
}
4545

46+
function updateAttributes() {
47+
const elements = document.getElementsByClassName("i18nattribute");
48+
for (let i = 0; i < elements.length; i++) {
49+
const element = elements[i];
50+
const data = element.getAttribute("data-i18n");
51+
const options = element.getAttribute("data-i18n-options");
52+
const optKeys = JSON.parse(options);
53+
const [attrName, k] = data.split(':');
54+
let attrValue = i18next.t(k);
55+
56+
for (var optKey in optKeys) {
57+
value = value.replace (`__${optKey}__`, optKeys[optKey]);
58+
}
59+
60+
element.setAttribute(attrName, attrValue);
61+
}
62+
}
63+
64+
function updateContent() {
65+
updateElements();
66+
updateAttributes();
67+
}
68+
4669
function updateUrl(lang) {
4770
window.history.pushState({}, "", `/${lang}`);
4871
}
@@ -74,6 +97,21 @@ function updateEmail() {
7497
document.getElementById("email").href = "mailto:baptiste.meurant@gmail.com";
7598
}
7699

100+
function showResponsiveMenu() {
101+
var menu = document.getElementById("menu");
102+
var icon = document.getElementById("hamburger-menu");
103+
var root = document.getElementById("header");
104+
if (menu.className === "") {
105+
menu.className = "open";
106+
icon.className = "open";
107+
root.style.overflowY = "hidden";
108+
} else {
109+
menu.className = "";
110+
icon.className = "";
111+
root.style.overflowY = "";
112+
}
113+
}
114+
77115
let lang=getLangFromLocale(locale);
78116

79117
i18Loader(lang);

‎public/translations/en.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
{
2-
"title": "Software <b>developer</b>, <b>Architect</b>, <b>Technical Director</b> at <b><a href='https://twitter.com/WorldlineFrance'>Worldline</a>",
3-
"description": "Experienced <b>full-stack developer</b> and software <b>architect</b>. I am <b>pragmatism</b> and commited to the principles of <b>software craftsmanship</b>. I like working in a <b>team</b>, with <b>motivated and passionate</b> people. I like <b>learning</b> from people, <b>sharing</b>, <b>leading</b>, <b>discussing</b> technologies, designs, architectures, etc. I try to maintain a <b>balance</b> between development and technical management.",
2+
"contact-me-mail": "Contact me by email",
3+
"download": "Download",
4+
"identity": "Profile",
5+
"title": "Software <b>developer</b>, <b>Architect</b>, <b>Technical Director</b> at <b><a href='https://twitter.com/WorldlineFrance'>Worldline</a></b>",
6+
"description": "Experienced <b>full-stack developer</b> and software <b>architect</b>. I am <b>rigorous</b>, <b>pragmatic</b> and commited to the principles of <b>software craftsmanship</b>. I like working in a <b>team</b>, with <b>motivated and passionate</b> people. I like <b>learning</b> from people, <b>sharing</b>, <b>leading</b>, <b>discussing</b> technologies, designs, architectures, etc. I try to maintain a <b>balance</b> between development and technical management.",
47
"age-years": "years",
58
"xp-years": "years XP",
69
"contact-me": "Contact Me",
10+
"skills": "Skills",
711
"main-skills": "Main skills",
812
"skill-java": "Java & ecosystem",
913
"skill-spring": "Spring & ecosystem",

‎public/translations/fr.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
{
2+
"contact-me-mail": "Contactez mi par mail",
3+
"download": "Télécharger",
4+
"identity": "Profil",
25
"title": "<b>Développeur</b>, <b>Architecte</b>, <b>Directeur Technique</b> à <b><a href='https://twitter.com/WorldlineFrance'>Worldline</a>",
3-
"description": "<b>Développeur full-stack</b> et <b>architecte</b> logiciel expérimenté. Je suis <b>pragmatique</b> et attaché aux principes du <b>software craftsmanship</b>. J'aime travailler en <b>équipe</b>, avec des personnes <b>motivées et passionnées</b>. J'aime <b>apprendre</b> des gens, <b>transmettre</b> et <b>guider</b>, <b>débattre</b> des technologies, conceptions, les architectures, ... J'essaie de conserver un <b>équilibre</b> entre le développement et le pilotage technique.",
6+
"description": "<b>Développeur full-stack</b> et <b>architecte</b> logiciel expérimenté. Je suis <b>rigoureux</b>, <b>pragmatique</b> et attaché aux principes du <b>software craftsmanship</b>. J'aime travailler en <b>équipe</b>, avec des personnes <b>motivées et passionnées</b>. J'aime <b>apprendre</b>, <b>transmettre</b> et <b>guider</b>, <b>débattre</b> des technologies, conceptions, les architectures, ... J'essaie de conserver un <b>équilibre</b> entre le développement et le pilotage technique.",
47
"age-years": "ans",
58
"xp-years": "années d'XP",
69
"contact-me": "Contactez Moi",
10+
"skills": "Compétences",
711
"main-skills": "Compétences principales",
812
"skill-java": "Java & ecosystème",
913
"skill-spring": "Spring & ecosystème",
@@ -73,7 +77,7 @@
7377
"lvl-proficient-c1": "Professionnel (C1)",
7478
"lvl-intermediate": "Intermédiaire",
7579
"lvl-learning": "En apprentissage",
76-
"interests": "centres d'intérêts",
80+
"interests": "Centres d'intérêts",
7781
"puzzles": "puzzles, en particulier les plus complexes",
7882
"music": "musique, cours de chant occasionnels",
7983
"outdoor": "activités en extérieur, randonnées, voyages",

‎styles/resume.scss‎

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,33 @@ $smooth-emphasize-color: #a9d5d6;
4141
}
4242
}
4343

44+
#nav-menu {
45+
width: 35px;
46+
z-index: 100;
47+
position: fixed;
48+
margin-top: 50px;
49+
margin-left: -36px;
50+
border-right: 1px solid white;
51+
display: none;
52+
53+
a {
54+
display: block;
55+
padding: 5px 0;
56+
text-align: center;
57+
58+
color: $strong-emphasize-color;
59+
background-color: $smooth-emphasize-color;
60+
61+
&.inverse {
62+
color: white;
63+
background-color: $emphasize-color;
64+
}
65+
}
66+
}
67+
4468
.action {
4569
background: none;
70+
padding-left: 0.5rem;
4671
}
4772

4873
a {
@@ -261,7 +286,7 @@ body {
261286
#contact, .location, #time {
262287
i {
263288
color: $emphasize-color;
264-
padding-right: 0.2rem;
289+
padding-right: 0.5rem;
265290
}
266291
}
267292

@@ -357,6 +382,7 @@ body {
357382
// skills
358383

359384
#skills {
385+
360386
.flex-list {
361387
flex-direction: column;
362388

@@ -519,6 +545,20 @@ body {
519545
}
520546
}
521547

548+
// work
549+
550+
#work {
551+
ul.first li:last-of-type {
552+
padding-bottom: 1rem;
553+
}
554+
555+
ul.page-break {
556+
li:first-of-type {
557+
margin-top: -15px;
558+
}
559+
}
560+
}
561+
522562
// education
523563

524564
#education {
@@ -915,6 +955,10 @@ body {
915955
#profile {
916956
flex-basis: 15%;
917957
}
958+
959+
#nav-menu {
960+
display: initial;
961+
}
918962
}
919963

920964
@media print {
@@ -1115,6 +1159,16 @@ body {
11151159

11161160
#work {
11171161
margin-top: 0.3rem;
1162+
1163+
ul.first li:last-of-type {
1164+
padding-bottom: inherit;
1165+
}
1166+
1167+
ul.page-break {
1168+
li:first-of-type {
1169+
margin-top: inherit;
1170+
}
1171+
}
11181172
}
11191173

11201174
.timeline {

0 commit comments

Comments
 (0)