Skip to content

Commit 5e44aa5

Browse files
bmeurantbmeurant
committed
fest(languages): add languages section
1 parent 562c994 commit 5e44aa5

5 files changed

Lines changed: 140 additions & 12 deletions

File tree

‎index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -483,6 +483,33 @@ <h3 class="timeline-item-title">Lycée Louis Thuilliez</h3>
483483
</ul>
484484
</div>
485485
</div>
486+
<div id="languages">
487+
<div class="section-full">
488+
<h2 class="title">
489+
<span class="label">
490+
<i class="fa-solid fa-comment"></i>&nbsp;<span data-i18n="languages" class="i18nelement">Languages</span>
491+
</span>
492+
</h2>
493+
<ul class="inline-list flex-list">
494+
<li class="language">
495+
<div class="pie" style="--p:100;"><span class="title i18nelement" data-i18n="french">French</span></div>
496+
<div class="level i18nelement" data-i18n="lvl-mother-tongue">Mother tongue</div>
497+
</li>
498+
<li class="language">
499+
<div class="pie" style="--p:80;"><span class="title i18nelement" data-i18n="english">English</span></div>
500+
<div class="level i18nelement" data-i18n="lvl-proficient-c1">Proficient (C1)</div>
501+
</li>
502+
<li class="language">
503+
<div class="pie" style="--p:50;"><span class="title i18nelement" data-i18n="spanish">Spanish</span></div>
504+
<div class="level i18nelement" data-i18n="lvl-intermediate">Intermediate</div>
505+
</li>
506+
<li class="language">
507+
<div class="pie" style="--p:30;"><span class="title hieroglyphic">Egyptian hieroglyphic</span></div>
508+
<div class="level i18nelement" data-i18n="lvl-learning">Learning</div>
509+
</li>
510+
</ul>
511+
</div>
512+
</div>
486513
</div>
487514
</div>
488515
<script type="module" src="/main.js"></script>

‎public/images/mdw-ntr.png‎

3.83 KB
Loading

‎public/translations/en.json‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,5 +64,12 @@
6464
"translations": "Technical Translations",
6565
"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>",
6666
"articles": "Articles & Tutorials",
67-
"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>"
67+
"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>",
68+
"french": "French",
69+
"english": "English",
70+
"spanish": "Spanish",
71+
"lvl-mother-tongue": "Mother tongue",
72+
"lvl-proficient-c1": "Proficient (C1)",
73+
"lvl-intermediate": "Intermediate",
74+
"lvl-learning": "Learning"
6875
}

‎public/translations/fr.json‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,5 +64,12 @@
6464
"translations": "Traductions techniques",
6565
"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>",
6666
"articles": "Articles & Tutoriels",
67-
"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>"
67+
"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>",
68+
"french": "Français",
69+
"english": "Anglais",
70+
"spanish": "Espagnol",
71+
"lvl-mother-tongue": "Langue maternelle",
72+
"lvl-proficient-c1": "Professionnel (C1)",
73+
"lvl-intermediate": "Intermédiaire",
74+
"lvl-learning": "En apprentissage"
6875
}

‎styles/resume.scss‎

Lines changed: 97 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -111,17 +111,28 @@ a {
111111
}
112112
}
113113

114-
// content
115-
116-
body {
117-
margin: 0.5rem;
118-
min-width: 300px;
119-
}
114+
.pie {
115+
--b: 10px;
120116

121-
#wrapper {
122117
width: 100%;
118+
aspect-ratio: 1;
119+
position: relative;
120+
display: inline-grid;
121+
place-content: center;
122+
font-size: 25px;
123+
font-weight: bold;
124+
font-family: sans-serif;
123125
}
124126

127+
.pie:before {
128+
content: "";
129+
position: absolute;
130+
border-radius: 50%;
131+
inset: 0;
132+
background: conic-gradient($strong-emphasize-color calc(var(--p)*1%), $smooth-emphasize-color calc(var(--p)*1%));
133+
-webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
134+
mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
135+
}
125136

126137
.date-badge {
127138
font-size: 0.6rem;
@@ -142,6 +153,17 @@ body {
142153
}
143154
}
144155

156+
// content
157+
158+
body {
159+
margin: 0.5rem;
160+
min-width: 300px;
161+
}
162+
163+
#wrapper {
164+
width: 100%;
165+
}
166+
145167
// header
146168

147169
#header {
@@ -184,12 +206,16 @@ body {
184206
// resume
185207

186208
#resume {
209+
display: flex;
210+
flex-wrap: wrap;
211+
187212
box-shadow: 0 2px 6px $box-color;
188213
background-color: white;
189214
padding: 0.5rem 0;
190215

191216
& > * {
192217
padding: 0.5rem;
218+
width: 100%;
193219
}
194220

195221
& > * > * {
@@ -493,19 +519,71 @@ body {
493519
}
494520
}
495521

522+
// education
523+
496524
#education {
497525
.timeline-item-date {
498526
width: 70px;
499527
}
528+
529+
.timeline-item-title {
530+
font-size: 1.1rem;
531+
}
500532
}
501533

534+
// projects
535+
502536
#projects {
503-
ul {
504-
margin-left: 0.5rem;
537+
.flex-list {
538+
flex-direction: column;
505539
}
540+
}
506541

542+
// languages
543+
544+
#languages {
507545
.flex-list {
508-
flex-direction: column;
546+
flex-direction: row;
547+
flex-wrap: wrap;
548+
justify-content: space-around;
549+
margin-top: 0.5rem;
550+
}
551+
552+
.language {
553+
width: 45%;
554+
margin: 0 0.5rem;
555+
margin-top: 0.5rem;
556+
text-align: center;
557+
558+
.title {
559+
font-size: 1rem;
560+
text-align: center;
561+
text-transform: none;
562+
}
563+
564+
.level {
565+
font-size: 0.75rem;
566+
text-align: center;
567+
padding: 0 10px;
568+
font-weight: 700;
569+
white-space: nowrap;
570+
margin-top: 0.5rem;
571+
}
572+
573+
.hieroglyphic {
574+
text-indent: 100%;
575+
white-space: nowrap;
576+
overflow: hidden;
577+
background-image: url("/public/images/mdw-ntr.png");
578+
background-repeat: no-repeat;
579+
background-size: contain;
580+
font-size: 1em;
581+
background-position: 45%;
582+
}
583+
584+
.pie {
585+
width: 100px;
586+
}
509587
}
510588
}
511589

@@ -562,6 +640,15 @@ body {
562640
}
563641
}
564642

643+
@media screen and (min-width: 525px) {
644+
645+
#languages {
646+
.language {
647+
width: auto;
648+
}
649+
}
650+
}
651+
565652
@media screen and (min-width: 650px) {
566653

567654
.section-full > .title {

0 commit comments

Comments
 (0)