// app.jsx — Portfolio Raphaël MRLC
// Apple-inspired dark portfolio, accent: aurora gradient.
// ── Brevo ──────────────────────────────────────────────────────────────────
const BREVO_API_KEY = "REMPLACER_PAR_TA_CLE_BREVO";
const BREVO_SENDER = { name: "Raphaël MRLC", email: "raphael.mrlc@gmail.com" };
const OWNER_EMAIL = "raphael.mrlc@gmail.com";
async function brevoSend({ to, subject, html }) {
const res = await fetch("https://api.brevo.com/v3/smtp/email", {
method: "POST",
headers: { "Content-Type": "application/json", "api-key": BREVO_API_KEY },
body: JSON.stringify({ sender: BREVO_SENDER, to, subject, htmlContent: html }),
});
if (!res.ok) throw new Error(await res.text());
}
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"accent": "orange",
"heroVisual": "aurora",
"density": "spacious",
"font": "geist",
"showGrain": true
}/*EDITMODE-END*/;
// ── Accents ────────────────────────────────────────────────────────────────
const ACCENTS = {
orange: { a: "#F97316", b: "#EA580C", c: "#FBBF24", solid: "#F97316" },
aurora: { a: "#A78BFA", b: "#60A5FA", c: "#34D399", solid: "#8B9DFF" },
blue: { a: "#0A84FF", b: "#0A84FF", c: "#0A84FF", solid: "#0A84FF" },
violet: { a: "#7C3AED", b: "#7C3AED", c: "#7C3AED", solid: "#7C3AED" },
neon: { a: "#39FF94", b: "#39FF94", c: "#39FF94", solid: "#39FF94" },
};
const FONTS = {
geist: "'Geist', 'Inter', system-ui, -apple-system, sans-serif",
inter: "'Inter', system-ui, -apple-system, sans-serif",
sf: "-apple-system, 'SF Pro Display', 'Inter', system-ui, sans-serif",
};
// ── Reveal hook ────────────────────────────────────────────────────────────
function useReveal() {
React.useEffect(() => {
const els = document.querySelectorAll("[data-reveal]");
if (!("IntersectionObserver" in window)) {
els.forEach((el) => el.classList.add("is-in"));
return;
}
const io = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.classList.add("is-in");
io.unobserve(e.target);
}
});
},
{ threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
);
els.forEach((el) => io.observe(el));
return () => io.disconnect();
});
}
// ── Hero parallax (tiny scale on scroll) ──────────────────────────────────
function useParallax(ref) {
React.useEffect(() => {
if (!ref.current) return;
const onScroll = () => {
const y = window.scrollY;
if (ref.current) {
ref.current.style.setProperty("--py", `${Math.min(y * 0.18, 120)}px`);
ref.current.style.setProperty("--ps", `${1 + Math.min(y, 600) * 0.0004}`);
}
};
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, [ref]);
}
// ── Hero visual variants ───────────────────────────────────────────────────
function HeroAurora({ a, b, c }) {
return (
);
}
function HeroGrid({ solid }) {
return (
);
}
function HeroParticles({ solid }) {
const dots = React.useMemo(
() => Array.from({ length: 70 }, (_, i) => ({
id: i,
x: Math.random() * 100,
y: Math.random() * 100,
s: 1 + Math.random() * 2.5,
d: 6 + Math.random() * 12,
o: 0.25 + Math.random() * 0.5,
})),
[]
);
return (
);
}
function HeroHalo({ a, b }) {
return (
);
}
// ── Sections ───────────────────────────────────────────────────────────────
function Nav({ accent }) {
const [scrolled, setScrolled] = React.useState(false);
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 24);
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
return (
);
}
function useScrollProgress(ref) {
const [progress, setProgress] = React.useState(0);
React.useEffect(() => {
const update = () => {
if (!ref.current) return;
const rect = ref.current.getBoundingClientRect();
const total = ref.current.offsetHeight + window.innerHeight;
const filled = window.innerHeight - rect.top;
setProgress(Math.max(0, Math.min(1, filled / total)));
};
update();
window.addEventListener("scroll", update, { passive: true });
return () => window.removeEventListener("scroll", update);
}, []);
return progress;
}
function Hero({ accent }) {
const containerRef = React.useRef(null);
const progress = useScrollProgress(containerRef);
const [isMobile, setIsMobile] = React.useState(false);
React.useEffect(() => {
const check = () => setIsMobile(window.innerWidth <= 768);
check();
window.addEventListener("resize", check);
return () => window.removeEventListener("resize", check);
}, []);
const p = Math.min(progress * 1.724, 1);
const rotate = 40 * (1 - p);
const scale = isMobile ? 0.7 + 0.2 * p : 1.1 - 0.1 * p;
const titleY = -200 * p;
return (
Je conçois.
J'automatise.
Vous gagnez du temps.
);
}
function Services({ accent }) {
const items = [
{
kicker: "01",
title: "Création de sites web",
desc:
"Je conçois des sites rapides, élégants et stratégiques, pensés pour donner de la crédibilité à votre marque et générer des résultats concrets.",
tags: ["E-commerce", "Gestion locative", "Prise de rendez-vous"],
icon: (
),
},
{
kicker: "02",
title: "Agents IA & solutions intelligentes",
desc:
"J’intègre des agents IA utiles, connectés à votre activité, pour automatiser des actions, améliorer l’expérience client et accélérer vos opérations.",
tags: ["OpenAI", "Claude", "Algolia", "API"],
icon: (
),
},
{
kicker: "03",
title: "Création de sites web",
desc:
"Landings, sites vitrine et e-commerce qui chargent vite, convertissent, et tiennent la promesse de la marque. Du wireframe au déploiement.",
tags: ["Webflow", "Next.js", "Wordpress", "Shopify"],
icon: (
),
},
{
kicker: "04",
title: "Automatisation & digital",
desc:
"Workflows n8n / Make / Zapier, intégrations API, scripts internes. On supprime les tâches répétitives et on connecte vos outils.",
tags: ["n8n", "Make", "Zapier", "OpenAI"],
icon: (
),
},
];
return (
Ce que je fais
Deux métiers. Un même obsession : ce qui marche, livré vite.
{items.map((it, i) => (
{it.icon}
{it.kicker}
{it.title}
{it.desc}
{it.tags.map((t) => {t} )}
En discuter
))}
);
}
function Work({ accent }) {
const projects = [
{
title: "Podologue Posturologue",
domain: "podologue-villeneuve-beziers.fr",
vimeoId: "1188011551",
desc: "Refonte d'un site vitrine pour un studio paysagiste — +38% de demandes de devis.",
tags: ["Animation au scroll", "Wordpress", "Modèles 3D"],
hue1: "#0E1F1A", hue2: "#173E33",
label: "PROJECT 01"
},
{
title: "Maison de vacances",
domain: "ty-gwennili.com",
vimeoId: "1188011565",
desc: "Automatisation de l'onboarding client pour un cabinet de conseil (n8n + Notion + Stripe).",
tags: ["Plan interactif", "Réservation en ligne", "Calendrier synchronisé"],
hue1: "#1A1230", hue2: "#3B1B6B",
label: "PROJECT 02"
},
{
title: "CRM Vins · Direction",
domain: "chateau-margaux-crm.fr",
screenshot: "assets/dashboard-vin.webp",
desc: "Dashboard de pilotage des ventes pour une maison de négoce — suivi d'équipe commerciale, pipeline devis et analyse du mix canal en temps réel.",
tags: ["Dashboard Analytics", "CRM", "Vins & Spiritueux"],
hue1: "#1a0e0e", hue2: "#3d1a1a",
label: "PROJECT 03"
},
{
title: "Medifeedback · E-réputation",
domain: "medifeedback.fr",
screenshot: "assets/dashboard-medi-feed-back.webp",
desc: "Plateforme de gestion des avis Google pour cabinets médicaux — réponses assistées par IA, suivi de patientèle et pilotage de l'e-réputation.",
tags: ["E-réputation", "Google Reviews", "IA"],
hue1: "#0d1433", hue2: "#1a2a6b",
label: "PROJECT 04"
},
{
title: "Hôtel Belavista",
desc: "Site multilingue + automatisation des réservations directes et réponses email IA.",
tags: ["Wordpress", "Zapier", "OpenAI"],
hue1: "#2B1F0E", hue2: "#5A4318",
label: "PROJECT 05"
},
{
title: "Studio Linéa",
desc: "Portfolio motion design avec galerie immersive et capture de leads par projet.",
tags: ["Next.js", "GSAP", "Framer"],
hue1: "#171717", hue2: "#2E2E2E",
label: "PROJECT 06"
},
];
const onMove = (e) => {
const card = e.currentTarget;
const r = card.getBoundingClientRect();
card.style.setProperty("--mx", `${((e.clientX - r.left) / r.width) * 100}%`);
card.style.setProperty("--my", `${((e.clientY - r.top) / r.height) * 100}%`);
};
return (
Réalisations
Sélection de projets récents.
Six projets. Six contraintes différentes. Une même méthode : comprendre le problème,
livrer vite, mesurer, itérer.
);
}
function Why({ accent }) {
const items = [
{
n: "01",
title: "Vitesse réelle",
desc: "Premier livrable en 4 jours. Pas de réunions inutiles, pas de slides. Du code et des automatisations qui tournent.",
},
{
n: "02",
title: "Approche no-code/low-code",
desc: "On choisit l'outil le plus simple qui résout le problème. Vous gardez la main, sans dépendance technique.",
},
{
n: "03",
title: "Suivi long-terme",
desc: "Une fois livré, on ne disparaît pas. Maintenance, évolutions et mesures d'impact mensuelles.",
},
{
n: "04",
title: "Mesuré sur l'impact",
desc: "Conversions, heures économisées, leads qualifiés. Si ça ne bouge pas l'aiguille, on n'en parle pas.",
},
];
return (
Pourquoi moi
Le travail freelance, sans les inconvénients.
{items.map((it, i) => (
{it.n}
{it.title}
{it.desc}
))}
);
}
function Contact({ accent }) {
const EMPTY = { prenom: "", nom: "", email: "", telephone: "", entreprise: "", typeProjet: "", budget: "", message: "" };
const [form, setForm] = React.useState(EMPTY);
const [status, setStatus] = React.useState("idle"); // idle | loading | success | error
const onChange = (e) => setForm(f => ({ ...f, [e.target.name]: e.target.value }));
const onSubmit = async (e) => {
e.preventDefault();
setStatus("loading");
const fullName = `${form.prenom} ${form.nom}`.trim();
try {
// Notification à Raphaël
await brevoSend({
to: [{ email: OWNER_EMAIL, name: "Raphaël MRLC" }],
subject: `📬 Nouveau contact — ${fullName} · ${form.typeProjet}`,
html: `
Nouveau message reçu
Nom ${fullName} Email ${form.email} Téléphone ${form.telephone} Entreprise ${form.entreprise} Type de projet ${form.typeProjet} Budget ${form.budget}
${form.message}
`,
});
// Confirmation personnalisée au contact
await brevoSend({
to: [{ email: form.email, name: fullName }],
subject: `Bonjour ${form.prenom}, on se parle bientôt 👋`,
html: `
Merci ${form.prenom} !
J'ai bien reçu votre message concernant ${form.typeProjet.toLowerCase()} .
Je reviens vers vous sous 24 h pour fixer un premier appel — sans engagement — afin de cadrer ensemble votre besoin.
En attendant, n'hésitez pas à consulter mes réalisations ou à me contacter directement sur
WhatsApp .
Raphaël MRLC · Freelance Web & Automatisation${OWNER_EMAIL}
`,
});
setStatus("success");
} catch {
setStatus("error");
}
};
const accent1 = accent.a, accent2 = accent.b, accent3 = accent.c;
const gradStyle = { backgroundImage: `linear-gradient(120deg, ${accent1}, ${accent2} 50%, ${accent3})` };
return (
);
}
function Footer() {
const year = new Date().getFullYear();
return (
© {year} Raphaël MRLC — Auto-entrepreneur
);
}
// ── App ────────────────────────────────────────────────────────────────────
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const accent = ACCENTS[t.accent] || ACCENTS.aurora;
useReveal();
React.useEffect(() => {
document.documentElement.style.setProperty("--font-stack", FONTS[t.font] || FONTS.geist);
document.documentElement.dataset.density = t.density;
document.documentElement.dataset.grain = t.showGrain ? "on" : "off";
}, [t.font, t.density, t.showGrain]);
return (
setTweak("heroVisual", v)}
/>
setTweak("accent", v)}
/>
setTweak("showGrain", v)} />
setTweak("font", v)}
/>
setTweak("density", v)}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(