// app.jsx — FINAL: single A1 "Refined" dashboard resume, print/PDF ready. const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "#7CE0A8", "initialMode": "dark", "cvLayout": "results" }/*EDITMODE-END*/; function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [dark, setDark] = React.useState(() => { try { const v = localStorage.getItem("gk_theme"); if (v) return v !== "light"; } catch (e) {} return t.initialMode !== "light"; }); const toggleTheme = () => setDark(d => { const nd = !d; try { localStorage.setItem("gk_theme", nd ? "dark" : "light"); } catch (e) {} return nd; }); const [recruiter, setRecruiter] = React.useState(false); const gkMeta = document.querySelector('meta[name="gk-lang"]'); const [lang, setLang] = React.useState(() => { try { const p = gkMeta ? gkMeta.content : new URLSearchParams(location.search).get("lang"); if (p === "ka" || p === "en") return p; return localStorage.getItem("gk_lang") || "en"; } catch (e) { return "en"; } }); React.useEffect(() => { try { localStorage.setItem("gk_lang", lang); if (gkMeta) return; const u = new URL(location.href); u.searchParams.set("lang", lang); history.replaceState(null, "", u); document.documentElement.lang = lang; } catch (e) {} }, [lang]); const L = (window.UI_STRINGS && window.UI_STRINGS[lang]) || window.UI_STRINGS.en; const askState = React.useState(false); const openAsk = () => askState[1](true); // Keep state in sync if the tweak changes const firstMode = React.useRef(true); React.useEffect(() => { if (firstMode.current) { firstMode.current = false; return; } setDark(t.initialMode !== "light"); }, [t.initialMode]); const theme = { ...window.DASHBOARD_THEMES.A1, accent: t.accent }; const [pdfBusy, setPdfBusy] = React.useState(false); const [bookOpen, setBookOpen] = React.useState(false); const [hintOpen, setHintOpen] = React.useState(false); React.useEffect(() => { let seen = false; try { seen = localStorage.getItem("gk_cv_shortHint") === "1"; } catch (e) {} if (seen) return; const t = setTimeout(() => setHintOpen(true), 3200); return () => clearTimeout(t); }, []); const closeHint = () => { setHintOpen(false); try { localStorage.setItem("gk_cv_shortHint", "1"); } catch (e) {} }; React.useEffect(() => { if (recruiter) setHintOpen(false); }, [recruiter]); const [printMode, setPrintMode] = React.useState(false); React.useEffect(() => { const on = () => setPrintMode(true), off = () => setPrintMode(false); window.addEventListener("beforeprint", on); window.addEventListener("afterprint", off); return () => { window.removeEventListener("beforeprint", on); window.removeEventListener("afterprint", off); }; }, []); // ── Analytics: fire a visit beacon + track time on page ── React.useEffect(() => { if (window.trackCV) window.trackCV.init(); }, []); React.useEffect(() => { if (window.trackCV) window.trackCV.lang(lang); }, [lang]); const handleDownloadPDF = async () => { if (pdfBusy) return; const wasDark = dark; setPdfBusy(true); setDark(false); // force light for paper setPrintMode(true); document.body.classList.add("printing"); if (typeof window.trackCV === "object" && window.trackCV) window.trackCV.event("pdf_download"); // wait for the light theme + printing layout to apply, then hand off to the // browser's native "Save as PDF" — perfectly symmetric, full-width, crisp text, // and works offline (no CDN dependency). const cleanup = () => { document.body.classList.remove("printing"); setPrintMode(false); setDark(wasDark); setPdfBusy(false); window.removeEventListener("afterprint", cleanup); }; window.addEventListener("afterprint", cleanup); await new Promise(r => setTimeout(r, 500)); try { window.gkTrack && window.gkTrack("cv_download"); window.print(); } catch (e) { /* ignore */ } // safety cleanup if afterprint never fires setTimeout(cleanup, 1500); }; const pageBg = dark ? theme.bg : theme.lightBg; React.useEffect(() => { document.body.style.background = pageBg; document.body.style.transition = "background 220ms ease"; }, [pageBg]); const W = window.DASHBOARD_W; // ── Fit-to-width scaling so the full 920px sheet is always visible ── const sheetRef = React.useRef(null); const [scale, setScale] = React.useState(1); const [boxH, setBoxH] = React.useState(null); React.useLayoutEffect(() => { function update() { const margin = window.innerWidth < 700 ? 24 : 64; // total horizontal breathing room const avail = window.innerWidth - margin; const s = Math.min(1, avail / W); setScale(s); if (sheetRef.current) setBoxH(sheetRef.current.offsetHeight * s); } update(); window.addEventListener("resize", update); const t1 = setTimeout(update, 300); const t2 = setTimeout(update, 900); // re-measure after webfonts settle return () => { window.removeEventListener("resize", update); clearTimeout(t1); clearTimeout(t2); }; }, [dark, theme.accent, recruiter, lang]); return ( <> {/* Top bar (screen only): site nav left, tools right */}
GK
{/* Tools rail: vertical on wide screens, a row under the bar on narrow ones */}
{/* 30-sec view hint — anchored under the toolbar */} {hintOpen && (
= 1180 ? { top: "calc(50% - 70px)", left: 150 } : { top: 124, right: 12 }), zIndex: 58, width: "min(240px, calc(100vw - 36px))", background: dark ? "#0F1520" : "#FFFFFF", border: `1px solid ${theme.accent}`, borderRadius: 12, padding: "11px 12px 10px", boxShadow: dark ? "0 20px 50px rgba(0,0,0,0.55)" : "0 18px 44px rgba(20,30,50,0.16)", fontFamily: "'JetBrains Mono', ui-monospace, monospace", animation: "hintIn 300ms cubic-bezier(.2,.9,.25,1) both", }}>
{L.hintTitle}
{L.hintBody}
)} {/* Book a call — bottom left */}
{ e.preventDefault(); setBookOpen(true); }} style={{ ...toolbarBtn(dark), whiteSpace: "nowrap", color: dark ? theme.accent : "#0A0E14", background: dark ? "#181E29" : "#FFFFFF", border: `1px solid ${theme.accent}`, fontWeight: 600, textDecoration: "none", boxShadow: dark ? "0 8px 24px rgba(0,0,0,0.4)" : "0 8px 24px rgba(20,30,50,0.12)" }} > {L.tbBook}
{/* Book-a-call popover */} {bookOpen && (
setBookOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 60, background: "rgba(6,10,18,0.42)", backdropFilter: "blur(2px)", display: "flex", alignItems: "flex-end", justifyContent: "flex-start", padding: window.innerWidth < 700 ? "16px" : "0 18px 76px", }}>
e.stopPropagation()} style={{ width: "min(340px, 100%)", background: dark ? "#0F1520" : "#FFFFFF", border: `1px solid ${dark ? "#25303F" : "#E3E8EF"}`, borderRadius: 16, padding: "20px 20px 16px", boxShadow: "0 24px 60px rgba(5,10,20,0.35)", fontFamily: "'JetBrains Mono', ui-monospace, monospace", }}>
{L.bookTitle}
{L.bookBody}
{ if (window.trackCV) window.trackCV.event("book_call"); setBookOpen(false); }} style={{ ...toolbarBtn(dark), flex: 1, justifyContent: "center", textAlign: "center", background: theme.accent, color: "#0A0E14", border: `1px solid ${theme.accent}`, fontWeight: 700, textDecoration: "none", }} > {L.bookGo}
)}
{/* scale-outer reserves the scaled footprint so the page flows correctly */}
setTweak("accent", v)} /> setTweak("initialMode", v)} /> setTweak("cvLayout", v)} /> ); } const SMALL = { fontSize: 10.5, padding: "9px 12px", boxShadow: "none" }; function toolbarBtn(dark) { return { whiteSpace: "nowrap", fontFamily: "'JetBrains Mono', ui-monospace, monospace", fontSize: 11.5, fontWeight: 600, letterSpacing: "0.09em", textTransform: "uppercase", padding: "11px 16px", borderRadius: 10, cursor: "pointer", background: dark ? "rgba(24,30,41,0.92)" : "rgba(255,255,255,0.96)", color: dark ? "#F3F6FA" : "#0A0E14", border: `1px solid ${dark ? "#2E3A4C" : "#C9D0DB"}`, boxShadow: dark ? "0 6px 20px rgba(0,0,0,0.45)" : "0 6px 18px rgba(20,30,50,0.14)", backdropFilter: "blur(8px)", transition: "transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease", }; } ReactDOM.createRoot(document.getElementById("root")).render(); requestAnimationFrame(() => requestAnimationFrame(() => { if (window.__hideSplash) window.__hideSplash(); }));