Templates

01Header.yc-header, liens et Me contacter 02Hero cinéma.yc-hero--cinema, copie à gauche, panneaux à droiteOuvert aux échanges10+ projetsWhatsAppVoir mes projets 03Citation.yc-quote 04SystèmesAssistant IA, n8n, CRM 05Grille projets.yc-project-grid, bento monochromeDoc4GeeksDoc4ShopCampus CloudAssistant IA 06Section stackTags n8n, Docker, Supabase 07Intervention CITS26.yc-talk, au passé 08Liste d'articles.yc-article-list, lien texte 09Bande CTA.yc-cta-band, même libellé WhatsApp 10Footer.yc-footer, quatre colonnes, ghost e-mail et LinkedIn

01HeaderBurger, suffixe masqué 02Hero cinémaPanneaux masqués, deux puces 03Citation.yc-quote 04SystèmesUne colonne 05Grille projets.yc-project-grid, une colonne 06Stackn8n, Docker, Supabase 07Intervention 08Liste d'articles 09Bande CTA 10Footer.yc-footer, liens en deux colonnes

01 Header

Rôle : navigation fixe. Sanity : siteSettings.nav et contactCta. Dès 1024px, liens visibles. En dessous, burger 44px et feuille opaque. « Me contacter » est le bouton blanc, pas le vert.

02 Hero

Rôle : promesse. Sanity : hero (title, titleAccent, lede, stats, secondaryCta). H1 « Je construis des systèmes » puis « qui tiennent en production. » Photo hero-desktop.webp, puis hero-mobile.webp sous 768px. Les panneaux flottants sont le seul verre hors header, et ils ne couvrent pas le visage. Mobile : deux puces au plus. Un halo cyan, opacité 0.06, derrière la photo.

03, 04, 06 Sections

Bandes de page, surfaces opaques. La citation reprend la phrase validée. L'aide nomme l'assistant IA, l'automatisation n8n et le CRM. La stack nomme n8n, Supabase et Docker, avec le même tag neutre.

05 Grille projets

Organisme .yc-project-grid. Sanity : références project. Bento : Doc4Geeks en grande carte, Doc4Shop à côté, Campus Cloud et Assistant IA en dessous. Même filet --yc-line sur chaque carte. Sous 768px, une colonne. Campus Cloud montre trois sous-domaines *.campus.doc4geeks.com, point cyan « En ligne ».

07 Intervention

Rôle : preuve publique. Sanity : event, status past. CITS26 se raconte au passé seulement.

08 Liste d'articles

Trois cartes puis .yc-btn--link « Tous les articles ». Pas un second bouton plein.

09 Bande CTA

Répète « Écrire sur WhatsApp » une fois en bas de page longue. Même href https://wa.me/, commentaire siteSettings.whatsappUrl.

10 Footer

Organisme .yc-footer, identique sur chaque template. Bureau : marque, pages, projets, puis e-mail et LinkedIn en boutons ghost. Mobile : marque pleine largeur, pages et projets en deux colonnes, contact en dessous, ligne légale « Yoane Ngassam. Automatisation et IA. » en bas.

• Un seul h1. La seconde ligne seule porte le dégradé blanc vers cyan.
• Le bouton .yc-btn--wa n'apparaît qu'une fois dans la première vue.
• Les panneaux chiffrés, comme ui-analytics.webp, ont un alt vide.

<header class="yc-header"></header>
<section class="yc-hero yc-hero--cinema"></section>
<section class="yc-project-grid"></section>
<section class="yc-article-list"></section>
<section class="yc-cta-band"></section>
<footer class="yc-footer"></footer>Copier

01HeaderÀ propos courant 02Hero page.yc-hero--page, sans panneaux 03Galerie.yc-gallery, légende sous la photo 04Timeline.yc-timeline, poste actuel en premier 05Citation.yc-quote 06Bande CTAContour « Me contacter » 07Footer

01HeaderBurger 02Hero pagePhoto recadrée, une phrase 03GalerieUne colonne 04Timeline.yc-timeline, fil à gauche 05Citation.yc-quote 06Bande CTA.yc-cta-band 07Footer

02 Hero

H1 « À propos », une phrase. Bande 42svh minimum, scrim bas, pas de panneaux. Pas de bouton vert : le header a déjà « Me contacter ».

03 Galerie

Photos portrait-about, portrait-work, portrait-speaker, portrait-contact. Alt descriptif. Légende sous l'image. Ratio déclaré, object-fit: cover dans le cadre. Rien n'est posé sur le visage.

04 Timeline

Sanity : documents experience. Ordre : Inperfect, Lead Technical Engineer, févr. 2026 à aujourd'hui, Yaoundé, hybride. Puis ingénieur système, août 2025 à janv. 2026. Doc4Geeks, fondateur, 2024 à aujourd'hui. Lasylab, une ligne de stage. Esmata, licence IGL, 2025 à 2026. Esmata, BTS, 2023 à 2025, « Major BTS 2025 ». Aucun client, aucun chiffre d'employeur.

05 Citation

Molécule .yc-quote. Phrase validée : transformer une tâche répétitive en un système qui tourne tout seul, et voir des gens s'en servir vraiment.

06 Bande CTA

Outline vers Contact. Le vert reste sur l'accueil.

• Le fil de la timeline est décoratif. Le contenu est dans les cartes, dans l'ordre du parcours.
• Aucune pastille posée sur un visage.

<header class="yc-header"></header>
<section class="yc-hero yc-hero--page"></section>
<section class="yc-gallery"></section>
<section class="yc-timeline"></section>
<section class="yc-cta-band"></section>
<footer class="yc-footer"></footer>Copier

<header class="yc-header"></header>
<section class="yc-hero yc-hero--page"></section>
<section class="yc-project-grid"></section>
<footer class="yc-footer"></footer>Copier

01Header 02Fil d'ArianeProjets / Doc4Geeks 03Hero pageH1 Doc4Geeks, en veille possible 04CorpsTags, résumé, À retenir, terminal 05Bande CTAContour, pas de vert 06Footer

01HeaderBurger 02Fil d'ArianeRetours à la ligne si besoin 03Hero page 04CorpsUne colonne 05Bande CTA.yc-cta-band 06Footer.yc-footer

02 Fil d'Ariane

Molécule .yc-breadcrumb. Dernier item aria-current="page", sans lien. Sanity : array yc.crumb. Sous 390px, les items passent à la ligne.

03 Hero

H1 du projet. Doc4Geeks : formations, puis campus cloud pour héberger les projets étudiants. Lancé en 2024. On peut dire « en veille ».

04 Corps

Tags neutres, résumé project.summary, .yc-callout et .yc-terminal si une commande est utile, par exemple docker compose up -d. Pas de champ de teinte.

05 Bande CTA

Contour vers Contact. Doc4Shop, sur sa propre fiche, explique le catalogue WhatsApp sans poser un second bouton vert.

• Un h1 : le nom du projet. Le fil d'Ariane est un nav.
• La couverture a un alt requis par project.cover.

<header class="yc-header"></header>
<nav class="yc-breadcrumb" aria-label="Fil d'Ariane"></nav>
<section class="yc-hero yc-hero--page"></section>
<article></article>
<footer class="yc-footer"></footer>Copier

<header class="yc-header"></header>
<section class="yc-hero yc-hero--page"></section>
<section class="yc-article-list"></section>
<nav class="yc-pagination" aria-label="Pagination"></nav>
<aside class="yc-follow"></aside>
<footer class="yc-footer"></footer>Copier

01Header 02Fil d'ArianeBlog / article 03Hero pageH1 : Ce que le CITS26 m'a appris sur l'adoption 04Table des matières.yc-toc, colonne dès 1024 05ProseÀ retenir, puis partage ghost 06Liste d'articlesTrois autres notes, lien texte 07Footer

01HeaderBurger 02Fil d'Ariane 03Hero page 04Sur cette pageListe avant le texte 05Prose 06Liste d'articles.yc-article-list 07Footer.yc-footer

04 Table des matières

Titre visible « Sur cette page ». Liens vers les id des h2. Colonne à droite dès 1024px, bloc en tête en dessous.

05 Prose

Corps en texte 2, puis .yc-callout « À retenir », puis .yc-share (copier le lien, LinkedIn). Boutons ghost. « Lien copié » pendant 1,2 s. Le retour du CITS26 reste général, sans contenu propriétaire.

06 Suite

Trois cartes maximum, lien « Tous les articles ». Pas de bouton vert.

• Hiérarchie : h1 de l'article, h2 des sections, pas de saut vers h3.
• Le partage ne porte pas l'information seul. Le texte reste dans l'article.

<header class="yc-header"></header>
<nav class="yc-breadcrumb"></nav>
<section class="yc-hero yc-hero--page"></section>
<nav class="yc-toc" aria-label="Sur cette page"></nav>
<article></article>
<footer class="yc-footer"></footer>Copier

01HeaderInterventions courant 02Hero pageUne phrase au passé pour le CITS26 03Intervention passée.yc-talk, badge Passé 04InvitationMême organisme, status invite, sans date 05Footer

01HeaderBurger 02Hero page 03InterventionPhoto au-dessus du texte 04Invitation 05Footer

03 Intervention

CITS26, Palais des Congrès de Yaoundé, 15 au 17 octobre 2026, Mountain Hub. Masterclass « 75 % organisation, 25 % outil : préparer votre PME à l'automatisation et à l'IA au Cameroun », avec Yvan Tondji et Grâce Aurélie Leatitia. Badge neutre « Passé ». Photo event-stage.webp ou portrait-speaker.webp. Texte à côté, jamais sur le visage. Sous 768px, la photo passe au-dessus.

04 Invitation

Même organisme .yc-talk, status: invite. Copie : « Vous organisez un événement tech ? Écrivez-moi. » Lien outline vers Contact. Aucune date n'accompagne cette invitation.

• Le badge « Passé » n'est pas la seule indication : la phrase est au passé.
• Le partage de la scène ne pose aucun libellé sur un visage.

<header class="yc-header"></header>
<section class="yc-hero yc-hero--page"></section>
<article class="yc-talk"></article>
<article class="yc-talk"></article>
<footer class="yc-footer"></footer>Copier

01HeaderContact courant 02Hero pageSans bouton vert 03CanauxE-mail, LinkedIn, WhatsApp en lien 04Formulaire de contact.yc-contact-form, Envoyer 05Footer

01HeaderBurger 02Hero page 03CanauxPile 04FormulaireChamps pleine largeur 05Footer

Repos

Labels au-dessus des champs.

Erreur

Indiquez un domaine.

Succès

Message reçu. Je réponds à hello@doc4geeks.com.

Envoi

.is-loading, aria-busy, spinner neutre.

03 Canal de contact

Trois cartes .yc-channel. E-mail hello@doc4geeks.com. LinkedIn du profil public. WhatsApp en lien texte, href https://wa.me/, commentaire Sanity. Pas de .yc-btn--wa ici. Au mobile, les cartes s'empilent.

04 Formulaire

Ordre fixe : nom, e-mail, type de demande, message. Types : projet personnel ou étudiant, formation en programmation, Doc4Shop, invitation à intervenir, échange technique. Label au-dessus, exemple « Votre nom ». Bouton primary « Envoyer ». Succès : « Message reçu. Je réponds à hello@doc4geeks.com. »

• Chaque champ a un label for. L'erreur est liée par aria-describedby et aria-invalid.
• autocomplete sur le nom et l'e-mail. Cibles 44px, bouton d'envoi 48px.
• Un seul bouton plein : « Envoyer ». Le header « Me contacter » pointe déjà vers cette page.

<header class="yc-header"></header>
<section class="yc-hero yc-hero--page"></section>
<ul class="yc-channel"></ul>
<form class="yc-contact-form"></form>
<footer class="yc-footer"></footer>Copier