1 line
5.4 KiB
JavaScript
1 line
5.4 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(family){const id="wd-font-"+family.replace(/\s/g,"-");if(document.getElementById(id))return;const l=document.createElement("link");l.id=id,l.rel="stylesheet",l.href=`https://fonts.googleapis.com/css2?family=${family.replace(/\s/g,"+")}:wght@300;400;500;600;700&display=swap`,document.head.appendChild(l)}function App(){const[tweaks,setTweak]=useTweaks(TWEAKS_DEFAULTS),[openSlug,setOpenSlug]=React.useState(()=>{const m=location.hash.match(/#\/projects\/([\w-]+)/);return m?m[1]:null});React.useEffect(()=>{openSlug?location.hash=`#/projects/${openSlug}`:location.hash.startsWith("#/projects/")&&(location.hash="")},[openSlug]),React.useEffect(()=>{loadFont(tweaks.headingFont),loadFont(tweaks.monoFont);const r=document.documentElement.style;r.setProperty("--color-accent",tweaks.accent),r.setProperty("--color-accent-light",tweaks.accentLight),r.setProperty("--color-primary",tweaks.primary),r.setProperty("--font-inter",`"${tweaks.headingFont}"`),r.setProperty("--font-mono-stack",`"${tweaks.monoFont}"`)},[tweaks]),React.useEffect(()=>{document.body.dataset.imgTreat=tweaks.imageTreatment,document.body.dataset.density=tweaks.density},[tweaks.imageTreatment,tweaks.density]);const onAccentPreset=key=>{const p=ACCENT_PRESETS[key];p&&setTweak({accentPreset:key,accent:p.accent,accentLight:p.accentLight})};return React.createElement(React.Fragment,null,React.createElement(Curtain,null),tweaks.cursorGlow&&React.createElement(CursorDot,null),React.createElement(Navigation,null),React.createElement(Hero,{ctaLabel:tweaks.ctaLabel}),React.createElement(Clients,{marquee:tweaks.marquee}),tweaks.showPartners&&React.createElement(Partners,null),React.createElement(About,null),tweaks.showStats&&React.createElement(Stats,null),tweaks.showServices&&React.createElement(Services,null),React.createElement(Projects,{onOpen:setOpenSlug}),tweaks.showTech&&React.createElement(TechStack,null),tweaks.showOnSet&&React.createElement(OnSet,null),React.createElement(Contact,null),React.createElement(Footer,null),openSlug&&React.createElement(ProjectOverlay,{slug:openSlug,onClose:()=>setOpenSlug(null),onOpen:setOpenSlug}),React.createElement(TweaksPanel,{title:"Tweaks"},React.createElement(TweakSection,{title:"Accent"},React.createElement(TweakRadio,{label:"Preset",value:tweaks.accentPreset,options:Object.entries(ACCENT_PRESETS).map(([k,v])=>({value:k,label:v.label})),onChange:onAccentPreset}),React.createElement(TweakColor,{label:"Accent",value:tweaks.accent,onChange:v=>setTweak("accent",v)}),React.createElement(TweakColor,{label:"Accent (hover)",value:tweaks.accentLight,onChange:v=>setTweak("accentLight",v)}),React.createElement(TweakColor,{label:"Background",value:tweaks.primary,onChange:v=>setTweak("primary",v)})),React.createElement(TweakSection,{title:"Typography"},React.createElement(TweakSelect,{label:"Heading / Body",value:tweaks.headingFont,options:FONT_OPTIONS,onChange:v=>setTweak("headingFont",v)}),React.createElement(TweakSelect,{label:"Mono",value:tweaks.monoFont,options:MONO_OPTIONS,onChange:v=>setTweak("monoFont",v)})),React.createElement(TweakSection,{title:"Layout"},React.createElement(TweakToggle,{label:"Logo marquee",value:tweaks.marquee,onChange:v=>setTweak("marquee",v)}),React.createElement(TweakToggle,{label:"Cursor glow",value:tweaks.cursorGlow,onChange:v=>setTweak("cursorGlow",v)}),React.createElement(TweakRadio,{label:"Density",value:tweaks.density,options:[{value:"comfortable",label:"Comfy"},{value:"compact",label:"Compact"}],onChange:v=>setTweak("density",v)})),React.createElement(TweakSection,{title:"Imagery"},React.createElement(TweakRadio,{label:"Treatment",value:tweaks.imageTreatment,options:[{value:"default",label:"Color"},{value:"grayscale",label:"B&W"},{value:"tint",label:"Tint"}],onChange:v=>setTweak("imageTreatment",v)})),React.createElement(TweakSection,{title:"Sections"},React.createElement(TweakToggle,{label:"Partners strip",value:tweaks.showPartners,onChange:v=>setTweak("showPartners",v)}),React.createElement(TweakToggle,{label:"Stats",value:tweaks.showStats,onChange:v=>setTweak("showStats",v)}),React.createElement(TweakToggle,{label:"Process",value:tweaks.showServices,onChange:v=>setTweak("showServices",v)}),React.createElement(TweakToggle,{label:"Tech stack",value:tweaks.showTech,onChange:v=>setTweak("showTech",v)}),React.createElement(TweakToggle,{label:"On Set",value:tweaks.showOnSet,onChange:v=>setTweak("showOnSet",v)})),React.createElement(TweakSection,{title:"Copy"},React.createElement(TweakText,{label:"Hero CTA",value:tweaks.ctaLabel,onChange:v=>setTweak("ctaLabel",v)}))))}const root=ReactDOM.createRoot(document.getElementById("root"));root.render(React.createElement(App,null));
|