feat: apply pro creative-lab art direction and validate astro pipeline
This commit is contained in:
Clément SAILLANT
@@ -0,0 +1,55 @@
|
||||
name: Deploy Astro to GitHub Pages
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main]
|
||||
workflow_dispatch:
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
pages: write
|
||||
id-token: write
|
||||
|
||||
concurrency:
|
||||
group: pages
|
||||
cancel-in-progress: true
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 22
|
||||
cache: npm
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Build
|
||||
run: npm run build
|
||||
env:
|
||||
PUBLIC_GTM_CONTAINER_ID: GTM-5SLM67QF
|
||||
|
||||
- name: Setup Pages
|
||||
uses: actions/configure-pages@v5
|
||||
|
||||
- name: Upload artifact
|
||||
uses: actions/upload-pages-artifact@v3
|
||||
with:
|
||||
path: ./dist
|
||||
|
||||
deploy:
|
||||
needs: build
|
||||
runs-on: ubuntu-latest
|
||||
environment:
|
||||
name: github-pages
|
||||
url: ${{ steps.deployment.outputs.page_url }}
|
||||
steps:
|
||||
- name: Deploy to GitHub Pages
|
||||
id: deployment
|
||||
uses: actions/deploy-pages@v4
|
||||
@@ -0,0 +1,9 @@
|
||||
# Internal private notes
|
||||
notes-interne/
|
||||
|
||||
# Node / tooling
|
||||
node_modules/
|
||||
dist/
|
||||
storybook-static/
|
||||
.astro/
|
||||
.DS_Store
|
||||
@@ -0,0 +1,25 @@
|
||||
import type { StorybookConfig } from '@storybook/react-vite';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
import path from 'node:path';
|
||||
|
||||
const config: StorybookConfig = {
|
||||
stories: ['../src/**/*.stories.@(ts|tsx)'],
|
||||
addons: ['@storybook/addon-onboarding', '@storybook/addon-docs', '@storybook/addon-a11y', '@storybook/addon-vitest'],
|
||||
framework: {
|
||||
name: '@storybook/react-vite',
|
||||
options: {}
|
||||
},
|
||||
viteFinal: async (config) => {
|
||||
config.resolve = config.resolve || {};
|
||||
config.resolve.alias = {
|
||||
...(typeof config.resolve.alias === 'object' ? config.resolve.alias : {}),
|
||||
'@': path.resolve(fileURLToPath(new URL('../src', import.meta.url)))
|
||||
};
|
||||
return config;
|
||||
},
|
||||
docs: {
|
||||
autodocs: 'tag'
|
||||
}
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -0,0 +1,17 @@
|
||||
import type { Preview } from '@storybook/react-vite';
|
||||
import '../src/styles/global.css';
|
||||
|
||||
const preview: Preview = {
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
backgrounds: {
|
||||
default: 'studio-dark',
|
||||
values: [
|
||||
{ name: 'studio-dark', value: '#0f0e17' },
|
||||
{ name: 'studio-deep', value: '#151325' }
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default preview;
|
||||
@@ -0,0 +1,35 @@
|
||||
# Architecture — Site personnel statique GitHub Pages
|
||||
|
||||
- **Date**: 2026-03-01
|
||||
- **Gate visée**: G1 Arch Freeze
|
||||
- **Responsable (agent)**: Architect
|
||||
|
||||
## Vue d'ensemble
|
||||
Architecture front statique en 2 fichiers:
|
||||
- `index.html`: structure sémantique (header/nav/main/sections/footer)
|
||||
- `assets/styles.css`: thème, layout responsive, composants visuels
|
||||
|
||||
## Interfaces
|
||||
- **Entrée**: navigateur web moderne
|
||||
- **Sortie**: rendu d'un site vitrine personnel
|
||||
- **Hébergement**: GitHub Pages (branch `main`, root)
|
||||
|
||||
## Structure UI
|
||||
- Bloc `hero` avec CTA.
|
||||
- Section `#a-propos` pour la présentation.
|
||||
- Section `#projets` avec grille de cartes.
|
||||
- Section `#contact` avec liens sortants.
|
||||
|
||||
## Contraintes techniques
|
||||
- Aucun JS requis pour la version initiale.
|
||||
- Chemins relatifs uniquement (`assets/styles.css`).
|
||||
- CSS pur (variables, grid, media queries).
|
||||
|
||||
## Budgets
|
||||
- Poids page + CSS < 80KB (source non compressée).
|
||||
- Temps de chargement perçu < 1s sur connexion standard (contenu statique).
|
||||
|
||||
## Validation
|
||||
- Smoke test HTTP local.
|
||||
- Vérification ancres + rendu responsive.
|
||||
- Capture visuelle de preuve.
|
||||
@@ -0,0 +1,5 @@
|
||||
# G1 Arch Freeze Evidence (v2)
|
||||
|
||||
- Architecture UI détaillée: hero, about, projets, contact.
|
||||
- Contraintes GitHub Pages (chemins relatifs, statique sans build) confirmées.
|
||||
- Budgets et stratégie de validation ajustés.
|
||||
@@ -0,0 +1,5 @@
|
||||
# G1 Arch Freeze Evidence
|
||||
|
||||
- Architecture statique validée: `index.html` + `assets/styles.css`
|
||||
- Interfaces et contraintes de chemins relatifs définies
|
||||
- Budgets simplifiés documentés
|
||||
@@ -0,0 +1,259 @@
|
||||
<!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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@@ -0,0 +1,4 @@
|
||||
User-agent: *
|
||||
Allow: /
|
||||
|
||||
Sitemap: https://electron-rare.github.io/sitemap.xml
|
||||
@@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
<url>
|
||||
<loc>https://electron-rare.github.io/</loc>
|
||||
<lastmod>2026-03-01</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>1.0</priority>
|
||||
</url>
|
||||
</urlset>
|
||||
@@ -0,0 +1,424 @@
|
||||
:root {
|
||||
--bg: #f7f4ec;
|
||||
--surface: #fffdf7;
|
||||
--surface-soft: #f2eee3;
|
||||
--text: #171614;
|
||||
--muted: #625d50;
|
||||
--primary: #d74b2a;
|
||||
--primary-strong: #b83c1f;
|
||||
--border: #d8d1c1;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
|
||||
line-height: 1.6;
|
||||
background:
|
||||
radial-gradient(circle at 10% 10%, #ffddbf 0%, rgba(255, 221, 191, 0) 40%),
|
||||
radial-gradient(circle at 90% 0%, #f0d8bf 0%, rgba(240, 216, 191, 0) 35%),
|
||||
var(--bg);
|
||||
color: var(--text);
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
top: auto;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
left: 0.8rem;
|
||||
top: 0.8rem;
|
||||
width: auto;
|
||||
height: auto;
|
||||
z-index: 40;
|
||||
background: #111;
|
||||
color: #fff;
|
||||
padding: 0.45rem 0.7rem;
|
||||
border-radius: 0.45rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: min(1000px, 92vw);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
section[id] {
|
||||
scroll-margin-top: 6.2rem;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
backdrop-filter: blur(8px);
|
||||
background: rgba(247, 244, 236, 0.86);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.nav-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.8rem 0;
|
||||
}
|
||||
|
||||
.brand {
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 2rem;
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
padding: 0.35rem 0.55rem;
|
||||
border-radius: 0.45rem;
|
||||
}
|
||||
|
||||
nav a:hover,
|
||||
nav a:focus-visible {
|
||||
color: var(--text);
|
||||
background: rgba(255, 255, 255, 0.66);
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: clamp(3.2rem, 7vw, 4.8rem) 0 2.2rem;
|
||||
}
|
||||
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.25fr 0.8fr;
|
||||
gap: 1.1rem;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
color: var(--primary);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2rem, 5vw, 3.2rem);
|
||||
line-height: 1.12;
|
||||
margin: 0.6rem 0 1rem;
|
||||
max-width: 18ch;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
max-width: 64ch;
|
||||
margin: 0 0 1.4rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.hero-metrics {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.55rem;
|
||||
margin: 0 0 1.3rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.hero-metrics li {
|
||||
background: rgba(255, 255, 255, 0.76);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
padding: 0.3rem 0.65rem;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
min-height: 2.75rem;
|
||||
display: inline-block;
|
||||
padding: 0.7rem 1.02rem;
|
||||
border-radius: 0.7rem;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: #fff7f1;
|
||||
}
|
||||
|
||||
.btn-primary:hover,
|
||||
.btn-primary:focus-visible {
|
||||
background: var(--primary-strong);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 8px 18px rgba(183, 60, 31, 0.22);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
background: rgba(255, 255, 255, 0.65);
|
||||
}
|
||||
|
||||
.btn-secondary:hover,
|
||||
.btn-secondary:focus-visible {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
background: linear-gradient(180deg, #fff6eb 0%, #f3e6d4 100%);
|
||||
border: 1px solid #ddc8ab;
|
||||
border-radius: 14px;
|
||||
padding: 1rem 1rem 1.1rem;
|
||||
box-shadow: 0 12px 26px rgba(30, 18, 6, 0.11);
|
||||
}
|
||||
|
||||
.hero-card-kicker {
|
||||
margin: 0;
|
||||
color: #90633d;
|
||||
font-size: 0.78rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.hero-card h2 {
|
||||
margin: 0.35rem 0 0.45rem;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.hero-card p {
|
||||
margin: 0 0 0.7rem;
|
||||
color: #4f4639;
|
||||
}
|
||||
|
||||
.hero-card a {
|
||||
color: var(--primary-strong);
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.hero-card a:hover,
|
||||
.hero-card a:focus-visible {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-soft) 100%);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 1.1rem 1.2rem 1.25rem;
|
||||
margin: 1rem 0;
|
||||
box-shadow: 0 10px 24px rgba(30, 18, 6, 0.07);
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-size: 1px 500px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 0.2rem;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
grid-column: span 4;
|
||||
background: rgba(255, 252, 246, 0.86);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 0.9rem;
|
||||
transition: transform 140ms ease, box-shadow 140ms ease;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
margin-top: 0.1rem;
|
||||
margin-bottom: 0.45rem;
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.card a {
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.card a:hover,
|
||||
.card a:focus-visible {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 18px rgba(30, 18, 6, 0.08);
|
||||
}
|
||||
|
||||
.contact-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.contact-list a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 2rem;
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.contact-list a:hover,
|
||||
.contact-list a:focus-visible {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.contact-intro {
|
||||
margin-top: 0;
|
||||
color: var(--muted);
|
||||
max-width: 62ch;
|
||||
}
|
||||
|
||||
.trust-points {
|
||||
margin: 0.95rem 0 0;
|
||||
padding-left: 1.1rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.trust-points li + li {
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
border-top: 1px solid var(--border);
|
||||
color: var(--muted);
|
||||
padding: 1.2rem 0 2.2rem;
|
||||
margin-top: 1.6rem;
|
||||
}
|
||||
|
||||
a:focus-visible,
|
||||
button:focus-visible {
|
||||
outline: 3px solid var(--primary);
|
||||
outline-offset: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.hero-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
max-width: 38rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.card {
|
||||
grid-column: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.nav-wrap {
|
||||
flex-direction: column;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: inline-block;
|
||||
padding: 0.42rem 0.62rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding-top: 2.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 390px) {
|
||||
.container {
|
||||
width: min(1000px, 94vw);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(1.72rem, 9vw, 2.25rem);
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 1ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 1ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-contrast: more) {
|
||||
:root {
|
||||
--muted: #453f33;
|
||||
--border: #8b816d;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
# G0 Spec Freeze Evidence (v2)
|
||||
|
||||
- Spécification orientée « site personnel » finalisée.
|
||||
- AC mis à jour avec navigation ancrée et contenu vitrine.
|
||||
- Non-goals, risques et TODO de personnalisation documentés.
|
||||
@@ -0,0 +1,6 @@
|
||||
# G0 Spec Freeze Evidence
|
||||
|
||||
- Spec créée: `specs/site-github-pages-spec.md`
|
||||
- AC définis: AC1..AC4
|
||||
- Non-goals et risques documentés
|
||||
- TODO ajoutés pour informations manquantes
|
||||
@@ -0,0 +1,6 @@
|
||||
# G2 Implement Evidence (v2)
|
||||
|
||||
Implémentation livrée:
|
||||
- `index.html` transformé en template de site personnel complet.
|
||||
- `assets/styles.css` enrichi (navigation sticky, sections, cartes projets, responsive).
|
||||
- Documentation de déploiement mise à jour.
|
||||
@@ -0,0 +1,39 @@
|
||||
# G2 Implement Evidence (v3) - SEO + Acquisition
|
||||
|
||||
Date: 2026-03-01
|
||||
|
||||
## Portée implémentée
|
||||
- SEO technique: canonical, robots, sitemap, OG/Twitter image.
|
||||
- Tracking contract: événements CTA/outbound avec `event_category`, `event_label`, `destination`.
|
||||
- Bootstrap GTM prêt à brancher (`GTM-REPLACE_ME`).
|
||||
- Conversion UX: section contact enrichie + trust points.
|
||||
- Accessibilité/réactivité: skip-link déjà présent + réglage ultra-mobile (`<=390px`).
|
||||
|
||||
## Fichiers modifiés
|
||||
- `index.html`
|
||||
- `assets/styles.css`
|
||||
- `docs/github-pages-deploy.md`
|
||||
- `robots.txt` (nouveau)
|
||||
- `sitemap.xml` (nouveau)
|
||||
- `assets/og-cover.jpg` (nouveau)
|
||||
|
||||
## Mapping tracking (event -> destination)
|
||||
| Event | Type | Destination | Usage |
|
||||
|---|---|---|---|
|
||||
| `cta_hero_projets` | CTA interne | `#projets` | Navigation vers section projets |
|
||||
| `cta_hero_contact` | CTA interne | `#contact` | Navigation vers section contact |
|
||||
| `cta_hero_profile` | CTA interne | `#a-propos` | Navigation vers section profil |
|
||||
| `outbound_linkedin_project` | Sortant | `linkedin.com` | Preuve sociale projet |
|
||||
| `outbound_linkedin_contact` | Sortant | `linkedin.com` | Conversion primaire |
|
||||
| `outbound_malt_contact` | Sortant | `malt.com` | Conversion secondaire |
|
||||
| `outbound_bandcamp_project` | Sortant | `bandcamp.com` | Projet musical |
|
||||
| `outbound_bandcamp_contact` | Sortant | `bandcamp.com` | Contact alternatif |
|
||||
|
||||
Paramètres communs poussés:
|
||||
- `event_category=engagement`
|
||||
- `event_label=<event_name>`
|
||||
- `destination=<domain|anchor>`
|
||||
|
||||
## Notes
|
||||
- Pour activer GTM en production: remplacer `GTM-REPLACE_ME` dans le script head et le bloc noscript.
|
||||
- URL canonique actuelle: `https://electron-rare.github.io/`.
|
||||
@@ -0,0 +1,38 @@
|
||||
# G2 Implement Evidence (v4) - Astro Studio Migration Foundation
|
||||
|
||||
Date: 2026-03-01
|
||||
|
||||
## Scope implémenté
|
||||
- Mise en place stack primaire:
|
||||
- Astro + TypeScript strict
|
||||
- React integration
|
||||
- Tailwind 4 (via plugin Vite)
|
||||
- Motion
|
||||
- Radix/shadcn-like base (`Button` with Radix Slot + CVA)
|
||||
- Storybook React-Vite
|
||||
- Création architecture `src/` composantisée:
|
||||
- `src/layouts/BaseLayout.astro`
|
||||
- `src/pages/index.astro`
|
||||
- sections React (`Hero`, `About`, `Projects`, `Contact`)
|
||||
- composants UI (`Button`, `Card`)
|
||||
- Conservation contrat SEO/analytics:
|
||||
- metadata canonical/OG/Twitter
|
||||
- JSON-LD Person
|
||||
- contrat `dataLayer` (`event_category`, `event_label`, `destination`)
|
||||
- GTM ID `GTM-5SLM67QF` via `PUBLIC_GTM_CONTAINER_ID` fallback
|
||||
- Préparation déploiement Pages via GitHub Actions:
|
||||
- `.github/workflows/deploy-pages.yml`
|
||||
- Storybook full coverage initiale des composants/sections clés.
|
||||
|
||||
## Fichiers clés ajoutés/modifiés
|
||||
- `package.json`, `package-lock.json`
|
||||
- `astro.config.mjs`, `tsconfig.json`
|
||||
- `src/**` (layouts/components/styles/pages)
|
||||
- `.storybook/main.ts`, `.storybook/preview.ts`
|
||||
- `.github/workflows/deploy-pages.yml`
|
||||
- `public/robots.txt`, `public/sitemap.xml`, `public/assets/og-cover.jpg`
|
||||
- `docs/github-pages-deploy.md`
|
||||
- `specs/site-github-pages-spec.md`
|
||||
|
||||
## Note
|
||||
- L'ancien socle statique (`index.html`, `assets/styles.css`) est conservé temporairement dans le repo pour transition contrôlée.
|
||||
@@ -0,0 +1,7 @@
|
||||
# G3 Verification Evidence (v2)
|
||||
|
||||
Vérifications exécutées:
|
||||
- `python3 -m http.server 4173`
|
||||
- `curl -I http://127.0.0.1:4173/` -> `HTTP/1.0 200 OK`
|
||||
- `rg 'href="/' index.html` (attendu: aucune occurrence)
|
||||
- Capture Playwright: `artifacts/qa-test/2026-03-01/site-home-v2.png`
|
||||
@@ -0,0 +1,28 @@
|
||||
# G3 Verification Evidence (v3) - SEO + Tracking
|
||||
|
||||
Date: 2026-03-01
|
||||
|
||||
## Vérifications exécutées
|
||||
- `rg -n "canonical|og:image|twitter:image|application/ld\+json|GTM_CONTAINER_ID|event_category|event_label|destination" index.html`
|
||||
- `rg -n "data-track=|data-destination=" index.html`
|
||||
- `sips -g pixelWidth -g pixelHeight assets/og-cover.jpg`
|
||||
- `cat robots.txt`
|
||||
- `cat sitemap.xml`
|
||||
- `python3 -m http.server 4173` puis:
|
||||
- `curl -I http://127.0.0.1:4173/`
|
||||
- `curl -s http://127.0.0.1:4173/robots.txt`
|
||||
- `curl -s http://127.0.0.1:4173/sitemap.xml`
|
||||
|
||||
## Résultats attendus/observés
|
||||
- Canonical présent et fixé sur `https://electron-rare.github.io/`.
|
||||
- OG/Twitter image renseignée vers `assets/og-cover.jpg` (URL absolue).
|
||||
- JSON-LD `Person` enrichi (`jobTitle`, `description`, `sameAs`).
|
||||
- Contrat dataLayer conforme (`event_category`, `event_label`, `destination`).
|
||||
- `assets/og-cover.jpg` présent en `1200x630`.
|
||||
- `robots.txt` et `sitemap.xml` accessibles.
|
||||
- HTTP local `/` retourne `200 OK`.
|
||||
|
||||
## Contrôles manuels restants (production)
|
||||
- Publier le conteneur GTM réel et remplacer `GTM-REPLACE_ME`.
|
||||
- Vérifier la remontée GA4 Realtime des événements clés.
|
||||
- Valider les aperçus sociaux via LinkedIn Post Inspector/Facebook Sharing Debugger.
|
||||
@@ -0,0 +1,37 @@
|
||||
# G3 Verification Evidence (v4) - Full TODO Validation Pass
|
||||
|
||||
Date: 2026-03-01
|
||||
|
||||
## Lighthouse (local)
|
||||
Source URL testée: `http://127.0.0.1:4173/`
|
||||
|
||||
### Mobile
|
||||
- performance: **93**
|
||||
- accessibility: **95**
|
||||
- best-practices: **96**
|
||||
- seo: **100**
|
||||
|
||||
### Desktop
|
||||
- performance: **100**
|
||||
- accessibility: **95**
|
||||
- best-practices: **96**
|
||||
- seo: **100**
|
||||
|
||||
Artifacts JSON:
|
||||
- `artifacts/qa-test/2026-03-01/lighthouse-home-mobile-v1.json`
|
||||
- `artifacts/qa-test/2026-03-01/lighthouse-home-desktop-v1.json`
|
||||
|
||||
## Validations structurelles
|
||||
- JSON-LD `Person`: **OK** (`jobTitle`, `description`, `sameAs` présents)
|
||||
- `sitemap.xml` parse XML: **OK**
|
||||
- `robots.txt` présent et exploitable: **OK**
|
||||
- `assets/og-cover.jpg` dimensions: **1200x630**
|
||||
- Contrat tracking (`event_category`, `event_label`, `destination`): **OK**
|
||||
|
||||
## TODO status final
|
||||
- ✅ Canonical / OG / Twitter / sitemap / robots
|
||||
- ✅ Tracking contract côté front
|
||||
- ✅ Lighthouse archivé
|
||||
- ✅ GTM réel configuré (`GTM-5SLM67QF`)
|
||||
- ⏳ Validation GA4 Realtime en production
|
||||
- ⏳ Debugger aperçu social en production (action externe)
|
||||
@@ -0,0 +1,34 @@
|
||||
# G3 Verification Evidence (v5) - Tracking Contract + GTM ID
|
||||
|
||||
Date: 2026-03-01
|
||||
|
||||
## Validation locale du contrat tracking
|
||||
Commandes exécutées:
|
||||
- extraction `data-track` et `data-destination` depuis `index.html`
|
||||
- vérification présence des champs dataLayer (`event_category`, `event_label`, `destination`)
|
||||
|
||||
Résultats:
|
||||
- `tracked_links`: 8
|
||||
- `missing_destination_count`: 0
|
||||
- `js_contract_ok`: true
|
||||
- `missing_required_events`: []
|
||||
|
||||
Événements détectés:
|
||||
- `cta_hero_projets`
|
||||
- `cta_hero_contact`
|
||||
- `cta_hero_profile`
|
||||
- `outbound_linkedin_project`
|
||||
- `outbound_linkedin_contact`
|
||||
- `outbound_malt_contact`
|
||||
- `outbound_bandcamp_project`
|
||||
- `outbound_bandcamp_contact`
|
||||
|
||||
## GTM
|
||||
- ID configuré: `GTM-5SLM67QF`
|
||||
- emplacements validés:
|
||||
- `window.GTM_CONTAINER_ID`
|
||||
- bloc `<noscript>` `ns.html?id=GTM-5SLM67QF`
|
||||
|
||||
## Statut restant (production)
|
||||
- Vérifier GA4 Realtime/DebugView sur URL publique
|
||||
- Vérifier aperçu social LinkedIn/Facebook
|
||||
@@ -0,0 +1,21 @@
|
||||
# G3 Verification Evidence (v6) - Astro Studio Migration Foundation
|
||||
|
||||
Date: 2026-03-01
|
||||
|
||||
## Checks exécutés
|
||||
- `npm run typecheck` -> OK
|
||||
- `npm run build` -> OK (sortie `dist/`)
|
||||
- `npm run storybook:build` -> OK (`storybook-static/`)
|
||||
- Contrat tracking vérifié dans source:
|
||||
- 8 événements `data-track` présents
|
||||
- paramètres `event_category`, `event_label`, `destination` présents
|
||||
|
||||
## Résultats build (extraits)
|
||||
- Route générée: `/index.html`
|
||||
- Chunks client générés sans erreur bloquante
|
||||
- Warning Storybook sur directives `use client` de `framer-motion`: non bloquant (build validé)
|
||||
|
||||
## Points restants
|
||||
- QA manuelle sur rendu final et transitions narratives
|
||||
- Validation GA4 Realtime/DebugView en production
|
||||
- Validation previews sociaux en production
|
||||
@@ -0,0 +1,7 @@
|
||||
# G3 Verification Evidence
|
||||
|
||||
Exécuté:
|
||||
- `python3 -m http.server 4173` (serveur local)
|
||||
- `curl -I http://127.0.0.1:4173/` -> `HTTP/1.0 200 OK`
|
||||
- Capture visuelle via Playwright:
|
||||
- `artifacts/qa-test/2026-03-01/site-home.png`
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,11 @@
|
||||
import { defineConfig } from 'astro/config';
|
||||
import react from '@astrojs/react';
|
||||
import tailwindcss from '@tailwindcss/vite';
|
||||
|
||||
export default defineConfig({
|
||||
site: 'https://electron-rare.github.io',
|
||||
integrations: [react()],
|
||||
vite: {
|
||||
plugins: [tailwindcss()]
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,92 @@
|
||||
# Plan d'avancement Acquisition/SEO (7 jours + 30 jours)
|
||||
|
||||
Date de mise à jour: 2026-03-01
|
||||
Périmètre: site statique GitHub Pages (`index.html`, `assets/styles.css`)
|
||||
|
||||
## Objectif
|
||||
Transformer le site en base d'acquisition mesurable, sans ajouter de backend ni pipeline build.
|
||||
|
||||
## Avancement immédiat (P0/P1)
|
||||
|
||||
### P0 (immédiat)
|
||||
- [x] URL canonique fixée (`https://electron-rare.github.io/`)
|
||||
- [x] `robots.txt` à la racine
|
||||
- [x] `sitemap.xml` à la racine
|
||||
- [x] Contrat d'événements tracking implémenté (`data-track` + `dataLayer` enrichi)
|
||||
- [x] Remplacer `GTM-REPLACE_ME` par l'ID GTM réel (`GTM-5SLM67QF`)
|
||||
- [ ] Valider événements en GA4 Realtime
|
||||
|
||||
### P1 (cette semaine)
|
||||
- [x] `og:image` + `twitter:image` ajoutés
|
||||
- [x] Asset social `assets/og-cover.jpg` créé (1200x630)
|
||||
- [x] Copy contact orientée booking/collaboration + éléments de confiance
|
||||
- [x] Ajustement responsive <=390px
|
||||
- [x] Exécuter audit Lighthouse mobile/desktop et archiver résultats
|
||||
- [ ] Vérifier aperçus sociaux en production (LinkedIn/Facebook debugger)
|
||||
|
||||
### P2 (mois)
|
||||
- [ ] Expériences CTA (texte/ordre LinkedIn/Malt)
|
||||
- [ ] Revue snippets SEO par itération
|
||||
- [ ] Dashboard acquisition hebdo (GA4)
|
||||
|
||||
## Plan 7 jours (exécution)
|
||||
|
||||
### Jour 1 — Baseline
|
||||
- Faire un snapshot Lighthouse mobile/desktop.
|
||||
- Documenter baseline (SEO, accessibilité, perf, conversion).
|
||||
|
||||
### Jour 2 — SEO technique
|
||||
- Vérifier indexabilité (`robots`, `sitemap`, canonical, OG/Twitter).
|
||||
- Contrôler cohérence des URLs (absolues pour SEO social).
|
||||
|
||||
### Jour 3 — Instrumentation GA4/GTM
|
||||
- Brancher GTM réel.
|
||||
- Publier conteneur.
|
||||
- Vérifier événements critiques.
|
||||
|
||||
### Jour 4 — Conversion UX
|
||||
- Ajuster wording CTA si besoin.
|
||||
- Vérifier priorité LinkedIn (primaire) / Malt (secondaire).
|
||||
|
||||
### Jour 5 — Performance/A11y
|
||||
- Corriger points Lighthouse restants.
|
||||
- Vérifier navigation clavier et focus visibles.
|
||||
|
||||
### Jour 6 — QA déploiement
|
||||
- Vérifier production live.
|
||||
- Contrôler métriques Realtime GA4.
|
||||
|
||||
### Jour 7 — Stabilisation
|
||||
- Corriger résiduels P1.
|
||||
- Mettre à jour evidence + artifacts.
|
||||
|
||||
## Roadmap 30 jours
|
||||
|
||||
### Semaine 2
|
||||
- Renforcer contenu SEO par section.
|
||||
- Ajouter pages projets supplémentaires (si besoin).
|
||||
|
||||
### Semaine 3
|
||||
- Tests A/B CTA (copy + ordre des liens contact).
|
||||
- Analyse CTR par emplacement.
|
||||
|
||||
### Semaine 4
|
||||
- Consolidation dashboard GA4.
|
||||
- Revue Search Console et plan éditorial suivant.
|
||||
|
||||
## Contrat tracking (source de vérité)
|
||||
|
||||
Événements:
|
||||
- `cta_hero_projets`
|
||||
- `cta_hero_contact`
|
||||
- `cta_hero_profile`
|
||||
- `outbound_linkedin_project`
|
||||
- `outbound_linkedin_contact`
|
||||
- `outbound_malt_contact`
|
||||
- `outbound_bandcamp_project`
|
||||
- `outbound_bandcamp_contact`
|
||||
|
||||
Paramètres:
|
||||
- `event_category=engagement`
|
||||
- `event_label=<event_name>`
|
||||
- `destination=<domain|anchor>`
|
||||
@@ -0,0 +1,67 @@
|
||||
# Déploiement GitHub Pages (Astro studio stack)
|
||||
|
||||
## Prérequis
|
||||
- Dépendances installées (`npm install`).
|
||||
- Build local OK (`npm run build`).
|
||||
- Workflow présent: `.github/workflows/deploy-pages.yml`.
|
||||
- Fichiers publics en place:
|
||||
- `public/robots.txt`
|
||||
- `public/sitemap.xml`
|
||||
- `public/assets/og-cover.jpg`
|
||||
- GTM configuré via variable `PUBLIC_GTM_CONTAINER_ID` (par défaut actuel: `GTM-5SLM67QF`).
|
||||
|
||||
## Configuration GitHub Pages
|
||||
1. GitHub > dépôt > **Settings** > **Pages**.
|
||||
2. Dans **Build and deployment**:
|
||||
- **Source**: `GitHub Actions`
|
||||
3. Enregistrer.
|
||||
|
||||
## Déploiement
|
||||
1. Push sur `main` (ou lancer `workflow_dispatch`).
|
||||
2. Vérifier le workflow **Deploy Astro to GitHub Pages**.
|
||||
3. Attendre l'URL de déploiement dans le job `deploy`.
|
||||
|
||||
## Commandes locales
|
||||
- Dev: `npm run dev`
|
||||
- Typecheck: `npm run typecheck`
|
||||
- Build prod: `npm run build`
|
||||
- Storybook: `npm run storybook`
|
||||
- Storybook build: `npm run storybook:build`
|
||||
|
||||
## Instrumentation GTM + GA4
|
||||
1. Créer/associer un conteneur GTM et propriété GA4.
|
||||
2. Vérifier `PUBLIC_GTM_CONTAINER_ID` utilisé au build/deploy.
|
||||
3. Publier le conteneur GTM.
|
||||
4. Vérifier GA4 Realtime et DebugView.
|
||||
|
||||
### Contrat d'événements (`dataLayer`)
|
||||
- `cta_hero_projets`
|
||||
- `cta_hero_contact`
|
||||
- `cta_hero_profile`
|
||||
- `outbound_linkedin_project`
|
||||
- `outbound_linkedin_contact`
|
||||
- `outbound_malt_contact`
|
||||
- `outbound_bandcamp_project`
|
||||
- `outbound_bandcamp_contact`
|
||||
|
||||
Paramètres:
|
||||
- `event_category=engagement`
|
||||
- `event_label=<nom_evenement>`
|
||||
- `destination=<domaine|ancre>`
|
||||
|
||||
Conversions recommandées:
|
||||
- Primaire: `outbound_linkedin_contact`
|
||||
- Secondaire: `outbound_malt_contact`
|
||||
|
||||
## Vérification post-déploiement
|
||||
- URL publique chargée sans erreur.
|
||||
- Sections et ancres (`#a-propos`, `#projets`, `#contact`) OK.
|
||||
- `https://electron-rare.github.io/robots.txt` accessible.
|
||||
- `https://electron-rare.github.io/sitemap.xml` accessible.
|
||||
- OG/Twitter image OK (`/assets/og-cover.jpg`).
|
||||
- GA4 Realtime + DebugView remontent les events et paramètres.
|
||||
- Aperçu social validé (LinkedIn Post Inspector / Facebook Debugger).
|
||||
|
||||
## Traçabilité
|
||||
- Mettre à jour `evidence/manifest.json`.
|
||||
- Ajouter artefacts dans `artifacts/*/<date>/` à chaque itération.
|
||||
@@ -0,0 +1,23 @@
|
||||
# Migration Legacy -> Astro (Source of Truth)
|
||||
|
||||
Date: 2026-03-01
|
||||
Status: Legacy **deprecated**
|
||||
|
||||
## Décision
|
||||
Le socle legacy HTML/CSS root est figé et archivé. La source de vérité active est désormais:
|
||||
- contenu/page: `src/pages/index.astro`
|
||||
- styles: `src/styles/global.css`
|
||||
- SEO publics: `public/robots.txt`, `public/sitemap.xml`, `public/assets/og-cover.jpg`
|
||||
- build/deploy: `dist/` via GitHub Actions
|
||||
|
||||
## Archive legacy
|
||||
Snapshot créé dans:
|
||||
- `artifacts/legacy-snapshot/2026-03-01/index.legacy.html`
|
||||
- `artifacts/legacy-snapshot/2026-03-01/styles.legacy.css`
|
||||
- `artifacts/legacy-snapshot/2026-03-01/og-cover.legacy.jpg`
|
||||
- `artifacts/legacy-snapshot/2026-03-01/robots.legacy.txt`
|
||||
- `artifacts/legacy-snapshot/2026-03-01/sitemap.legacy.xml`
|
||||
|
||||
## Règle no-drift
|
||||
- Ne pas réactiver le legacy pour les changements produit.
|
||||
- Toute évolution UI/SEO doit passer par Astro (`src/` + `public/`).
|
||||
@@ -0,0 +1,47 @@
|
||||
# Webdesign Responsive Moderne - Checklist Actionnable
|
||||
|
||||
Date: 2026-03-01
|
||||
|
||||
## Objectif
|
||||
Améliorer le rendu visuel, la lisibilité mobile et l'ergonomie moderne sans casser la simplicité d'un site statique GitHub Pages.
|
||||
|
||||
## Améliorations déjà appliquées
|
||||
- `scroll-margin-top` sur sections ancrées (menu sticky plus propre).
|
||||
- Cibles tactiles renforcées sur navigation, boutons et liens contact.
|
||||
- Mode `prefers-contrast: more` ajouté pour meilleure lisibilité.
|
||||
|
||||
## Priorités prochaines itérations
|
||||
1. Typographie
|
||||
- Ajuster l'échelle (`clamp`) pour titres/sous-titres sur mobile compact.
|
||||
- Harmoniser interlignage et largeur de ligne (45-75 caractères).
|
||||
|
||||
2. Responsive layout
|
||||
- Tester sur largeurs clés: 390px, 768px, 1024px, 1440px.
|
||||
- Vérifier qu'aucun contenu ne déborde horizontalement.
|
||||
|
||||
3. Accessibilité
|
||||
- Contraste texte/CTA conforme WCAG 2.2.
|
||||
- Focus visible partout au clavier.
|
||||
- Ordre de navigation cohérent (tab order).
|
||||
|
||||
4. Performance UI
|
||||
- Garder les animations discrètes et désactivables (`prefers-reduced-motion`).
|
||||
- Contrôler le poids des assets visuels (notamment OG image).
|
||||
|
||||
## Critères d'acceptation
|
||||
- Aucun overflow horizontal sur mobile.
|
||||
- CTA principaux visibles sans scroll excessif.
|
||||
- Navigation clavier complète + focus visible.
|
||||
- Lighthouse mobile >= 90 perf / >= 95 accessibilité / SEO 100.
|
||||
|
||||
## Références (officielles)
|
||||
- MDN Responsive Design:
|
||||
https://developer.mozilla.org/docs/Learn_web_development/Core/CSS_layout/Responsive_Design
|
||||
- MDN Container Queries:
|
||||
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries
|
||||
- WCAG 2.2 Quick Reference:
|
||||
https://www.w3.org/WAI/WCAG22/quickref/
|
||||
- Web.dev - Content Visibility:
|
||||
https://web.dev/articles/content-visibility
|
||||
- Web.dev - CLS optimization:
|
||||
https://web.dev/articles/optimize-cls
|
||||
@@ -0,0 +1,55 @@
|
||||
{
|
||||
"date": "2026-03-01",
|
||||
"change": "Migration foundation vers stack studio Astro/TS/Tailwind/Motion/Storybook avec workflow GitHub Pages Actions",
|
||||
"gates_satisfied": ["G0", "G1", "G2", "G3"],
|
||||
"artifacts": [
|
||||
"artifacts/pm-spec/2026-03-01/g0-spec-freeze-v2.md",
|
||||
"artifacts/architect/2026-03-01/g1-arch-freeze-v2.md",
|
||||
"artifacts/qa-test/2026-03-01/g2-implement-v2.md",
|
||||
"artifacts/qa-test/2026-03-01/g3-verification-v2.md",
|
||||
"artifacts/qa-test/2026-03-01/g2-implement-v3.md",
|
||||
"artifacts/qa-test/2026-03-01/g3-verification-v3.md",
|
||||
"artifacts/qa-test/2026-03-01/g3-verification-v4.md",
|
||||
"artifacts/qa-test/2026-03-01/g3-verification-v5.md",
|
||||
"artifacts/qa-test/2026-03-01/g2-implement-v4-astro.md",
|
||||
"artifacts/qa-test/2026-03-01/g3-verification-v6-astro.md",
|
||||
"artifacts/qa-test/2026-03-01/lighthouse-home-mobile-v1.json",
|
||||
"artifacts/qa-test/2026-03-01/lighthouse-home-desktop-v1.json"
|
||||
],
|
||||
"docs": [
|
||||
"specs/site-github-pages-spec.md",
|
||||
"architecture/site-github-pages-architecture.md",
|
||||
"docs/github-pages-deploy.md",
|
||||
"docs/acquisition-seo-plan.md",
|
||||
"docs/webdesign-responsive-modern.md"
|
||||
],
|
||||
"implementation": [
|
||||
"package.json",
|
||||
"package-lock.json",
|
||||
"astro.config.mjs",
|
||||
"tsconfig.json",
|
||||
".storybook/main.ts",
|
||||
".storybook/preview.ts",
|
||||
".github/workflows/deploy-pages.yml",
|
||||
"src/layouts/BaseLayout.astro",
|
||||
"src/pages/index.astro",
|
||||
"src/components/ui/button.tsx",
|
||||
"src/components/ui/card.tsx",
|
||||
"src/components/sections/Hero.tsx",
|
||||
"src/components/sections/About.tsx",
|
||||
"src/components/sections/Projects.tsx",
|
||||
"src/components/sections/Contact.tsx",
|
||||
"src/styles/global.css",
|
||||
"public/robots.txt",
|
||||
"public/sitemap.xml",
|
||||
"public/assets/og-cover.jpg",
|
||||
"index.html",
|
||||
"assets/styles.css",
|
||||
"robots.txt",
|
||||
"sitemap.xml",
|
||||
"assets/og-cover.jpg"
|
||||
],
|
||||
"notes": [
|
||||
"TODO externe restant: valider GA4 Realtime en production, debugger previews sociaux (LinkedIn/Facebook), puis basculer définitivement hors du socle statique legacy."
|
||||
]
|
||||
}
|
||||
Generated
+10467
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,37 @@
|
||||
{
|
||||
"name": "electron-rare-studio",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro",
|
||||
"typecheck": "astro check",
|
||||
"storybook": "storybook dev -p 6006",
|
||||
"storybook:build": "storybook build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/react": "^4.4.1",
|
||||
"@radix-ui/react-slot": "^1.2.3",
|
||||
"astro": "^5.13.8",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"motion": "^12.23.24",
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1",
|
||||
"tailwind-merge": "^3.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/check": "^0.9.6",
|
||||
"@storybook/addon-a11y": "^9.1.5",
|
||||
"@storybook/addon-docs": "^9.1.5",
|
||||
"@storybook/addon-onboarding": "^9.1.5",
|
||||
"@storybook/addon-vitest": "^9.1.5",
|
||||
"@storybook/react-vite": "^9.1.5",
|
||||
"@tailwindcss/vite": "^4.1.13",
|
||||
"storybook": "^9.1.5",
|
||||
"typescript": "^5.9.2"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@@ -0,0 +1,4 @@
|
||||
User-agent: *
|
||||
Allow: /
|
||||
|
||||
Sitemap: https://electron-rare.github.io/sitemap.xml
|
||||
@@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
<url>
|
||||
<loc>https://electron-rare.github.io/</loc>
|
||||
<lastmod>2026-03-01</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>1.0</priority>
|
||||
</url>
|
||||
</urlset>
|
||||
@@ -0,0 +1,67 @@
|
||||
# Spécification — Site web personnel adapté GitHub Pages
|
||||
|
||||
- **Date**: 2026-03-01
|
||||
- **Gate visée**: G0 Spec Freeze
|
||||
- **Responsable (agent)**: PM/Spec
|
||||
|
||||
## Objectif
|
||||
Créer un site web personnel studio-grade, moderne et évolutif, basé sur Astro/TypeScript, prêt à être publié sur GitHub Pages via GitHub Actions.
|
||||
|
||||
## Contexte
|
||||
Le premier bootstrap était trop générique. Le besoin utilisateur est maintenant explicite: « site adapté pour github pages et pour mon site web ».
|
||||
|
||||
## Stack technologique cible
|
||||
- Primary stack: Astro + TypeScript + Tailwind 4 + Motion + Storybook + Radix/shadcn
|
||||
- Secondary stack (si projet app plus lourd): React Router v7 + Vite + TS + Tailwind + Motion
|
||||
|
||||
## Direction artistique validée
|
||||
- Positionnement: Pro, codeur créatif, itérateur IA, savant fou orienté création électronique et invention de systèmes
|
||||
- Direction: Expérimental/noise structuré studio (`art_direction_style=experimental-noise`)
|
||||
- Motion: Narratif fort (`motion_intensity=narrative-strong`)
|
||||
- Atmosphère: Électrique contrastée (`color_atmosphere=electric-contrast`)
|
||||
- Priorité: Impact visuel + lisibilité business (`readability_priority=balanced`)
|
||||
- Langage média: Mix abstrait + photo (`media_language=abstract-photo-mix`)
|
||||
- Ton typo: Sérif éditorial + sans (`typography_voice=editorial-serif-plus-sans`)
|
||||
|
||||
Règle de gouvernance:
|
||||
- Toute variation de direction artistique passe par mise à jour explicite de `notes-interne/creative-direction-brief.md` avant modification UI.
|
||||
|
||||
## Exigences fonctionnelles
|
||||
1. Le site expose la page d'accueil `/` via Astro (`src/pages/index.astro`) et génère un build statique (`dist/`).
|
||||
2. Le site inclut une navigation ancrée: `À propos`, `Projets`, `Contact`.
|
||||
3. Le site inclut une section héro claire avec proposition de valeur.
|
||||
4. Le site inclut une section projets (cartes) et une section contact (liens).
|
||||
5. Le site conserve le contrat tracking GTM/GA4 existant (events + paramètres).
|
||||
6. Les ressources SEO publiques sont servies via `public/` (`robots.txt`, `sitemap.xml`, `assets/og-cover.jpg`).
|
||||
7. Le design system est documenté dans Storybook (couverture composants et sections).
|
||||
|
||||
## Exigences non-fonctionnelles
|
||||
- Build statique Astro sans backend runtime.
|
||||
- Toolchain npm autorisée (Astro, React, Tailwind, Storybook).
|
||||
- Responsive mobile/desktop.
|
||||
- Accessibilité de base (contraste correct, structure sémantique, focus visible).
|
||||
- Performance cible Lighthouse mobile >= 90 et SEO = 100.
|
||||
|
||||
## Critères d'acceptation (AC)
|
||||
- AC1: Le site affiche une identité de site personnel (pas un simple placeholder technique).
|
||||
- AC2: Les ancres de navigation fonctionnent (`#a-propos`, `#projets`, `#contact`).
|
||||
- AC3: Le rendu mobile ne casse pas la grille de cartes.
|
||||
- AC4: Déploiement GitHub Pages via GitHub Actions documenté et test local effectué.
|
||||
- AC5: Storybook build passe avec la couverture des composants/sections clés.
|
||||
- AC6: Contrat GTM/GA4 inchangé et vérifiable.
|
||||
|
||||
## Non-objectifs
|
||||
- Pas de blog dynamique.
|
||||
- Pas d'injection de contenu CMS/API dans ce cycle.
|
||||
- Pas de formulaire backend.
|
||||
- Pas d'implémentation de la stack secondaire (React Router + Vite) dans ce cycle.
|
||||
|
||||
## Risques
|
||||
- Branding incomplet si le nom/profession ne sont pas fournis.
|
||||
- Liens externes non finalisés si les profils sociaux ne sont pas donnés.
|
||||
|
||||
## TODO / Informations manquantes
|
||||
- TODO: valider les événements GA4 en production (Realtime + conversions LinkedIn/Malt).
|
||||
- TODO: connecter Google Search Console et vérifier l'indexation `sitemap.xml`.
|
||||
- TODO: vérifier l'aperçu social en production (LinkedIn/Facebook).
|
||||
- TODO: mesurer et réduire les chunks client les plus lourds si nécessaire.
|
||||
@@ -0,0 +1,19 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
import { About } from './About';
|
||||
|
||||
const meta: Meta<typeof About> = {
|
||||
title: 'Sections/About',
|
||||
component: About,
|
||||
tags: ['autodocs']
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof About>;
|
||||
|
||||
export const Default: Story = {
|
||||
render: () => (
|
||||
<div style={{ maxWidth: 1120, margin: '0 auto', padding: '2rem 1rem' }}>
|
||||
<About />
|
||||
</div>
|
||||
)
|
||||
};
|
||||
@@ -0,0 +1,20 @@
|
||||
export function About() {
|
||||
return (
|
||||
<section id="a-propos" aria-labelledby="about-title" className="section-anchor mt-5">
|
||||
<div className="rounded-2xl border border-violet-200/20 bg-violet-100/5 p-5 md:p-6">
|
||||
<h2 id="about-title" className="m-0 text-3xl md:text-4xl">
|
||||
À propos
|
||||
</h2>
|
||||
<p className="mb-0 mt-3 max-w-3xl text-violet-100/85">
|
||||
Je suis <strong>Clement Saillant</strong>, createur sous le nom <strong>L'electron rare</strong>.
|
||||
Mon terrain: creation electronique, invention de systemes, design de produit et conception
|
||||
d'objets/experiences hybrides entre code, son et image.
|
||||
</p>
|
||||
<p className="mb-0 mt-3 max-w-3xl text-violet-100/72">
|
||||
Posture de travail: rigueur pro, execution creative, iteration IA continue et esprit
|
||||
laboratoire pour transformer une intuition en systeme utilisable.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
import { Contact } from './Contact';
|
||||
|
||||
const meta: Meta<typeof Contact> = {
|
||||
title: 'Sections/Contact',
|
||||
component: Contact,
|
||||
tags: ['autodocs']
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Contact>;
|
||||
|
||||
export const Default: Story = {
|
||||
render: () => (
|
||||
<div style={{ maxWidth: 1120, margin: '0 auto', padding: '2rem 1rem' }}>
|
||||
<Contact />
|
||||
</div>
|
||||
)
|
||||
};
|
||||
@@ -0,0 +1,64 @@
|
||||
import type { CtaLink } from '@/lib/types';
|
||||
import { TRACK_EVENTS, trackAttrs } from '@/lib/tracking';
|
||||
|
||||
const contactLinks: CtaLink[] = [
|
||||
{
|
||||
label: 'LinkedIn',
|
||||
href: 'https://fr.linkedin.com/in/electron-rare',
|
||||
event: TRACK_EVENTS.outboundLinkedinContact,
|
||||
destination: 'linkedin.com',
|
||||
external: true
|
||||
},
|
||||
{
|
||||
label: 'Malt',
|
||||
href: 'https://www.malt.com/profile/clementsaillant',
|
||||
event: TRACK_EVENTS.outboundMaltContact,
|
||||
destination: 'malt.com',
|
||||
external: true
|
||||
},
|
||||
{
|
||||
label: 'Bandcamp (Electron Fou)',
|
||||
href: 'https://lelectron-fou.bandcamp.com/',
|
||||
event: TRACK_EVENTS.outboundBandcampContact,
|
||||
destination: 'bandcamp.com',
|
||||
external: true
|
||||
}
|
||||
];
|
||||
|
||||
export function Contact() {
|
||||
return (
|
||||
<section id="contact" aria-labelledby="contact-title" className="section-anchor mt-5">
|
||||
<div className="rounded-2xl border border-cyan-300/25 bg-gradient-to-b from-cyan-300/7 to-violet-100/6 p-5 md:p-6">
|
||||
<h2 id="contact-title" className="m-0 text-3xl md:text-4xl">
|
||||
Contact
|
||||
</h2>
|
||||
<p className="mb-0 mt-3 max-w-3xl text-violet-100/82">
|
||||
Pour mission de conception, design produit, collaboration de creation electronique ou production
|
||||
audiovisuelle, contactez-moi via les plateformes ci-dessous.
|
||||
</p>
|
||||
|
||||
<ul className="mb-0 mt-4 flex flex-col gap-2 pl-0">
|
||||
{contactLinks.map((link) => (
|
||||
<li className="list-none" key={link.label}>
|
||||
<a
|
||||
href={link.href}
|
||||
target={link.external ? '_blank' : undefined}
|
||||
rel={link.external ? 'noopener noreferrer' : undefined}
|
||||
{...trackAttrs(link.event, link.destination)}
|
||||
className="inline-flex min-h-9 items-center font-semibold text-cyan-300 underline-offset-4 hover:text-cyan-200 hover:underline"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<ul aria-label="Repères de confiance" className="mb-0 mt-4 pl-5 text-violet-100/76">
|
||||
<li>Positionnement verifiable: concepteur, creation electronique et iteration IA</li>
|
||||
<li>Presence professionnelle active sur LinkedIn et Malt</li>
|
||||
<li>Travaux publies et contact direct pour collaboration</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
import { Hero } from './Hero';
|
||||
|
||||
const meta: Meta<typeof Hero> = {
|
||||
title: 'Sections/Hero',
|
||||
component: Hero,
|
||||
tags: ['autodocs']
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Hero>;
|
||||
|
||||
export const Default: Story = {
|
||||
render: () => (
|
||||
<div style={{ maxWidth: 1120, margin: '0 auto', padding: '2rem 1rem' }}>
|
||||
<Hero />
|
||||
</div>
|
||||
)
|
||||
};
|
||||
@@ -0,0 +1,131 @@
|
||||
import { motion } from 'motion/react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import type { CtaLink } from '@/lib/types';
|
||||
import { TRACK_EVENTS, trackAttrs } from '@/lib/tracking';
|
||||
|
||||
const heroCtas: CtaLink[] = [
|
||||
{
|
||||
label: 'Voir mes projets',
|
||||
href: '#projets',
|
||||
event: TRACK_EVENTS.ctaHeroProjects,
|
||||
destination: '#projets'
|
||||
},
|
||||
{
|
||||
label: 'Me contacter',
|
||||
href: '#contact',
|
||||
event: TRACK_EVENTS.ctaHeroContact,
|
||||
destination: '#contact'
|
||||
}
|
||||
];
|
||||
|
||||
const profileCta: CtaLink = {
|
||||
label: 'Explorer le profil',
|
||||
href: '#a-propos',
|
||||
event: TRACK_EVENTS.ctaHeroProfile,
|
||||
destination: '#a-propos'
|
||||
};
|
||||
|
||||
export function Hero() {
|
||||
return (
|
||||
<section aria-labelledby="hero-title" className="section-anchor relative overflow-hidden pt-12 md:pt-20" id="top">
|
||||
<div className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-64 bg-[radial-gradient(circle_at_20%_10%,rgba(255,58,137,0.26),transparent_52%),radial-gradient(circle_at_88%_0%,rgba(49,211,255,0.28),transparent_55%)]" />
|
||||
|
||||
<div className="grid items-end gap-5 md:grid-cols-[1.2fr_0.8fr]">
|
||||
<div>
|
||||
<p className="m-0 text-xs font-bold uppercase tracking-[0.16em] text-fuchsia-300">
|
||||
Pro • Codeur creatif • Iterateur IA • Savant fou
|
||||
</p>
|
||||
|
||||
<motion.h1
|
||||
id="hero-title"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, ease: 'easeOut' }}
|
||||
className="mb-4 mt-3 max-w-[17ch] text-4xl leading-[1.04] md:text-6xl"
|
||||
>
|
||||
Clement Saillant, alias L'electron rare.
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.08, ease: 'easeOut' }}
|
||||
className="max-w-2xl text-base text-violet-100/82 md:text-lg"
|
||||
>
|
||||
Creation electronique, design de produit et invention de systemes audiovisuels.
|
||||
J'assemble code, IA, materiaux sonores et narration visuelle pour concevoir des experiences
|
||||
qui passent du prototype au live.
|
||||
</motion.p>
|
||||
|
||||
<ul aria-label="Axes artistiques" className="mb-6 mt-5 flex flex-wrap gap-2 p-0">
|
||||
<li className="list-none rounded-full border border-fuchsia-300/30 bg-fuchsia-100/10 px-3 py-1 text-sm text-fuchsia-100">
|
||||
Creation electronique
|
||||
</li>
|
||||
<li className="list-none rounded-full border border-cyan-300/35 bg-cyan-100/10 px-3 py-1 text-sm text-cyan-100">
|
||||
Invention de systemes
|
||||
</li>
|
||||
<li className="list-none rounded-full border border-violet-200/30 bg-violet-100/10 px-3 py-1 text-sm text-violet-100">
|
||||
Design produit
|
||||
</li>
|
||||
<li className="list-none rounded-full border border-lime-200/30 bg-lime-100/10 px-3 py-1 text-sm text-lime-100">
|
||||
Lab IA
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div className="flex flex-col gap-3 sm:flex-row">
|
||||
<Button asChild size="lg">
|
||||
<a href={heroCtas[0].href} {...trackAttrs(heroCtas[0].event, heroCtas[0].destination)}>
|
||||
{heroCtas[0].label}
|
||||
</a>
|
||||
</Button>
|
||||
<Button asChild variant="secondary" size="lg">
|
||||
<a href={heroCtas[1].href} {...trackAttrs(heroCtas[1].event, heroCtas[1].destination)}>
|
||||
{heroCtas[1].label}
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.aside
|
||||
initial={{ opacity: 0, x: 24, scale: 0.97 }}
|
||||
animate={{ opacity: 1, x: 0, scale: 1 }}
|
||||
transition={{ duration: 0.62, delay: 0.12, ease: 'easeOut' }}
|
||||
aria-label="Carte studio"
|
||||
className="lab-panel relative overflow-hidden rounded-2xl p-5"
|
||||
>
|
||||
<div className="pointer-events-none absolute -right-10 -top-10 h-36 w-36 rounded-full bg-fuchsia-400/25 blur-2xl" />
|
||||
<p className="m-0 text-[11px] uppercase tracking-[0.16em] text-cyan-200">Carte rapide</p>
|
||||
<h2 className="mb-2 mt-2 text-3xl">L'electron rare</h2>
|
||||
<p className="mt-0 text-violet-100/82">
|
||||
Studio personnel: conception, experimentation, iteration IA et execution de projets electroniques.
|
||||
</p>
|
||||
<div className="mt-4 grid grid-cols-2 gap-2">
|
||||
<div className="lab-metric">
|
||||
<span>Mode</span>
|
||||
<strong>R&D active</strong>
|
||||
</div>
|
||||
<div className="lab-metric">
|
||||
<span>Focus</span>
|
||||
<strong>Design produit</strong>
|
||||
</div>
|
||||
<div className="lab-metric">
|
||||
<span>Stack</span>
|
||||
<strong>Astro + IA</strong>
|
||||
</div>
|
||||
<div className="lab-metric">
|
||||
<span>Output</span>
|
||||
<strong>Prototype live</strong>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
href={profileCta.href}
|
||||
{...trackAttrs(profileCta.event, profileCta.destination)}
|
||||
className="mt-4 inline-block font-semibold text-cyan-300 underline-offset-4 hover:text-cyan-200 hover:underline"
|
||||
>
|
||||
{profileCta.label}
|
||||
</a>
|
||||
</motion.aside>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
import { Projects } from './Projects';
|
||||
|
||||
const meta: Meta<typeof Projects> = {
|
||||
title: 'Sections/Projects',
|
||||
component: Projects,
|
||||
tags: ['autodocs']
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Projects>;
|
||||
|
||||
export const Default: Story = {
|
||||
render: () => (
|
||||
<div style={{ maxWidth: 1120, margin: '0 auto', padding: '2rem 1rem' }}>
|
||||
<Projects />
|
||||
</div>
|
||||
)
|
||||
};
|
||||
@@ -0,0 +1,85 @@
|
||||
import { motion } from 'motion/react';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import type { CtaLink } from '@/lib/types';
|
||||
import { TRACK_EVENTS, trackAttrs } from '@/lib/tracking';
|
||||
|
||||
type ProjectItem = {
|
||||
title: string;
|
||||
description: string;
|
||||
link?: CtaLink;
|
||||
};
|
||||
|
||||
const projects: ProjectItem[] = [
|
||||
{
|
||||
title: "L'électron rare",
|
||||
description:
|
||||
'Studio principal: creation electronique, prototypes d interactions audiovisuelles et systemes experimentaux.',
|
||||
link: {
|
||||
label: 'Profil LinkedIn',
|
||||
href: 'https://fr.linkedin.com/in/electron-rare',
|
||||
event: TRACK_EVENTS.outboundLinkedinProject,
|
||||
destination: 'linkedin.com',
|
||||
external: true
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Bureau conception produit/systeme',
|
||||
description:
|
||||
"Conception de dispositifs et parcours d'usage: du concept au prototype fonctionnel, avec approche studio et iteration rapide."
|
||||
},
|
||||
{
|
||||
title: 'Electron Fou (noise)',
|
||||
description:
|
||||
'Volet noise: R&D sonore, textures radicales et sorties publiees sur plateformes audio.',
|
||||
link: {
|
||||
label: 'Bandcamp',
|
||||
href: 'https://lelectron-fou.bandcamp.com/',
|
||||
event: TRACK_EVENTS.outboundBandcampProject,
|
||||
destination: 'bandcamp.com',
|
||||
external: true
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
export function Projects() {
|
||||
return (
|
||||
<section id="projets" aria-labelledby="projects-title" className="section-anchor mt-5">
|
||||
<div className="rounded-2xl border border-fuchsia-300/25 bg-gradient-to-b from-fuchsia-300/7 to-violet-100/6 p-5 md:p-6">
|
||||
<h2 id="projects-title" className="m-0 text-3xl md:text-4xl">
|
||||
Projets
|
||||
</h2>
|
||||
|
||||
<div className="mt-4 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
{projects.map((project, index) => (
|
||||
<motion.div
|
||||
key={project.title}
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, amount: 0.2 }}
|
||||
transition={{ duration: 0.42, delay: index * 0.06 }}
|
||||
whileHover={{ y: -5 }}
|
||||
>
|
||||
<Card className="h-full border-cyan-300/25 bg-violet-950/28">
|
||||
<h3 className="m-0 text-xl">{project.title}</h3>
|
||||
<p className="mb-0 mt-2 text-violet-100/82">{project.description}</p>
|
||||
{project.link && (
|
||||
<p className="mb-0 mt-3">
|
||||
<a
|
||||
href={project.link.href}
|
||||
target={project.link.external ? '_blank' : undefined}
|
||||
rel={project.link.external ? 'noopener noreferrer' : undefined}
|
||||
{...trackAttrs(project.link.event, project.link.destination)}
|
||||
className="font-semibold text-cyan-300 underline-offset-4 hover:text-cyan-200 hover:underline"
|
||||
>
|
||||
{project.link.label}
|
||||
</a>
|
||||
</p>
|
||||
)}
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
import { Button } from './button';
|
||||
|
||||
const meta: Meta<typeof Button> = {
|
||||
title: 'UI/Button',
|
||||
component: Button,
|
||||
tags: ['autodocs']
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Button>;
|
||||
|
||||
export const Primary: Story = {
|
||||
args: {
|
||||
variant: 'primary',
|
||||
children: 'Primary CTA'
|
||||
}
|
||||
};
|
||||
|
||||
export const Secondary: Story = {
|
||||
args: {
|
||||
variant: 'secondary',
|
||||
children: 'Secondary CTA'
|
||||
}
|
||||
};
|
||||
|
||||
export const Large: Story = {
|
||||
args: {
|
||||
size: 'lg',
|
||||
children: 'Large CTA'
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,37 @@
|
||||
import * as React from 'react';
|
||||
import { Slot } from '@radix-ui/react-slot';
|
||||
import { cva, type VariantProps } from 'class-variance-authority';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const buttonVariants = cva(
|
||||
'inline-flex min-h-11 items-center justify-center rounded-xl px-4 py-2 text-sm font-semibold transition-transform duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-300 disabled:pointer-events-none disabled:opacity-50',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
primary:
|
||||
'bg-cyan-400 text-slate-950 shadow-[0_0_0_1px_rgba(255,255,255,0.08)_inset,0_8px_22px_rgba(53,220,255,0.26)] hover:-translate-y-0.5 hover:bg-cyan-300',
|
||||
secondary:
|
||||
'border border-fuchsia-300/35 bg-fuchsia-950/16 text-violet-100 shadow-[0_0_0_1px_rgba(255,255,255,0.04)_inset] hover:-translate-y-0.5 hover:border-fuchsia-300/55'
|
||||
},
|
||||
size: {
|
||||
md: 'h-11',
|
||||
lg: 'h-12 px-5 text-base'
|
||||
}
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'primary',
|
||||
size: 'md'
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
VariantProps<typeof buttonVariants> {
|
||||
asChild?: boolean;
|
||||
}
|
||||
|
||||
export function Button({ className, variant, size, asChild = false, ...props }: ButtonProps) {
|
||||
const Comp = asChild ? Slot : 'button';
|
||||
return <Comp className={cn(buttonVariants({ variant, size, className }))} {...props} />;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
import { Card } from './card';
|
||||
|
||||
const meta: Meta<typeof Card> = {
|
||||
title: 'UI/Card',
|
||||
component: Card,
|
||||
tags: ['autodocs']
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Card>;
|
||||
|
||||
export const Default: Story = {
|
||||
render: () => (
|
||||
<Card>
|
||||
<h3 style={{ marginTop: 0 }}>Card title</h3>
|
||||
<p style={{ marginBottom: 0 }}>A reusable studio card with border, depth, and spacing rhythm.</p>
|
||||
</Card>
|
||||
)
|
||||
};
|
||||
@@ -0,0 +1,14 @@
|
||||
import * as React from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
<article
|
||||
className={cn(
|
||||
'rounded-2xl border border-violet-200/20 bg-violet-100/5 p-5 shadow-[0_12px_30px_rgba(7,6,20,0.25),0_0_0_1px_rgba(255,255,255,0.03)_inset]',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
---
|
||||
import { GTM_CONTAINER_ID_DEFAULT, SITE_META, SITE_OG_IMAGE_URL, SITE_URL } from '@/lib/site';
|
||||
|
||||
interface Props {
|
||||
title?: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
title = SITE_META.title,
|
||||
description = SITE_META.description
|
||||
} = Astro.props;
|
||||
|
||||
const canonical = SITE_URL;
|
||||
const gtmId = import.meta.env.PUBLIC_GTM_CONTAINER_ID || GTM_CONTAINER_ID_DEFAULT;
|
||||
const personJsonLd = JSON.stringify({
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'Person',
|
||||
name: 'Clément Saillant',
|
||||
alternateName: "L'électron rare",
|
||||
url: canonical,
|
||||
jobTitle: 'Concepteur en création électronique, design produit et systèmes expérimentaux',
|
||||
description:
|
||||
"Codeur créatif, itérateur IA et inventeur de systèmes : création électronique, performances audiovisuelles et collaborations studio 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/'
|
||||
]
|
||||
});
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>{title}</title>
|
||||
<meta name="theme-color" content={SITE_META.themeColor} />
|
||||
<meta name="description" content={description} />
|
||||
|
||||
<link rel="canonical" href={canonical} />
|
||||
<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={title} />
|
||||
<meta property="og:url" content={canonical} />
|
||||
<meta property="og:description" content={SITE_META.ogDescription} />
|
||||
<meta property="og:image" content={SITE_OG_IMAGE_URL} />
|
||||
<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={title} />
|
||||
<meta name="twitter:description" content={SITE_META.twitterDescription} />
|
||||
<meta name="twitter:image" content={SITE_OG_IMAGE_URL} />
|
||||
|
||||
<script is:inline define:vars={{ gtmId }}>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
if (gtmId) {
|
||||
(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", gtmId);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
{
|
||||
gtmId && (
|
||||
<noscript>
|
||||
<iframe src={`https://www.googletagmanager.com/ns.html?id=${gtmId}`} height="0" width="0" style="display:none;visibility:hidden"></iframe>
|
||||
</noscript>
|
||||
)
|
||||
}
|
||||
|
||||
<a class="sr-only focus:not-sr-only focus:fixed focus:left-3 focus:top-3 focus:z-50 focus:rounded-md focus:bg-black focus:px-3 focus:py-2 focus:text-white" href="#top">
|
||||
Aller au contenu
|
||||
</a>
|
||||
|
||||
<slot />
|
||||
|
||||
<script is:inline type="application/ld+json" set:html={personJsonLd} />
|
||||
|
||||
<script is:inline>
|
||||
(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 = window.dataLayer || [];
|
||||
window.dataLayer.push({
|
||||
event: eventName,
|
||||
event_category: "engagement",
|
||||
event_label: eventName,
|
||||
destination: destination
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,17 @@
|
||||
export const SITE_URL = 'https://electron-rare.github.io/';
|
||||
|
||||
export const SITE_META = {
|
||||
title: "Clément Saillant — L'électron rare",
|
||||
description:
|
||||
"Studio de Clément Saillant (L'électron rare) : création électronique, invention de systèmes, design produit et projets audiovisuels.",
|
||||
ogDescription:
|
||||
"Codeur créatif, itérateur IA et concepteur : création électronique, design produit, systèmes expérimentaux et collaborations visuelles.",
|
||||
twitterDescription:
|
||||
"Creation electronique, invention de systemes et design produit sous l'identite L'electron rare.",
|
||||
ogImagePath: 'assets/og-cover.jpg',
|
||||
themeColor: '#0f0e17'
|
||||
} as const;
|
||||
|
||||
export const SITE_OG_IMAGE_URL = `${SITE_URL}${SITE_META.ogImagePath}`;
|
||||
|
||||
export const GTM_CONTAINER_ID_DEFAULT = 'GTM-5SLM67QF';
|
||||
@@ -0,0 +1,26 @@
|
||||
export const TRACK_EVENTS = {
|
||||
ctaHeroProjects: 'cta_hero_projets',
|
||||
ctaHeroContact: 'cta_hero_contact',
|
||||
ctaHeroProfile: 'cta_hero_profile',
|
||||
outboundLinkedinProject: 'outbound_linkedin_project',
|
||||
outboundLinkedinContact: 'outbound_linkedin_contact',
|
||||
outboundMaltContact: 'outbound_malt_contact',
|
||||
outboundBandcampProject: 'outbound_bandcamp_project',
|
||||
outboundBandcampContact: 'outbound_bandcamp_contact'
|
||||
} as const;
|
||||
|
||||
export type TrackEventName = (typeof TRACK_EVENTS)[keyof typeof TRACK_EVENTS];
|
||||
|
||||
export type TrackEventPayload = {
|
||||
event: TrackEventName;
|
||||
event_category: 'engagement';
|
||||
event_label: TrackEventName;
|
||||
destination: string;
|
||||
};
|
||||
|
||||
export function trackAttrs(event: TrackEventName, destination: string) {
|
||||
return {
|
||||
'data-track': event,
|
||||
'data-destination': destination
|
||||
} as const;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import type { TrackEventName } from '@/lib/tracking';
|
||||
|
||||
export type CtaLink = {
|
||||
label: string;
|
||||
href: string;
|
||||
event: TrackEventName;
|
||||
destination: string;
|
||||
external?: boolean;
|
||||
};
|
||||
@@ -0,0 +1,6 @@
|
||||
import { clsx, type ClassValue } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
---
|
||||
import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
import '@/styles/global.css';
|
||||
import { Hero } from '@/components/sections/Hero';
|
||||
import { About } from '@/components/sections/About';
|
||||
import { Projects } from '@/components/sections/Projects';
|
||||
import { Contact } from '@/components/sections/Contact';
|
||||
---
|
||||
|
||||
<BaseLayout>
|
||||
<header class="sticky top-0 z-30 border-b border-violet-200/20 bg-black/35 backdrop-blur-md">
|
||||
<div class="site-shell flex items-center justify-between py-3 max-md:flex-col max-md:gap-3">
|
||||
<a href="#top" class="font-semibold tracking-wide text-violet-100">
|
||||
<span class="lab-kicker">Studio</span>
|
||||
L'electron rare
|
||||
</a>
|
||||
<nav aria-label="Navigation principale">
|
||||
<ul class="m-0 flex list-none gap-2 p-0">
|
||||
<li><a href="#a-propos" class="rounded-md px-3 py-2 text-violet-100/80 hover:bg-violet-100/10 hover:text-violet-100">À propos</a></li>
|
||||
<li><a href="#projets" class="rounded-md px-3 py-2 text-violet-100/80 hover:bg-violet-100/10 hover:text-violet-100">Projets</a></li>
|
||||
<li><a href="#contact" class="rounded-md px-3 py-2 text-violet-100/80 hover:bg-violet-100/10 hover:text-violet-100">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<span class="lab-pill lab-glow" aria-label="Etat du studio">
|
||||
Lab mode actif
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="site-shell pb-10 pt-2">
|
||||
<Hero client:load />
|
||||
<About />
|
||||
<Projects client:load />
|
||||
<Contact />
|
||||
</main>
|
||||
|
||||
<footer class="border-t border-violet-200/20 py-6 text-violet-100/60">
|
||||
<div class="site-shell">
|
||||
© 2026 Clement Saillant - L'electron rare. Studio de creation electronique et design systeme.
|
||||
</div>
|
||||
</footer>
|
||||
</BaseLayout>
|
||||
@@ -0,0 +1,201 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Source+Sans+3:wght@400;500;600;700&display=swap');
|
||||
@import 'tailwindcss';
|
||||
|
||||
:root {
|
||||
--bg: #080812;
|
||||
--surface: #121226;
|
||||
--surface-soft: #1a1833;
|
||||
--text: #f0ecff;
|
||||
--muted: #b8afdb;
|
||||
--primary: #35dcff;
|
||||
--primary-strong: #18bfe5;
|
||||
--accent: #ff3b99;
|
||||
--accent-strong: #ff187f;
|
||||
--signal: #b7ff5d;
|
||||
--border: #3a3360;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Source Sans 3', 'Segoe UI', 'Helvetica Neue', sans-serif;
|
||||
line-height: 1.6;
|
||||
background:
|
||||
radial-gradient(1200px 720px at 88% -18%, color-mix(in oklab, var(--primary) 26%, transparent), transparent 62%),
|
||||
radial-gradient(1000px 650px at -15% -8%, color-mix(in oklab, var(--accent) 24%, transparent), transparent 60%),
|
||||
radial-gradient(540px 360px at 48% -16%, color-mix(in oklab, var(--signal) 18%, transparent), transparent 74%),
|
||||
linear-gradient(180deg, #080812 0%, #090913 55%, #07070f 100%);
|
||||
color: var(--text);
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(255, 255, 255, 0.012) 0px,
|
||||
rgba(255, 255, 255, 0.012) 1px,
|
||||
transparent 1px,
|
||||
transparent 3px
|
||||
);
|
||||
mix-blend-mode: soft-light;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(94, 103, 145, 0.12) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(94, 103, 145, 0.1) 1px, transparent 1px);
|
||||
background-size: 32px 32px;
|
||||
mask-image: radial-gradient(circle at 50% 18%, black 12%, transparent 72%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-family: 'DM Serif Display', 'Times New Roman', serif;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: color-mix(in oklab, var(--accent) 65%, black 10%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.site-shell {
|
||||
width: min(1120px, 92vw);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.section-anchor {
|
||||
scroll-margin-top: 6rem;
|
||||
}
|
||||
|
||||
.lab-kicker {
|
||||
display: inline-flex;
|
||||
min-height: 1.6rem;
|
||||
align-items: center;
|
||||
border: 1px solid rgba(183, 255, 93, 0.35);
|
||||
border-radius: 999px;
|
||||
padding: 0.1rem 0.55rem;
|
||||
margin-right: 0.45rem;
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: color-mix(in oklab, var(--signal) 80%, #ffffff 20%);
|
||||
background: color-mix(in oklab, var(--signal) 16%, transparent);
|
||||
}
|
||||
|
||||
.lab-pill {
|
||||
display: inline-flex;
|
||||
min-height: 2rem;
|
||||
align-items: center;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(53, 220, 255, 0.4);
|
||||
padding: 0.25rem 0.75rem;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.09em;
|
||||
text-transform: uppercase;
|
||||
color: color-mix(in oklab, var(--primary) 85%, #ffffff 15%);
|
||||
background:
|
||||
linear-gradient(
|
||||
90deg,
|
||||
color-mix(in oklab, var(--primary) 15%, transparent),
|
||||
color-mix(in oklab, var(--accent) 10%, transparent)
|
||||
);
|
||||
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
|
||||
}
|
||||
|
||||
.lab-panel {
|
||||
border: 1px solid rgba(53, 220, 255, 0.32);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(53, 220, 255, 0.08), rgba(255, 59, 153, 0.06)),
|
||||
radial-gradient(180px 120px at 85% -10%, rgba(183, 255, 93, 0.15), transparent 72%);
|
||||
box-shadow:
|
||||
0 16px 40px rgba(7, 6, 20, 0.45),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.03) inset;
|
||||
}
|
||||
|
||||
.lab-metric {
|
||||
border-radius: 0.7rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: rgba(7, 6, 20, 0.45);
|
||||
padding: 0.5rem 0.6rem;
|
||||
}
|
||||
|
||||
.lab-metric span {
|
||||
display: block;
|
||||
color: rgba(184, 175, 219, 0.9);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.lab-metric strong {
|
||||
display: block;
|
||||
margin-top: 0.12rem;
|
||||
font-size: 0.84rem;
|
||||
color: rgba(240, 236, 255, 0.95);
|
||||
}
|
||||
|
||||
.lab-glow {
|
||||
animation: labPulse 5.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes labPulse {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(53, 220, 255, 0);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 10px rgba(53, 220, 255, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
a:focus-visible,
|
||||
button:focus-visible {
|
||||
outline: 3px solid color-mix(in oklab, var(--primary) 85%, white 15%);
|
||||
outline-offset: 2px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
@media (max-width: 390px) {
|
||||
.site-shell {
|
||||
width: min(1120px, 94vw);
|
||||
}
|
||||
|
||||
.lab-pill {
|
||||
font-size: 0.66rem;
|
||||
letter-spacing: 0.07em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 1ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 1ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
|
||||
.lab-glow {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
}
|
||||
},
|
||||
"exclude": ["node_modules", "dist", "storybook-static"]
|
||||
}
|
||||
Reference in New Issue
Block a user