2 lines
5 KiB
JavaScript
2 lines
5 KiB
JavaScript
|
const TWEAKS_DEFAULTS={accentPreset:"blue",accent:"#3b82f6",accentLight:"#60a5fa",primary:"#0a0a0a",headingFont:"Inter",monoFont:"JetBrains Mono",imageTreatment:"default",density:"comfortable",marquee:!0,cursorGlow:!0,showPartners:!0,showStats:!0,showServices:!0,showTech:!0,showOnSet:!0,ctaLabel:"View Projects"},FONT_OPTIONS=["Inter","Manrope","Space Grotesk","DM Sans","Outfit","Plus Jakarta Sans","IBM Plex Sans","Geist","Fraunces"],MONO_OPTIONS=["JetBrains Mono","IBM Plex Mono","Space Mono","Roboto Mono","Fira Code","Geist Mono"],ACCENT_PRESETS={blue:{accent:"#3b82f6",accentLight:"#60a5fa",label:"Blue"},ember:{accent:"#e25822",accentLight:"#f3895a",label:"Ember"},amber:{accent:"#f59e0b",accentLight:"#fbbf24",label:"Amber"},ruby:{accent:"#dc2626",accentLight:"#f87171",label:"Ruby"},mono:{accent:"#e5e5e5",accentLight:"#ffffff",label:"Mono"}};function loadFont(t){const a="wd-font-"+t.replace(/\s/g,"-");if(document.getElementById(a))return;const o=document.createElement("link");o.id=a,o.rel="stylesheet",o.href=`https://fonts.googleapis.com/css2?family=${t.replace(/\s/g,"+")}:wght@300;400;500;600;700&display=swap`,document.head.appendChild(o)}function App(){const[t,a]=useTweaks(TWEAKS_DEFAULTS),[o,c]=React.useState(()=>{const e=location.hash.match(/#\/projects\/([\w-]+)/);return e?e[1]:null});React.useEffect(()=>{o?location.hash=`#/projects/${o}`:location.hash.startsWith("#/projects/")&&(location.hash="")},[o]),React.useEffect(()=>{loadFont(t.headingFont),loadFont(t.monoFont);const e=document.documentElement.style;e.setProperty("--color-accent",t.accent),e.setProperty("--color-accent-light",t.accentLight),e.setProperty("--color-primary",t.primary),e.setProperty("--font-inter",`"${t.headingFont}"`),e.setProperty("--font-mono-stack",`"${t.monoFont}"`)},[t]),React.useEffect(()=>{document.body.dataset.imgTreat=t.imageTreatment,document.body.dataset.density=t.density},[t.imageTreatment,t.density]);const l=e=>{const n=ACCENT_PRESETS[e];n&&a({accentPreset:e,accent:n.accent,accentLight:n.accentLight})};return React.createElement(React.Fragment,null,React.createElement(Curtain,null),t.cursorGlow&&React.createElement(CursorDot,null),React.createElement(Navigation,null),React.createElement(Hero,{ctaLabel:t.ctaLabel}),React.createElement(Clients,{marquee:t.marquee}),t.showPartners&&React.createElement(Partners,null),React.createElement(About,null),t.showStats&&React.createElement(Stats,null),t.showServices&&React.createElement(Services,null),React.createElement(Projects,{onOpen:c}),t.showTech&&React.createElement(TechStack,null),t.showOnSet&&React.createElement(OnSet,null),React.createElement(Contact,null),React.createElement(Footer,null),o&&React.createElement(ProjectOverlay,{slug:o,onClose:()=>c(null),onOpen:c}),React.createElement(TweaksPanel,{title:"Tweaks"},React.createElement(TweakSection,{title:"Accent"},React.createElement(TweakRadio,{label:"Preset",value:t.accentPreset,options:Object.entries(ACCENT_PRESETS).map(([e,n])=>({value:e,label:n.label})),onChange:l}),React.createElement(TweakColor,{label:"Accent",value:t.accent,onChange:e=>a("accent",e)}),React.createElement(TweakColor,{label:"Accent (hover)",value:t.accentLight,onChange:e=>a("accentLight",e)}),React.createElement(TweakColor,{label:"Background",value:t.primary,onChange:e=>a("primary",e)})),React.createElement(TweakSection,{title:"Typography"},React.createElement(TweakSelect,{label:"Heading / Body",value:t.headingFont,options:FONT_OPTIONS,onChange:e=>a("headingFont",e)}),React.createElement(TweakSelect,{label:"Mono",value:t.monoFont,options:MONO_OPTIONS,onChange:e=>a("monoFont",e)})),React.createElement(TweakSection,{title:"Layout"},React.createElement(TweakToggle,{label:"Logo marquee",value:t.marquee,onChange:e=>a("marquee",e)}),React.createElement(TweakToggle,{label:"Cursor glow",value:t.cursorGlow,onChange:e=>a("cursorGlow",e)}),React.createElement(TweakRadio,{label:"Density",value:t.density,options:[{value:"comfortable",label:"Comfy"},{value:"compact",label:"Compact"}],onChange:e=>a("density",e)})),React.createElement(TweakSection,{title:"Imagery"},React.createElem
|