Composants composés, contenu de yoanengassam.com. Les classes is-hover, is-focus et is-active figent l'état.
Label au-dessus. L'erreur est le seul usage du rouge. Le succès est une coche cyan.
Pour que je sache à qui je réponds.
L'e-mail doit contenir @ et un domaine.
Adresse reconnue.
Champ désactivé, opacité 0,4.
Accessibilité. Le placeholder n'est pas le label. aria-describedby relie l'aide et l'erreur. aria-invalid sur l'erreur. Le mot « requis » n'est pas rouge.
Sanity. Champs fixes du contact : nom, e-mail, type, message. Pas de schéma libre.
<div class="yc-field is-error">
<label class="yc-label" for="email">E-mail</label>
<input class="yc-input" id="email" type="email" aria-invalid="true" aria-describedby="email-err">
<p class="yc-field__error" id="email-err" role="alert">L'e-mail doit contenir @ et un domaine.</p>
</div>Trois faits, pas un de plus. Le séparateur de la ligne est un point, pas un caractère.
10+ projets 9 secteurs Major BTS 2025
10+
projets
9
secteurs
Major BTS 2025
Esmata, génie logiciel
Lecture. Repos, survol (surface 2, bordure plus claire), focus. L'actif descend d'1px sur le fond toile. Aucun autre chiffre.
Sanity. value et label en chaînes fermées. Pas de nombre libre.
<article class="yc-stat-card">
<p class="yc-stat__value">10+</p>
<p class="yc-stat__label">projets</p>
</article>Seul verre de la planche. Les panneaux restent dans la zone sombre, hors du visage.
Workflow n8n · Healthy
Workflow n8n · Healthy
Workflow n8n · Healthy
Lecture. Pas de halo, pas de pastille qui brille. Le point cyan nomme un statut déjà écrit. Le flou du lointain disparaît si les animations sont réduites.
Sanity. Image locale, data-rot, data-depth. alt vide quand l'image est décorative.
<div class="yc-float yc-float--chip" data-rot="-2" data-depth="0.4">
<p class="yc-float__status"><span class="yc-float__dot" aria-hidden="true"></span>Workflow n8n · Healthy</p>
</div>Une seule variante. Catégorie en mono gris. Le survol zoome l'image à 1,02 et éclaircit la bordure.
Projet personnel, en veille
Formations en programmation, puis un campus cloud pour héberger les projets étudiants. Né pendant le BTS.
Catalogue WhatsApp
Le client parcourt un catalogue en ligne et commande par WhatsApp. Conçu et mis en ligne de bout en bout.
Type de système
Un parcours client qui enchaîne les étapes, avec journal et reprise sur erreur.
Interdit. Pas de filet teinté par projet. Doc4Geeks peut dire « en veille », sans argument commercial.
Sanity. title, summary, slug, cover, tags, status active ou paused. variant retiré : neutre seulement.
<a class="yc-project" href="/projets/doc4shop">
<div class="yc-project__media"><img src="assets/img/project-doc4shop.webp" alt=""></div>
<div class="yc-project__body">
<p class="yc-project__kind">Catalogue WhatsApp</p>
<h3>Doc4Shop</h3>
</div>
</a>Verticale pour la liste. Horizontale pour la une. Même surface, même bordure.
Ce site remplace l'ancien portfolio hébergé sous Doc4Geeks. Ici, des notes sur l'automatisation, l'IA et ce que je construis.
États. La une reste au repos. La grille fige repos, survol, focus et actif. Bordure plus claire au survol, pas de zoom.
Sanity. post : title, slug, date, excerpt, cover. Dates réelles ou année seule.
<a class="yc-article-card yc-article-card--feature" href="/blog/en-ligne">
<time datetime="2026-10-09">9 oct. 2026</time>
<h3>yoanengassam.com est en ligne</h3>
</a>Le poste en cours a un point cyan. Les étapes passées ont un point neutre. Le fil reste gris.
Je dirige le département Automatisation et IA : conception, déploiement, maintenance, puis accompagnement des équipes jusqu'à l'adoption.
Automatisation des processus et intégration d'outils d'IA pour des PME.
Projet personnel. Formations, puis campus cloud. En veille depuis Inperfect.
Stage de BTS.
Informatique et génie logiciel, obtenue en 2026.
Major BTS 2025.
Lecture. Inperfect n'apparaît que dans ce parcours : Lead Technical Engineer, Yaoundé, hybride. La dernière carte montre le survol, bordure plus claire, point toujours neutre.
<li class="yc-timeline-item is-current">
<span class="yc-timeline-item__node" aria-hidden="true"></span>
<article class="yc-timeline-item__card">...</article>
</li>Filet gauche gris, ou filet cyan fin. Pas de grand aplat.
« Je préfère montrer le travail, et la façon de penser, plutôt que parler de moi. »
« Transformer une tâche répétitive en un système qui tourne tout seul, et voir des gens s'en servir vraiment. »
Sanity. quote, name, role. Guillemets français portés par la phrase, sans tiret long.
<blockquote class="yc-quote yc-quote--accent">
<p>...</p>
<footer>Yoane Ngassam, ingénieur logiciel</footer>
</blockquote>Surface opaque. Le titre reste en texte fort. Aucune couleur de rappel.
Sanity. title, défaut « À retenir ». body texte. Pas de variante colorée.
<aside class="yc-callout">
<h3>À retenir</h3>
<p>Un système techniquement réussi peut rester inutilisé si l'entreprise n'est pas prête.</p>
</aside>Fenêtre surface 1. Trois points du même gris. Le bouton annonce « Copié ».
docker compose up -d
journal prêtÉtat copié, figé
Accessibilité. Le bouton reste un bouton. Le libellé change en « Copié » pendant 1,2 s, sans reposer sur la couleur.
Sanity. filename, code, language. Pas de fausse version.
<div class="yc-terminal">
<div class="yc-terminal__bar"><span class="yc-terminal__name">terminal</span></div>
<pre class="yc-terminal__body"><code>docker compose up -d</code></pre>
</div>Le dernier item n'est pas un lien. Le séparateur est un slash gris.
Accessibilité. nav nommé, liste ordonnée, aria-current="page" sur le dernier item. 14px, cible 44px.
Sanity. tableau de miettes, label et href. La dernière href est omise.
<nav class="yc-breadcrumb" aria-label="Fil d'Ariane">
<ol>
<li><a href="/">Accueil</a></li>
<li><span aria-current="page">Blog</span></li>
</ol>
</nav>La page courante inverse le texte. Les voisins restent en contour. Rien de vide.
Accessibilité. Chaque lien fait au moins 44px. Précédent est désactivé sur la première page, avec tabindex -1. Le courant garde un texte sombre sur fond clair, y compris au focus.
<nav class="yc-pagination" aria-label="Pagination">
<a href="/blog?page=1" aria-current="page">1</a>
<a href="/blog?page=2">2</a>
</nav>Titre lisible. L'entrée active est en texte fort, avec un filet cyan.
Accessibilité. Les liens vont vers des id réels. L'actif ne dépend pas du fond : le filet et le texte fort restent si la couleur manque.
<nav class="yc-toc" aria-label="Sur cette page">
<p class="yc-toc__title">Sur cette page</p>
<a class="yc-nav-item" href="#projet" aria-current="true">Projet</a>
</nav>Copier le lien, puis LinkedIn. Pas d'autre réseau.
Lecture. Le troisième bouton fige l'état copié. Le premier redevient « Copier le lien » après 1,2 s. Ghost, pas un second bouton plein.
Sanity. siteSettings.linkedin. Pas de newsletter.
<div class="yc-share">
<button class="yc-btn yc-btn--ghost" type="button">Copier le lien</button>
<a class="yc-btn yc-btn--ghost" href="https://www.linkedin.com/in/yoane-lary-koyoe-ngassam-806977313/">LinkedIn</a>
</div>Une phrase, un bouton contour. Le canal est LinkedIn, pas une liste d'e-mails.
Sanity. Réutilise siteSettings.linkedin. Un seul bouton.
<aside class="yc-follow">
<h3>Notes publiques</h3>
<p>Notes sur l'automatisation, l'IA et ce que je construis.</p>
<a class="yc-btn yc-btn--outline" href="https://www.linkedin.com/in/yoane-lary-koyoe-ngassam-806977313/">Suivre sur LinkedIn</a>
</aside>Cartes neutres. Sur WhatsApp, seule l'icône est verte.
hello@doc4geeks.com
ÉcrireProfil public
Ouvrir le profilMessage direct
Écrire sur WhatsAppLecture. E-mail au repos, LinkedIn au survol, WhatsApp au focus. Le lien reste cyan. Le bouton vert de page vit chez les atomes, pour ne pas doubler le hero.
<article class="yc-channel yc-channel--wa">
<h3>WhatsApp</h3>
<!-- SANITY: siteSettings.whatsappUrl -->
<a class="yc-link" href="https://wa.me/">Écrire sur WhatsApp</a>
</article>Le CITS26 est passé. L'invitation pour la suite reste ouverte.
Passé
J'y suis intervenu, en français, sur la piste Startups & SMEs to Growth, aux côtés d'Yvan Tondji et de Grâce Aurélie Leatitia. Mountain Hub organisait le sommet.
L'idée publique : un système techniquement réussi peut rester inutilisé si l'entreprise n'est pas prête.
Sanity. talk : event, dateLabel, place, title, peers, status past ou invite, summary.
<article class="yc-talk">
<p class="yc-badge yc-badge--past">Passé</p>
<h3>75 % organisation, 25 % outil : préparer votre PME à l'automatisation et à l'IA au Cameroun</h3>
</article>