electron-rare
7d9a6174c9
Add rel=me links to https://mastodon.saillant.cc/@clement in both page variants (preview + index): head link tag, visible header social anchor, and JSON-LD sameAs entry. Enables green verified badge on the Mastodon profile Site field.
308 lines
19 KiB
Plaintext
308 lines
19 KiB
Plaintext
---
|
|
import { BmuViewer } from '@/components/BmuViewer';
|
|
---
|
|
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>L'électron rare — Systèmes électroniques spécifiques</title>
|
|
<meta name="description" content="Conception, mise au point et fiabilisation de systèmes électroniques spécifiques, automatismes et ensembles liés à l'énergie. Consulting et formation PCB, KiCad, µC." />
|
|
<meta property="og:title" content="L'électron rare — Systèmes électroniques spécifiques" />
|
|
<meta property="og:description" content="Conception, mise au point et fiabilisation de systèmes électroniques spécifiques. Consulting et formation." />
|
|
<meta property="og:image" content="https://www.lelectronrare.fr/assets/og-cover.jpg" />
|
|
<meta property="og:url" content="https://www.lelectronrare.fr/preview/" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:site_name" content="L'électron rare" />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="L'électron rare — Systèmes électroniques spécifiques" />
|
|
<meta name="twitter:description" content="Conception, mise au point et fiabilisation de systèmes électroniques spécifiques." />
|
|
<meta name="twitter:image" content="https://www.lelectronrare.fr/assets/og-cover.jpg" />
|
|
<link rel="me" href="https://mastodon.saillant.cc/@clement" />
|
|
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "ProfessionalService",
|
|
"name": "L'électron rare",
|
|
"description": "Conception, mise au point et fiabilisation de systèmes électroniques spécifiques, automatismes et ensembles liés à l'énergie.",
|
|
"url": "https://www.lelectronrare.fr",
|
|
"email": "contact@lelectronrare.fr",
|
|
"founder": { "@type": "Person", "name": "Clément Saillant" },
|
|
"areaServed": "France",
|
|
"serviceType": ["Conception électronique", "Formation PCB et embarqué", "Consulting technique", "Automatisme industriel"],
|
|
"sameAs": ["https://fr.linkedin.com/in/electron-rare", "https://github.com/electron-rare/", "https://mastodon.saillant.cc/@clement"]
|
|
}
|
|
</script>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
html { background: #06080b; color: #fff; overflow-x: hidden; }
|
|
body { background: #06080b; min-height: 100vh; font-family: 'Courier New', monospace; }
|
|
.scroll-track { height: 1000vh; position: relative; z-index: 1; }
|
|
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
|
|
|
|
/* Loader */
|
|
.loader { position: fixed; inset: 0; z-index: 9999; background: #06080b; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; transition: opacity 0.8s ease, visibility 0.8s ease; }
|
|
.loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
|
|
.loader-logo { width: clamp(60px, 8vw, 100px); height: auto; filter: drop-shadow(0 0 20px rgba(91,209,216,0.3)); }
|
|
.loader-name { font-size: clamp(20px, 2.5vw, 32px); font-weight: 800; color: rgba(255,255,255,0.8); letter-spacing: 0.06em; }
|
|
.loader-bar { width: clamp(180px, 30vw, 280px); height: 2px; background: rgba(255,255,255,0.06); border-radius: 1px; overflow: hidden; }
|
|
.loader-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #5bd1d8, #a78bfa); transition: width 0.3s ease; }
|
|
.loader-status { font-size: 10px; color: rgba(255,255,255,0.25); letter-spacing: 0.12em; text-transform: uppercase; }
|
|
.loader-tagline { font-size: 12px; color: rgba(255,255,255,0.3); letter-spacing: 0.08em; margin-bottom: 20px; }
|
|
.loader-actions { margin-top: 24px; }
|
|
.loader-skip { display: inline-block; padding: 10px 24px; border: 1px solid rgba(91,209,216,0.3); border-radius: 8px; color: rgba(91,209,216,0.7); font-size: 12px; text-decoration: none; letter-spacing: 0.04em; transition: all 0.2s; }
|
|
.loader-skip:hover { border-color: #5bd1d8; color: #5bd1d8; background: rgba(91,209,216,0.08); }
|
|
.loader-a11y { margin-top: 20px; font-size: 10px; color: rgba(255,255,255,0.15); }
|
|
.loader-a11y a { color: rgba(255,255,255,0.25); text-decoration: none; }
|
|
.loader-a11y a:hover { color: #5bd1d8; }
|
|
|
|
.ov { position: fixed; z-index: 3; pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity 0.5s, transform 0.5s; }
|
|
.ov.on { opacity: 1; transform: translateY(0); }
|
|
|
|
/* Hero */
|
|
.ov-hero { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
|
|
.hero-bottom { display: flex; flex-direction: column; align-items: center; padding-bottom: clamp(60px, 10vh, 120px); }
|
|
.hero-t { text-align: center; margin: 0; line-height: 1.1; }
|
|
.hl1,.hl3 { display: block; font-size: clamp(28px, 4.5vw, 56px); font-weight: 800; color: rgba(255,255,255,0.85); letter-spacing: -0.02em; }
|
|
.hl2 { display: block; font-size: clamp(32px, 5.5vw, 64px); font-weight: 800; color: #5bd1d8; letter-spacing: -0.02em; }
|
|
.hero-s { font-size: clamp(11px, 1.2vw, 15px); color: rgba(255,255,255,0.3); letter-spacing: 0.15em; text-transform: uppercase; margin: 16px 0 0; }
|
|
.hero-s2 { font-size: clamp(10px, 1vw, 13px); color: rgba(255,255,255,0.2); letter-spacing: 0.12em; text-transform: uppercase; margin: 8px 0 0; }
|
|
|
|
/* Header */
|
|
.site-hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 16px clamp(20px, 3vw, 40px); pointer-events: none; }
|
|
.hdr-left { display: flex; align-items: center; gap: 10px; pointer-events: auto; }
|
|
.hdr-logo { width: 36px; height: auto; filter: drop-shadow(0 0 12px rgba(91,209,216,0.3)); }
|
|
.hdr-name { font-size: 16px; font-weight: 800; color: rgba(255,255,255,0.8); letter-spacing: 0.04em; }
|
|
.hdr-nav { display: flex; align-items: center; gap: 8px; pointer-events: auto; }
|
|
.hdr-link { padding: 8px 16px; color: rgba(255,255,255,0.6); font-size: 12px; font-weight: 600; text-decoration: none; letter-spacing: 0.04em; transition: color 0.2s; }
|
|
.hdr-link:hover { color: #5bd1d8; }
|
|
.hdr-social { font-weight: 800; font-size: 11px; text-transform: uppercase; padding: 8px 10px; opacity: 0.5; }
|
|
.hdr-social:hover { opacity: 1; }
|
|
.hdr-cta { padding: 8px 20px; border-radius: 6px; background: rgba(91,209,216,0.15); border: 1px solid rgba(91,209,216,0.3); color: #5bd1d8; font-size: 12px; font-weight: 700; text-decoration: none; letter-spacing: 0.05em; transition: background 0.2s; }
|
|
.hdr-cta:hover { background: rgba(91,209,216,0.25); }
|
|
|
|
/* Formats */
|
|
.ov-formats { bottom: clamp(30px, 5vh, 60px); left: 50%; transform: translateX(-50%); display: flex; gap: 12px; max-width: 820px; width: 92vw; }
|
|
.ov-formats.on { transform: translateX(-50%); }
|
|
.fmt { flex: 1; padding: 14px 16px; border-radius: 8px; background: rgba(6,8,11,0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.05); text-align: center; text-decoration: none; color: inherit; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
|
|
.fmt:hover { background: rgba(6,8,11,0.85); border-color: rgba(255,255,255,0.18); transform: translateY(-2px); }
|
|
.fmt-t { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
|
|
.fmt-d { font-size: 10px; color: rgba(255,255,255,0.35); }
|
|
|
|
/* Progress */
|
|
.prog { position: fixed; top: 0; left: 0; height: 2px; z-index: 5; background: linear-gradient(90deg, #5bd1d8, #a78bfa, #f59e0b); width: 0%; }
|
|
.inf { position: fixed; bottom: 10px; right: 14px; z-index: 4; font-size: 8px; color: rgba(255,255,255,0.1); letter-spacing: 0.06em; }
|
|
|
|
/* Dots */
|
|
.dots { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 4; display: flex; flex-direction: column; gap: 14px; }
|
|
.dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.1); transition: background 0.3s, transform 0.3s, border-color 0.3s; cursor: pointer; pointer-events: auto; position: relative; }
|
|
.dot.on { background: #5bd1d8; border-color: #5bd1d8; transform: scale(1.3); box-shadow: 0 0 10px rgba(91,209,216,0.4); }
|
|
.dot:hover { background: rgba(91,209,216,0.5); border-color: rgba(91,209,216,0.5); }
|
|
.dot[data-l]:not([data-l=""])::after { content: attr(data-l); position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 9px; color: rgba(255,255,255,0.5); letter-spacing: 0.05em; white-space: nowrap; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
|
|
.dot[data-l]:not([data-l=""]):hover::after { opacity: 1; }
|
|
|
|
@media (max-width: 768px) {
|
|
.ov-formats { flex-direction: column; gap: 6px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body data-da-variant="preview">
|
|
<!-- Loader -->
|
|
<div class="loader" id="loader">
|
|
<img src="/assets/brand/logo-mark.svg" alt="L'électron rare" class="loader-logo" />
|
|
<p class="loader-name">L'électron rare</p>
|
|
<p class="loader-tagline">Systèmes électroniques spécifiques</p>
|
|
<div class="loader-bar"><div class="loader-fill" id="loader-fill"></div></div>
|
|
<p class="loader-status" id="loader-status">Chargement des modèles 3D...</p>
|
|
<div class="loader-actions">
|
|
<a href="/conception/" class="loader-skip">Accéder au site sans 3D →</a>
|
|
</div>
|
|
<p class="loader-a11y">Version accessible : <a href="/conception/">Conception</a> · <a href="/formation/">Formation</a> · <a href="/consulting/">Consulting</a> · <a href="/contact/">Contact</a></p>
|
|
</div>
|
|
|
|
<BmuViewer client:load />
|
|
<div class="prog" id="prog"></div>
|
|
|
|
<div class="dots" id="dots">
|
|
<div class="dot on" data-s="hero" data-p="0.03" data-l="Hero"></div>
|
|
<div class="dot" data-s="hero-to-exp" data-p="0.09" data-l=""></div>
|
|
<div class="dot" data-s="exp-elec" data-p="0.14" data-l="Élec"></div>
|
|
<div class="dot" data-s="exp-auto" data-p="0.18" data-l="Auto"></div>
|
|
<div class="dot" data-s="exp-energie" data-p="0.22" data-l="Énergie"></div>
|
|
<div class="dot" data-s="exp-dispositifs" data-p="0.255" data-l="Dispositifs"></div>
|
|
<div class="dot" data-s="exp-consulting" data-p="0.285" data-l="Consulting"></div>
|
|
<div class="dot" data-s="eclate-recul" data-p="0.31" data-l=""></div>
|
|
<div class="dot" data-s="eclate-sep" data-p="0.34" data-l=""></div>
|
|
<div class="dot" data-s="eclate-plat" data-p="0.36" data-l=""></div>
|
|
<div class="dot" data-s="cas-kxkm" data-p="0.42" data-l="KXKM"></div>
|
|
<div class="dot" data-s="cas-industrie" data-p="0.52" data-l="Industrie"></div>
|
|
<div class="dot" data-s="cas-formation" data-p="0.60" data-l="Formation"></div>
|
|
<div class="dot" data-s="media" data-p="0.70" data-l="Médias"></div>
|
|
<div class="dot" data-s="formats" data-p="0.85" data-l="Services"></div>
|
|
<div class="dot" data-s="contact" data-p="0.95" data-l="Contact"></div>
|
|
</div>
|
|
|
|
<!-- HEADER -->
|
|
<header class="site-hdr">
|
|
<div class="hdr-left">
|
|
<img src="/assets/brand/logo-mark.svg" alt="" class="hdr-logo" />
|
|
<span class="hdr-name">L'électron rare</span>
|
|
</div>
|
|
<nav class="hdr-nav">
|
|
<a href="https://www.lelectronrare.fr/#graphic-sprints-title" class="hdr-link">Conception</a>
|
|
<a href="https://www.lelectronrare.fr/formation/" class="hdr-link">Formation</a>
|
|
<a href="https://www.lelectronrare.fr/#a-propos" class="hdr-link">Consulting</a>
|
|
<a href="https://fr.linkedin.com/in/electron-rare" target="_blank" rel="noopener" class="hdr-link hdr-social" title="LinkedIn">in</a>
|
|
<a href="https://github.com/electron-rare/" target="_blank" rel="noopener" class="hdr-link hdr-social" title="GitHub">gh</a>
|
|
<a href="https://mastodon.saillant.cc/@clement" target="_blank" rel="me noopener" class="hdr-link hdr-social" title="Mastodon">mt</a>
|
|
<a href="https://www.lelectronrare.fr/" class="hdr-link" style="opacity:0.4">Site →</a>
|
|
<a href="https://www.lelectronrare.fr/#contact" class="hdr-cta">Contact</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- HERO -->
|
|
<div class="ov ov-hero on" data-sec="hero">
|
|
<div class="hero-bottom">
|
|
<h1 class="hero-t">
|
|
<span class="hl1">Systèmes</span>
|
|
<span class="hl2">électroniques</span>
|
|
<span class="hl3">spécifiques</span>
|
|
</h1>
|
|
<p class="hero-s">électronique · automatisme · énergie</p>
|
|
<p class="hero-s2">Conception · Mise au point · Fiabilisation · Consulting · Formation</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FORMATS -->
|
|
<div class="ov ov-formats" data-sec="formats">
|
|
<a class="fmt" href="/conception/">
|
|
<p class="fmt-t" style="color:#5bd1d8">Conception</p>
|
|
<p class="fmt-d">Schéma · PCB · Firmware · Validation</p>
|
|
</a>
|
|
<a class="fmt" href="/formation/">
|
|
<p class="fmt-t" style="color:#a78bfa">Formation</p>
|
|
<p class="fmt-d">PCB · KiCad · µC · Soudure</p>
|
|
</a>
|
|
<a class="fmt" href="/consulting/">
|
|
<p class="fmt-t" style="color:#f59e0b">Consulting</p>
|
|
<p class="fmt-d">Audit · Diagnostic · Transfert</p>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="scroll-track"></div>
|
|
|
|
<!-- SEO: texte indexable caché -->
|
|
<div class="sr-only" aria-hidden="false">
|
|
<h1>L'électron rare — Systèmes électroniques spécifiques</h1>
|
|
<p>Conception, mise au point et fiabilisation de systèmes électroniques spécifiques, automatismes et ensembles liés à l'énergie, au stockage et à l'optimisation terrain.</p>
|
|
<h2>Domaines d'expertise</h2>
|
|
<ul>
|
|
<li>Électronique spécifique : cartes, interfaces, capteurs, alimentation</li>
|
|
<li>Instrumentation et automatisme : bancs, automates, variateurs, protocoles terrain</li>
|
|
<li>Énergie et stockage : batterie, conversion, supervision, télémétrie</li>
|
|
<li>Dispositifs pour le réel : audio, LED, scène, robustesse terrain</li>
|
|
<li>Consulting et formation : audit, transfert, pédagogie, projet</li>
|
|
</ul>
|
|
<h2>Cas concrets</h2>
|
|
<ul>
|
|
<li>Industries créatives : système audio embarqué sur batterie pour le spectacle (KXKM)</li>
|
|
<li>Industrie : diagnostic et remise en service d'une ligne automatisée</li>
|
|
<li>Formation : formation PCB et embarqué pour une école d'art numérique</li>
|
|
</ul>
|
|
<h2>Services</h2>
|
|
<ul>
|
|
<li>Conception : schéma, PCB, firmware, validation</li>
|
|
<li>Formation : PCB, KiCad, microcontrôleurs, soudure</li>
|
|
<li>Consulting : audit, diagnostic, transfert</li>
|
|
</ul>
|
|
<p>Contact : <a href="https://www.lelectronrare.fr/#contact">Parlons de votre projet</a> — contact@lelectronrare.fr</p>
|
|
</div>
|
|
|
|
<noscript>
|
|
<div style="position:fixed;inset:0;z-index:9999;background:#06080b;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-family:monospace;text-align:center;padding:40px;">
|
|
<img src="/assets/photos/bmu-assembly.jpg" alt="BMU v2 Assembly" style="width:clamp(200px,50vw,500px);border-radius:12px;margin-bottom:20px;" />
|
|
<h1 style="font-size:24px;">L'électron rare</h1>
|
|
<p style="color:rgba(255,255,255,0.5);margin:12px 0;">Systèmes électroniques spécifiques</p>
|
|
<a href="https://www.lelectronrare.fr/" style="color:#5bd1d8;margin-top:16px;">Accéder au site →</a>
|
|
</div>
|
|
</noscript>
|
|
|
|
<div class="inf">L'électron rare · Clément Saillant</div>
|
|
|
|
<!-- GTM for A/B tracking -->
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),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>
|
|
const prog = document.getElementById('prog');
|
|
const dots = [...document.querySelectorAll('.dot')];
|
|
const overlays = [...document.querySelectorAll('.ov')];
|
|
const RANGES = [
|
|
['hero',0,0.10],['hero-to-exp',0.10,0.16],
|
|
['exp-elec',0.16,0.20],['exp-auto',0.20,0.24],['exp-energie',0.24,0.28],
|
|
['exp-dispositifs',0.28,0.31],['exp-consulting',0.31,0.34],
|
|
['eclate-recul',0.34,0.36],['eclate-sep',0.36,0.39],['eclate-plat',0.39,0.41],
|
|
['cas',0.41,0.65],
|
|
['media',0.65,0.81],['formats',0.81,0.91],['contact',0.91,1.0],
|
|
];
|
|
function update() {
|
|
const max = document.documentElement.scrollHeight - window.innerHeight;
|
|
const t = max > 0 ? window.scrollY / max : 0;
|
|
if (prog) prog.style.width = (t*100)+'%';
|
|
let active = 'hero';
|
|
for (const [id,s,e] of RANGES) { if (t>=s&&t<=e){active=id;break;} }
|
|
overlays.forEach(el => el.classList.toggle('on', el.getAttribute('data-sec')===active));
|
|
dots.forEach(d => d.classList.toggle('on', d.getAttribute('data-s')===active));
|
|
}
|
|
window.addEventListener('scroll', update, {passive:true});
|
|
update();
|
|
|
|
// Dots cliquables
|
|
dots.forEach(d => {
|
|
d.addEventListener('click', () => {
|
|
const p = parseFloat(d.getAttribute('data-p') || '0');
|
|
const max = document.documentElement.scrollHeight - window.innerHeight;
|
|
window.scrollTo({ top: Math.round(max * p), behavior: 'smooth' });
|
|
});
|
|
});
|
|
|
|
// GA4 tracking
|
|
document.querySelectorAll('a[href]').forEach(a => {
|
|
a.addEventListener('click', () => {
|
|
const label = a.textContent?.trim() || a.getAttribute('href') || '';
|
|
window.dataLayer = window.dataLayer || [];
|
|
window.dataLayer.push({ event: 'click', event_category: 'navigation', event_label: label, da_variant: 'preview', page_path: '/preview/' });
|
|
});
|
|
});
|
|
|
|
// Loader
|
|
const loader = document.getElementById('loader');
|
|
const loaderFill = document.getElementById('loader-fill');
|
|
const loaderStatus = document.getElementById('loader-status');
|
|
const msgs = ['Chargement des modèles 3D...', 'Compilation shaders...', 'Préparation du rendu...'];
|
|
let msgIdx = 0;
|
|
const msgInterval = setInterval(() => {
|
|
msgIdx = (msgIdx + 1) % msgs.length;
|
|
if (loaderStatus) loaderStatus.textContent = msgs[msgIdx];
|
|
if (loaderFill) loaderFill.style.width = Math.min(90, parseFloat(loaderFill.style.width || '0') + 20) + '%';
|
|
}, 1200);
|
|
|
|
function hideLoader() {
|
|
if (loaderFill) loaderFill.style.width = '100%';
|
|
if (loaderStatus) loaderStatus.textContent = 'Prêt';
|
|
clearInterval(msgInterval);
|
|
setTimeout(() => { if (loader) loader.classList.add('done'); }, 400);
|
|
}
|
|
|
|
const checkReady = setInterval(() => {
|
|
const cvs = document.querySelector('canvas');
|
|
if (cvs && cvs.width > 0) { clearInterval(checkReady); setTimeout(hideLoader, 800); }
|
|
}, 200);
|
|
setTimeout(hideLoader, 10000);
|
|
</script>
|
|
</body>
|
|
</html>
|