/* eslint-disable */ const { useState, useEffect, useRef, useMemo } = React; const C = window.PORTFOLIO_CONTENT; /* -------------------- hooks -------------------- */ function useLocalStorage(key, initial) { const [v, setV] = useState(() => { try { const s = localStorage.getItem(key); return s == null ? initial : JSON.parse(s); } catch { return initial; } }); useEffect(() => { try { localStorage.setItem(key, JSON.stringify(v)); } catch {} }, [key, v]); return [v, setV]; } function useTheme() { const [theme, setTheme] = useLocalStorage("kd:theme", "dark"); useEffect(() => { document.documentElement.setAttribute("data-theme", theme); }, [theme]); return [theme, setTheme]; } function useLang() { const [lang, setLang] = useLocalStorage("kd:lang", "en"); useEffect(() => { document.documentElement.setAttribute("lang", lang); }, [lang]); return [lang, setLang]; } /* -------------------- icons -------------------- */ const Icon = { Sun: () => ( ), Moon: () => ( ), Download: () => ( ), Arrow: () => ( ), Github: () => ( ), Linkedin: () => ( ), Mail: () => ( ), Site: () => ( ), }; /* -------------------- typed name -------------------- */ function TypedName({ text }) { const [shown, setShown] = useState(""); useEffect(() => { setShown(""); let i = 0; const id = setInterval(() => { i++; setShown(text.slice(0, i)); if (i >= text.length) clearInterval(id); }, 55); return () => clearInterval(id); }, [text]); return ( {shown} ); } /* -------------------- nav -------------------- */ function Nav({ lang, setLang, theme, setTheme }) { const t = C.nav[lang]; const items = [ { id: "about", label: t.about }, { id: "skills", label: t.skills }, { id: "work", label: t.work }, { id: "projects", label: t.projects }, { id: "lab", label: t.lab }, { id: "contact", label: t.contact }, ]; return ( ); } /* -------------------- section header -------------------- */ function SecHead({ id, cmd, hash }) { return (
$ {cmd} #{hash}
); } /* -------------------- hero -------------------- */ function Hero({ lang }) { const t = C.hero[lang]; return (
kien@dev :~$ {t.commands[0]}
{C.meta.name.toLowerCase().replace(" ", "-")}
kien@dev :~$ {t.commands[1]}
name= "{C.meta.name}"
role= " {lang === "en" ? C.meta.titleEn : C.meta.titleVi}"
location= "{C.meta.location}"
years_exp= {C.meta.yearsExp}+

// {t.sub}

{t.tags.map((tag, i) => ( {tag} ))}
{t.ctaPrimary}{" "} {t.ctaSecondary}
); } /* -------------------- about -------------------- */ function About({ lang }) { const a = C.about[lang]; return (
{a.file} md
{a.lines.map((ln, i) => { if (ln.kind === "h" && ln.text.startsWith("##")) return (

{ln.text.replace(/^#+\s*/, "")}

); if (ln.kind === "h") return (

{ln.text.replace(/^#+\s*/, "")}

); if (ln.kind === "li") { // group consecutive li if (i > 0 && a.lines[i - 1].kind === "li") return null; const items = []; let j = i; while (j < a.lines.length && a.lines[j].kind === "li") { items.push(a.lines[j].text); j++; } return (
    {items.map((x, k) => (
  • {x}
    • ))}
); } return

{ln.text}

; })}
); } /* -------------------- skills -------------------- */ function Skills({ lang }) { return (
{C.skills.groups.map((g) => (
$ cat {g.label[lang]}.txt {g.items.length} items
{g.items.map((it) => ( {it} ))}
))}
); } /* -------------------- experience -------------------- */ function Experience({ lang }) { const t = C.nav[lang]; return (
{C.experience.map((x, i) => { const isCur = x.tag === "current"; const sha = (() => { const s = (x.org + x.period.en) .replace(/[^a-z0-9]/gi, "") .toLowerCase() .slice(0, 7); return s.padEnd(7, "a"); })(); return (
commit {sha} {x.period[lang]} {x.duration[lang]} {isCur && ( {lang === "en" ? "current" : "hiện tại"} )}

{x.role[lang]}

{x.org} · {x.where}
    {x.bullets[lang].map((b, k) => (
  • {b}
    • ))}
); })}
); } /* -------------------- projects -------------------- */ function Projects({ lang }) { return (
{C.projects.map((p, i) => { const inProg = p.status === "in-progress"; const placeholder = p.status === "placeholder"; return (
{p.name.toLowerCase().replace(/[^a-z0-9]+/g, "-")}.case
{inProg ? lang === "en" ? "preview" : "xem trước" : lang === "en" ? "drop screenshot" : "thả ảnh chụp"}
{inProg ? lang === "en" ? "in progress · 2025" : "đang triển khai · 2025" : lang === "en" ? "coming soon" : "sắp ra mắt"}

{p.name}

{p.blurb[lang]}

{p.stack.map((s) => ( {s} ))}
); })}
); } /* -------------------- lab -------------------- */ function Lab({ lang }) { return (
{C.lab.map((card, i) => (
{card.tag} experiment_{String(i + 1).padStart(2, "0")}
{card.title[lang]}
                {card.log.map((ln, k) => {
                  const colored = ln
                    .replace(/(\[[a-z0-9.]+\])/gi, (m) => `__BL${m}__BL`)
                    .replace(
                      /(\b✓\b|merged|approved|ok|green)/gi,
                      (m) => `__GR${m}__GR`,
                    );
                  const parts = colored.split(/(__BL.*?__BL|__GR.*?__GR)/g);
                  return (
                    

                      {parts.map((part, j) => {
                        if (part.startsWith("__BL"))
                          return (
                            
                              {part.slice(4, -4)}
                            
                          );
                        if (part.startsWith("__GR"))
                          return (
                            
                              {part.slice(4, -4)}
                            
                          );
                        return part;
                      })}
                    

                  );
                })}
{card.stack.map((s) => ( {s} ))}
))}
); } /* -------------------- contact -------------------- */ function Contact({ lang }) { const c = C.contact[lang]; const [form, setForm] = useState({ name: "", email: "", message: "", website: "", }); const [status, setStatus] = useState("idle"); // idle | sending | sent | error const [errorMsg, setErrorMsg] = useState(""); const ERR = { en: { rate_limited: "Too many tries — please wait a minute.", bad_email: "That email doesn't look right.", bad_message: "Message is too short or too long.", server_not_configured: "Server isn't configured yet — try email instead.", send_failed: "Couldn't deliver. Please email me directly.", network_error: "Network error. Please try again.", generic: "Something went wrong. Please try again.", }, vi: { rate_limited: "Gửi quá nhanh — anh đợi 1 phút rồi thử lại nhé.", bad_email: "Email chưa đúng định dạng.", bad_message: "Nội dung quá ngắn hoặc quá dài.", server_not_configured: "Server chưa cấu hình xong — anh gửi mail trực tiếp giúp em nhé.", send_failed: "Không gửi được. Anh email trực tiếp giúp em nhé.", network_error: "Lỗi mạng. Anh thử lại nhé.", generic: "Có lỗi xảy ra. Anh thử lại nhé.", }, }; const submit = async (e) => { e.preventDefault(); if (status === "sending") return; if (!form.name || !form.email || !form.message) return; setStatus("sending"); setErrorMsg(""); try { const res = await fetch("/api/contact", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ ...form, lang }), }); const data = await res.json().catch(() => ({})); if (res.ok && data.ok) { setStatus("sent"); } else { const key = data.error || "generic"; setErrorMsg(ERR[lang][key] || ERR[lang].generic); setStatus("error"); } } catch { setErrorMsg(ERR[lang].network_error); setStatus("error"); } }; const onKeyDown = (e) => { if ((e.metaKey || e.ctrlKey) && e.key === "Enter") submit(e); }; const sent = status === "sent"; return (

{c.title}

{c.sub}

compose --message
{/* honeypot — hidden from humans, bots fill it */} setForm({ ...form, website: e.target.value })} style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0, }} aria-hidden="true" /> {sent ? (
{c.sent}
) : ( <>
name $ setForm({ ...form, name: e.target.value }) } placeholder={c.fields.name} autoComplete="name" disabled={status === "sending"} />
email $ setForm({ ...form, email: e.target.value }) } placeholder={c.fields.email} autoComplete="email" disabled={status === "sending"} />
body $