// app.jsx — root of the portfolio; wires sections + Tweaks panel.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"accentHue": 256,
"accentName": "Indigo",
"density": "regular",
"heroVariant": "split"
}/*EDITMODE-END*/;
const ACCENT_OPTIONS = [
{ name: 'Indigo', hue: 256, swatch: '#4A5DD8' },
{ name: 'Ocre', hue: 70, swatch: '#A88431' },
{ name: 'Vert', hue: 145, swatch: '#3A8B59' },
{ name: 'Ardoise', hue: 230, swatch: '#5C6478' },
];
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
// Apply density to
React.useEffect(() => {
document.documentElement.dataset.density = t.density;
}, [t.density]);
// Apply accent hue
React.useEffect(() => {
const root = document.documentElement;
root.style.setProperty('--accent', `oklch(0.50 0.16 ${t.accentHue})`);
root.style.setProperty('--accent-soft', `oklch(0.50 0.16 ${t.accentHue} / 0.10)`);
root.style.setProperty('--accent-ink', `oklch(0.30 0.10 ${t.accentHue})`);
}, [t.accentHue]);
// Live favicon that follows the accent color.
// NOTE: the static favicons in are what Google + crawlers see.
// This effect only adds an extra for live tab updates
// when the user changes accent — it never replaces the static ones.
React.useEffect(() => {
const accent = ACCENT_OPTIONS.find(o => o.hue === t.accentHue)?.swatch || '#4A5DD8';
const bg = '#0E0F0C';
const fg = '#FAFAF7';
const svg =
``;
const href = 'data:image/svg+xml;utf8,' + encodeURIComponent(svg);
let link = document.getElementById('dynamic-favicon');
if (!link) {
link = document.createElement('link');
link.id = 'dynamic-favicon';
link.rel = 'icon';
link.type = 'image/svg+xml';
// Append last so it takes precedence over the static entries
// for the live browser tab, but only after JS has loaded.
document.head.appendChild(link);
}
link.href = href;
}, [t.accentHue]);
return (
o.hue === t.accentHue)?.swatch || '#4A5DD8'}
options={ACCENT_OPTIONS.map(o => o.swatch)}
onChange={(swatch) => {
const opt = ACCENT_OPTIONS.find(o => o.swatch === swatch);
if (opt) setTweak({ accentHue: opt.hue, accentName: opt.name });
}}
/>
setTweak('density', v)}
/>
);
}
ReactDOM.createRoot(document.getElementById('root')).render();