// Dashboard Resume — the locked-in direction. // One shared component, three premium theme variants (A1 Refined · A2 Serif Display // · A3 Executive). Each variant configures palette, typography, and a few visual // flourishes; the underlying layout is the same. // ───────────────────────────── THEMES ───────────────────────────── const THEME_A1 = { key: "A1", label: "Refined", tagline: "Cool dark navy with crisp jade — clean, premium fintech-y dashboard.", // Dark palette bg: "#0A0E14", surface: "#11161F", surface2: "#181E29", border: "#202836", text: "#EAEEF5", muted: "#7C8898", dim: "#4A5566", // Light palette lightBg: "#F6F7FA", lightSurface: "#FFFFFF", lightSurface2: "#EEF0F5", lightBorder: "#DCE0E8", lightText: "#0A0E14", lightMuted: "#5A6473", lightDim: "#98A0AE", accent: "#7CE0A8", display: "'Manrope', 'Noto Sans Georgian', system-ui, sans-serif", body: "'Manrope', 'Noto Sans Georgian', system-ui, sans-serif", mono: "'JetBrains Mono', 'Noto Sans Georgian', ui-monospace, monospace", nameItalic: false, serifSections: false, }; const THEME_A2 = { key: "A2", label: "Editorial", tagline: "Warm dark with cream-gold accent, serif display headline — luxe + editorial.", bg: "#13100B", surface: "#1B1812", surface2: "#231F17", border: "#2E2920", text: "#F1EBDC", muted: "#8C8472", dim: "#534B3D", lightBg: "#F7F2E8", lightSurface: "#FFFCF3", lightSurface2: "#EFE9DA", lightBorder: "#DCD2BB", lightText: "#1A160F", lightMuted: "#6B6253", lightDim: "#A89E86", accent: "#E8B86A", display: "'Instrument Serif', 'Cormorant Garamond', Georgia, serif", body: "'Manrope', system-ui, sans-serif", mono: "'JetBrains Mono', ui-monospace, monospace", nameItalic: true, serifSections: true, }; const THEME_A3 = { key: "A3", label: "Executive", tagline: "Deep midnight with muted gold — heavy, restrained, executive-search feel.", bg: "#0E1116", surface: "#161A21", surface2: "#1D222B", border: "#262D38", text: "#E6E2D7", muted: "#7F7A6F", dim: "#48443E", lightBg: "#EFEBE2", lightSurface: "#F9F6EC", lightSurface2: "#E5DFD0", lightBorder: "#CDC5B0", lightText: "#13110D", lightMuted: "#5E5949", lightDim: "#9F9986", accent: "#C9A961", display: "'Newsreader', 'Cormorant Garamond', Georgia, serif", body: "'Manrope', system-ui, sans-serif", mono: "'IBM Plex Mono', ui-monospace, monospace", nameItalic: false, serifSections: true, }; const DASHBOARD_W = 920; // ───────────────────────────── MAIN COMPONENT ───────────────────────────── function DashboardResume({ theme, initialDark = true, dark: darkProp, setDark: setDarkProp, hideToggle = false, compact = false, onAsk, lang = "en", printMode = false, variant = "original" }) { const V = variant !== "original"; const R = (window.RESUME_I18N && window.RESUME_I18N[lang]) || window.RESUME; const L = (window.UI_STRINGS && window.UI_STRINGS[lang]) || window.UI_STRINGS.en; const [darkState, setDarkState] = React.useState(initialDark); // Controlled or uncontrolled — allows parent to drive theme (for "Print as PDF"). const dark = darkProp !== undefined ? darkProp : darkState; const setDark = setDarkProp || setDarkState; const [filter, setFilter] = React.useState(null); React.useEffect(() => { if (compact) setFilter(null); }, [compact]); // Pick palette by mode const p = dark ? { bg: theme.bg, surface: theme.surface, surface2: theme.surface2, border: theme.border, text: theme.text, muted: theme.muted, dim: theme.dim } : { bg: theme.lightBg, surface: theme.lightSurface, surface2: theme.lightSurface2, border: theme.lightBorder, text: theme.lightText, muted: theme.lightMuted, dim: theme.lightDim }; const accent = theme.accent; const { display, body, mono } = theme; const matches = (job) => compact || !filter || job.channels.includes(filter); return (
{/* ────────────────────────── HEADER ────────────────────────── */}
{/* Headline */}

{R.headline}

{/* ────────────────────────── KPI ROW (3 tiles) ────────────────────────── */}
{R.kpis.map((k, i) => ( ))}
{V && !compact && } {/* ────────────────────────── EXPERIENCE ────────────────────────── */} {!compact && !printMode && ( )}
{(compact ? R.experience : R.experience).map((job) => ( V && !compact ? : ))}
{/* ────────────────────────── PROJECTS ────────────────────────── */} {!compact && (
{R.projects.map((proj) => ( ))}
)} {variant === "results" && !compact && } {variant === "split" && !compact && } {/* ────────────────────────── STACK + SITES ────────────────────────── */}
{R.skillGroups.map((g) => (
{g.name}
{g.items.map((s) => ( {s} ))}
))}
{!compact && (

{L.sitesIntro}

{R.sitesBuilt.map((s, i) => ( {s.url} {s.note} ))}
)}
{/* ────────────────────────── MARKETS ────────────────────────── */} {!compact && (
{R.markets.map((m) => (
{m.code} {m.name}
))}
)} {/* ────────────────────────── EDU · CERTS · LANG ────────────────────────── */} {!compact && (
{R.education.degree}
{R.education.school}
{R.education.dates}
{R.languages.map((l) => (
{l.name} {l.level}
))}
{R.certificates.map((c, i) => (
{c.name} {c.issuer}
))}
)} {/* ────────────────────────── CONTACT FOOTER ────────────────────────── */}
{[ ["Email", R.email, `mailto:${R.email}`], ["Phone", R.phone, `tel:${R.phone.replace(/\s/g, "")}`], ["LinkedIn", R.linkedin, `https://${R.linkedin}`], ["Based in", R.location, null], ].map(([label, value, href]) => ( ))}
{/* ────────────────────────── BUILT-WITH-AI ────────────────────────── */}
); } // ───────────────────────────── SUB-COMPONENTS ───────────────────────────── function Header({ theme, p, dark, setDark, R, L, accent, display, mono, hideToggle }) { const isSerif = theme.serifSections; return (
{L.headerBadge}
{/* Name */}

{theme.nameItalic ? ( <> {R.name.split(" ")[0]}{" "} {R.name.split(" ").slice(1).join(" ")} ) : ( R.name )}

{R.title} · {L.headerTagline}
{!hideToggle && ( )}
); } function KPITile({ k, theme, p, accent, display, mono }) { const isSerif = theme.serifSections; return (
{k.label}
{k.value} {k.suffix}
{k.note}
); } function SectionHeader({ label, right, theme, p, mono, accent }) { const isSerif = theme.serifSections; return (

{!isSerif && } {label}

{right && ( {right} )}
); } function FilterChips({ channels, filter, setFilter, accent, p, mono, allLabel }) { return (
setFilter(null)} accent={accent} p={p} mono={mono}>{allLabel || "All"} {channels.map((c) => ( setFilter(filter === c ? null : c)} accent={accent} p={p} mono={mono}> {c} ))}
); } function Chip({ children, active, onClick, accent, p, mono }) { return ( ); } function Sparkline({ data, color, dir, w = 100, h = 22 }) { const min = Math.min(...data), max = Math.max(...data); const span = (max - min) || 1; const pts = data.map((v, i) => { const x = (i / (data.length - 1)) * w; const y = h - 2 - ((v - min) / span) * (h - 4); return [x, y]; }); const line = pts.map(([x, y]) => `${x.toFixed(1)},${y.toFixed(1)}`).join(" "); const area = `0,${h} ` + line + ` ${w},${h}`; const gid = "sg" + Math.abs(data[0] * 31 + data.length * 7 + Math.round(w)); const last = pts[pts.length - 1]; return ( ); } function ResultsBand({ results, note, accent, p, mono, display, L, compact }) { if (!results || !results.length) return null; const cols = results.length > 4 ? 3 : results.length; return (
{(L && L.resultsLabel) || "Results delivered"}
{note && (
{note}
)}
{results.map((r, i) => (
{r.v} {r.dir === "down" ? "\u25BC" : "\u25B2"}
{r.l}
))}
); } function ProjectCard({ proj, theme, p, mono, display, accent, L, printMode }) { const [flipped, setFlipped] = React.useState(false); const [hover, setHover] = React.useState(false); const shown = flipped || hover; const [face, setFace] = React.useState("front"); const [turning, setTurning] = React.useState(false); const first = React.useRef(true); React.useEffect(() => { const want = shown ? "back" : "front"; if (first.current) { first.current = false; setFace(want); return; } if (want === face) { setTurning(false); return; } setTurning(true); const t1 = setTimeout(() => { setFace(want); setTurning(false); }, 220); return () => clearTimeout(t1); }, [shown, face]); const faceBase = { background: p.surface, border: `1px solid ${p.border}`, borderRadius: 10, padding: "14px 14px 12px", display: "flex", flexDirection: "column", height: printMode ? "auto" : "100%", overflow: "hidden", }; const backStyle = { ...faceBase, borderColor: accent + "55", background: `linear-gradient(150deg, ${accent}14, ${p.surface} 65%)`, }; const toggle = () => setFlipped(f => !f); const Front = (
{proj.name}
{proj.category}
{!printMode && (
→ {(L && L.whatIDid) || "What I did"}
)}
); const Back = (
{!printMode && (
{proj.name}
)}
{proj.did}
); return (
{ if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggle(); } }} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} onFocus={() => setHover(true)} onBlur={() => setHover(false)} style={{ height: printMode ? "auto" : 124, cursor: "pointer", outlineOffset: 3 }} >
{printMode ? {Front}{Back} : (face === "back" ? Back : Front)}
); } function JobRow({ job, active, accent, theme, p, mono, display, compact = false, L }) { const isSerif = theme.serifSections; return (
{job.role} · {job.company} {job.tag}
{!compact && (
{job.blurb}
)}
{job.start} → {job.end}
{!compact && (
{job.channels.map((c) => ( {c} ))}
)} {!compact && ( )} {!compact && ( )}
); } // ───────────────────────────── BUILT-WITH-AI BADGE ───────────────────────────── function BuiltWithAI({ p, accent, mono, onAsk, L }) { const t = L || (window.UI_STRINGS && window.UI_STRINGS.en); return (
✦
{t.builtTitle}
); } // ───────────────────────────── ASK-MY-CV AI CHAT ───────────────────────────── function buildResumeContext(R) { const exp = R.experience.map(j => `• ${j.role} — ${j.company} (${j.start}–${j.end}, ${j.tag}). ${j.blurb} Channels: ${j.channels.join(", ")}. Highlights: ${j.bullets.join(" ")}` + (j.results ? ` Measured results: ${j.results.map(r => `${r.l} ${r.v}`).join("; ")}.` : "") ).join("\n"); const skills = R.skillGroups.map(g => `${g.name}: ${g.items.join(", ")}`).join(" | "); const kpis = R.kpis.map(k => `${k.value}${k.suffix} ${k.label} (${k.note})`).join("; "); return [ `NAME: ${R.name}`, `TITLE: ${R.title}`, `LOCATION: ${R.location}`, `SUMMARY: ${R.headline}`, `KEY METRICS: ${kpis}`, `SKILLS — ${skills}`, `EXPERIENCE:\n${exp}`, `PROJECTS/BRANDS: ${R.projects.map(x => x.name + " (" + x.category + ")" + (x.did ? " — " + x.did : "")).join(", ")}`, `WEBSITES BUILT: ${R.sitesBuilt.map(s => s.url).join(", ")}`, `MARKETS: ${R.markets.map(m => m.name).join(", ")}`, `EDUCATION: ${R.education.degree}, ${R.education.school} (${R.education.dates})`, `LANGUAGES: ${R.languages.map(l => l.name + " — " + l.level).join(", ")}`, `CERTIFICATES: ${R.certificates.map(c => c.name + " (" + c.issuer + ")").join(", ")}`, `CONTACT: ${R.email} · ${R.phone} · ${R.linkedin}`, R.aiNotes ? `BACKGROUND NOTES — answer questions about overlaps, titles, and role endings using these, in the first person, briefly and confidently:\n${R.aiNotes.map(n => "• " + n).join("\n")}` : "", ].filter(Boolean).join("\n"); } const SUGGESTED_Q = [ "What results has he actually driven?", "Does he have hands-on AI experience?", "Has he run LinkedIn & Google Ads?", "Which markets has he worked in?", "Can he build websites himself?", ]; const ASK_CV_DAILY_LIMIT = 8; function getAskCvUsage() { try { const today = new Date().toISOString().slice(0, 10); const raw = JSON.parse(localStorage.getItem("askcv_usage") || "null"); if (!raw || raw.date !== today) return { date: today, count: 0 }; return raw; } catch (e) { return { date: "", count: 0 }; } } function bumpAskCvUsage() { const today = new Date().toISOString().slice(0, 10); const cur = getAskCvUsage(); const next = { date: today, count: cur.count + 1 }; try { localStorage.setItem("askcv_usage", JSON.stringify(next)); } catch (e) {} return next; } function AskMyCV({ theme, dark, openState, lang = "en" }) { const R = (window.RESUME_I18N && window.RESUME_I18N[lang]) || window.RESUME; const L = (window.UI_STRINGS && window.UI_STRINGS[lang]) || window.UI_STRINGS.en; const accent = theme.accent; const [open, setOpen] = openState; const [msgs, setMsgs] = React.useState([]); const [input, setInput] = React.useState(""); const [busy, setBusy] = React.useState(false); const [usage, setUsage] = React.useState(() => getAskCvUsage()); const listRef = React.useRef(null); const inputRef = React.useRef(null); const ctx = React.useMemo(() => buildResumeContext(R), [R]); const ctxKa = React.useMemo(() => { const RK = (window.RESUME_I18N && window.RESUME_I18N.ka) || R; return buildResumeContext(RK); }, [R]); const remaining = Math.max(0, ASK_CV_DAILY_LIMIT - usage.count); const limitHit = remaining <= 0; // Reset the conversation when the language changes React.useEffect(() => { setMsgs([]); }, [lang]); const c = dark ? { bg: "#0D121B", panel: "#11161F", bubble: "#1B2230", border: "#232B3A", text: "#EAEEF5", muted: "#8A94A6", chip: "#161C27" } : { bg: "#FFFFFF", panel: "#FFFFFF", bubble: "#EEF1F6", border: "#E1E5EC", text: "#0A0E14", muted: "#5A6473", chip: "#F3F5F9" }; React.useEffect(() => { if (listRef.current) listRef.current.scrollTop = listRef.current.scrollHeight; }, [msgs, busy, open]); React.useEffect(() => { if (open && inputRef.current) setTimeout(() => inputRef.current.focus(), 120); }, [open]); async function ask(q) { const question = (q ?? input).trim(); if (!question || busy) return; if (limitHit) { setInput(""); setMsgs(m => [...m, { role: "user", content: question }, { role: "assistant", content: L.chatLimitReached }]); return; } setInput(""); const next = [...msgs, { role: "user", content: question }]; setMsgs(next); setBusy(true); setUsage(bumpAskCvUsage()); try { // Route by the language of the QUESTION, not the page — a Georgian question // must go to Gemini even while the page is in English. const askedInKa = /[\u10A0-\u10FF]/.test(question); const replyLang = (askedInKa || lang === "ka") ? "ka" : "en"; // Georgian: try the hand-written answer bank first — guarantees correct Georgian // and skips the model entirely on the common questions. if (replyLang === "ka") { const bank = (window.RESUME_I18N && window.RESUME_I18N.ka && window.RESUME_I18N.ka.faqKa) || []; const q = question.toLowerCase(); let best = null, bestScore = 0; bank.forEach(item => { let s = 0; item.k.forEach(kw => { if (q.includes(kw.toLowerCase())) s += kw.length >= 6 ? 2 : 1; }); if (s > bestScore) { bestScore = s; best = item; } }); if (best && bestScore >= 2) { setMsgs(m => [...m, { role: "assistant", content: best.a }]); setBusy(false); return; } } const langLine = replyLang === "ka" ? "პასუხი დაწერე მხოლოდ ქართულად. წერე ბუნებრივი, სასაუბრო-პროფესიული ქართულით, როგორც მშობლიურ ენაზე მოლაპარაკე — არასდეს სიტყვასიტყვით თარგმნიდან ინგლისურიდან; გადააზრე აზრი და თავიდან დაწერე ქართულად. დაიცავი სწორი ბრუნვები, ზმნის პირი და დროები; ისაუბრე პირველ პირში (მე, ჩემი). ბრენდების, კომპანიების, ხელსაწყოებისა და პლატფორმების სახელები დატოვე ლათინურად (Google Ads, Meta, GA4, TNET, Bloomex, Hashbank). თუ ქართული ფრაზა უხერხულად გამოგიდის, გადააფრაზირე სანამ პასუხს გასცემ. გრამატიკა და ორთოგრაფია უნდა იყოს უშეცდომო: ზმნები სწორად დაასრულე, არ გამოიყენო არარსებული სიტყვები ან შეცდომითი ფორმები (მაგ. სწორია „ჰიბრიდული“, „მქონდა“, „ჰქონდა“). სანამ დააბრუნებ, გადაიკითხე: ასე დაწერდა ბიზნეს-ქართულზე მოსაუბრე ადამიანი? თუ არა, გადაწერე." : "Respond in English only, regardless of what language the question is asked in."; const kaBank = replyLang === "ka" ? "\n\n=== მზადი ქართული პასუხები (დაწერილია უშეცდომო ქართულით) ===\nთუ შეკითხვა რომელიმეს ამ პასუხს ეხება, დააბრუნე ზუსტად ისევ, სიტყვასიტყვით, არაფერს არ დაამატო და არაფერს არ შეუცვალო. ასეთ სტილში დაწერე ახალი პასუხიც, თუ არც ერთი არ ემთხვევა.\n" + ((window.RESUME_I18N && window.RESUME_I18N.ka && window.RESUME_I18N.ka.faqKa) || []).map(f => "• " + f.a).join("\n") : ""; const system = `You ARE Giorgi Kvaratskhelia, speaking in the FIRST PERSON on your own interactive résumé. Recruiters and hiring managers chat with you here. Answer ONLY from the CV DATA below. Keep answers SHORT and professional — 1 sentence, 2 at most. No fluff, no over-explaining. Always speak as "I" / "my" — never third person. When it's relevant (e.g. they ask how to reach you, want to schedule something, or the conversation naturally wraps up), offer to connect and share the email, phone, and/or LinkedIn from the CV data. If something isn't in the data, say briefly that you don't have that detail and suggest reaching out directly. Never invent facts, numbers, or employers. Reply in plain text only — no markdown, asterisks, bold, or bullet points. ${langLine}\n\n=== CV DATA ===\n${replyLang === "ka" ? ctxKa : ctx}${kaBank}`; const msgPayload = next.map(m => ({ role: m.role, content: m.content })); window.gkTrack && window.gkTrack("cv_ask"); let text = ""; if (window.claude && typeof window.claude.complete === "function") { // Works inside this workspace / the share link — no setup needed. text = await window.claude.complete({ system, max_tokens: 400, messages: msgPayload }); } else if (window.ASK_CV_PROXY_URL) { // Works on a public deploy (e.g. GitHub Pages) once you point this at your own proxy. // See resume-data.js for setup notes. const res = await fetch(window.ASK_CV_PROXY_URL, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ system, max_tokens: 400, messages: msgPayload, lang: replyLang }), }); if (!res.ok) throw new Error("proxy error"); const data = await res.json(); text = data.text || (data.content && data.content[0] && data.content[0].text) || ""; } else { throw new Error("no AI backend configured"); } setMsgs(m => [...m, { role: "assistant", content: (text || "").trim() || L.chatNotFound }]); } catch (e) { setMsgs(m => [...m, { role: "assistant", content: L.chatError }]); } finally { setBusy(false); } } return (
{open && (
{/* header */}
✦
{L.chatTitle}
{limitHit ? L.chatLimitReached : L.chatSubtitle}
{/* messages */}
{msgs.length === 0 && (
{L.chatEmpty}
)} {msgs.map((m, i) => (
{m.content}
))} {busy && (
{L.chatThinking}
)}
{/* suggested chips (only before first message) */} {msgs.length === 0 && (
{L.suggested.map(q => ( ))}
)} {/* input */}
setInput(e.target.value)} onKeyDown={e => { if (e.key === "Enter") ask(); }} placeholder={limitHit ? L.chatLimitReached : L.chatPlaceholder} disabled={limitHit} style={{ flex: 1, background: c.chip, border: `1px solid ${c.border}`, borderRadius: 10, padding: "10px 13px", fontSize: 13.5, color: c.text, outline: "none", fontFamily: "inherit", opacity: limitHit ? 0.6 : 1, }} />
)} {/* FAB */}
); } // Expose window.DashboardResume = DashboardResume; window.CvSparkline = Sparkline; window.AskMyCV = AskMyCV; window.BuiltWithAI = BuiltWithAI; window.DASHBOARD_THEMES = { A1: THEME_A1, A2: THEME_A2, A3: THEME_A3 }; window.DASHBOARD_W = DASHBOARD_W;