Clément SAILLANT
260 lines
9.7 KiB
HTML
260 lines
9.7 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'électron rare</title>
|
|
<meta name="theme-color" content="#f7f4ec" />
|
|
<meta
|
|
name="description"
|
|
content="Site personnel de Clément Saillant (L'électron rare) : projets audiovisuels, performances et contact."
|
|
/>
|
|
<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'électron rare" />
|
|
<meta property="og:title" content="Clément Saillant — L'électron rare" />
|
|
<meta property="og:url" content="https://electron-rare.github.io/" />
|
|
<meta
|
|
property="og:description"
|
|
content="Performances, création sonore expérimentale, collaborations vidéo et projets noise."
|
|
/>
|
|
<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'électron rare - performances et créations audiovisuelles" />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="Clément Saillant — L'électron rare" />
|
|
<meta
|
|
name="twitter:description"
|
|
content="Performances et création audiovisuelle expérimentale."
|
|
/>
|
|
<meta
|
|
name="twitter:image"
|
|
content="https://electron-rare.github.io/assets/og-cover.jpg"
|
|
/>
|
|
<link rel="preload" href="assets/styles.css" as="style" />
|
|
<link rel="stylesheet" href="assets/styles.css" />
|
|
<script>
|
|
window.GTM_CONTAINER_ID = "GTM-5SLM67QF";
|
|
window.dataLayer = window.dataLayer || [];
|
|
</script>
|
|
<script>
|
|
(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],
|
|
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", window.GTM_CONTAINER_ID);
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<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="#top">Aller au contenu</a>
|
|
<header class="site-header">
|
|
<div class="container nav-wrap">
|
|
<a class="brand" href="#top">L'électron rare</a>
|
|
<nav aria-label="Navigation principale">
|
|
<ul>
|
|
<li><a href="#a-propos">À propos</a></li>
|
|
<li><a href="#projets">Projets</a></li>
|
|
<li><a href="#contact">Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="top" class="container">
|
|
<section class="hero" aria-labelledby="hero-title">
|
|
<div class="hero-grid">
|
|
<div>
|
|
<p class="eyebrow">Performance • Noise • Audiovisuel</p>
|
|
<h1 id="hero-title">Clément Saillant, alias L'électron rare.</h1>
|
|
<p class="hero-text">
|
|
Projet artistique orienté expérimentations sonores et visuelles:
|
|
performances live, textures noise et collaborations entre scène et
|
|
image.
|
|
</p>
|
|
<ul class="hero-metrics" aria-label="Axes artistiques">
|
|
<li>Live sets</li>
|
|
<li>Textures bruitistes</li>
|
|
<li>Collab vidéo</li>
|
|
</ul>
|
|
<p class="hero-actions">
|
|
<a class="btn btn-primary" href="#projets" data-track="cta_hero_projets" data-destination="#projets">Voir mes projets</a>
|
|
<a class="btn btn-secondary" href="#contact" data-track="cta_hero_contact" data-destination="#contact">Me contacter</a>
|
|
</p>
|
|
</div>
|
|
<aside class="hero-card" aria-label="Carte artiste">
|
|
<p class="hero-card-kicker">Carte rapide</p>
|
|
<h2>L'électron rare</h2>
|
|
<p>
|
|
Performances et création sonore expérimentale, entre énergie live
|
|
et matière visuelle.
|
|
</p>
|
|
<a href="#a-propos" data-track="cta_hero_profile" data-destination="#a-propos">Explorer le profil</a>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="a-propos" class="panel" aria-labelledby="about-title">
|
|
<h2 id="about-title">À propos</h2>
|
|
<p>
|
|
Je suis <strong>Clément Saillant</strong>, artiste et créateur sous le
|
|
nom <strong>L'électron rare</strong>. J'explore les liens entre matière
|
|
sonore, récit visuel et énergie live, avec une approche artisanale et
|
|
directe.
|
|
</p>
|
|
</section>
|
|
|
|
<section id="projets" class="panel" aria-labelledby="projects-title">
|
|
<h2 id="projects-title">Projets</h2>
|
|
<div class="cards">
|
|
<article class="card">
|
|
<h3>L'électron rare</h3>
|
|
<p>
|
|
Univers principal: performances et créations expérimentales entre
|
|
musique électronique et visuel.
|
|
</p>
|
|
<p>
|
|
<a
|
|
href="https://fr.linkedin.com/in/electron-rare"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
data-track="outbound_linkedin_project"
|
|
data-destination="linkedin.com"
|
|
>Profil LinkedIn</a
|
|
>
|
|
</p>
|
|
</article>
|
|
<article class="card">
|
|
<h3>Collaborations vidéo</h3>
|
|
<p>
|
|
Travail autour du VJing et des formats hybrides live, notamment avec
|
|
des collaborations type VJ Clearscreen.
|
|
</p>
|
|
</article>
|
|
<article class="card">
|
|
<h3>Électron Fou (noise)</h3>
|
|
<p>
|
|
Projet noise affilié à la scène expérimentale, avec sorties publiées
|
|
et présence sur plateformes audio.
|
|
</p>
|
|
<p>
|
|
<a
|
|
href="https://lelectron-fou.bandcamp.com/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
data-track="outbound_bandcamp_project"
|
|
data-destination="bandcamp.com"
|
|
>Bandcamp</a
|
|
>
|
|
</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="contact" class="panel" aria-labelledby="contact-title">
|
|
<h2 id="contact-title">Contact</h2>
|
|
<p class="contact-intro">
|
|
Pour booking, collaboration artistique ou production audiovisuelle,
|
|
contactez-moi via les plateformes ci-dessous.
|
|
</p>
|
|
<ul class="contact-list">
|
|
<li>
|
|
<a
|
|
href="https://fr.linkedin.com/in/electron-rare"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
data-track="outbound_linkedin_contact"
|
|
data-destination="linkedin.com"
|
|
>LinkedIn</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="https://www.malt.com/profile/clementsaillant"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
data-track="outbound_malt_contact"
|
|
data-destination="malt.com"
|
|
>Malt</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="https://lelectron-fou.bandcamp.com/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
data-track="outbound_bandcamp_contact"
|
|
data-destination="bandcamp.com"
|
|
>Bandcamp (Électron Fou)</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
<ul class="trust-points" aria-label="Repères de confiance">
|
|
<li>Profil professionnel vérifiable sur LinkedIn et Malt</li>
|
|
<li>Projets artistiques publiés sur plateformes publiques</li>
|
|
<li>Contact direct pour booking et collaborations</li>
|
|
</ul>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<div class="container">
|
|
<small>© 2026 Clément Saillant — L'électron rare.</small>
|
|
</div>
|
|
</footer>
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Person",
|
|
"name": "Clément Saillant",
|
|
"alternateName": "L'électron rare",
|
|
"url": "https://electron-rare.github.io/",
|
|
"jobTitle": "Artiste audiovisuel et créateur sonore expérimental",
|
|
"description": "Performances live, création noise et collaborations vidéo sous l'identité L'électron rare.",
|
|
"sameAs": [
|
|
"https://fr.linkedin.com/in/electron-rare",
|
|
"https://www.malt.com/profile/clementsaillant",
|
|
"https://lelectron-fou.bandcamp.com/"
|
|
]
|
|
}
|
|
</script>
|
|
<script>
|
|
(function () {
|
|
var links = document.querySelectorAll("[data-track]");
|
|
for (var i = 0; i < links.length; i += 1) {
|
|
links[i].addEventListener("click", function () {
|
|
var eventName = this.getAttribute("data-track");
|
|
var destination =
|
|
this.getAttribute("data-destination") || this.getAttribute("href") || "unknown";
|
|
window.dataLayer.push({
|
|
event: eventName,
|
|
event_category: "engagement",
|
|
event_label: eventName,
|
|
destination: destination
|
|
});
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|