diff --git a/.well-known/security.txt b/.well-known/security.txt index cbed74f..5d3a243 100644 --- a/.well-known/security.txt +++ b/.well-known/security.txt @@ -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 diff --git a/Dockerfile b/Dockerfile index 6c00022..7460d6d 100644 --- a/Dockerfile +++ b/Dockerfile @@ -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 " +LABEL org.opencontainers.image.authors="Matthieu Courcelle " LABEL org.opencontainers.image.url="https://www.courcellematthi.eu" LABEL org.opencontainers.image.licenses="UNLICENSED" diff --git a/README.md b/README.md index ae75f86..d4eadb0 100644 --- a/README.md +++ b/README.md @@ -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. --- diff --git a/assets/css/print.css b/assets/css/print.css index ead2516..8e0b5b4 100644 --- a/assets/css/print.css +++ b/assets/css/print.css @@ -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; } +*/ diff --git a/humans.txt b/humans.txt index b752c1d..b1d9c49 100644 --- a/humans.txt +++ b/humans.txt @@ -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 */ diff --git a/index.html b/index.html index b51fcd4..03bf630 100644 --- a/index.html +++ b/index.html @@ -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 @@ ] } - @@ -414,7 +413,7 @@ - m@tthieu.be + courcelle.m@tthieu.be
  • - Région de Mouscron, Belgique + Région de Tournai, Belgique
    • @@ -439,7 +438,7 @@ Le bouton d'impression est masqué à l'impression (classe screen-only). -->
    - +

    Formations

    +

    Formation

    @@ -865,17 +864,17 @@

    - + - m@tthieu.be + courcelle.m@tthieu.be -
    diff --git a/llms.txt b/llms.txt index 5b266ed..a71270a 100644 --- a/llms.txt +++ b/llms.txt @@ -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)