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.addCollection("subpages", (collectionApi) => {
// const sections = collectionApi.getFilteredByTag( "subpage" )
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));
return sections;
});
config.addCollection("projects", (collectionApi) => {
// const sections = collectionApi.getFilteredByTag( "subpage" )
const sections = collectionApi.getFilteredByGlob("./src/projects/**")
.sort((a, b) => a.data.pageOrderId - b.data.pageOrderId);
process.env.DEBUG && console.log(inspect(sections));
return sections;
const projects = collectionApi.getFilteredByGlob("./src/projects/**")
.sort((a, b) => a.data.order - b.data.order);
process.env.DEBUG && console.log(inspect(projects));
return projects;
});
// config.addCollection('projects', collection => {
// return [...collection.getFilteredByGlob('./src/projects/*.md')].reverse();
// });
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 {

2
src/_data/author.json
View file

@ -1,6 +1,6 @@
{
"name": "Thomas",
"mail": "",
"mail": "thomas@amstutz.it",
"phone": "",
"about": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio doloribus, iure eum nostrum error tempora facilis ea.",
"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 %}
<img src="{{subpage.data.img.src}}" alt="{{subpage.data.img.alt}}">
{% endif %}

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

@ -2,7 +2,8 @@
{%- for experience in experiences -%}
<li>
<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>
{%- endfor -%}
</ol>

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

@ -1,8 +1,12 @@
<footer class="wrapper-full">
<ul class="list-inline">
<li>Built with <a href='https://11ty.dev/' target='_blank' rel='nofollow'>Eleventy</a></li>
{% if site.repository and site.repository != "" %}
<li>Source on <a href="{{site.repository}}" target="_blank" rel="nofollow">{{site.repoSrc}}</a></li>
{% endif %}
</ul>
<div>
<ul class="list-inline">
<li>Built with <a href='https://11ty.dev/' target='_blank' rel='nofollow'>Eleventy</a></li>
{% if site.repository and site.repository != "" %}
<li>Source on <a href="{{site.repository}}" target="_blank" rel="nofollow">{{site.repoSrc}}</a></li>
{% endif %}
</ul>
{% include "partials/socials.liquid" %}
</div>
</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 %}
{% if subpage.data.excludeFromList != true %}
{% if subpage.data.pageOrderId == 0 %}
{% include 'title.liquid' %}
{% if subpage.data.template == 'hero' %}
{% include 'hero.liquid' %}
{% else %}
{% if subpage.data.sectionType == 'about' %}
{% include 'about.liquid' %}
{% else %}
{% include 'page.liquid' %}
{% endif %}
{% include 'page.liquid' %}
{% endif %}
{% endif %}
{% endfor %}
<!--{ % set postslist = collections.subpages % }-->
<!--{ % include "partials/post-list.html" % }-->
<!-- hero -->
<!-- about -->
<!-- projects -->
<!-- experiences -->
<!-- download -->
{% endfor %}

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
showTitle: false
pageOrderId: 4
classes: 'wrapper-full download-section'
order: 4
classes: 'download-section'
---
<div class="flex-container column">
<div class="flex-container justify-center">
<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>
</div>

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

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

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

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

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

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

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

@ -1,3 +1,4 @@
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;
align-items: center;
&.column {
&.flex-col {
flex-direction: column;
}
&.justify-around {
justify-content: space-around;
}
&.justify-center {
justify-content: center;
}
}
.sr-only {
@ -78,6 +86,7 @@
a {
color: var(--item-color, var(--text));
text-decoration: none;
transition: all .2s;
&:hover {
text-decoration: underline;

94
src/scss/critical.scss
View file

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