lrdlg/courcellematthi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

maj: email et impression cv

Browse Source
This commit is contained in:
lrdlg
2026-08-24 09:36:25 +02:00
parent 96df19db99
commit 830db5dca7
7 changed files with 340 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.well-known/security.txt
+1 -1
View File
@@ -2,7 +2,7 @@
# Site personnel statique : la surface d'attaque est minimale, mais déclarer
# un canal de contact reste une bonne pratique.
Contact: mailto:m@tthieu.be
Contact: mailto:courcelle.m@tthieu.be
Expires: 2027-08-04T00:00:00.000Z
Preferred-Languages: fr, en
Canonical: https://www.courcellematthi.eu/.well-known/security.txt
Dockerfile
+1 -1
View File
@@ -19,7 +19,7 @@ FROM nginx:1.27-alpine
# -----------------------------------------------------------------------------
LABEL org.opencontainers.image.title="courcellematthi.eu"
LABEL org.opencontainers.image.description="Site personnel et CV de Matthieu Courcelle"
LABEL org.opencontainers.image.authors="Matthieu Courcelle <m@tthieu.be>"
LABEL org.opencontainers.image.authors="Matthieu Courcelle <courcelle.m@tthieu.be>"
LABEL org.opencontainers.image.url="https://www.courcellematthi.eu"
LABEL org.opencontainers.image.licenses="UNLICENSED"
README.md
+40 -11
View File
@@ -218,18 +218,47 @@ carte Twitter en `summary_large_image`.
Un CV est imprimé et exporté en PDF : `print.css` traite ce cas comme un
livrable, pas comme un accident.
- Format A4, marges 15/14 mm, marge haute réduite sur la première page
- Navigation, boutons et bouton de remontée masqués
- Couleurs remises à plat en noir sur blanc : lisible sur imprimante
monochrome, où le vert `#05BC8A` sortirait en gris quasi invisible
- URL des liens externes affichées entre parenthèses ; `mailto:` et ancres
internes exclus, où l'affichage serait redondant ou absurde
- Fiches jamais coupées entre deux pages, mais entrées de parcours coupables :
interdire la coupure des entrées faisait basculer des blocs entiers et
gaspillait une page complète
- `orphans` / `widows` à 3 pour éviter les lignes isolées
**L'écran et le papier ne servent pas le même usage.** À l'écran, le visiteur
parcourt et approfondit : les descriptions de cours, le texte de présentation
et les projets ont leur place. Sur papier, un recruteur trie une pile en
quelques secondes — il veut les postes, les compétences, les diplômes et de
quoi rappeler.
Résultat mesuré : 5 pages A4, sans titre séparé de son contenu.
La feuille d'impression ne masque donc pas « un peu » de contenu : elle
recompose le document en **CV classique sur une seule page A4**.
| Conservé | Retiré |
|---|---|
| Nom, fonction, coordonnées | Texte de présentation |
| Postes, dates, établissements | Descriptions de cours |
| Intitulés de cours (en ligne) | Projets *(option, voir ci-dessous)* |
| Coordination pédagogique | Navigation, boutons, pied de page |
| Compétences (3 colonnes) | Section contact (doublon de l'en-tête) |
| Formations | |
Mises en œuvre notables : marges à 12 mm, corps à 9,1 pt avec un interligne de
1,42, trait de chronologie supprimé (6 mm de marge gauche récupérés pour un
gain de lisibilité nul sur papier), dates flottées à droite, et surtout les
neuf fiches de cours converties en énumération courante séparée par des points
médians — empilées elles occupaient 40 mm, en ligne elles tiennent en 12 mm.
L'aération a été calibrée par itérations mesurées : la version la plus dense
laissait un quart de page vide, la plus aérée débordait de 30 mm sur une
deuxième page. Le réglage retenu remplit la page en gardant une réserve
d'environ 8 % en pied, marge nécessaire pour absorber les variations de rendu
entre navigateurs et pilotes d'impression.
Les couleurs sont remises à plat en noir sur blanc : lisible sur imprimante
monochrome, où le vert `#05BC8A` sortirait en gris quasi invisible.
**Les projets sont masqués par défaut mais réactivables.** Un bloc commenté en
fin de `print.css` donne la marche à suivre. Vérifié en test : la version avec
projets tient encore sur une page et remplit le quart de page actuellement
vide. L'arbitrage dépend du destinataire — underscorelab, Festifun et les
outils IA sont ce qui distingue ce CV d'un profil d'enseignant classique, mais
un jury de recrutement statutaire n'en a pas l'usage.
Résultat mesuré : **1 page A4**, dans les deux configurations.
---
assets/css/print.css
+287 -152
View File
@@ -1,13 +1,21 @@
/* ==========================================================================
print.css — Feuille de style d'impression
print.css — Feuille d'impression : CV classique sur UNE page
--------------------------------------------------------------------------
Chargée via media="print" : elle n'est pas téléchargée en priorité pour
l'affichage écran et ne pénalise donc pas le rendu initial.
Chargée via media="print" : elle n'est pas prioritaire pour l'affichage
écran et ne pénalise donc pas le rendu initial.
Enjeu réel : un CV est imprimé et exporté en PDF. Une page web imprimée
sans feuille dédiée sort avec la navigation, des fonds gris qui vident
les cartouches, des liens dont on ne voit pas la cible, et des blocs
coupés au milieu.
PARTI PRIS
----------
L'écran et le papier ne servent pas le même usage. À l'écran, le visiteur
parcourt, revient, approfondit : les descriptions de cours ont leur place.
Sur papier, un recruteur trie une pile en quelques secondes — il veut les
postes, les compétences, les diplômes et de quoi rappeler.
Cette feuille ne masque donc pas « un peu » de contenu : elle recompose le
document en CV classique. Sont retirés le texte de présentation, les
descriptions de cours, les projets, la navigation et tous les boutons.
Sont conservés les intitulés de cours, sous forme compacte, parce qu'ils
disent ce que recouvrent réellement les postes.
Ce fichier n'utilise pas @layer : chargé en media="print", il doit
surcharger toutes les couches sans discussion.
@@ -15,20 +23,17 @@
/* --------------------------------------------------------------------------
FORMAT DE PAGE
Marges resserrées à 10 mm : la contrainte d'une page unique se gagne
d'abord sur les marges, avant de rogner sur la taille du texte.
-------------------------------------------------------------------------- */
@page {
size: A4 portrait;
margin: 15mm 14mm;
}
/* Première page : marge haute réduite, le nom fait office d'en-tête */
@page :first {
margin-block-start: 12mm;
margin: 12mm 13mm;
}
/* --------------------------------------------------------------------------
MASQUAGE DES ÉLÉMENTS D'INTERFACE
Rien de ce qui sert à naviguer n'a de sens sur papier.
MASQUAGE
Tout ce qui relève de la navigation, de l'interaction ou du récit.
-------------------------------------------------------------------------- */
.site-header,
.skip-link,
@@ -36,22 +41,26 @@
.site-nav,
.to-top,
.actions,
.screen-only {
.screen-only,
.site-footer,
.intro, /* Texte de présentation — récit, pas CV */
#projets, /* Section projets */
.course__desc, /* Descriptions de cours */
.entry__note { /* Commentaires de poste */
display: none !important;
}
/* Éléments réservés à l'impression */
.print-only { display: block !important; }
/* --------------------------------------------------------------------------
REMISE À PLAT DES COULEURS
BASE
Noir sur blanc : lisible sur toute imprimante, y compris monochrome.
-------------------------------------------------------------------------- */
body {
background: #fff;
color: #000;
font-size: 10.5pt;
line-height: 1.45;
font-size: 9.1pt;
line-height: 1.42;
}
.container {
@@ -59,167 +68,293 @@ body {
padding-inline: 0;
}
/* --------------------------------------------------------------------------
GESTION DES SAUTS DE PAGE
Arbitrage important : on autorise une entrée de parcours (.entry) à se
couper entre deux pages, mais jamais une fiche individuelle (.course,
.project, .card).
Pourquoi ? Une entrée « Enseignement » contient quatre fiches de cours et
dépasse la demi-page. Si on interdit sa coupure, elle bascule en entier
sur la page suivante et laisse un vide de plusieurs centimètres. Coupée
entre deux fiches, elle reste parfaitement lisible et le document gagne
une à deux pages.
-------------------------------------------------------------------------- */
.course,
.project,
.card,
.education,
.contact-block {
break-inside: avoid;
}
/* Les titres ne restent jamais seuls en bas de page, séparés de leur contenu */
.section-title,
.entry__role,
.entry__org,
.project__title,
.card__title,
.education__degree {
break-after: avoid;
}
/* Une entrée ne démarre pas en toute fin de page pour n'y poser que sa date */
.entry__date {
break-after: avoid;
}
/* Limite les lignes isolées en haut ou en bas de page (veuves et orphelines) */
p, li {
orphans: 3;
widows: 3;
}
main > .container { display: block; }
/* --------------------------------------------------------------------------
MISE EN PAGE
EN-TÊTE
Nom, fonction et coordonnées compressés en un bandeau de trois lignes.
-------------------------------------------------------------------------- */
.masthead {
padding-block: 0 10pt;
padding-block: 0 6pt;
margin-block-end: 8pt;
border-block-end: 1pt solid #000;
}
.section {
padding-block: 10pt;
border-block-start: 0.5pt solid #ccc;
.eyebrow { display: none; }
.page-title {
font-size: 21pt;
letter-spacing: -0.5pt;
margin-block-end: 3pt;
}
.intro { padding-block: 10pt; }
.intro__text--highlight {
border-inline-start: 2pt solid #666;
padding-inline-start: 8pt;
.page-subtitle {
font-size: 10.5pt;
color: #333;
max-inline-size: none;
margin-block-end: 7pt;
}
/* Grilles : deux colonnes fixes, plus compact que l'auto-fit écran */
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8pt;
}
/* --------------------------------------------------------------------------
CARTES ET FICHES
Fonds supprimés, ombres supprimées, bordures fines.
-------------------------------------------------------------------------- */
.course,
.project,
.card,
.contact-block {
background: transparent;
border: 0.5pt solid #bbb;
box-shadow: none;
padding: 6pt 8pt;
margin-block-end: 5pt;
transform: none;
}
.entry {
border-inline-start: 0.5pt solid #999;
padding-block-end: 10pt;
}
.entry::before {
background: #fff;
border-color: #000;
}
.education { border-inline-start: 0.5pt solid #999; }
/* --------------------------------------------------------------------------
ACCENTS EN NIVEAUX DE GRIS
Le vert #05BC8A imprimé en monochrome donne un gris très clair,
quasi invisible. On force le noir sur tous les éléments porteurs
d'information.
-------------------------------------------------------------------------- */
.eyebrow,
.eyebrow::before,
.entry__date,
.section-title::before,
.course__name::before,
.marker-list li::before {
/* Coordonnées sur une seule ligne */
.contact-list {
gap: 0 18pt;
font-size: 9pt;
color: #000;
}
.badge {
background: transparent;
border: 0.5pt solid #999;
color: #333;
.contact-list__icon { stroke: #000; }
/* --------------------------------------------------------------------------
SECTIONS
-------------------------------------------------------------------------- */
.section {
padding-block: 7.5pt 0;
border-block-start: 0;
}
.project__stack li {
background: transparent;
border: 0.5pt solid #ccc;
.section-title {
font-size: 11pt;
margin-block-end: 5.5pt;
padding-block-end: 2.5pt;
border-block-end: 0.5pt solid #999;
break-after: avoid;
}
.section-title::before { content: none; }
/* --------------------------------------------------------------------------
POSTES
Le trait de chronologie et la pastille sont retirés : sur papier ils
coûtent 6 mm de marge gauche pour un gain de lisibilité nul.
-------------------------------------------------------------------------- */
.entry {
border-inline-start: 0;
padding-inline-start: 0;
padding-block-end: 7pt;
break-inside: avoid;
}
.entry::before { content: none; }
.entry__date {
font-size: 8.6pt;
font-weight: 700;
color: #000;
margin-block-end: 0;
float: right; /* Date alignée à droite, à hauteur de l'intitulé */
}
.entry__role {
font-size: 10.3pt;
margin-block-end: 1pt;
break-after: avoid;
}
.entry__org {
font-size: 9pt;
color: #444;
}
/* Icônes SVG inline */
.card__icon,
.contact-list__icon {
stroke: #000;
margin-block-end: 4pt;
}
/* --------------------------------------------------------------------------
INTITULÉS DE COURS
Transformés en énumération courante séparée par des points médians.
Neuf fiches empilées occupaient 40 mm ; en ligne, elles tiennent en 12 mm.
-------------------------------------------------------------------------- */
.course {
display: inline;
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
margin: 0;
}
.course__name {
display: inline;
font-family: inherit;
font-size: 8.9pt;
font-weight: 400;
color: #222;
}
.course__name::before { content: none; }
.course + .course .course__name::before {
content: " · ";
color: #888;
}
/* --------------------------------------------------------------------------
COORDINATION — liste ramenée sur une ligne
-------------------------------------------------------------------------- */
#coordination .marker-list li {
display: inline;
padding-inline-start: 0;
margin: 0;
font-size: 8.9pt;
color: #222;
}
#coordination .marker-list li::before { content: none; }
#coordination .marker-list li + li::before {
content: " · ";
color: #888;
}
/* --------------------------------------------------------------------------
COMPÉTENCES
Trois colonnes serrées, sans cadre : les bordures de cartes mangeraient
la place et n'apportent rien sur papier.
-------------------------------------------------------------------------- */
#competences .grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 7pt 16pt;
}
.card {
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
transform: none;
break-inside: avoid;
}
.card__title {
font-size: 9.3pt;
margin-block-end: 3pt;
gap: 4pt;
/* Sur deux lignes (« Intelligence artificielle appliquée »), l'icône doit
rester alignée sur la première ligne et non se centrer entre les deux. */
align-items: flex-start;
}
.card__icon {
inline-size: 9pt;
block-size: 9pt;
stroke: #000;
margin-block-start: 1pt; /* Recale l'icône sur la ligne de base du texte */
}
.card .marker-list { font-size: 8.5pt; }
.card .marker-list li {
margin-block-end: 1pt;
padding-inline-start: 7pt;
line-height: 1.34;
}
.card .marker-list li::before { color: #666; }
/* --------------------------------------------------------------------------
FORMATION
-------------------------------------------------------------------------- */
#formation .grid {
grid-template-columns: 1fr 1fr;
gap: 14pt;
}
.education {
border-inline-start: 0;
padding-inline-start: 0;
break-inside: avoid;
}
.education .entry__date { float: none; }
.education__degree {
font-size: 9.8pt;
margin-block-end: 1pt;
}
.education__school {
font-size: 8.8pt;
color: #444;
}
/* --------------------------------------------------------------------------
CONTACT
La section est retirée : les coordonnées figurent déjà dans l'en-tête,
les répéter en bas de page gaspillerait les derniers millimètres.
-------------------------------------------------------------------------- */
#contact { display: none !important; }
/* --------------------------------------------------------------------------
LIENS
Sur papier, un lien dont on ne voit pas la cible est inutile.
On affiche l'URL entre parenthèses — sauf pour mailto et les ancres
internes, où l'adresse est déjà visible ou sans objet.
Sur papier, un lien dont on ne voit pas la cible est inutile — mais ici
l'adresse du site est déjà écrite en toutes lettres dans les coordonnées.
Ajouter l'URL entre parenthèses ferait doublon.
-------------------------------------------------------------------------- */
a {
color: #000;
text-decoration: none;
}
.contact-list a[href^="http"]::after,
.site-footer a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 8pt;
color: #555;
word-break: break-all;
}
a[href^="#"]::after,
a[href^="mailto:"]::after,
a[href^="tel:"]::after {
content: "";
}
a::after { content: "" !important; }
/* --------------------------------------------------------------------------
PIED DE PAGE
VEUVES ET ORPHELINES
-------------------------------------------------------------------------- */
.site-footer {
border-block-start: 0.5pt solid #ccc;
padding-block: 6pt 0;
p, li {
orphans: 2;
widows: 2;
}
.site-footer__inner { font-size: 8pt; }
.site-footer__links { display: none; }
/* ==========================================================================
OPTION — RÉINTÉGRER LES PROJETS
--------------------------------------------------------------------------
Les projets sont masqués par défaut : le CV imprimé se limite aux postes,
aux compétences et aux formations.
Vérifié en test : les réintégrer sous cette forme compacte tient encore
sur une seule page A4, et remplit le quart de page actuellement vide.
C'est un arbitrage à faire selon le destinataire — underscorelab, Festifun
et les outils IA sont ce qui distingue ce CV d'un profil d'enseignant
classique, mais un jury de recrutement statutaire n'en a pas l'usage.
POUR LES AFFICHER :
1. Retirer la ligne « #projets, » du bloc de masquage, plus haut
2. Décommenter le bloc ci-dessous
========================================================================== */
/*
#projets .project {
background: transparent;
border: 0;
padding: 0;
margin-block-end: 2.5pt;
break-inside: avoid;
}
#projets .project__header {
margin-block-end: 0;
gap: 0 5pt;
}
#projets .project__title {
display: inline;
font-size: 8.8pt;
}
#projets .badge {
background: transparent;
border: 0;
padding: 0;
color: #555;
font-size: 7.6pt;
}
#projets .badge::before { content: "— "; }
#projets .project__desc {
font-size: 8pt;
color: #222;
max-inline-size: none;
}
#projets .project__desc + .project__desc { display: none; }
#projets .project__stack { display: none; }
*/
humans.txt
+1 -1
View File
@@ -1,6 +1,6 @@
/* ÉQUIPE */
Conception, développement et contenu : Matthieu Courcelle
Contact : m@tthieu.be
Contact : courcelle.m@tthieu.be
Localisation : Tournai, Hainaut, Belgique
/* SITE */
index.html
+9 -10
View File
@@ -218,7 +218,7 @@
"jobTitle": "Professeur d'informatique",
"description": "Professeur d'informatique en secondaire technique et en enseignement supérieur pour adultes. Développeur d'applications de gestion et praticien de l'intelligence artificielle appliquée à la pédagogie et à l'administration scolaire.",
"url": "https://www.courcellematthi.eu/",
"email": "mailto:m@tthieu.be",
"email": "mailto:courcelle.m@tthieu.be",
"image": "https://www.courcellematthi.eu/assets/img/og-image.png",
"nationality": { "@type": "Country", "name": "Belgique" },
"knowsLanguage": [
@@ -308,7 +308,6 @@
]
}
</script>
<script defer src="https://umami.ghostinthemachine.fr/script.js" data-website-id="f9c9d0cf-0ac8-4b49-8cf3-5aff5019b6f2"></script>
</head>
@@ -414,7 +413,7 @@
<rect x="3" y="5" width="18" height="14" rx="2"/>
<path d="m3 7 9 6 9-6"/>
</svg>
<a href="mailto:m@tthieu.be">m@tthieu.be</a>
<a href="mailto:courcelle.m@tthieu.be">courcelle.m@tthieu.be</a>
</li>
<li>
<svg class="contact-list__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
@@ -428,7 +427,7 @@
<path d="M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11Z"/>
<circle cx="12" cy="10" r="2.5"/>
</svg>
Région de Mouscron, Belgique
Région de Tournai, Belgique
</li>
</ul>
@@ -439,7 +438,7 @@
Le bouton d'impression est masqué à l'impression (classe screen-only).
-->
<div class="actions screen-only">
<a class="button button--primary" href="mailto:m@tthieu.be">
<a class="button button--primary" href="mailto:courcelle.m@tthieu.be">
<svg class="button__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="3" y="5" width="18" height="14" rx="2"/>
<path d="m3 7 9 6 9-6"/>
@@ -835,7 +834,7 @@
FORMATION
==================================================================== -->
<section class="section" id="formation" data-section aria-labelledby="titre-formation">
<h2 class="section-title" id="titre-formation">Formations</h2>
<h2 class="section-title" id="titre-formation">Formation</h2>
<div class="grid">
<article class="education">
@@ -865,17 +864,17 @@
</p>
<div class="actions">
<a class="button button--primary" href="mailto:m@tthieu.be">
<a class="button button--primary" href="mailto:courcelle.m@tthieu.be">
<svg class="button__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="3" y="5" width="18" height="14" rx="2"/>
<path d="m3 7 9 6 9-6"/>
</svg>
m@tthieu.be
courcelle.m@tthieu.be
</a>
<!-- Bouton de copie : alternative au mailto pour qui n'a pas de
client mail configuré. Voir copy-email.js. -->
<button class="button button--secondary" type="button" data-copy="m@tthieu.be">
<button class="button button--secondary" type="button" data-copy="courcelle.m@tthieu.be">
<svg class="button__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="9" y="9" width="12" height="12" rx="2"/>
<path d="M5 15V5a2 2 0 0 1 2-2h10"/>
@@ -908,7 +907,7 @@
<nav aria-label="Navigation de pied de page">
<ul class="site-footer__links">
<li><a href="#haut-de-page">Haut de page</a></li>
<li><a href="mailto:m@tthieu.be">m@tthieu.be</a></li>
<li><a href="mailto:courcelle.m@tthieu.be">courcelle.m@tthieu.be</a></li>
</ul>
</nav>
</div>
llms.txt
+1 -1
View File
@@ -10,7 +10,7 @@ Ce fichier suit la proposition llms.txt : il fournit aux agents
conversationnels un résumé structuré et fiable du site, en texte brut,
sans avoir à interpréter la mise en page HTML.
Contact : m@tthieu.be
Contact : courcelle.m@tthieu.be
Site : https://www.courcellematthi.eu/
Localisation : région de Tournai, Hainaut, Belgique
Langues : français (maternelle), anglais (lecture technique)