Site personnel courcellematthi.eu
This commit is contained in:
lrdlg
+930
@@ -0,0 +1,930 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
================================================================================
|
||||
courcellematthi.eu — Site personnel / CV de Matthieu Courcelle
|
||||
Statique, sans dépendance, sans étape de compilation.
|
||||
Voir README.md pour l'architecture et les choix techniques.
|
||||
================================================================================
|
||||
-->
|
||||
<html lang="fr">
|
||||
<head>
|
||||
|
||||
<!-- ==========================================================================
|
||||
ENCODAGE ET FENÊTRE D'AFFICHAGE
|
||||
charset doit figurer dans les 1024 premiers octets du document, sans quoi
|
||||
le navigateur peut commencer à interpréter la page dans le mauvais
|
||||
encodage puis devoir tout réanalyser.
|
||||
========================================================================== -->
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- ==========================================================================
|
||||
RÉFÉRENCEMENT — MÉTADONNÉES PRINCIPALES
|
||||
Le title est le facteur de classement sur page le plus visible : il sert
|
||||
de lien bleu dans les résultats. Format retenu : nom, puis fonction, puis
|
||||
localisation. Environ 60 caractères avant troncature.
|
||||
La description n'influence pas le classement mais détermine le taux de
|
||||
clic. Environ 155 caractères. Écrite pour un humain, pas pour un robot.
|
||||
========================================================================== -->
|
||||
<title>Matthieu Courcelle — Professeur d'informatique | Tournai</title>
|
||||
<meta name="description" content="Professeur d'informatique en secondaire technique et supérieur pour adultes à Tournai. Développeur d'applications de gestion et d'outils IA pour l'école.">
|
||||
|
||||
<meta name="author" content="Matthieu Courcelle">
|
||||
|
||||
<!--
|
||||
Directives d'indexation.
|
||||
max-snippet:-1 — pas de limite de longueur d'extrait
|
||||
max-image-preview:large — autorise la grande vignette dans Discover
|
||||
max-video-preview:-1 — sans objet ici, mais évite une restriction implicite
|
||||
-->
|
||||
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
|
||||
|
||||
<!--
|
||||
URL canonique. Indispensable même sur un site d'une seule page : elle
|
||||
consolide le classement si la page est atteignable via plusieurs adresses
|
||||
(avec ou sans www, avec ou sans slash final, avec paramètres de campagne).
|
||||
-->
|
||||
<link rel="canonical" href="https://www.courcellematthi.eu/">
|
||||
|
||||
<!--
|
||||
Langue et zone géographique. Le site est monolingue : x-default pointe donc
|
||||
vers la même URL. La balise reste utile pour lever toute ambiguïté auprès
|
||||
des moteurs sur un domaine en .eu.
|
||||
-->
|
||||
<link rel="alternate" hreflang="fr-be" href="https://www.courcellematthi.eu/">
|
||||
<link rel="alternate" hreflang="x-default" href="https://www.courcellematthi.eu/">
|
||||
|
||||
<!-- ==========================================================================
|
||||
PARTAGE SUR LES RÉSEAUX SOCIAUX
|
||||
Open Graph (Facebook, LinkedIn, WhatsApp, Slack, Discord, Signal…)
|
||||
LinkedIn est le canal déterminant pour un CV : c'est lui qui justifie
|
||||
le soin apporté à og:image.
|
||||
========================================================================== -->
|
||||
<meta property="og:type" content="profile">
|
||||
<meta property="og:site_name" content="Matthieu Courcelle">
|
||||
<meta property="og:locale" content="fr_BE">
|
||||
<meta property="og:url" content="https://www.courcellematthi.eu/">
|
||||
<meta property="og:title" content="Matthieu Courcelle — Professeur d'informatique et développeur">
|
||||
<meta property="og:description" content="Enseignement de l'informatique, développement d'applications de gestion et intelligence artificielle appliquée à la pédagogie et à l'administration scolaire.">
|
||||
|
||||
<!-- 1200×630 : ratio 1,91:1, format attendu par la quasi-totalité des
|
||||
plateformes. Une image trop petite est ignorée et remplacée par un
|
||||
aperçu générique. L'URL doit être absolue : les robots sociaux ne
|
||||
résolvent pas les chemins relatifs. -->
|
||||
<meta property="og:image" content="https://www.courcellematthi.eu/assets/img/og-image.png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:alt" content="Monogramme MC et nom de Matthieu Courcelle, professeur d'informatique et développeur">
|
||||
|
||||
<!-- Champs spécifiques au type « profile » -->
|
||||
<meta property="profile:first_name" content="Matthieu">
|
||||
<meta property="profile:last_name" content="Courcelle">
|
||||
<meta property="profile:gender" content="male">
|
||||
|
||||
<!-- Cartes Twitter / X. summary_large_image affiche la bannière en pleine
|
||||
largeur plutôt qu'en vignette carrée. -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="Matthieu Courcelle — Professeur d'informatique et développeur">
|
||||
<meta name="twitter:description" content="Enseignement de l'informatique, développement d'applications de gestion et intelligence artificielle appliquée.">
|
||||
<meta name="twitter:image" content="https://www.courcellematthi.eu/assets/img/og-image.png">
|
||||
<meta name="twitter:image:alt" content="Monogramme MC et nom de Matthieu Courcelle">
|
||||
|
||||
<!-- ==========================================================================
|
||||
INTERFACE ET SYSTÈME
|
||||
========================================================================== -->
|
||||
<!-- Colore la barre d'adresse mobile et la barre de titre des PWA -->
|
||||
<meta name="theme-color" content="#f7f8f8">
|
||||
|
||||
<!-- Déclare que seul le thème clair est prévu : évite que le navigateur
|
||||
applique une inversion automatique en mode sombre système, qui
|
||||
dénaturerait la palette. -->
|
||||
<meta name="color-scheme" content="light">
|
||||
|
||||
<!-- Nom affiché lors d'un ajout à l'écran d'accueil iOS -->
|
||||
<meta name="apple-mobile-web-app-title" content="M. Courcelle">
|
||||
<meta name="application-name" content="Matthieu Courcelle">
|
||||
|
||||
<!-- Désactive la détection automatique des numéros de téléphone par iOS,
|
||||
qui transforme des suites de chiffres (dates, matricules) en liens. -->
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
|
||||
<!-- ==========================================================================
|
||||
ICÔNES
|
||||
Stratégie en cascade : SVG d'abord (vectoriel, une seule ressource,
|
||||
net à toute taille), PNG en repli pour les navigateurs anciens,
|
||||
ICO pour la compatibilité historique.
|
||||
========================================================================== -->
|
||||
<link rel="icon" href="/favicon.ico" sizes="32x32">
|
||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
||||
<link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png">
|
||||
<link rel="mask-icon" href="/assets/img/safari-pinned-tab.svg" color="#05bc8a">
|
||||
<link rel="manifest" href="/site.webmanifest">
|
||||
|
||||
<!-- ==========================================================================
|
||||
POLICES
|
||||
preconnect ouvre les connexions TCP/TLS vers les deux domaines de Google
|
||||
Fonts avant même que le navigateur ne découvre la requête CSS : gain de
|
||||
100 à 300 ms sur le premier rendu du texte.
|
||||
crossorigin est obligatoire sur fonts.gstatic.com — les fichiers de police
|
||||
sont récupérés en mode CORS, sans cet attribut la connexion préouverte ne
|
||||
serait pas réutilisée.
|
||||
display=swap affiche immédiatement la police de repli puis substitue la
|
||||
webfont : le texte n'est jamais invisible (évite le FOIT).
|
||||
========================================================================== -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600&display=swap">
|
||||
|
||||
<!-- ==========================================================================
|
||||
FEUILLES DE STYLE
|
||||
Liées séparément plutôt qu'assemblées par @import : les @import créent
|
||||
une cascade de requêtes séquentielles (le navigateur doit d'abord
|
||||
télécharger et analyser le fichier parent pour découvrir l'enfant),
|
||||
alors que des <link> se téléchargent en parallèle.
|
||||
L'ordre de priorité ne dépend pas de l'ordre ci-dessous : il est fixé
|
||||
par la déclaration @layer en tête de tokens.css.
|
||||
========================================================================== -->
|
||||
<link rel="stylesheet" href="/assets/css/tokens.css">
|
||||
<link rel="stylesheet" href="/assets/css/base.css">
|
||||
<link rel="stylesheet" href="/assets/css/layout.css">
|
||||
<link rel="stylesheet" href="/assets/css/components.css">
|
||||
<link rel="stylesheet" href="/assets/css/utilities.css">
|
||||
<!-- Chargée uniquement à l'impression : ne pénalise pas le rendu écran -->
|
||||
<link rel="stylesheet" href="/assets/css/print.css" media="print">
|
||||
|
||||
<!-- ==========================================================================
|
||||
SCRIPT
|
||||
type="module" implique defer : le téléchargement est parallèle à
|
||||
l'analyse du HTML, l'exécution a lieu après. Aucun blocage du rendu,
|
||||
donc pas besoin de l'écrire en fin de <body>.
|
||||
========================================================================== -->
|
||||
<script type="module" src="/assets/js/main.js"></script>
|
||||
|
||||
<!-- ==========================================================================
|
||||
DONNÉES STRUCTURÉES — schema.org en JSON-LD
|
||||
--------------------------------------------------------------------------
|
||||
Double usage :
|
||||
|
||||
1. MOTEURS DE RECHERCHE. Permet à Google d'associer la page à une entité
|
||||
« personne » plutôt qu'à un simple document, condition d'apparition
|
||||
dans le panneau de connaissances et les résultats enrichis.
|
||||
|
||||
2. AGENTS CONVERSATIONNELS ET IA. Les modèles de langage et les moteurs
|
||||
de réponse consomment le JSON-LD en priorité : c'est une déclaration
|
||||
explicite et non ambiguë de qui est la personne, ce qu'elle fait, où
|
||||
elle travaille et ce qu'elle sait faire. Sans ces données, l'agent
|
||||
doit inférer depuis la prose, avec un risque d'erreur.
|
||||
|
||||
Le graphe est composé de trois entités reliées par @id :
|
||||
WebSite → ProfilePage → Person.
|
||||
========================================================================== -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@graph": [
|
||||
{
|
||||
"@type": "WebSite",
|
||||
"@id": "https://www.courcellematthi.eu/#website",
|
||||
"url": "https://www.courcellematthi.eu/",
|
||||
"name": "Matthieu Courcelle",
|
||||
"description": "Site personnel de Matthieu Courcelle, professeur d'informatique et développeur d'applications de gestion.",
|
||||
"inLanguage": "fr-BE",
|
||||
"publisher": { "@id": "https://www.courcellematthi.eu/#person" }
|
||||
},
|
||||
{
|
||||
"@type": "ProfilePage",
|
||||
"@id": "https://www.courcellematthi.eu/#webpage",
|
||||
"url": "https://www.courcellematthi.eu/",
|
||||
"name": "Matthieu Courcelle — Professeur d'informatique et développeur",
|
||||
"isPartOf": { "@id": "https://www.courcellematthi.eu/#website" },
|
||||
"about": { "@id": "https://www.courcellematthi.eu/#person" },
|
||||
"mainEntity": { "@id": "https://www.courcellematthi.eu/#person" },
|
||||
"inLanguage": "fr-BE",
|
||||
"primaryImageOfPage": {
|
||||
"@type": "ImageObject",
|
||||
"url": "https://www.courcellematthi.eu/assets/img/og-image.png",
|
||||
"width": 1200,
|
||||
"height": 630
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Person",
|
||||
"@id": "https://www.courcellematthi.eu/#person",
|
||||
"name": "Matthieu Courcelle",
|
||||
"givenName": "Matthieu",
|
||||
"familyName": "Courcelle",
|
||||
"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",
|
||||
"image": "https://www.courcellematthi.eu/assets/img/og-image.png",
|
||||
"nationality": { "@type": "Country", "name": "Belgique" },
|
||||
"knowsLanguage": [
|
||||
{ "@type": "Language", "name": "Français", "alternateName": "fr" },
|
||||
{ "@type": "Language", "name": "Anglais", "alternateName": "en" }
|
||||
],
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"addressLocality": "Tournai",
|
||||
"addressRegion": "Hainaut",
|
||||
"addressCountry": "BE"
|
||||
},
|
||||
"worksFor": [
|
||||
{
|
||||
"@type": "EducationalOrganization",
|
||||
"name": "IPES Ath",
|
||||
"description": "Enseignement secondaire technique de transition et de qualification"
|
||||
},
|
||||
{
|
||||
"@type": "EducationalOrganization",
|
||||
"name": "Institut Gabrielle Petit",
|
||||
"alternateName": "IPEPS Tournai-Leuze",
|
||||
"description": "Enseignement de promotion sociale et supérieur pour adultes"
|
||||
}
|
||||
],
|
||||
"alumniOf": [
|
||||
{
|
||||
"@type": "EducationalOrganization",
|
||||
"name": "Institut de Promotion Sociale Saint Henri"
|
||||
},
|
||||
{
|
||||
"@type": "EducationalOrganization",
|
||||
"name": "IEPSCF"
|
||||
}
|
||||
],
|
||||
"hasCredential": [
|
||||
{
|
||||
"@type": "EducationalOccupationalCredential",
|
||||
"name": "Certificat d'Aptitudes Pédagogiques",
|
||||
"credentialCategory": "Certificat",
|
||||
"educationalLevel": "Enseignement de promotion sociale",
|
||||
"recognizedBy": {
|
||||
"@type": "EducationalOrganization",
|
||||
"name": "Institut de Promotion Sociale Saint Henri"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "EducationalOccupationalCredential",
|
||||
"name": "Bachelier en informatique de gestion",
|
||||
"credentialCategory": "Bachelier",
|
||||
"educationalLevel": "Enseignement supérieur de type court",
|
||||
"recognizedBy": {
|
||||
"@type": "EducationalOrganization",
|
||||
"name": "IEPSCF"
|
||||
}
|
||||
}
|
||||
],
|
||||
"hasOccupation": [
|
||||
{
|
||||
"@type": "Occupation",
|
||||
"name": "Professeur d'informatique",
|
||||
"occupationalCategory": "2320 Enseignants de l'enseignement technique et professionnel",
|
||||
"occupationLocation": { "@type": "City", "name": "Tournai" },
|
||||
"skills": "Développement d'applications de gestion, administration et sécurisation des réseaux, bases de données relationnelles, ingénierie pédagogique"
|
||||
},
|
||||
{
|
||||
"@type": "Occupation",
|
||||
"name": "Développeur d'applications",
|
||||
"occupationalCategory": "2512 Développeurs de logiciels",
|
||||
"skills": "PHP, Python, JavaScript, Node.js, React, Vue, PostgreSQL, Docker"
|
||||
}
|
||||
],
|
||||
"knowsAbout": [
|
||||
"Enseignement de l'informatique",
|
||||
"Développement d'applications orientées gestion",
|
||||
"Bases de données relationnelles",
|
||||
"Modélisation MCD et MLD",
|
||||
"Administration et sécurisation des réseaux",
|
||||
"Active Directory",
|
||||
"Docker et conteneurisation",
|
||||
"Intégration et déploiement continus",
|
||||
"Intelligence artificielle appliquée",
|
||||
"Ingénierie pédagogique",
|
||||
"RGPD en contexte scolaire"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Repère de focus pour le retour en haut de page (voir back-to-top.js).
|
||||
tabindex="-1" le rend focusable par script sans l'insérer dans l'ordre
|
||||
de tabulation naturel. -->
|
||||
<span id="haut-de-page" tabindex="-1"></span>
|
||||
|
||||
<!-- Sentinelle invisible : sa sortie du champ de vision déclenche
|
||||
l'affichage du bouton de remontée. aria-hidden car purement technique. -->
|
||||
<span data-scroll-sentinel aria-hidden="true"></span>
|
||||
|
||||
<!--
|
||||
Lien d'évitement — premier élément focusable de la page.
|
||||
WCAG 2.4.1 : permet de contourner les blocs répétés (ici la navigation)
|
||||
pour atteindre directement le contenu principal.
|
||||
-->
|
||||
<a class="skip-link" href="#contenu">Aller au contenu principal</a>
|
||||
|
||||
<!-- ==========================================================================
|
||||
EN-TÊTE ET NAVIGATION
|
||||
========================================================================== -->
|
||||
<header class="site-header">
|
||||
<div class="container site-header__inner">
|
||||
|
||||
<a class="site-header__brand" href="#haut-de-page">
|
||||
<!-- Le logo est décoratif : le nom est déjà écrit à côté en texte.
|
||||
aria-hidden évite la double annonce par le lecteur d'écran. -->
|
||||
<svg class="site-header__logo" viewBox="0 0 64 64" aria-hidden="true" focusable="false">
|
||||
<g fill="none" stroke-width="5.5" stroke-linecap="butt" stroke-linejoin="miter">
|
||||
<path d="M11 44 V21 L20.5 33.5 L30 21 V44" stroke="currentColor"/>
|
||||
<path d="M50.39 23.69 A11.5 11.5 0 1 0 50.39 41.31" stroke="#05BC8A"/>
|
||||
</g>
|
||||
<path d="M11 52 H53" stroke="#05BC8A" stroke-width="3.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
courcelle_matthieu
|
||||
</a>
|
||||
|
||||
<!--
|
||||
Bouton du menu mobile.
|
||||
aria-expanded : état réel du panneau, mis à jour par JavaScript.
|
||||
aria-controls : désigne le panneau commandé.
|
||||
Le libellé « Menu » est textuel, pas seulement une icône : un
|
||||
pictogramme de trois barres n'est pas universellement compris.
|
||||
-->
|
||||
<button class="nav-toggle" type="button" data-nav-toggle
|
||||
aria-expanded="false" aria-controls="navigation-principale">
|
||||
<svg class="nav-toggle__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
||||
<path class="nav-toggle__line nav-toggle__line--top" d="M4 7h16" stroke-linecap="round"/>
|
||||
<path class="nav-toggle__line nav-toggle__line--middle" d="M4 12h16" stroke-linecap="round"/>
|
||||
<path class="nav-toggle__line nav-toggle__line--bottom" d="M4 17h16" stroke-linecap="round"/>
|
||||
</svg>
|
||||
Menu
|
||||
</button>
|
||||
|
||||
<!--
|
||||
aria-label sur le <nav> : distingue cette navigation de toute autre
|
||||
région de navigation de la page (ici celle du pied de page). Les
|
||||
lecteurs d'écran proposent une liste des repères — sans libellé,
|
||||
l'utilisateur verrait « navigation, navigation ».
|
||||
-->
|
||||
<nav class="site-nav" id="navigation-principale" data-nav
|
||||
aria-label="Navigation principale">
|
||||
<ul class="site-nav__list">
|
||||
<li><a class="site-nav__link" href="#profil" data-nav-link>Profil</a></li>
|
||||
<li><a class="site-nav__link" href="#enseignement" data-nav-link>Enseignement</a></li>
|
||||
<li><a class="site-nav__link" href="#coordination" data-nav-link>Coordination</a></li>
|
||||
<li><a class="site-nav__link" href="#projets" data-nav-link>Projets</a></li>
|
||||
<li><a class="site-nav__link" href="#competences" data-nav-link>Compétences</a></li>
|
||||
<li><a class="site-nav__link" href="#formation" data-nav-link>Formation</a></li>
|
||||
<li><a class="site-nav__link" href="#contact" data-nav-link>Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- ==========================================================================
|
||||
CONTENU PRINCIPAL
|
||||
========================================================================== -->
|
||||
<main id="contenu">
|
||||
<div class="container">
|
||||
|
||||
<!-- ====================================================================
|
||||
EN-TÊTE DE PAGE
|
||||
==================================================================== -->
|
||||
<div class="masthead">
|
||||
<span class="eyebrow">profil</span>
|
||||
|
||||
<!-- Un seul <h1> par page : il énonce le sujet du document.
|
||||
Sur un CV, c'est le nom. -->
|
||||
<h1 class="page-title">Matthieu Courcelle</h1>
|
||||
|
||||
<p class="page-subtitle">
|
||||
Professeur d'informatique & développeur d'applications de gestion
|
||||
</p>
|
||||
|
||||
<ul class="contact-list" role="list">
|
||||
<li>
|
||||
<svg class="contact-list__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>
|
||||
<a href="mailto:m@tthieu.be">m@tthieu.be</a>
|
||||
</li>
|
||||
<li>
|
||||
<svg class="contact-list__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
||||
<circle cx="12" cy="12" r="9"/>
|
||||
<path d="M3 12h18M12 3a15 15 0 0 1 0 18a15 15 0 0 1 0-18"/>
|
||||
</svg>
|
||||
<a href="https://www.courcellematthi.eu">courcellematthi.eu</a>
|
||||
</li>
|
||||
<li>
|
||||
<svg class="contact-list__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
||||
<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 Tournai, Belgique
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!--
|
||||
Appels à l'action. Placés haut : un recruteur ou un client qui a déjà
|
||||
décidé ne doit pas parcourir toute la page pour trouver comment
|
||||
prendre contact.
|
||||
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">
|
||||
<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>
|
||||
Me contacter
|
||||
</a>
|
||||
|
||||
<!--
|
||||
onclick inline : exception assumée et unique dans ce projet.
|
||||
window.print() n'a aucun sens sans JavaScript et le sortir dans un
|
||||
module imposerait un fichier entier pour une ligne. Le bouton est
|
||||
volontairement absent du flux d'impression.
|
||||
-->
|
||||
<button class="button button--secondary" type="button" onclick="window.print()">
|
||||
<svg class="button__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
||||
<path d="M7 9V3h10v6"/>
|
||||
<rect x="4" y="9" width="16" height="7" rx="2"/>
|
||||
<path d="M7 16h10v5H7z"/>
|
||||
</svg>
|
||||
Imprimer / PDF
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ====================================================================
|
||||
PRÉSENTATION
|
||||
==================================================================== -->
|
||||
<section class="intro" id="profil" data-section aria-labelledby="titre-profil">
|
||||
<h2 class="intro__heading" id="titre-profil">
|
||||
Enseigner, transmettre, construire des outils qui servent
|
||||
</h2>
|
||||
|
||||
<p class="intro__text">
|
||||
Professeur d'informatique depuis 2018, j'enseigne aujourd'hui à la fois dans le
|
||||
secondaire technique (IPES Ath) et dans le supérieur pour adultes à l'Institut
|
||||
Gabrielle Petit — développement d'applications, administration réseau, sécurisation
|
||||
d'infrastructures. La transmission est au cœur de ce que je fais : structurer une
|
||||
matière complexe, la rendre accessible, accompagner un public en formation jusqu'à
|
||||
l'autonomie.
|
||||
</p>
|
||||
|
||||
<p class="intro__text">
|
||||
<strong>En parallèle des cours, j'ai développé des outils concrets pour les
|
||||
établissements où j'interviens</strong> — une application de gestion d'événements
|
||||
scolaires, des systèmes d'aide à l'administration — et j'ai construit, en autodidacte,
|
||||
une vraie maîtrise de l'intelligence artificielle appliquée : skills Claude et
|
||||
assistants Gemini pour aider mes collègues à préparer cours et évaluations, pour
|
||||
accompagner des directions d'école sur l'administratif, la communication avec les
|
||||
familles ou le <abbr title="Règlement général sur la protection des données">RGPD</abbr>
|
||||
scolaire. Je gère aussi ma propre infrastructure serveur (Docker, déploiement,
|
||||
monitoring) pour héberger ces outils.
|
||||
</p>
|
||||
|
||||
<p class="intro__text">
|
||||
Depuis janvier 2026, je développe également en indépendant complémentaire
|
||||
(<em>underscorelab</em>) des outils de gestion pour des
|
||||
<abbr title="Association sans but lucratif">ASBL</abbr>, notamment dans le secteur
|
||||
du handicap.
|
||||
</p>
|
||||
|
||||
<p class="intro__text intro__text--highlight">
|
||||
Cette double compétence — pédagogue et développeur formé à l'IA appliquée — ouvre
|
||||
plusieurs directions : continuer à enseigner et former, accompagner des équipes dans
|
||||
l'intégration d'outils IA, ou concevoir des solutions sur mesure pour des structures
|
||||
qui en ont besoin.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- ====================================================================
|
||||
ENSEIGNEMENT
|
||||
==================================================================== -->
|
||||
<section class="section" id="enseignement" data-section aria-labelledby="titre-enseignement">
|
||||
<h2 class="section-title" id="titre-enseignement">Enseignement</h2>
|
||||
|
||||
<article class="entry">
|
||||
<span class="entry__date">2023 — aujourd'hui</span>
|
||||
<h3 class="entry__role">Professeur d'informatique — Enseignement supérieur pour adultes</h3>
|
||||
<p class="entry__org">Institut Gabrielle Petit (ex-IPEPS Tournai-Leuze)</p>
|
||||
|
||||
<div class="course">
|
||||
<span class="course__name">Développement d'applications orientées gestion — Projet SGBD (<span class="nowrap">Bac 3</span>)</span>
|
||||
<p class="course__desc">
|
||||
Conception et développement d'un système de gestion de données complet — de la
|
||||
modélisation (MCD/MLD, normalisation) à une application 3-tiers connectée en base,
|
||||
intégrant transactions ACID, gestion d'erreurs, déploiement Cloud/DevOps
|
||||
(Git, CI/CD) et soutenance technique devant jury.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="course">
|
||||
<span class="course__name">Administration et sécurisation des réseaux et services (<span class="nowrap">Bac 3</span>)</span>
|
||||
<p class="course__desc">
|
||||
Formation à l'administration autonome d'une infrastructure réseau complète :
|
||||
services (DHCP, DNS, Web, messagerie), virtualisation, adressage IPv4/IPv6,
|
||||
et sécurisation avancée (pare-feu, DMZ, IDS/IPS, Active Directory/LDAP,
|
||||
VLAN, GPO, VPN).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="course">
|
||||
<span class="course__name">Base d'administration réseaux (<span class="nowrap">Bac 1</span>)</span>
|
||||
<p class="course__desc">
|
||||
Introduction aux modèles OSI/TCP-IP, à l'adressage IP et au subnetting, au câblage
|
||||
et aux équipements actifs (switch, routeur), avec diagnostic autonome
|
||||
(ping, traceroute, sniffers) et mise en œuvre d'un petit réseau interconnecté.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="course">
|
||||
<span class="course__name">Initiation à l'informatique (Complément CESS)</span>
|
||||
<p class="course__desc">
|
||||
Apprentissage des bases de l'outil informatique (Windows, navigation, bureautique)
|
||||
pour un public adulte en reprise d'études.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="entry">
|
||||
<span class="entry__date">2020 — aujourd'hui</span>
|
||||
<h3 class="entry__role">Professeur d'informatique — Secondaire technique</h3>
|
||||
<p class="entry__org">IPES Ath · Technique de transition & de qualification (DI et DS)</p>
|
||||
|
||||
<div class="course">
|
||||
<span class="course__name">Traitements de Problèmes Techniques</span>
|
||||
<p class="course__desc">
|
||||
Apprentissage méthodique du diagnostic et de la résolution de pannes matérielles
|
||||
et logicielles, pour développer une démarche rigoureuse de dépannage informatique.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="course">
|
||||
<span class="course__name">Laboratoire Informatique</span>
|
||||
<p class="course__desc">
|
||||
Mise en pratique des notions théoriques via des ateliers concrets de montage,
|
||||
configuration et manipulation de systèmes informatiques.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="course">
|
||||
<span class="course__name">Informatique Appliquée</span>
|
||||
<p class="course__desc">
|
||||
Application des concepts informatiques à des cas pratiques, faisant le lien entre
|
||||
théorie algorithmique/logicielle et mise en œuvre réelle.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="course">
|
||||
<span class="course__name">Laboratoire de Maintenance et de Télématique</span>
|
||||
<p class="course__desc">
|
||||
Travaux pratiques sur la maintenance des postes de travail et les bases des réseaux
|
||||
et télécommunications.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="course">
|
||||
<span class="course__name">Informatique de Gestion (<span class="nowrap">Office 365</span>)</span>
|
||||
<p class="course__desc">
|
||||
Maîtrise des outils bureautiques et collaboratifs de gestion appliqués aux besoins
|
||||
administratifs et professionnels.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="entry">
|
||||
<span class="entry__date">2020 — 2022</span>
|
||||
<h3 class="entry__role">Professeur d'informatique de gestion</h3>
|
||||
<p class="entry__org">IPES Tournai · Technique de qualification Gestion (DI)</p>
|
||||
<p class="entry__note">Informatique de gestion appliquée à la suite Office 365.</p>
|
||||
</article>
|
||||
|
||||
<article class="entry">
|
||||
<span class="entry__date">2018 — 2020</span>
|
||||
<h3 class="entry__role">Formateur en entreprise</h3>
|
||||
<p class="entry__org">ORDITECH SA</p>
|
||||
<p class="entry__note">
|
||||
Formation professionnelle d'adultes sur les environnements Office 365 et les
|
||||
systèmes d'exploitation.
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<!-- ====================================================================
|
||||
COORDINATION
|
||||
==================================================================== -->
|
||||
<section class="section" id="coordination" data-section aria-labelledby="titre-coordination">
|
||||
<h2 class="section-title" id="titre-coordination">Coordination pédagogique</h2>
|
||||
|
||||
<article class="entry">
|
||||
<span class="entry__date">Heures de coordination</span>
|
||||
<h3 class="entry__role">Développement d'outils de gestion interne</h3>
|
||||
<p class="entry__org">École des Frères — Tournai</p>
|
||||
|
||||
<ul class="marker-list" role="list">
|
||||
<li>Application de gestion des remédiations : suivi des élèves, planification et affectation des séances.</li>
|
||||
<li>Application de gestion des activités complémentaires.</li>
|
||||
<li>Système de valve électronique pour la diffusion d'annonces aux élèves.</li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<!-- ====================================================================
|
||||
PROJETS
|
||||
==================================================================== -->
|
||||
<section class="section" id="projets" data-section aria-labelledby="titre-projets">
|
||||
<h2 class="section-title" id="titre-projets">Projets</h2>
|
||||
|
||||
<article class="project">
|
||||
<div class="project__header">
|
||||
<h3 class="project__title">Festifun</h3>
|
||||
<span class="badge">Institut du Sacré-Cœur Mouscron</span>
|
||||
</div>
|
||||
<p class="project__desc">
|
||||
Application web progressive de gestion d'événement scolaire, conçue et déployée
|
||||
pour l'établissement.
|
||||
</p>
|
||||
<ul class="project__stack" role="list">
|
||||
<li>PWA</li><li>JavaScript</li><li>Node.js</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="project">
|
||||
<div class="project__header">
|
||||
<h3 class="project__title">Outils IA d'aide à la direction</h3>
|
||||
<span class="badge">Institut du Sacré-Cœur Mouscron</span>
|
||||
</div>
|
||||
<p class="project__desc">
|
||||
Assistants IA sur mesure destinés aux équipes de direction : maîtrise des outils
|
||||
informatiques administratifs, communication avec les familles, application du RGPD
|
||||
en contexte scolaire.
|
||||
</p>
|
||||
<ul class="project__stack" role="list">
|
||||
<li>Claude</li><li>Gemini</li><li>NotebookLM</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="project">
|
||||
<div class="project__header">
|
||||
<h3 class="project__title">Bibliothèque de skills Claude & Gems Gemini</h3>
|
||||
<span class="badge">Pédagogie · Administration</span>
|
||||
</div>
|
||||
<p class="project__desc">
|
||||
Assistants IA spécialisés développés pour l'équipe éducative : rédaction de cours,
|
||||
création d'exercices et d'exemples, conception d'évaluations et aide à la correction.
|
||||
</p>
|
||||
<p class="project__desc">
|
||||
Déclinaison à destination des directions d'établissement sur les volets
|
||||
administratifs, la communication institutionnelle et la conformité RGPD.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="project">
|
||||
<div class="project__header">
|
||||
<h3 class="project__title">underscorelab</h3>
|
||||
<span class="badge">Indépendant complémentaire · depuis janvier 2026</span>
|
||||
</div>
|
||||
<p class="project__desc">
|
||||
Développement d'outils de gestion sur mesure pour le secteur associatif,
|
||||
principalement des ASBL d'aide aux personnes en situation de handicap.
|
||||
</p>
|
||||
<ul class="project__stack" role="list">
|
||||
<li>Node.js</li><li>PHP</li><li>Python</li><li>PostgreSQL</li><li>Vue</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="project">
|
||||
<div class="project__header">
|
||||
<h3 class="project__title">Écosystème d'agents automatisés</h3>
|
||||
<!-- Badge neutre : signale honnêtement un projet non abouti,
|
||||
plutôt que de le présenter comme un acquis. -->
|
||||
<span class="badge badge--muted">en cours de développement</span>
|
||||
</div>
|
||||
<p class="project__desc">
|
||||
Architecture d'agents IA orchestrés via n8n sur infrastructure auto-hébergée,
|
||||
pour l'automatisation de flux de travail administratifs et pédagogiques.
|
||||
</p>
|
||||
<ul class="project__stack" role="list">
|
||||
<li>n8n</li><li>Docker</li><li>API</li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<!-- ====================================================================
|
||||
COMPÉTENCES
|
||||
==================================================================== -->
|
||||
<section class="section" id="competences" data-section aria-labelledby="titre-competences">
|
||||
<h2 class="section-title" id="titre-competences">Compétences</h2>
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<article class="card">
|
||||
<h3 class="card__title">
|
||||
<svg class="card__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
||||
<path d="m9 8-5 4 5 4M15 8l5 4-5 4"/>
|
||||
</svg>
|
||||
Développement
|
||||
</h3>
|
||||
<ul class="marker-list" role="list">
|
||||
<li>PHP, Python, JavaScript (Node.js)</li>
|
||||
<li>React, Vue</li>
|
||||
<li>PostgreSQL, SQL, modélisation MCD/MLD</li>
|
||||
<li>Applications de gestion, PWA</li>
|
||||
<li>VBA / Excel avancé</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<h3 class="card__title">
|
||||
<svg class="card__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
||||
<rect x="3" y="4" width="18" height="6" rx="1"/>
|
||||
<rect x="3" y="14" width="18" height="6" rx="1"/>
|
||||
<path d="M7 7h.01M7 17h.01"/>
|
||||
</svg>
|
||||
Systèmes & réseaux
|
||||
</h3>
|
||||
<ul class="marker-list" role="list">
|
||||
<li>Administration et sécurisation réseau</li>
|
||||
<li>Active Directory, LDAP, GPO</li>
|
||||
<li>Pare-feu, DMZ, VPN, VLAN</li>
|
||||
<li>Windows, Linux, macOS</li>
|
||||
<li>Montage, configuration, audit</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<h3 class="card__title">
|
||||
<svg class="card__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
||||
<path d="M12 3 3 8v8l9 5 9-5V8Z"/>
|
||||
<path d="m3 8 9 5 9-5M12 13v8"/>
|
||||
</svg>
|
||||
Infrastructure & déploiement
|
||||
</h3>
|
||||
<ul class="marker-list" role="list">
|
||||
<li>Docker, conteneurisation</li>
|
||||
<li>Reverse proxy, SSL/TLS</li>
|
||||
<li>Déploiement continu (Git, CI/CD)</li>
|
||||
<li>Monitoring et sauvegarde</li>
|
||||
<li>Auto-hébergement de services</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<h3 class="card__title">
|
||||
<svg class="card__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M18.4 5.6l-2.8 2.8M8.4 15.6l-2.8 2.8"/>
|
||||
</svg>
|
||||
Intelligence artificielle appliquée
|
||||
</h3>
|
||||
<ul class="marker-list" role="list">
|
||||
<li>Conception de skills Claude</li>
|
||||
<li>Création de Gems Gemini</li>
|
||||
<li>Structuration documentaire (NotebookLM)</li>
|
||||
<li>Automatisation de flux de travail</li>
|
||||
<li>Accompagnement et formation d'équipes</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<h3 class="card__title">
|
||||
<svg class="card__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
||||
<path d="M3 7l9-4 9 4-9 4Z"/>
|
||||
<path d="M7 10v5c0 1.7 2.2 3 5 3s5-1.3 5-3v-5"/>
|
||||
</svg>
|
||||
Pédagogie
|
||||
</h3>
|
||||
<ul class="marker-list" role="list">
|
||||
<li>Enseignement secondaire technique</li>
|
||||
<li>Enseignement supérieur pour adultes</li>
|
||||
<li>Conception de séquences et d'évaluations</li>
|
||||
<li>Vulgarisation technique</li>
|
||||
<li>Accompagnement en reprise d'études</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<h3 class="card__title">
|
||||
<svg class="card__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
||||
<circle cx="12" cy="12" r="9"/>
|
||||
<path d="M3 12h18M12 3a15 15 0 0 1 0 18a15 15 0 0 1 0-18"/>
|
||||
</svg>
|
||||
Langues
|
||||
</h3>
|
||||
<ul class="marker-list" role="list">
|
||||
<li>Français — langue maternelle</li>
|
||||
<li>Anglais — lecture technique courante</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ====================================================================
|
||||
FORMATION
|
||||
==================================================================== -->
|
||||
<section class="section" id="formation" data-section aria-labelledby="titre-formation">
|
||||
<h2 class="section-title" id="titre-formation">Formation</h2>
|
||||
|
||||
<div class="grid">
|
||||
<article class="education">
|
||||
<span class="entry__date">2021 — 2024</span>
|
||||
<h3 class="education__degree">Certificat d'Aptitudes Pédagogiques</h3>
|
||||
<p class="education__school">Institut de Promotion Sociale Saint Henri</p>
|
||||
</article>
|
||||
|
||||
<article class="education">
|
||||
<span class="entry__date">2008 — 2011</span>
|
||||
<h3 class="education__degree">Bachelier en informatique de gestion</h3>
|
||||
<p class="education__school">IEPSCF</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ====================================================================
|
||||
CONTACT
|
||||
==================================================================== -->
|
||||
<section class="section" id="contact" data-section aria-labelledby="titre-contact">
|
||||
<h2 class="section-title" id="titre-contact">Contact</h2>
|
||||
|
||||
<div class="contact-block">
|
||||
<p class="contact-block__text">
|
||||
Une question, un projet, une opportunité d'enseignement ou de collaboration —
|
||||
écrivez-moi, je réponds.
|
||||
</p>
|
||||
|
||||
<div class="actions">
|
||||
<a class="button button--primary" href="mailto: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
|
||||
</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">
|
||||
<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"/>
|
||||
</svg>
|
||||
<span data-copy-label>Copier l'adresse</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
Région d'annonce pour lecteurs d'écran.
|
||||
aria-live="polite" : le message est lu dès que le lecteur a fini
|
||||
son énoncé en cours, sans interrompre l'utilisateur.
|
||||
Le conteneur doit exister dans le DOM avant l'insertion du texte,
|
||||
sinon l'annonce n'est pas déclenchée.
|
||||
-->
|
||||
<div class="sr-status" role="status" aria-live="polite" data-status></div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- ==========================================================================
|
||||
PIED DE PAGE
|
||||
========================================================================== -->
|
||||
<footer class="site-footer">
|
||||
<div class="container site-footer__inner">
|
||||
<span>© 2026 Matthieu Courcelle</span>
|
||||
|
||||
<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>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!--
|
||||
Bouton de retour en haut.
|
||||
Masqué par défaut en CSS, révélé par JavaScript après défilement.
|
||||
aria-label car le bouton ne contient qu'une icône.
|
||||
-->
|
||||
<button class="to-top" type="button" data-to-top aria-label="Retourner en haut de la page">
|
||||
<svg viewBox="0 0 24 24" width="18" height="18" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round" aria-hidden="true" focusable="false">
|
||||
<path d="M12 19V5M5 12l7-7 7 7"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user