TheThomaas/11ty-resume
1
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

Compare commits

base: TheThomaas:3dd73a0477f024f7c6ea02c44f97b0ffc71e614e
Branches Tags
TheThomaas:main
...
compare: TheThomaas:333df357098127f1736848aae22bd13b0d6b770d
Branches Tags
TheThomaas:main

8 commits
3dd73a0477 ... 333df35709

Author SHA1 Message Date
TheThomaas 333df35709 Start new CSS colors 2024-02-04 22:52:46 +01:00
TheThomaas 5fe69fe18c Clean file 2024-02-04 22:52:18 +01:00
TheThomaas 12a4ca7989 Remove placeholder content from experiences 2024-02-04 22:52:03 +01:00
TheThomaas 2c9dd97216 Rework pages templates 2024-02-04 22:51:38 +01:00
TheThomaas 8b2fb3095d Add default order to projects 2024-02-04 22:51:08 +01:00
TheThomaas 115f9b3b01 Update CSS 2024-02-04 22:50:54 +01:00
TheThomaas 9bf5ff1e92 clean templates 2024-02-04 22:50:28 +01:00
TheThomaas a7bb324de9 Add contact email adress 2024-02-04 22:50:10 +01:00
28 changed files with 213 additions and 175 deletions
Show stats Expand all files Collapse all files

20
.eleventy.js
View file

@ -7,28 +7,22 @@ module.exports = config => {
config.addLayoutAlias('base', 'layouts/base.html'); config.addLayoutAlias('base', 'layouts/base.html');
config.addCollection("subpages", (collectionApi) => { config.addCollection("subpages", (collectionApi) => {
// const sections = collectionApi.getFilteredByTag( "subpage" )
const sections = collectionApi.getFilteredByGlob("./src/pages/subpages/**") const sections = collectionApi.getFilteredByGlob("./src/pages/subpages/**")
.sort((a, b) => a.data.pageOrderId - b.data.pageOrderId); .sort((a, b) => a.data.order - b.data.order);
process.env.DEBUG && console.log(inspect(sections)); process.env.DEBUG && console.log(inspect(sections));
return sections; return sections;
}); });
config.addCollection("projects", (collectionApi) => { config.addCollection("projects", (collectionApi) => {
// const sections = collectionApi.getFilteredByTag( "subpage" ) const projects = collectionApi.getFilteredByGlob("./src/projects/**")
const sections = collectionApi.getFilteredByGlob("./src/projects/**") .sort((a, b) => a.data.order - b.data.order);
.sort((a, b) => a.data.pageOrderId - b.data.pageOrderId); process.env.DEBUG && console.log(inspect(projects));
process.env.DEBUG && console.log(inspect(sections)); return projects;
return sections;
}); });
// config.addCollection('projects', collection => {
// return [...collection.getFilteredByGlob('./src/projects/*.md')].reverse();
// });
config.addCollection('experiences', collection => { config.addCollection('experiences', collection => {
return [...collection.getFilteredByGlob('./src/experiences/*.md')].reverse(); return [...collection.getFilteredByGlob('./src/experiences/*.md')]
.sort((a, b) => a.data.startDate - b.data.startDate).reverse();
}); });
return { return {

2
src/_data/author.json
View file

@ -1,6 +1,6 @@
{ {
"name": "Thomas", "name": "Thomas",
"mail": "", "mail": "thomas@amstutz.it",
"phone": "", "phone": "",
"about": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio doloribus, iure eum nostrum error tempora facilis ea.", "about": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio doloribus, iure eum nostrum error tempora facilis ea.",
"socials": [ "socials": [

22
src/_includes/about.liquid
View file

@ -1,22 +0,0 @@
<section id="{{ subpage.data.title | slug }}" class="{{ subpage.data.classes }}">
<div class="about">
{% if subpage.data.img %}
<div>
<img src="{{subpage.data.img.src}}" alt="{{subpage.data.img.alt}}">
</div>
{% endif %}
<div>
{% if subpage.data.showTitle != false %}
<h2>{{ subpage.data.title }}</h2>
{% endif %}
{{ subpage.templateContent }}
{% if author.socials %}
<ul class="list-inline">
{% for social in author.socials %}
<li><a href="{{ social.link }}" class="{{ social.icon }}" title="{{ social.title }}" target="_blank"></a></li>
{% endfor %}
</ul>
{% endif %}
</div>
</div>
</section>

8
src/_includes/hero.liquid Normal file
View file

@ -0,0 +1,8 @@
<section id="{{ subpage.data.title | slug }}" class="{{ subpage.data.classes }} wrapper-full hero-section">
<div>
<h1 class="hero-title">{% if subpage.data.displayedTitle %}{{ subpage.data.displayedTitle }}{% else %}{{ subpage.data.title }}{% endif %}</h1>
<p>{{subpage.data.description}}</p>
{{ subpage.templateContent }}
{% include "partials/socials.liquid" %}
</div>
</section>

19
src/_includes/layouts/base copy.html
View file

@ -1,19 +0,0 @@
<!DOCTYPE html>
<html lang={{ site.lang }} class="no-js">
<head>
{% include "partials/metas.html" %}
</head>
<body>
{% include "partials/header.html" %}
<main tabindex="-1" id="main-content">
{% block content %}
{{ content }}
{% endblock %}
</main>
{% include "partials/footer.html" %}
<script src="/js/main.js"></script>
</body>
</html>

2
src/_includes/page.liquid
View file

@ -1,4 +1,4 @@
<section id="{{ subpage.data.title | slug }}" class="{{ subpage.data.classes }}"> <section id="{{ subpage.data.title | slug }}" class="{{ subpage.data.classes }} wrapper-full">
{% if subpage.data.img %} {% if subpage.data.img %}
<img src="{{subpage.data.img.src}}" alt="{{subpage.data.img.alt}}"> <img src="{{subpage.data.img.src}}" alt="{{subpage.data.img.alt}}">
{% endif %} {% endif %}

3
src/_includes/partials/experience.liquid
View file

@ -2,7 +2,8 @@
{%- for experience in experiences -%} {%- for experience in experiences -%}
<li> <li>
<h3><time datetime="{{ experience.data.startDate }}">{{ experience.data.startDate }}</time><span>-</span><time datetime="{{ experience.data.endDate }}">{{ experience.data.endDate }}</time></h3> <h3><time datetime="{{ experience.data.startDate }}">{{ experience.data.startDate }}</time><span>-</span><time datetime="{{ experience.data.endDate }}">{{ experience.data.endDate }}</time></h3>
<p>{{ experience.data.description }}, {{ experience.data.title }}</p> <p><strong>{{ experience.data.title }}</strong>, {{ experience.data.location }}</p>
<p>{{ experience.data.description }}</p>
</li> </li>
{%- endfor -%} {%- endfor -%}
</ol> </ol>

16
src/_includes/partials/footer.liquid
View file

@ -1,8 +1,12 @@
<footer class="wrapper-full"> <footer class="wrapper-full">
<ul class="list-inline"> <div>
<li>Built with <a href='https://11ty.dev/' target='_blank' rel='nofollow'>Eleventy</a></li> <ul class="list-inline">
{% if site.repository and site.repository != "" %} <li>Built with <a href='https://11ty.dev/' target='_blank' rel='nofollow'>Eleventy</a></li>
<li>Source on <a href="{{site.repository}}" target="_blank" rel="nofollow">{{site.repoSrc}}</a></li> {% if site.repository and site.repository != "" %}
{% endif %} <li>Source on <a href="{{site.repository}}" target="_blank" rel="nofollow">{{site.repoSrc}}</a></li>
</ul> {% endif %}
</ul>
{% include "partials/socials.liquid" %}
</div>
</footer> </footer>

10
src/_includes/partials/socials.liquid Normal file
View file

@ -0,0 +1,10 @@
<ul class="list-inline socials-list">
{% if author.socials %}
{% for social in author.socials %}
<li><a href="{{ social.link }}" class="{{ social.icon }}" title="{{ social.title }}" target="_blank"></a></li>
{% endfor %}
{% if author.mail %}
<li><a href="mailto:{{ author.mail }}" class="icon-mail" title="Send me an e-mail" target="_blank"></a></li>
{% endif %}
{% endif %}
</ul>

4
src/_includes/title.liquid
View file

@ -1,4 +0,0 @@
<section id="{{ subpage.data.title | slug }}" class="{{ subpage.data.classes }}">
<h1>{{ subpage.data.title }}</h1>
{{ subpage.templateContent }}
</section>

7
src/experiences/artionet-stage.md Normal file
View file

@ -0,0 +1,7 @@
---
title: Artionet - Web Agency
description: Stage de 4ème année de CFC, développement web
location: Delémont
startDate: 2021
endDate: 2022
---

7
src/experiences/artionet.md Normal file
View file

@ -0,0 +1,7 @@
---
title: Artionet - Web Agency
description: Développeur Front-End, Support Client et Joueur de Poker
location: Delémont
startDate: 2022
endDate: 2024
---

7
src/experiences/emt.md Normal file
View file

@ -0,0 +1,7 @@
---
title: Ecole des métiers Technique
description: CFC d'informaticien d'entreprise
location: Porrentruy
startDate: 2018
endDate: 2022
---

6
src/experiences/post1.md
View file

@ -1,6 +0,0 @@
---
title: Post 1
description: desc
startDate: 2019
endDate: 2020
---

6
src/experiences/post2.md
View file

@ -1,6 +0,0 @@
---
title: Post 2
description: desc
startDate: 2020
endDate: 2023
---

6
src/experiences/post3.md
View file

@ -1,6 +0,0 @@
---
title: Post 3
description: desc
startDate: 2020
endDate: 2023
---

25
src/pages/index.liquid
View file

@ -6,27 +6,10 @@ permalink: /
{% for subpage in collections.subpages %} {% for subpage in collections.subpages %}
{% if subpage.data.excludeFromList != true %} {% if subpage.data.excludeFromList != true %}
{% if subpage.data.pageOrderId == 0 %} {% if subpage.data.template == 'hero' %}
{% include 'title.liquid' %} {% include 'hero.liquid' %}
{% else %} {% else %}
{% if subpage.data.sectionType == 'about' %} {% include 'page.liquid' %}
{% include 'about.liquid' %}
{% else %}
{% include 'page.liquid' %}
{% endif %}
{% endif %} {% endif %}
{% endif %} {% endif %}
{% endfor %} {% endfor %}
<!--{ % set postslist = collections.subpages % }-->
<!--{ % include "partials/post-list.html" % }-->
<!-- hero -->
<!-- about -->
<!-- projects -->
<!-- experiences -->
<!-- download -->

11
src/pages/subpages/about.liquid
View file

@ -1,11 +0,0 @@
---
title: About me
pageOrderId: 1
classes: 'wrapper about-section'
sectionType: 'about'
img:
src: https://placehold.co/400
alt: This is a placeholder
---
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit culpa dignissimos laborum, dolor voluptatem perspiciatis earum placeat modi minus officia perferendis rerum alias maiores deleniti et quia provident quo doloribus.</p>

32
src/pages/subpages/competences.liquid Normal file
View file

@ -0,0 +1,32 @@
---
title: Compétences WIP
order: 1
showTitle: false
classes: 'competences-section experiences-section'
---
<div style="display: flex;flex-direction: row;gap:20rem;">
<div>
<h2>{{title}}</h2>
<ul style="list-style-type: initial">
<li>HTML</li>
<li>CSS</li>
<li>Bootstrap</li>
<li>Javascript</li>
<li>jQuery</li>
<li>Eleventy</li>
</ul>
</div>
<div>
<h2>Langues</h2>
<ul style="list-style-type: initial">
<li>HTML</li>
<li>CSS</li>
<li>Bootstrap</li>
<li>Javascript</li>
<li>jQuery</li>
<li>Eleventy</li>
</ul>
</div>
</div>

10
src/pages/subpages/contact.liquid
View file

@ -1,10 +0,0 @@
---
title: Contact me
pageOrderId: 5
classes: 'wrapper-full contact-section'
excludeFromNav: true
excludeFromList: true
---
<p>This is some "{{ title }}" content.</p>
<p>Please don't</p>

8
src/pages/subpages/download.liquid
View file

@ -1,12 +1,12 @@
--- ---
title: Download title: Download
showTitle: false showTitle: false
pageOrderId: 4 order: 4
classes: 'wrapper-full download-section' classes: 'download-section'
--- ---
<div class="flex-container column"> <div class="flex-container justify-center">
<p>You want to print this document ?</p> <p>You want to print this document ?</p>
<i></i> <i>--></i>
<button type="button" onclick="window.print()" class="btn icon--right icon-download">Download as PDF</button> <button type="button" onclick="window.print()" class="btn icon--right icon-download">Download as PDF</button>
</div> </div>

4
src/pages/subpages/experiences.liquid
View file

@ -1,7 +1,7 @@
--- ---
title: Experiences title: Experiences
pageOrderId: 3 order: 3
classes: 'wrapper-full experiences-section' classes: 'experiences-section'
--- ---
{% assign experiences = collections.experiences %} {% assign experiences = collections.experiences %}

16
src/pages/subpages/hero.liquid
View file

@ -1,10 +1,8 @@
--- ---
title: Hi! I'm Thomas title: About me
description: Welcome to my website order: 0
pageOrderId: 0 template: 'hero'
classes: 'wrapper-full hero-section' eleventyComputed:
excludeFromNav: true description: "{{ author.about }}"
excludeFromList: false displayedTitle: "Moi c'est {{ author.name }}"
--- ---
<p>{{ description }}</p>

4
src/pages/subpages/projects.liquid
View file

@ -1,7 +1,7 @@
--- ---
title: Projects title: Projects
pageOrderId: 2 order: 2
classes: 'wrapper-full projects-section' classes: 'projects-section'
--- ---
{% assign projects = collections.projects %} {% assign projects = collections.projects %}

3
src/projects/projects.11tydata.js
View file

@ -1,3 +1,4 @@
module.exports = { module.exports = {
permalink: false permalink: false,
order: 1
}; };

25
src/scss/components/_colors.scss Normal file
View file

@ -0,0 +1,25 @@
:root {
--sand-50: 249 248 243;
--sand-100: 242 239 226;
--sand-200: 227 221 197;
--sand-300: 210 199 159;
--sand-400: 194 176 128; // Main
--sand-500: 177 151 94;
--sand-600: 164 133 82;
--sand-700: 136 107 70;
--sand-800: 111 88 61;
--sand-900: 90 72 52;
--sand-950: 48 37 26;
--forest-50: 244 247 238;
--forest-100: 231 238 217;
--forest-200: 208 223 183;
--forest-300: 187 208 154; // Main
--forest-400: 149 180 103;
--forest-500: 119 152 74;
--forest-600: 93 120 56;
--forest-700: 72 93 46;
--forest-800: 59 75 41;
--forest-900: 52 65 38;
--forest-950: 26 34 17;
}

11
src/scss/components/_utilities.scss
View file

@ -32,9 +32,17 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
&.column { &.flex-col {
flex-direction: column; flex-direction: column;
} }
&.justify-around {
justify-content: space-around;
}
&.justify-center {
justify-content: center;
}
} }
.sr-only { .sr-only {
@ -78,6 +86,7 @@
a { a {
color: var(--item-color, var(--text)); color: var(--item-color, var(--text));
text-decoration: none; text-decoration: none;
transition: all .2s;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;

94
src/scss/critical.scss
View file

@ -25,7 +25,9 @@ body {
} }
} }
header { header {
background-color: var(--primary); /*background-color: var(--primary);*/
background: inherit;
background-attachment: fixed;
position: fixed; position: fixed;
z-index: 10; z-index: 10;
inset-block-start: 0; inset-block-start: 0;
@ -37,11 +39,7 @@ header {
justify-content: flex-end; justify-content: flex-end;
padding: 0; padding: 0;
list-style: none; list-style: none;
flex-wrap: wrap;
@media screen and (max-width: 767px) {
justify-content: start;
flex-direction: column;
}
} }
li { li {
@ -49,10 +47,6 @@ header {
padding: 6px clamp(10px, 3vw, 20px); padding: 6px clamp(10px, 3vw, 20px);
margin: 0; margin: 0;
text-align: end; text-align: end;
@media screen and (min-width: 768px) {
display: inline-block;
}
} }
a[aria-current="page"] { a[aria-current="page"] {
@ -72,8 +66,6 @@ main {
} }
.list-inline { .list-inline {
--item-gap: 0; --item-gap: 0;
margin: 0;
padding: 0;
} }
ul:not(.list-inline) { ul:not(.list-inline) {
margin: 0; margin: 0;
@ -90,6 +82,14 @@ footer {
background-color: var(--secondary); background-color: var(--secondary);
justify-items: center; justify-items: center;
margin-block-start: 1.5rem; margin-block-start: 1.5rem;
> div {
display: flex;
justify-content: space-between;
width: 100%;
align-content: center;
align-items: center;
}
.list-inline { .list-inline {
a { a {
@ -97,6 +97,12 @@ footer {
--item-color: var(--text-2); --item-color: var(--text-2);
} }
} }
.socials-list {
margin: 0;
--item-gap: .2ch;
--item-separator: '';
}
} }
i { i {
@ -111,15 +117,32 @@ i {
} }
.hero-section { .hero-section {
height: 65vh; height: 90vh;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
@media screen and (max-width: 767px) { div {
height: 85vh; text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: end;
}
p {
max-width: 48ch;
}
@media screen and (min-width: 768px) {
div {
text-align: start;
align-items: start;
}
}
}
.hero-title {
font-size: 1.8rem;
@media screen and (min-width: 768px) {
font-size: 4rem;
} }
} }
@ -203,10 +226,7 @@ i {
border-radius: 100%; border-radius: 100%;
border: 4px solid var(--primary-dark) border: 4px solid var(--primary-dark)
} }
ul {
margin-block-start: 1rem;
gap: .2rem;
}
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
flex-direction: column; flex-direction: column;
@ -222,11 +242,23 @@ i {
} }
} }
.socials-list {
margin-block-start: 1rem;
gap: .2rem;
a {
&:hover {
--item-color: black;
}
}
}
.timeline { .timeline {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
padding: 0; padding: 0;
margin-top: 1.4rem;
&:before { &:before {
content: ''; content: '';
@ -243,13 +275,13 @@ i {
margin: 1.4rem 0; margin: 1.4rem 0;
padding: 0 0 0 calc(var(--size) + .8rem); padding: 0 0 0 calc(var(--size) + .8rem);
&:first-child { &:last-child {
margin-top: 3rem; margin-bottom: 3rem;
} }
&:last-child { &:first-child {
margin-bottom: 0; margin-top: 0;
margin-bottom: -10px; margin-top: -20px;
} }
&:after { &:after {
@ -280,6 +312,10 @@ i {
.download-section { .download-section {
text-align: center; text-align: center;
> div {
gap: .8rem;
}
.btn { .btn {
color: var(--secondary-light); color: var(--secondary-light);
} }