Laurent/personal-website-old
Archived
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: reworked the layout system

Browse source 
feat: css now inline to improve performance
feat: now using 11ty 1.0.0-beta to use addGlobalData
This commit is contained in:
Laureηt 2021-10-10 18:29:22 +02:00
parent 0c434960b5
commit fa485e220d
No known key found for this signature in database
GPG key ID: D88C6B294FD40994
12 changed files with 503 additions and 612 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.eleventy.js
View file

@ -11,6 +11,7 @@ const markdownLib = markdownIt(options).use(markdownItAttrs);
module.exports = function (eleventyConfig) { module.exports = function (eleventyConfig) {
eleventyConfig.addGlobalData("username", "Laureηt");
eleventyConfig.addPlugin(pluginNavigation); eleventyConfig.addPlugin(pluginNavigation);
eleventyConfig.setLibrary("md", markdownLib); eleventyConfig.setLibrary("md", markdownLib);
eleventyConfig.addWatchTarget("./src/scss/"); eleventyConfig.addWatchTarget("./src/scss/");

2
.gitignore vendored
View file

@ -1,5 +1,7 @@
node_modules/ node_modules/
_site/ _site/
content/ content/
src/_includes/css
*.log *.log

6
package.json
View file

@ -4,15 +4,15 @@
"author": "Laureηt <laurentfainsin@protonmail.com>", "author": "Laureηt <laurentfainsin@protonmail.com>",
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
"watch:sass": "sass --no-source-map --watch src/scss:_site/css", "watch:sass": "sass --no-source-map --watch src/scss:src/_includes/css",
"watch:eleventy": "eleventy --serve", "watch:eleventy": "eleventy --serve",
"build:sass": "sass --no-source-map --style compressed src/scss:_site/css", "build:sass": "sass --no-source-map --style compressed src/scss:src/_includes/css",
"build:eleventy": "ELEVENTY_ENV=prod eleventy", "build:eleventy": "ELEVENTY_ENV=prod eleventy",
"start": "npm-run-all build:sass --parallel watch:*", "start": "npm-run-all build:sass --parallel watch:*",
"build": "npm-run-all build:sass build:eleventy" "build": "npm-run-all build:sass build:eleventy"
}, },
"dependencies": { "dependencies": {
"@11ty/eleventy": "^0.12.1", "@11ty/eleventy": "^1.0.0-beta.2",
"@11ty/eleventy-navigation": "^0.2.0", "@11ty/eleventy-navigation": "^0.2.0",
"chaffle": "^2.1.0", "chaffle": "^2.1.0",
"html-minifier": "^4.0.0", "html-minifier": "^4.0.0",

25
src/_includes/chaffle.njk
View file

@ -1,25 +0,0 @@
<script>
var elm_mouseover = document.querySelectorAll('[data-chaffle]');
var elm_onload = document.querySelectorAll('[data-chaffle-onLoad]');
Array
.prototype
.forEach
.call(elm_mouseover, function (el) {
var chaffle = new Chaffle(el)
el.addEventListener('mouseover', function () {
chaffle.init();
});
});
Array
.prototype
.forEach
.call(elm_onload, function (el) {
var chaffle = new Chaffle(el)
chaffle.init();
setInterval(function () {
chaffle.init();
}, 10000)
});
</script>

10
src/_includes/eportfolio.njk
View file

@ -1,10 +1,8 @@
--- {% extends "layout.njk" %}
layout: layout.njk
---
{% block head %} {% block style %}
<link rel="stylesheet" href="{{ '/css/eportfolio.css' | url }}"> {% include "css/eportfolio.css" %}
{% endblock head %} {% endblock style %}
{% block precontent %} {% block precontent %}
<nav class="11ty-nav" role="navigation"> <nav class="11ty-nav" role="navigation">

4
src/_includes/footer.njk
View file

@ -1,4 +0,0 @@
<footer role="contentinfo">
&copy; {% year %}
{{ username }}
</footer>

7
src/_includes/head.njk
View file

@ -1,7 +0,0 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ username }}</title>
<link rel="stylesheet" href="{{ '/css/style.css' | url }}">
<link rel="stylesheet" href="{{ '/css/anim.css' | url }}">
<link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.png' | url }}">
<script src="{{ '/javascript/chaffle.min.js' | url }}"></script>

4
src/_includes/header.njk
View file

@ -1,4 +0,0 @@
<header role="banner">
<span data-chaffle-onload="" data-chaffle="en">{{ username }}</span>
<i class="blink">_</i>
</header>

59
src/_includes/layout.njk
View file

@ -1,26 +1,69 @@
---
username: Laureηt
---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
{% include "head.njk" %} <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.png' | url }}">
<script src="{{ '/javascript/chaffle.min.js' | url }}"></script>
<title>{{ username }}</title>
{% block head %}{% endblock head %} {% block head %}{% endblock head %}
<style>
{% include "css/style.css" %}
{% include "css/anim.css" %}
{% block style %}
{% endblock style %}
</style>
</head> </head>
<body> <body>
{% include "header.njk" %} <header role="banner">
<div id="username">
<span data-chaffle-onload="" data-chaffle="en">{{ username }}</span>
<i class="blink">_</i>
</div>
{% block header %}{% endblock header %}
</header>
{% block precontent %}{% endblock precontent %} {% block precontent %}{% endblock precontent %}
<main role="main"> <main role="main">
{% block content %}{% endblock content %}
{{ content | safe }} {{ content | safe }}
</main> </main>
{% block postcontent %}{% endblock postcontent %} {% block postcontent %}{% endblock postcontent %}
{% include "footer.njk" %}
<footer role="contentinfo">
&copy; {% year %}
{{ username }}
</footer>
{% block foot %}{% endblock foot %} {% block foot %}{% endblock foot %}
{% include "chaffle.njk" %} <script>
var elm_mouseover = document.querySelectorAll('[data-chaffle]');
var elm_onload = document.querySelectorAll('[data-chaffle-onLoad]');
Array
.prototype
.forEach
.call(elm_mouseover, function (el) {
var chaffle = new Chaffle(el)
el.addEventListener('mouseover', function () {
chaffle.init();
});
});
Array
.prototype
.forEach
.call(elm_onload, function (el) {
var chaffle = new Chaffle(el)
chaffle.init();
setInterval(function () {
chaffle.init();
}, 10000)
});
</script>
</body> </body>
</html> </html>

373
src/resume/resume.njk
View file

@ -1,5 +1,4 @@
--- ---
username: Laureηt
pagination: pagination:
data: resumes data: resumes
size: 1 size: 1
@ -8,233 +7,193 @@ pagination:
permalink: "resume/{{ resume.locale }}/index.html" permalink: "resume/{{ resume.locale }}/index.html"
--- ---
<!DOCTYPE html> {% extends "layout.njk" %}
<html lang="{{ resume.locale }}">
<head> {% block head %}
<meta charset="UTF-8"> <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">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css" rel="stylesheet">
<title>{{ username }}</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/devicon/2.6/devicon.min.css" rel="stylesheet">
<link rel="stylesheet" href="{{ '/css/style.css' | url }}"> <base target="_blank">
<link rel="stylesheet" href="{{ '/css/resume.css' | url }}"> {% endblock head %}
<link rel="stylesheet" href="{{ '/css/anim.css' | url }}">
<link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.png' | url }}">
<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 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">
<base target="_blank">
</head>
<body> {% block style %}
{% include "css/resume.css" %}
{% endblock style %}
<header style="position: relative;"> {% block header %}
<span data-chaffle-onload="" data-chaffle="en">{{ username }}</span> {% for pageKey in pagination.pages %}
<span class="blink" style="display:inline;">_</span> {% if pageKey.locale != resume.locale %}
<a href="{{ pagination.hrefs[loop.index-1] | url }}" target="_self">
<span class="{{ pageKey.flag_icon }}"></span><span style="text-transform:uppercase;">{{ pageKey.locale }}</span>
</a>
{% endif %}
{% endfor %}
{% endblock header %}
{% for pageKey in pagination.pages %} {% block content %}
{% if pageKey.locale != resume.locale %} <div class="row">
<a style="right: 0px; position: absolute;" href="{{ pagination.hrefs[loop.index-1] | url }}" target="_self"> <div class="col-1">
<span class="{{ pageKey.flag_icon }}"></span><span style="text-transform:uppercase;">{{ pageKey.locale }}</span>
</a> <h1>{{ resume.name }}
{% endif %} <small>({{ resume.info.label }})</small>
</h1>
<p>{{ resume.info.about }}</p>
<hr>
<h2>{{ resume.school_projects_title }}</h2>
{% for project in resume.school_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-git" href="{{ project.repo }}"></a>
{% endif %}
</div>
</section>
{% endfor %} {% endfor %}
</header>
<div class="row"> <hr>
<div class="col-1">
<h1>{{ resume.name }} <h2>{{ resume.personnal_projects_title }}</h2>
<small>({{ resume.info.label }})</small> {% for project in resume.personnal_projects %}
</h1> <section>
<p>{{ resume.info.about }}</p> <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-git" href="{{ project.repo }}"></a>
{% endif %}
</div>
</section>
{% endfor %}
<hr> <hr>
<h2>{{ resume.school_projects_title }}</h2> <h2>{{ resume.reading_title }}</h2>
{% for project in resume.school_projects %} <ul>
<section> {% for read in resume.reading %}
<h3>{{ project.title }}</h3> <li>
<p>{{ project.description }}</p> <a href="{{ read.url }}">{{ read.title | safe }}</a>
</li>
{% endfor %}
</ul>
<div class="project-links"> <hr>
{% if project.pdf %}
<a class="fa fa-file-pdf-o" href="{{ project.pdf }}"></a> <h2>{{ resume.interests_title }}</h2>
{% endif %} {% for interest in resume.interests %}
{% if project.repo %} <section>
<a class="fa fa-git" href="{{ project.repo }}"></a> <h3>{{ interest.name }}</h3>
{% endif %} <p>{{ interest.summary }}</p>
</div> <ul>
</section> {% 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 %} {% endfor %}
<hr> <li class="event"></li>
</ul>
<h2>{{ resume.personnal_projects_title }}</h2> <hr>
{% 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-git" href="{{ project.repo }}"></a>
{% endif %}
</div>
</section>
{% endfor %}
<hr> <h2>{{ resume.skills_title }}</h2>
<ul>
<h2>{{ resume.reading_title }}</h2> {% for skill in resume.skills %}
<ul> <li>
{% for read in resume.reading %} {{ skill.name }}
<li> {% if skill.level %}
<a href="{{ read.url }}">{{ read.title | safe }}</a> <small> ({{ skill.level }}) </small>
</li> {% endif %}
{% endfor %}
</ul>
<hr>
<h2>{{ resume.interests_title }}</h2>
{% for interest in resume.interests %}
<section>
<h3>{{ interest.name }}</h3>
<p>{{ interest.summary }}</p>
<ul> <ul>
{% for tag in interest.tags %} {% for tag in skill.tags %}
<li class="tag">{{ tag }}</li> <li class="tag">{{ tag }}</li>
{% endfor %} {% endfor %}
</ul> </ul>
</section> </li>
{% endfor %} {% endfor %}
</ul>
</div> <hr>
<div class="col-2"> <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.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>
</div>
{% endblock content %}
<div class="btn-back"> {% block postcontent %}
<span>&laquo;</span> <nav id="btn-back" role="navigation">
<a href="{{ '/' | url }}" target="_self">{{ resume.go_back }}</a> <i>&laquo;</i>
</div> <a href="{{ '/' | url }}">Go back</a>
</nav>
<footer> {% endblock postcontent %}
&copy; {% year %}
{{ username }}
</footer>
<script>
var elm_mouseover = document.querySelectorAll('[data-chaffle]');
var elm_onload = document.querySelectorAll('[data-chaffle-onLoad]');
Array
.prototype
.forEach
.call(elm_mouseover, function (el) {
var chaffle = new Chaffle(el)
el.addEventListener('mouseover', function () {
chaffle.init();
});
});
Array
.prototype
.forEach
.call(elm_onload, function (el) {
var chaffle = new Chaffle(el)
chaffle.init();
setInterval(function () {
chaffle.init();
}, 10000)
});
</script>
</body>
</html>

5
src/scss/resume.scss
View file

@ -3,6 +3,11 @@ body {
width: 80rem; width: 80rem;
} }
header {
display: flex;
justify-content: space-between;
}
h1, h1,
h2 { h2 {
height: auto; height: auto;

619
yarn.lock
View file

File diff suppressed because it is too large Load diff