fix: formatting (editorconfig)

+ hack to convert resumes to be paginable
This commit is contained in:
Laureηt 2021-05-21 16:54:45 +02:00
parent 44a10b45d6
commit a84b50bd3a
12 changed files with 310 additions and 272 deletions

12
.editorconfig Normal file
View file

@ -0,0 +1,12 @@
# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

View file

@ -1,13 +1,13 @@
{ {
"name": "site_perso", "name": "site_perso",
"version": "1.0.1", "version": "1.0.1",
"main": "index.js", "main": "index.js",
"license": "MIT", "license": "MIT",
"devDependencies": { "devDependencies": {
"@11ty/eleventy": "^0.12.1", "@11ty/eleventy": "^0.12.1",
"@11ty/eleventy-navigation": "^0.2.0" "@11ty/eleventy-navigation": "^0.2.0"
}, },
"dependencies": { "dependencies": {
"chaffle": "^2.1.0" "chaffle": "^2.1.0"
} }
} }

View file

@ -2,26 +2,42 @@
background: #c0c5ce; background: #c0c5ce;
color: #1c1f26; color: #1c1f26;
} }
*::-moz-selection { *::-moz-selection {
background: #c0c5ce; background: #c0c5ce;
color: #1c1f26; color: #1c1f26;
} }
*::-webkit-selection { *::-webkit-selection {
background: #c0c5ce; background: #c0c5ce;
color: #1c1f26; color: #1c1f26;
} }
@keyframes blink { @keyframes blink {
0% { opacity: 1.0; } 0% {
50% { opacity: 0.0; } opacity: 1.0;
100% { opacity: 1.0; } }
50% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
} }
@-webkit-keyframes blink { @-webkit-keyframes blink {
0% { opacity: 1.0; } 0% {
50% { opacity: 0.0; } opacity: 1.0;
100% { opacity: 1.0; } }
50% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
} }
.blink { .blink {
animation: blink 1s step-start 0s infinite; animation: blink 1s step-start 0s infinite;
-webkit-animation: blink 1.5s step-start 0s infinite; -webkit-animation: blink 1.5s step-start 0s infinite;
} }

View file

@ -2,7 +2,8 @@
scrollbar-color: #202324 #454a4d; scrollbar-color: #202324 #454a4d;
} }
html, body { html,
body {
background-color: #232830; background-color: #232830;
} }
@ -15,7 +16,8 @@ body {
padding: 1em; padding: 1em;
} }
body, a { body,
a {
color: #c0c5ce; color: #c0c5ce;
} }
@ -41,7 +43,8 @@ h1 {
margin-bottom: .7em; margin-bottom: .7em;
} }
ol, ul { ol,
ul {
margin: .7em 0 0 1.4em; margin: .7em 0 0 1.4em;
} }
@ -77,7 +80,7 @@ footer {
} }
.btn-back span { .btn-back span {
display:inline-block; display: inline-block;
transform: scale(2.5); transform: scale(2.5);
translate: -.2em -.1em; translate: -.2em -.1em;
} }
@ -86,7 +89,8 @@ footer {
body { body {
font-size: 17px; font-size: 17px;
} }
ol, ul { ol,
ul {
padding-left: 17px; padding-left: 17px;
} }
} }
@ -98,13 +102,13 @@ video {
margin: 0 auto; margin: 0 auto;
} }
header > ul { header>ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 1em 0 0 0; margin: 1em 0 0 0;
} }
header > ul > li { header>ul>li {
display: inline; display: inline;
margin-right: .5em; margin-right: .5em;
} }

View file

@ -23,11 +23,11 @@ ul {
padding-left: 1em; padding-left: 1em;
} }
section > ul { section>ul {
padding-left: 2em; padding-left: 2em;
} }
.timeline > li { .timeline>li {
margin: 0; margin: 0;
} }
@ -50,7 +50,7 @@ small {
vertical-align: middle; vertical-align: middle;
} }
h1 > small { h1>small {
font-size: .45em; font-size: .45em;
} }
@ -58,12 +58,13 @@ section {
padding-left: 1em; padding-left: 1em;
} }
section > p { section>p {
padding-left: 1em; padding-left: 1em;
margin: 0; margin: 0;
margin-bottom: 0.2em; margin-bottom: 0.2em;
} }
section > h3 {
section>h3 {
margin-bottom: .3em; margin-bottom: .3em;
} }
@ -71,7 +72,7 @@ section > h3 {
padding-left: 1em; padding-left: 1em;
} }
.project-links > a { .project-links>a {
padding-left: .3em; padding-left: .3em;
text-decoration: none; text-decoration: none;
} }
@ -93,37 +94,35 @@ h2 {
@media print { @media print {
@page { @page {
size: auto; size: auto;
margin: 0; margin: 0;
} }
body,
body, html { html {
background-color: white !important; background-color: white !important;
color: black; color: black;
max-width: 100%; max-width: 100%;
color-adjust: exact !important; color-adjust: exact !important;
-webkit-print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important;
} }
body { body {
margin: 2em; margin: 2em;
font-size: 13px; font-size: 13px;
} }
li.event { li.event {
border-left: 2px black solid; border-left: 2px black solid;
} }
.tag { .tag {
font-size: 10px; font-size: 10px;
} }
a { a {
color: black; color: black;
text-decoration: none; text-decoration: none;
} }
header,
header, footer, .btn-back, a.fa { footer,
.btn-back,
a.fa {
display: none; display: none;
} }
} }

View file

@ -11,6 +11,5 @@ eleventyNavigation:
<p id="shs">Flyer:</p> <p id="shs">Flyer:</p>
<img src="{{ '/content/2021-01-16-flyer.png' | url }}" width="100%"> <img src="{{ '/content/2021-01-16-flyer.png' | url }}" width="100%">
<p id="shs">Video presentation:</p> <p id="shs">Video presentation:</p>
<video src="{{ '/content/2021-01-16-video.mp4' | url }}" width="1080" height="720" controls></video> <video src="{{ '/content/2021-01-16-video.mp4' | url }}" width="1080" height="720" controls></video>

View file

@ -11,4 +11,4 @@ eleventyNavigation:
<video src="{{ '/content/2020-11-06-v1.mp4' | url }}" width="1080" height="720" controls></video> <video src="{{ '/content/2020-11-06-v1.mp4' | url }}" width="1080" height="720" controls></video>
<p id="jap">Japanese Version:</p> <p id="jap">Japanese Version:</p>
<video src="{{ '/content/2020-12-19-v1.mp4' | url }}" width="1080" height="720" controls></video> <video src="{{ '/content/2020-12-19-v1.mp4' | url }}" width="1080" height="720" controls></video>

View file

@ -12,19 +12,23 @@ eleventyNavigation:
<h1>Socials & Contacts</h1> <h1>Socials & Contacts</h1>
<p>You can email me at :</p> <p>You can email me at :</p>
<ul> <ul>
<li> <li>
<a href="mailto:laurentfainsin@protonmail.com"> <a href="mailto:laurentfainsin@protonmail.com">
laurentfainsin@protonmail.com laurentfainsin@protonmail.com
</a> </a>
</li> </li>
<li> <li>
<a href="mailto:laurent.fainsin@etu.inp-n7.fr"> <a href="mailto:laurent.fainsin@etu.inp-n7.fr">
laurent.fainsin@etu.inp-n7.fr laurent.fainsin@etu.inp-n7.fr
</a> </a>
</li> </li>
</ul> </ul>
<p>You can reach me via :</p> <p>You can reach me via :</p>
<ul> <ul>
<li><a href="https://matrix.to/#/@fainsil:inpt.fr">Matrix.to</a></li> <li>
<li><a href="https://www.linkedin.com/in/laurent-fainsin/">LinkedIn</a></li> <a href="https://matrix.to/#/@fainsil:inpt.fr">Matrix.to</a>
</li>
<li>
<a href="https://www.linkedin.com/in/laurent-fainsin/">LinkedIn</a>
</li>
</ul> </ul>

View file

@ -6,4 +6,4 @@ eleventyNavigation:
order: 2 order: 2
url: /resume/en/ url: /resume/en/
permalink: false permalink: false
--- ---

View file

@ -5,9 +5,9 @@ eleventyNavigation:
title: Hobbies title: Hobbies
order: 4 order: 4
--- ---
<h1>Sports</h1> <h1>Sports</h1>
<p>I try to experience as much of them as I can when I have the opportunity, though for the moment I've mainly did Climbing and Archery. I had to stop doing sports during my Prépa because of the lack of time, but now that this is over I will do my best to improve my shape.</p> <p>I try to experience as much of them as I can when I have the opportunity, though for the moment I've mainly did Climbing and Archery. I had to stop doing sports during my Prépa because of the lack of time, but now that this is over I will do my best to improve my shape.</p>
<h1>Hobbies</h1> <h1>Hobbies</h1>
<p>Obviously I love Computer Science since I decided to go in an engineering school specialized in it. Despite this I also like to fiddle around with electronics and to fool around on the internet. However I reassure you, I also like calm activities like taking care of my beloved aquarium and plants.</p> <p>Obviously I love Computer Science since I decided to go in an engineering school specialized in it. Despite this I also like to fiddle around with electronics and to fool around on the internet. However I reassure you, I also like calm activities like taking care of my beloved aquarium and plants.</p>

View file

@ -10,19 +10,23 @@ layout: layout.njk
<h1 data-chaffle="en">./contact</h1> <h1 data-chaffle="en">./contact</h1>
<p>You can email me at :</p> <p>You can email me at :</p>
<ul> <ul>
<li> <li>
<a href="mailto:laurentfainsin@protonmail.com"> <a href="mailto:laurentfainsin@protonmail.com">
laurentfainsin@protonmail.com laurentfainsin@protonmail.com
</a> </a>
</li> </li>
<li> <li>
<a href="mailto:laurent.fainsin@etu.inp-n7.fr"> <a href="mailto:laurent.fainsin@etu.inp-n7.fr">
laurent.fainsin@etu.inp-n7.fr laurent.fainsin@etu.inp-n7.fr
</a> </a>
</li> </li>
</ul> </ul>
<p>You can reach me via :</p> <p>You can reach me via :</p>
<ul> <ul>
<li><a href="https://matrix.to/#/@fainsil:inpt.fr">Matrix.to</a></li> <li>
<li><a href="https://www.linkedin.com/in/laurent-fainsin/">LinkedIn</a></li> <a href="https://matrix.to/#/@fainsil:inpt.fr">Matrix.to</a>
</ul> </li>
<li>
<a href="https://www.linkedin.com/in/laurent-fainsin/">LinkedIn</a>
</li>
</ul>

View file

@ -2,237 +2,237 @@
username: Laureηt username: Laureηt
pagination: pagination:
data: resumes data: resumes
before: (data) => data.map(locale => Object.values(locale)).flat()
size: 1 size: 1
alias: resume alias: resume
resolve: values
permalink: "resume/{{ resume.locale }}/index.html" permalink: "resume/{{ resume.locale }}/index.html"
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ resume.locale }}"> <html lang="{{ resume.locale }}">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ username }}</title> <title>{{ username }}</title>
<link rel="stylesheet" href="{{ '/css/main.css' | url }}"> <link rel="stylesheet" href="{{ '/css/main.css' | url }}">
<link rel="stylesheet" href="{{ '/css/resume.css' | url }}"> <link rel="stylesheet" href="{{ '/css/resume.css' | url }}">
<link rel="stylesheet" href="{{ '/css/blink.css' | url }}"> <link rel="stylesheet" href="{{ '/css/blink.css' | url }}">
<link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.ico' | url }}"> <link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.ico' | url }}">
<script src="{{ '/javascript/chaffle.min.js' | url }}"></script> <script src="{{ '/javascript/chaffle.min.js' | url }}"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/devicon/2.6/devicon.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/devicon/2.6/devicon.min.css" rel="stylesheet">
</head> </head>
<body> <body>
<header style="position: relative;"> <header style="position: relative;">
<span data-chaffle-onload="" data-chaffle="en">{{ username }}</span> <span data-chaffle-onload="" data-chaffle="en">{{ username }}</span>
<span class="blink" style="display:inline;">_</span> <span class="blink" style="display:inline;">_</span>
{% for pageKey in pagination.pages %} {% for pageKey in pagination.pages %}
{% if page.url != pagination.hrefs[loop.index - 1] %} {% if page.url != pagination.hrefs[loop.index - 1] %}
<a style="right: 0px; position: absolute;" href="{{ pagination.hrefs[loop.index-1] | url }}">{{ pageKey[0].username }} <a style="right: 0px; position: absolute;" href="{{ pagination.hrefs[loop.index-1] | url }}">{{ pageKey[0].username }}
<span class="{{ resumes[loop.index-1].flag_icon }}"></span><span style="text-transform:uppercase;">{{ resumes[loop.index-1].locale }}</span> <span class="{{ resumes[loop.index-1].flag_icon }}"></span><span style="text-transform:uppercase;">{{ resumes[loop.index-1].locale }}</span>
</a> </a>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</header> </header>
<div class="row"> <div class="row">
<div class="col-1"> <div class="col-1">
<h1>{{ resume.name }} <h1>{{ resume.name }}
<small>({{ resume.info.label }})</small> <small>({{ resume.info.label }})</small>
</h1> </h1>
<p>{{ resume.info.about }}</p> <p>{{ resume.info.about }}</p>
<hr> <hr>
<h2>{{ resume.school_projects_title }}</h2> <h2>{{ resume.school_projects_title }}</h2>
{% for project in resume.school_projects %} {% for project in resume.school_projects %}
<section> <section>
<h3>{{ project.title }}</h3> <h3>{{ project.title }}</h3>
<p>{{ project.description }}</p> <p>{{ project.description }}</p>
<div class="project-links">
{% if project.pdf %}
<a class="fa fa-file-pdf-o" href="{{ project.pdf }}"></a>
{% endif %}
{% if project.repo %}
<a class="fa fa-gitlab" href="{{ project.repo }}"></a>
{% endif %}
</div>
</section>
{% endfor %}
<hr>
<h2>{{ resume.personnal_projects_title }}</h2>
{% for project in resume.personnal_projects %}
<section>
<h3>{{ project.title }}</h3>
<p>{{ project.description }}</p>
<div class="project-links">
{% if project.pdf %}
<a class="fa fa-file-pdf-o" href="{{ project.pdf }}"></a>
{% endif %}
{% if project.repo %}
<a class="fa fa-gitlab" href="{{ project.repo }}"></a>
{% endif %}
</div>
</section>
{% endfor %}
<hr>
<h2>{{ resume.reading_title }}</h2>
<ul>
{% for read in resume.reading %}
<li>
<a href="{{ read.url }}">{{ read.title | safe }}</a>
</li>
{% endfor %}
</ul>
<hr>
<h2>{{ resume.interests_title }}</h2>
{% for interest in resume.interests %}
<section>
<h3>{{ interest.name }}</h3>
<p>{{ interest.summary }}</p>
<ul>
{% for tag in interest.tags %}
<li class="tag">{{ tag }}</li>
{% endfor %}
</ul>
</section>
{% endfor %}
<div class="project-links">
{% if project.pdf %}
<a class="fa fa-file-pdf-o" href="{{ project.pdf }}"></a>
{% endif %}
{% if project.repo %}
<a class="fa fa-gitlab" href="{{ project.repo }}"></a>
{% endif %}
</div> </div>
</section>
{% endfor %}
<div class="col-2"> <hr>
<h2>{{ resume.contacts_title }}</h2>
<ul>
{% for contact in resume.contacts %}
<li>
<span class="{{ contact.icon }}"></span>
<a href="{{ contact.url }}">{{ contact.contact }}</a>
</li>
{% endfor %}
</ul>
<hr>
<h2>{{ resume.socials_title }}</h2>
<ul>
{% for social in resume.socials %}
<li>
<span class="{{social.icon}}"></span>
<a href="{{social.url}}">{{social.network}}</a>
</li>
{% endfor %}
</ul>
<hr>
<h2>{{ resume.education_title }}</h2>
<ul class="timeline">
<span class="arrow-up"></span>
<li class="event"></li>
{% for edu in resume.education.history %}
{% if edu.end != resume.education.history[loop.index - 2].start %}
{% if loop.index != 1 %}
<li class="event"></li>
{% endif %}
<li class="year">{{ edu.end }}</li>
{% endif %}
<li class="event">
{{ edu.title }}<br>
<a href="{{ edu.url }}">{{ edu.institution }}</a>
<br>{{ edu.eqv }}
</li>
<li class="year">{{ edu.start }}</li>
{% endfor %}
<li class="event"></li>
</ul>
<hr>
<h2>{{ resume.skills_title }}</h2>
<ul>
{% for skill in resume.skills %}
<li>
{{ skill.name }}
{% if skill.level %}
<small> ({{ skill.level }}) </small>
{% endif %}
<ul>
{% for tag in skill.tags %}
<li class="tag">{{ tag }}</li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
<hr>
<h2>{{ resume.languages_title }}</h2>
<ul>
{% for lang in resume.languages %}
<li>
<span class="{{ lang.icon }}"></span>
{{ lang.language }}
<small>({{ lang.level }})</small>
</li>
{% endfor %}
</ul>
<h2>{{ resume.personnal_projects_title }}</h2>
{% for project in resume.personnal_projects %}
<section>
<h3>{{ project.title }}</h3>
<p>{{ project.description }}</p>
<div class="project-links">
{% if project.pdf %}
<a class="fa fa-file-pdf-o" href="{{ project.pdf }}"></a>
{% endif %}
{% if project.repo %}
<a class="fa fa-gitlab" href="{{ project.repo }}"></a>
{% endif %}
</div> </div>
</div> </section>
{% endfor %}
<div class="btn-back"> <hr>
<span>&laquo;</span>
<a href="{{ '/' | url }}">{{ resume.go_back }}</a>
</div>
<footer> <h2>{{ resume.reading_title }}</h2>
<ul>
{% for read in resume.reading %}
<li>
<a href="{{ read.url }}">{{ read.title | safe }}</a>
</li>
{% endfor %}
</ul>
<hr>
<h2>{{ resume.interests_title }}</h2>
{% for interest in resume.interests %}
<section>
<h3>{{ interest.name }}</h3>
<p>{{ interest.summary }}</p>
<ul>
{% for tag in interest.tags %}
<li class="tag">{{ tag }}</li>
{% endfor %}
</ul>
</section>
{% endfor %}
</div>
<div class="col-2">
<h2>{{ resume.contacts_title }}</h2>
<ul>
{% for contact in resume.contacts %}
<li>
<span class="{{ contact.icon }}"></span>
<a href="{{ contact.url }}">{{ contact.contact }}</a>
</li>
{% endfor %}
</ul>
<hr>
<h2>{{ resume.socials_title }}</h2>
<ul>
{% for social in resume.socials %}
<li>
<span class="{{social.icon}}"></span>
<a href="{{social.url}}">{{social.network}}</a>
</li>
{% endfor %}
</ul>
<hr>
<h2>{{ resume.education_title }}</h2>
<ul class="timeline">
<span class="arrow-up"></span>
<li class="event"></li>
{% for edu in resume.education.history %}
{% if edu.end != resume.education.history[loop.index - 2].start %}
{% if loop.index != 1 %}
<li class="event"></li>
{% endif %}
<li class="year">{{ edu.end }}</li>
{% endif %}
<li class="event">
{{ edu.title }}<br>
<a href="{{ edu.url }}">{{ edu.institution }}</a>
<br>{{ edu.eqv }}
</li>
<li class="year">{{ edu.start }}</li>
{% endfor %}
<li class="event"></li>
</ul>
<hr>
<h2>{{ resume.skills_title }}</h2>
<ul>
{% for skill in resume.skills %}
<li>
{{ skill.name }}
{% if skill.level %}
<small> ({{ skill.level }}) </small>
{% endif %}
<ul>
{% for tag in skill.tags %}
<li class="tag">{{ tag }}</li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
<hr>
<h2>{{ resume.languages_title }}</h2>
<ul>
{% for lang in resume.languages %}
<li>
<span class="{{ lang.icon }}"></span>
{{ lang.language }}
<small>({{ lang.level }})</small>
</li>
{% endfor %}
</ul>
</div>
</div>
<div class="btn-back">
<span>&laquo;</span>
<a href="{{ '/' | url }}">{{ resume.go_back }}</a>
</div>
<footer>
&copy; {% year %} &copy; {% year %}
{{ username }} {{ username }}
</footer> </footer>
<script> <script>
var elm_mouseover = document.querySelectorAll('[data-chaffle]'); var elm_mouseover = document.querySelectorAll('[data-chaffle]');
var elm_onload = document.querySelectorAll('[data-chaffle-onLoad]'); var elm_onload = document.querySelectorAll('[data-chaffle-onLoad]');
Array Array
.prototype .prototype
.forEach .forEach
.call(elm_mouseover, function (el) { .call(elm_mouseover, function (el) {
var chaffle = new Chaffle(el) var chaffle = new Chaffle(el)
el.addEventListener('mouseover', function () { el.addEventListener('mouseover', function () {
chaffle.init(); chaffle.init();
}); });
}); });
Array Array
.prototype .prototype
.forEach .forEach
.call(elm_onload, function (el) { .call(elm_onload, function (el) {
var chaffle = new Chaffle(el) var chaffle = new Chaffle(el)
chaffle.init(); chaffle.init();
setInterval(function () { setInterval(function () {
chaffle.init(); chaffle.init();
}, 10000) }, 10000)
}); });
</script> </script>
</body> </body>
</html> </html>