Clément SAILLANT
376 lines
14 KiB
HTML
376 lines
14 KiB
HTML
<!doctype html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Clément Saillant - L'electron rare</title>
|
|
<meta
|
|
name="description"
|
|
content="Studio de Clement Saillant (L'electron rare): design de systemes, code creatif, IA appliquee et prototypes electroniques." />
|
|
<meta name="theme-color" content="#f4eee3" />
|
|
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
|
<link rel="shortcut icon" href="/favicon.ico" />
|
|
|
|
<link rel="canonical" href="https://electron-rare.github.io/" />
|
|
<meta name="robots" content="index,follow,max-image-preview:large" />
|
|
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:locale" content="fr_FR" />
|
|
<meta property="og:site_name" content="L'electron rare" />
|
|
<meta property="og:title" content="Clément Saillant - L'electron rare" />
|
|
<meta property="og:url" content="https://electron-rare.github.io/" />
|
|
<meta
|
|
property="og:description"
|
|
content="Design de systemes, code creatif, IA appliquee et production de dispositifs audiovisuels." />
|
|
<meta property="og:image" content="https://electron-rare.github.io/assets/og-cover.jpg" />
|
|
<meta property="og:image:width" content="1200" />
|
|
<meta property="og:image:height" content="630" />
|
|
<meta property="og:image:alt" content="L'electron rare - studio systemes et design" />
|
|
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="Clément Saillant - L'electron rare" />
|
|
<meta
|
|
name="twitter:description"
|
|
content="Studio hybride: strategie produit, creation electronique, IA appliquee et execution code." />
|
|
<meta name="twitter:image" content="https://electron-rare.github.io/assets/og-cover.jpg" />
|
|
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
(function (w, d, s, l, i) {
|
|
if (!i) {
|
|
return;
|
|
}
|
|
w[l] = w[l] || [];
|
|
w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
|
|
var f = d.getElementsByTagName(s)[0];
|
|
var j = d.createElement(s);
|
|
var dl = l !== 'dataLayer' ? '&l=' + l : '';
|
|
j.async = true;
|
|
j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
|
|
f.parentNode.insertBefore(j, f);
|
|
})(window, document, 'script', 'dataLayer', 'GTM-5SLM67QF');
|
|
</script>
|
|
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Person",
|
|
"name": "Clément Saillant",
|
|
"alternateName": "L'electron rare",
|
|
"url": "https://electron-rare.github.io/",
|
|
"jobTitle": "Concepteur en creation electronique, design produit et systemes experimentaux",
|
|
"description": "Codeur creatif, iterateur IA et inventeur de systemes: creation electronique, performances audiovisuelles et collaborations studio.",
|
|
"sameAs": [
|
|
"https://fr.linkedin.com/in/electron-rare",
|
|
"https://www.malt.com/profile/clementsaillant",
|
|
"https://lelectron-fou.bandcamp.com/",
|
|
"https://github.com/electron-rare"
|
|
]
|
|
}
|
|
</script>
|
|
<script>
|
|
(function () {
|
|
var params = new URLSearchParams(window.location.search);
|
|
var raw = params.get('da') || params.get('variant') || params.get('da-variant') || '';
|
|
var normalized = (raw || '').toLowerCase().replace(/^v/, 'v');
|
|
var allowed = {
|
|
v1: 1,
|
|
v2: 1,
|
|
v3: 1,
|
|
v4: 1,
|
|
v5: 1,
|
|
v6: 1,
|
|
v7: 1,
|
|
v8: 1,
|
|
v9: 1,
|
|
v10: 1,
|
|
v11: 1,
|
|
v12: 1,
|
|
'1': 1,
|
|
'2': 1,
|
|
'3': 1,
|
|
'4': 1,
|
|
'5': 1,
|
|
'6': 1,
|
|
'7': 1,
|
|
'8': 1,
|
|
'9': 1,
|
|
'10': 1,
|
|
'11': 1,
|
|
'12': 1
|
|
};
|
|
var requested = normalized in allowed ? normalized : 'v12';
|
|
if (requested && requested.length === 1) {
|
|
requested = 'v' + requested;
|
|
}
|
|
document.documentElement.setAttribute('data-da-variant', requested || 'v12');
|
|
})();
|
|
</script>
|
|
<link rel="stylesheet" href="/styles.css" />
|
|
|
|
</head>
|
|
<body id="top">
|
|
<noscript>
|
|
<iframe
|
|
src="https://www.googletagmanager.com/ns.html?id=GTM-5SLM67QF"
|
|
height="0"
|
|
width="0"
|
|
style="display: none; visibility: hidden"></iframe>
|
|
</noscript>
|
|
|
|
<a class="skip-link" href="#main">Aller au contenu</a>
|
|
|
|
<header class="site-nav" data-nav>
|
|
<div class="shell nav-inner">
|
|
<a class="brand" href="#top" aria-label="Retour en haut">
|
|
<img src="/assets/brand/logo-mark.png" width="46" height="46" alt="Logo L'electron rare" />
|
|
<span class="brand-text">
|
|
<span class="brand-kicker">Studio</span>
|
|
<strong>L'electron rare</strong>
|
|
</span>
|
|
</a>
|
|
|
|
<nav aria-label="Navigation principale">
|
|
<ul class="nav-list">
|
|
<li><a class="site-navlink" href="#a-propos">Approche</a></li>
|
|
<li><a class="site-navlink" href="#projets">Projets</a></li>
|
|
<li><a class="site-navlink" href="#github-lab">GitHub</a></li>
|
|
<li><a class="site-navlink" href="/lab/">Lab interactif</a></li>
|
|
<li><a class="site-navlink" href="#contact">Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="main">
|
|
<section class="hero shell reveal" data-reveal>
|
|
<div class="hero-layout">
|
|
<div class="hero-copy-stack">
|
|
<p class="eyebrow">Electronique lab studio</p>
|
|
<h1>
|
|
Carnet de labo vivant: <span>traces</span>, mesures et production systeme.
|
|
</h1>
|
|
<p class="hero-copy">
|
|
Je documente chaque mission comme un bench electronique: hypotheses, tests instrumentes, revision de
|
|
cartes et mise en production.
|
|
</p>
|
|
<div class="hero-actions">
|
|
<a class="btn btn-primary" href="#projets" data-track="cta_hero_projets" data-destination="#projets">
|
|
Voir les projets
|
|
</a>
|
|
<a class="btn btn-secondary" href="#contact" data-track="cta_hero_contact" data-destination="#contact">
|
|
Demarrer une mission
|
|
</a>
|
|
<a
|
|
class="btn btn-ghost"
|
|
href="https://fr.linkedin.com/in/electron-rare"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
data-track="cta_hero_profile"
|
|
data-destination="linkedin.com/in/electron-rare">
|
|
Voir le profil
|
|
</a>
|
|
</div>
|
|
<ul class="hero-metrics" aria-label="Signaux studio">
|
|
<li>
|
|
<strong>Bench mesure</strong>
|
|
<span>oscilloscope, multimetre, verification terrain</span>
|
|
</li>
|
|
<li>
|
|
<strong>PCB engineering</strong>
|
|
<span>traces, vias, revision et production</span>
|
|
</li>
|
|
<li>
|
|
<strong>Impact</strong>
|
|
<span>prototype utile, lisible, deployable</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<aside class="hero-lab-visual" aria-label="Assets labo electronique">
|
|
<figure class="lab-asset lab-asset-pcb" data-hero-asset="primary">
|
|
<img
|
|
src="/assets/da/openai/hero-pcb-routing-map.png"
|
|
alt="Plan de routage PCB avec traces et vias"
|
|
loading="eager"
|
|
data-hero-image />
|
|
<figcaption>Plan de routage vivant — trace / via / bus</figcaption>
|
|
</figure>
|
|
<figure class="lab-asset lab-asset-measure" data-hero-asset="secondary">
|
|
<img
|
|
src="/assets/da/openai/hero-measurement-rig.png"
|
|
alt="Planche de mesure pour validation électronique"
|
|
loading="lazy"
|
|
data-hero-image />
|
|
<figcaption>Notebook labo — validation terrain & protocole</figcaption>
|
|
</figure>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="a-propos" class="panel shell reveal" data-reveal>
|
|
<div class="panel-head">
|
|
<p class="eyebrow">Approche</p>
|
|
<h2>Direction artistique + direction systeme</h2>
|
|
</div>
|
|
<p>
|
|
Mon role est de transformer une intention en systeme operationnel: narration visuelle, architecture,
|
|
instrumentation et decisions produit. J'interviens comme partenaire de conception et de livraison.
|
|
</p>
|
|
<div class="pill-row">
|
|
<span>Creative coding</span>
|
|
<span>Design produit</span>
|
|
<span>Systemes embarques</span>
|
|
<span>Automation IA</span>
|
|
<span>Tracking GA4/GTM</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="projets" class="shell reveal" data-reveal>
|
|
<div class="section-head">
|
|
<p class="eyebrow">Top projets</p>
|
|
<h2>3 references GitHub prioritaires</h2>
|
|
</div>
|
|
|
|
<div class="projects-grid">
|
|
<article class="project-card">
|
|
<p class="project-tag">Real-time embedded stack</p>
|
|
<h3>RTC_BL_PHONE</h3>
|
|
<p>
|
|
Firmware ESP32 avec WebUI, audio, Bluetooth et orchestration multi-modules pour experiences de
|
|
communication temps reel.
|
|
</p>
|
|
<a
|
|
href="https://github.com/electron-rare/RTC_BL_PHONE"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
data-track="outbound_github_project_rtc_bl_phone"
|
|
data-track-legacy="outbound_github_project"
|
|
data-destination="github.com/electron-rare/RTC_BL_PHONE">
|
|
Ouvrir le repo
|
|
</a>
|
|
</article>
|
|
|
|
<article class="project-card">
|
|
<p class="project-tag">Narrative UI and scene engine</p>
|
|
<h3>Le Mystere Professeur Zacus</h3>
|
|
<p>
|
|
Pipeline scenes/screens, effets visuels et logique d'interaction pour experiences immersives sur
|
|
hardware contraint.
|
|
</p>
|
|
<a
|
|
href="https://github.com/electron-rare/le-mystere-professeur-zacus"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
data-track="outbound_github_project_zacus"
|
|
data-track-legacy="outbound_github_project"
|
|
data-destination="github.com/electron-rare/le-mystere-professeur-zacus">
|
|
Ouvrir le repo
|
|
</a>
|
|
</article>
|
|
|
|
<article class="project-card">
|
|
<p class="project-tag">Portfolio and conversion stack</p>
|
|
<h3>electron-rare.github.io</h3>
|
|
<p>
|
|
Site vitrine orienté conversion: message clair, preuves directes, instrumentation GA4 et gouvernance
|
|
DA continue.
|
|
</p>
|
|
<a
|
|
href="https://github.com/electron-rare/electron-rare.github.io"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
data-track="outbound_github_project_site"
|
|
data-track-legacy="outbound_github_project"
|
|
data-destination="github.com/electron-rare/electron-rare.github.io">
|
|
Ouvrir le repo
|
|
</a>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="github-lab" class="panel shell reveal" data-reveal>
|
|
<div class="panel-head">
|
|
<p class="eyebrow">GitHub Lab</p>
|
|
<h2>Section dediee aux references techniques</h2>
|
|
</div>
|
|
<p>
|
|
Ici je centralise les depots de travail, prototypes secondaires et experiments en cours, avec suivi des
|
|
iterations.
|
|
</p>
|
|
<a
|
|
class="btn btn-secondary"
|
|
href="https://github.com/electron-rare?tab=repositories"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
data-track="outbound_github_lab_more"
|
|
data-track-legacy="outbound_github_contact"
|
|
data-destination="github.com/electron-rare?tab=repositories">
|
|
Voir plus sur GitHub
|
|
</a>
|
|
<a class="btn btn-ghost" href="/lab/" data-track="cta_lab_interactif_open" data-destination="/lab/">
|
|
Ouvrir le Lab interactif
|
|
</a>
|
|
</section>
|
|
|
|
<section id="contact" class="shell contact reveal" data-reveal>
|
|
<div class="section-head">
|
|
<p class="eyebrow">Contact</p>
|
|
<h2>Parlons lancement, prototype ou mission studio</h2>
|
|
</div>
|
|
<p>
|
|
Je prends des missions autour du design systeme, du prototypage produit et des experiences creatives
|
|
instrumentees.
|
|
</p>
|
|
<div class="contact-links">
|
|
<a
|
|
href="https://fr.linkedin.com/in/electron-rare"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
data-track="outbound_linkedin_contact"
|
|
data-destination="linkedin.com/in/electron-rare">
|
|
LinkedIn
|
|
</a>
|
|
<a
|
|
href="https://www.malt.com/profile/clementsaillant"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
data-track="outbound_malt_contact"
|
|
data-destination="malt.com/profile/clementsaillant">
|
|
Malt
|
|
</a>
|
|
<a
|
|
href="https://lelectron-fou.bandcamp.com/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
data-track="outbound_bandcamp_contact"
|
|
data-destination="lelectron-fou.bandcamp.com">
|
|
Bandcamp
|
|
</a>
|
|
<a
|
|
href="https://github.com/electron-rare"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
data-track="outbound_github_contact"
|
|
data-destination="github.com/electron-rare">
|
|
GitHub
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<div class="shell footer-inner">
|
|
<p><strong>L'electron rare</strong> - design de systemes, creation electronique, code et IA.</p>
|
|
<p><span id="year"></span> Clement Saillant. Tous droits reserves.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="/script.js" defer></script>
|
|
</body>
|
|
</html>
|