Home page content rework

This commit is contained in:
Yves Gatesoupe 2020-07-13 20:36:44 +02:00
parent 452b9bee54
commit b73efeef26
21 changed files with 200 additions and 56 deletions

View File

@ -58,6 +58,16 @@ module.exports = function(config) {
.slice(0, site.maxNewsPerPage); .slice(0, site.maxNewsPerPage);
}); });
// const teamMembers = member;
config.addCollection('members', collection => {
return [...collection.getFilteredByGlob("./src/members/*.md")];
});
config.addCollection('profiles', collection => {
return [...collection.getFilteredByGlob("./src/members/*.md")]
.slice(0, site.maxProfilePreview);
});
// Plugins // Plugins
config.addPlugin(rssPlugin); config.addPlugin(rssPlugin);
config.addPlugin(syntaxHighlight); config.addPlugin(syntaxHighlight);

View File

@ -19,5 +19,6 @@
"enableThirdPartyComments": false, "enableThirdPartyComments": false,
"maxPostsPerPage": 5, "maxPostsPerPage": 5,
"maxNewsPerPage": 4, "maxNewsPerPage": 4,
"maxProfilePreview": 3,
"faviconPath": "/images/favicon.png" "faviconPath": "/images/favicon.png"
} }

View File

@ -1,14 +1,9 @@
{% extends 'layouts/base.njk' %} {% extends 'layouts/base.njk' %}
{# Post list content #} {# Set lists content #}
{% set newsListHeading = newsHeading %} {% set newsListHeading = newsHeading %}
{% set newsListItems = collections.newsFeed %} {% set newsListItems = collections.newsFeed %}
{# Presentation content #}
{% set presentation %}
{{ content | safe }}
{% endset %}
{% block content %} {% block content %}
<main id="main-content" tabindex="-1"> <main id="main-content" tabindex="-1">
{% include "partials/components/intro.njk" %} {% include "partials/components/intro.njk" %}

View File

@ -4,8 +4,33 @@
{% block content %} {% block content %}
<main id="main-content" tabindex="-1"> <main id="main-content" tabindex="-1">
<article class="[ wrapper ]"> <div class="[ wrapper member ]">
<p>{{ content | safe }}</p> <article class="[ member__wrapper ]">
</article> <div>
<h1>{{ name }}</h1>
<h2>{{ position }}</h2>
<div class="member__bio">{{ content | safe }}</div>
{% if personalSite %}
<p>
<span>site perso :</span>
<a href="{{ personalSite }}" class="social">{{ personalSite }}</a>
</p>
{% endif %}
{% if socialTwitter %}
<a href="{{ socialTwitter }}" class="social">Twitter</a>
{% endif %}
{% if socialLinkedin %}
<a href="{{ socialLinkedin }}" class="social">Linkedin</a>
{% endif %}
{% if socialMastodon %}
<a href="{{ socialMastodon }}" class="social">Mastodon</a>
{% endif %}
</div>
<div>
<img src="{{ profile }}" alt="profile de {{ name }}">
</div>
</article>
<a class="return-link" href="/equipe">Voir tous les membres</a>
</div>
</main> </main>
{% endblock %} {% endblock %}

View File

@ -1,5 +1,64 @@
{% set profilePics = collections.profiles %}
<section class="[ presentation ]"> <section class="[ presentation ]">
<div class="[ wrapper ]"> <div class="[ wrapper ]">
{{ presentation | safe }} <article>
<div class="content">
<h2>Qui sommes-nous ?</h2>
<p>
Astrolabe CAE est une scop spécialisée dans la prestation de <strong>services</strong> autour des métiers du <strong>numérique</strong>.
Notre objectif est de favoriser l<strong>autonomie</strong> et l<strong>émancipation</strong> de nos membres sur un modèle déconomie sociale et <strong>solidaire</strong>.
</p>
</div>
<div class="side-info">
{# <figure> #}
<img src="/images/crew.svg" alt="équipage astrolabe" loading="lazy" style="width: 80%">
{# </figure> #}
<a role="button" href="/nous-rejoindre" class="btn btn-primary">Nous rejoindre
<svg width="18" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.602 5.823L12.05.376a1.357 1.357 0 00-1.875 0 1.295 1.295 0 000 1.84l3.278 3.235H1.326C.587 5.451 0 6.027 0 6.752s.587 1.302 1.326 1.302h12.127l-3.278 3.215a1.295 1.295 0 000 1.84 1.349 1.349 0 001.894 0l5.533-5.427c.246-.242.398-.576.398-.93 0-.353-.133-.687-.398-.93z" fill="#111"></path></svg>
</a>
</div>
</article>
<article>
<div class="content">
<h2>Communs numérique</h2>
<p>
Chez Astrolabe nous aimons et faisons la promotion du <b>logiciel libre</b>. Nos sommes membres d<a href="http://www.alliance-libre.org/" target="_blank">Alliance Libre</a>
et nous mettons nos documents et projets internes à disposition sur notre gitlab.
</p>
</div>
<div class="side-info">
<figure>
<img src="/images/gitlab.svg" alt="logo Gitlab" loading="lazy" width="110" height="101">
</figure>
{# <a role="button" href="https://framagit.org/astrolabe" class="btn btn-primary btn-icon" target="_blank">
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.929 13.407l-1.26-3.86a.552.552 0 00-.03-.104l-2.525-7.76A1.002 1.002 0 0019.155 1a.988.988 0 00-.947.689l-2.407 7.394H8.203l-2.41-7.394A.985.985 0 004.848 1h-.005a1.008 1.008 0 00-.956.69L1.36 9.458c0 .007-.006.013-.008.02l-1.281 3.93a1.431 1.431 0 00.522 1.605l11.072 8.03a.568.568 0 00.669-.004l11.074-8.026a1.433 1.433 0 00.52-1.606zm-16.55-3.189l3.086 9.48-7.409-9.48H7.38zm6.16 9.483l2.96-9.09.127-.393h4.326l-6.703 8.57-.71.913zm5.626-17.284l2.169 6.666h-4.34l2.171-6.666zm-3.732 7.797l-2.15 6.604L12 20.752 8.572 10.214h6.861zM4.84 2.417L7.01 9.083H2.673L4.84 2.417zm-3.58 11.681a.305.305 0 01-.11-.341l.951-2.919 6.979 8.93-7.82-5.67zm21.483 0l-7.82 5.669.026-.034 6.952-8.895.952 2.918a.304.304 0 01-.11.342" fill="#111"/></svg>
Gitlab
</a> #}
<a role="button" href="https://framagit.org/astrolabe" class="btn btn-primary btn-icon" target="_blank">Gitlab</a>
</div>
</article>
<article>
<div class="content">
<h2>Des profils variés</h2>
<p>
Nos coopérateurs possèdent des compétences propres allant de développement linux embarqué au web design et créent ainsi la <b>pluralité</b> de nos prestations.
<br><br>
Nous sommes également <b>distributeurs</b> de la solution logicielle <a href="https://www.crealead.com/naega#bootstrap-fieldgroup-nav-item--prsentation" target="_blank">Naega</a>.
</p>
</div>
<div class="side-info">
<ul class="profile-preview">
{% for profile in profilePics %}
<li>
<a href="{{ profile.data.url }}" title="{{ profile.data.name }}">
<img src="{{ profile.data.profile }}" alt="photo de {{ profile.data.name }}">
</a>
</li>
{% endfor %}
</ul>
<a role="button" href="/equipe" class="btn btn-secondary">Voir l'équipe</a>
</div>
</article>
</div> </div>
</section> </section>

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

View File

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 287 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 667 KiB

View File

@ -5,40 +5,3 @@ brandHeading: La Coopérative d'Activité et d'Emploi spécialisée en informati
newsHeading: Actualité & Évenements newsHeading: Actualité & Évenements
metaDesc: 'Hylia is a lightweight Eleventy starter kit to help you to create your own blog or personal website.' metaDesc: 'Hylia is a lightweight Eleventy starter kit to help you to create your own blog or personal website.'
--- ---
<article>
<div class="content">
## Qui sommes-nous ?
Astrolabe CAE est une scop spécialisée dans la prestation de **services** autour des métiers du **numérique**.
Notre objectif est de favoriser l**autonomie** et l**émancipation** de nos membres sur un modèle déconomie sociale et **solidaire**.
</div>
<!-- ![logo Gitlab](/images/gitlab.svg) -->
<a role="button" href="/nous-rejoindre" class="btn btn-primary">Nous rejoindre
<svg width="18" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.602 5.823L12.05.376a1.357 1.357 0 00-1.875 0 1.295 1.295 0 000 1.84l3.278 3.235H1.326C.587 5.451 0 6.027 0 6.752s.587 1.302 1.326 1.302h12.127l-3.278 3.215a1.295 1.295 0 000 1.84 1.349 1.349 0 001.894 0l5.533-5.427c.246-.242.398-.576.398-.93 0-.353-.133-.687-.398-.93z" fill="#111"/></svg>
</a>
</article>
<article>
<div class="content">
## Communs numérique
Chez Astrolabe nous aimons et faisons la promotion du **logiciel libre**. Nos sommes membres d[Alliance Libre](http://www.alliance-libre.org/) et nous mettons nos documents et projets internes à disposition sur notre [gitlab]().
</div>
![logo Gitlab](/images/gitlab.svg)
</article>
<article>
<div class="content">
## Des profils variés
Nos coopérateurs possèdent des compétences propres allant de développement linux embarqué au web design et créent ainsi la **pluralité** de nos prestations.
<br><br>
Nous sommes également **distributeurs** de la solution logicielle [Naega](https://www.crealead.com/naega#bootstrap-fieldgroup-nav-item--prsentation).
</div>
<!-- ![logo Gitlab](/images/gitlab.svg) -->
<a role="button" href="/equipe" class="btn btn-secondary">Voir l'équipe</a>
</article>

View File

@ -3,7 +3,7 @@ name: 'Florent Le Saout'
position: 'Développeur systèmes embarqués' position: 'Développeur systèmes embarqués'
positionInternal: 'Co-fondateur' positionInternal: 'Co-fondateur'
date: '2019-01-01' date: '2019-01-01'
profile: '/images/fls-profile.jpg' profile: '/images/profiles/fls-profile.jpg'
url: '/members/florent-le-saout' url: '/members/florent-le-saout'
layout: 'partials/components/member.njk' layout: 'partials/components/member.njk'
--- ---

View File

@ -2,7 +2,7 @@
name: 'François Bonningues' name: 'François Bonningues'
position: 'Développeur systèmes embarqués' position: 'Développeur systèmes embarqués'
date: '2020-06-01' date: '2020-06-01'
profile: '/images/default-profile.svg' profile: '/images/profiles/default-profile.png'
url: '/members/francois-bonningues' url: '/members/francois-bonningues'
layout: 'partials/components/member.njk' layout: 'partials/components/member.njk'
--- ---

View File

@ -3,7 +3,7 @@ name: 'Vincent Génieux'
position: 'Développeur senior' position: 'Développeur senior'
positionInternal: 'Co-fondateur' positionInternal: 'Co-fondateur'
date: '2019-01-01' date: '2019-01-01'
profile: '/images/vg-profile.jpg' profile: '/images/profiles/vg-profile.jpg'
url: '/members/vincent-genieux' url: '/members/vincent-genieux'
layout: 'partials/components/member.njk' layout: 'partials/components/member.njk'
--- ---

View File

@ -2,9 +2,18 @@
name: 'Yves Gatesoupe' name: 'Yves Gatesoupe'
position: 'Designer Web' position: 'Designer Web'
date: '2020-06-01' date: '2020-06-01'
profile: '/images/yg-profile.jpg' profile: '/images/profiles/yg-profile.jpg'
personalSite: 'www.astrolabe.coop'
socialTwitter: 'https://twitter.com/YGdsgn'
socialLinkedin: 'https://www.linkedin.com/in/yves-gatesoupe-05990b17a/'
url: '/members/yves-gatesoupe' url: '/members/yves-gatesoupe'
layout: 'partials/components/member.njk' layout: 'partials/components/member.njk'
--- ---
Yves Je suis designer web indépendant depuis janvier 2019.
Jai construit mon expérience en tant que développeur web front end pour Orange Business Services en contribuant notamment à la mise en place du Bootstrap Orange [Boosted](https://boosted.orange.com) qui est un framework aux couleurs de la marque avec un focus sur laccessibilité numérique.
Ces deux dernières années jai étendu le champs de mes compétence en passant la certification professionnelle “Ergonomie des interfaces, UX/UI Design” (Usabilis 2018).
Ce parcours me permet aujourdhui de proposer mes services en tant que Designer Web, que ce soit pour la conception dune identité visuelle, dune étude de conception centrée utilisateur, du maquettage et intégration de votre site ou application web.

View File

@ -71,4 +71,16 @@
background-color: var(--color-secondary); background-color: var(--color-secondary);
font-weight: 500; font-weight: 500;
} }
&.btn-icon {
padding-top: 1rem;
padding-bottom: 1rem;
display: flex;
align-items: center;
svg {
margin-left: 0;
margin-right: .5rem;
}
}
} }

View File

@ -4,6 +4,7 @@
&__heading { &__heading {
margin: 8rem 0 2rem; margin: 8rem 0 2rem;
} }
&__items { &__items {
margin-top: 4rem; margin-top: 4rem;
display: grid; display: grid;

View File

@ -0,0 +1,37 @@
.member {
display: flex;
flex-direction: column;
margin-bottom: 20rem;
&__wrapper {
display: grid;
grid-template-columns: .6fr .4fr;
grid-template-rows: 1fr;
grid-column-gap: 1.5rem;
grid-row-gap: 0;
margin-top: 8rem;
}
&__bio {
margin-top: 2.5rem;
+ p,
p + p {
margin-top: 1.5rem;
span {
font-weight: 600;
}
}
}
.return-link {
align-self: flex-end;
font-size: 1.125rem;
font-weight: 700;
&:visited {
color: inherit;
}
}
}

View File

@ -5,6 +5,7 @@
grid-template-rows: auto; grid-template-rows: auto;
grid-column-gap: 2.125rem; grid-column-gap: 2.125rem;
grid-row-gap: 2.125rem; grid-row-gap: 2.125rem;
margin-bottom: 10rem;
&:nth-child(2n + 1) { &:nth-child(2n + 1) {
.content { .content {
@ -36,15 +37,18 @@
+ p { + p {
font-size: 1.25rem; font-size: 1.25rem;
margin-bottom: 8rem;
} }
} }
a,
a:visited {
color: var(--color-dark);
}
+ figure, + figure,
+ p { + p {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// justify-content: center;
align-items: center; align-items: center;
img { img {
@ -57,5 +61,33 @@
} }
} }
.side-info {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
img {
margin-bottom: 1.5rem;
}
}
.profile-preview {
display: flex;
list-style: none;
margin-top: auto;
margin-bottom: 1.5rem;
li + li {
margin-left: -2rem;
}
img {
width: 10rem;
border-radius: 50%;
border: 2px solid;
color: var(--color-white);
background-color: var(--color-white);
}
}
} }

View File

@ -11,7 +11,7 @@ module.exports = function(value, outputPath) {
}); });
const document = DOM.window.document; const document = DOM.window.document;
const articleImages = [...document.querySelectorAll('main section:not(.process-cae) article img, .intro img')]; const articleImages = [...document.querySelectorAll('main section:not(.process-cae, .presentation) article img, .intro img')];
const articleHeadings = [ const articleHeadings = [
...document.querySelectorAll('main article h2, main article h3') ...document.querySelectorAll('main article h2, main article h3')
]; ];