// portfolio-tweaks.jsx
// Three expressive tweaks for Stephanie's portfolio:
// 1. Mood — palette/atmosphere (Studio / Warm / Editorial / Midnight)
// 2. Voice — display typography (Bold / Soft serif italic / Mono)
// 3. Spectrum — the rainbow gradient on hero "magic" + contact title
// (Sunset / Ocean / Ember / Mono)
//
// Each control rewires CSS variables / data attributes on , so a single
// switch reshapes the whole page rather than nudging one property.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"mood": "studio",
"voice": "bold",
"spectrum": "sunset"
}/*EDITMODE-END*/;
function PortfolioTweaks() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
React.useEffect(() => {
const root = document.documentElement;
// 'studio' is the default — clear the attribute so :root vars apply.
if (t.mood && t.mood !== 'studio') root.setAttribute('data-mood', t.mood);
else root.removeAttribute('data-mood');
if (t.voice && t.voice !== 'bold') root.setAttribute('data-voice', t.voice);
else root.removeAttribute('data-voice');
if (t.spectrum && t.spectrum !== 'sunset') root.setAttribute('data-spectrum', t.spectrum);
else root.removeAttribute('data-spectrum');
}, [t.mood, t.voice, t.spectrum]);
return (
setTweak('mood', v)}
/>
setTweak('voice', v)}
/>
setTweak('spectrum', v)}
/>
);
}
const __twkRoot = document.getElementById('tweaks-root');
if (__twkRoot) ReactDOM.createRoot(__twkRoot).render();