/* ========================================================================= App — Zhijie Tan personal site (Dark / Light, bilingual) ========================================================================= */ const { useState, useEffect, useCallback } = React; /* ---------- Icons --------------------------------------------------------- */ const Icon = { Globe: () => ( ), MapPin: () => ( ), Phone: () => ( ), Mail: () => ( ), Languages: () => ( ), Share: () => ( ), Copy: () => ( ), Check: () => ( ), Close: () => ( ), Menu: () => ( ), Sun: () => ( ), Moon: () => ( ), LinkedIn: () => ( ), Instagram: () => ( ), Facebook: () => ( ), WeChat: () => ( ), }; /* ---------- Content ------------------------------------------------------- */ const CONTENT = { en: { eyebrow: "Financial Professional", name: "Zhijie Tan", nameZh: "", titlePart1: "FINRA Registered Representative", titlePart2: "Transamerica Financial Advisors, Inc.", licenses: [ "NY Insurance License #1588714", "CT Insurance License #19418685", "TX Insurance License #3455701", ], contact: { website: "Website", office: "Office", mobile: "Mobile", email: "Email", languages: "Languages", languagesValue: "English · Mandarin · Cantonese", }, socialLabel: "Follow me on social media", menuItems: [ { label: "COMPANY", href: "https://financialprofessional.tfaconnects.com/zhijie-tan" }, { label: "PRODUCT CARRIERS", href: "https://www.tfaconnect.com/learn" }, { label: "MY BROKERAGE", href: "https://www.tfaconnect.com/about" }, ], disclaimer: "Securities offered through Transamerica Financial Advisors, Inc. (TFA) — Member FINRA, MSRB, and SIPC.", copied: "Copied to clipboard", wechatTitle: "WeChat", wechatHint: "Scan to add me on WeChat", langButton: "中文", menuTitle: "Menu", }, zh: { eyebrow: "财务专业人士", name: "Zhijie Tan", nameZh: "谭智杰", titlePart1: "FINRA 证券注册代表", titlePart2: "Transamerica Financial Advisors, Inc.", licenses: [ "纽约州保险执照 #1588714", "康州保险执照 #19418685", "德州保险执照 #3455701", ], contact: { website: "官方网站", office: "办公室", mobile: "手机", email: "电子邮件", languages: "语言", languagesValue: "普通话 · 广东话 · 英文", }, socialLabel: "欢迎在社交媒体关注我喔！", menuItems: [ { label: "公司", href: "https://financialprofessional.tfaconnects.com/zhijie-tan" }, { label: "产品合作方", href: "https://www.tfaconnect.com/learn" }, { label: "我的所属券商", href: "https://www.tfaconnect.com/about" }, ], disclaimer: "证券服务由 Transamerica Financial Advisors, Inc. (TFA) 提供 — Member FINRA, MSRB, and SIPC.", copied: "已复制到剪贴板", wechatTitle: "微信", wechatHint: "扫一扫加我微信", langButton: "English", menuTitle: "菜单", }, }; const FIXED = { website: "financialprofessional.tfaconnects.com/zhijie-tan", websiteHref: "https://financialprofessional.tfaconnects.com/zhijie-tan", office: "37-20 Prince St. Suite 2A, Flushing, NY 11354", officeMapHref: "https://maps.google.com/?q=37-20+Prince+St+Suite+2A+Flushing+NY+11354", mobile: "(646) 288-7870", mobileHref: "tel:+16462887870", email: "Zhijie.Tan@TFAconnect.com", emailHref: "mailto:Zhijie.Tan@TFAconnect.com", socials: { linkedin: "https://www.linkedin.com/in/zhijietan/", instagram: "https://www.instagram.com/zhijie.us/", facebook: "https://www.facebook.com/Zhijietan2019", wechat: "#", }, }; /* ---------- Subcomponents ------------------------------------------------- */ function CopyButton({ text, onCopied, ariaLabel }) { const [copied, setCopied] = useState(false); const onClick = async (e) => { e.preventDefault(); e.stopPropagation(); try { await navigator.clipboard.writeText(text); } catch (_) { const ta = document.createElement("textarea"); ta.value = text; document.body.appendChild(ta); ta.select(); try { document.execCommand("copy"); } catch (_) {} ta.remove(); } setCopied(true); onCopied?.(); setTimeout(() => setCopied(false), 1800); }; return ( ); } function ContactRow({ icon, label, children }) { return (

{icon} {label} {children}

); } function SocialLink({ network, href, label, onClick }) { const iconMap = { linkedin: , instagram: , facebook: , wechat: , }; const isWechat = network === "wechat"; return ( { if (isWechat) { e.preventDefault(); onClick?.(); } }} > {iconMap[network]} ); } function WeChatModal({ open, onClose, t }) { useEffect(() => { if (!open) return; const onKey = (e) => e.key === "Escape" && onClose(); window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [open, onClose]); if (!open) return null; return (

e.stopPropagation()}>

{t.wechatTitle}

{t.wechatHint}

); } function PlaceholderQR() { const cells = []; for (let r = 0; r < 21; r++) { for (let c = 0; c < 21; c++) { const inFinder = ((r < 7 && c < 7) || (r < 7 && c > 13) || (r > 13 && c < 7)); let fill; if (inFinder) { const inOuter = (r === 0 || r === 6 || c === 0 || c === 6) || (r > 13 ? (r === 14 || r === 20 || c === 0 || c === 6) : false) || (c > 13 ? (c === 14 || c === 20 || r === 0 || r === 6) : false); const inInner = (r >= 2 && r <= 4 && c >= 2 && c <= 4) || (r >= 2 && r <= 4 && c >= 16 && c <= 18) || (r >= 16 && r <= 18 && c >= 2 && c <= 4); fill = inInner || inOuter; } else { fill = ((r * 7 + c * 13 + r * c) % 5) < 2; } if (fill) cells.push(); } } return ( ); } function Toast({ message }) { if (!message) return null; return (

{message.text}

); } /* ---------- Background ornament ------------------------------------------ */ function BgOrnament() { // Removed per request — user wants a single uniform background. return null; } /* ---------- Header chrome ------------------------------------------------- */ function HeaderActions({ lang, mode, onToggleLang, onToggleMode, t }) { return (

); } /* ---------- Mobile menu drawer ------------------------------------------- */ function MobileMenu({ open, onClose, t, lang, mode, onToggleLang, onToggleMode }) { useEffect(() => { if (!open) return; document.body.style.overflow = "hidden"; const onKey = (e) => e.key === "Escape" && onClose(); window.addEventListener("keydown", onKey); return () => { document.body.style.overflow = ""; window.removeEventListener("keydown", onKey); }; }, [open, onClose]); return ( ); } /* ---------- App ----------------------------------------------------------- */ function App() { const initialTweaks = window.__TWEAKS_DEFAULTS || { mode: "dark", fontScale: 1 }; // Migrate any legacy "direction" key from earlier builds. if (initialTweaks.direction && !initialTweaks.mode) { initialTweaks.mode = initialTweaks.direction === "light" ? "light" : "dark"; } // Force mode into one of the two valid values if (initialTweaks.mode !== "light") initialTweaks.mode = "dark"; const [tweaks, setTweak] = useTweaks(initialTweaks); const [lang, setLang] = useState("zh"); const [langFading, setLangFading] = useState(false); const [wechatOpen, setWechatOpen] = useState(false); const [menuOpen, setMenuOpen] = useState(false); const [toast, setToast] = useState(null); const t = CONTENT[lang]; const mode = tweaks.mode === "light" ? "light" : "dark"; useEffect(() => { document.documentElement.dataset.theme = mode; document.documentElement.style.setProperty("--font-scale", tweaks.fontScale || 1); document.documentElement.lang = lang === "zh" ? "zh-Hans" : "en"; }, [mode, tweaks.fontScale, lang]); const toggleLang = useCallback(() => { setLangFading(true); setTimeout(() => { setLang((prev) => (prev === "zh" ? "en" : "zh")); setTimeout(() => setLangFading(false), 30); }, 240); }, []); const toggleMode = useCallback(() => { setTweak("mode", mode === "dark" ? "light" : "dark"); }, [mode, setTweak]); const showToast = useCallback((text) => { setToast({ text, id: Date.now() }); setTimeout(() => setToast(null), 2200); }, []); const onCopied = () => showToast(CONTENT[lang].copied); // Social order — WeChat first when Chinese const socialOrder = lang === "zh" ? ["wechat", "linkedin", "instagram", "facebook"] : ["linkedin", "instagram", "facebook", "wechat"]; const socialLabels = { linkedin: "LinkedIn", instagram: "Instagram", facebook: "Facebook", wechat: lang === "zh" ? "微信" : "WeChat", }; return (

{/* Phone: hamburger menu trigger. No mark on desktop — keeps layout clean. */}

{t.eyebrow}

{t.name} {t.nameZh && {t.nameZh}}

{t.titlePart1} · {t.titlePart2}

} label={t.contact.website}> {FIXED.website}

} label={t.contact.office}> {FIXED.office}

} label={t.contact.mobile}> {FIXED.mobile}

} label={t.contact.email}> {FIXED.email}

} label={t.contact.languages}> {t.contact.languagesValue}

{t.socialLabel}

{socialOrder.map((net) => ( setWechatOpen(true)} /> ))}

setMenuOpen(false)} t={t} lang={lang} mode={mode} onToggleLang={() => { toggleLang(); }} onToggleMode={toggleMode} /> setWechatOpen(false)} t={t} />

); } /* ---------- Tweaks UI ----------------------------------------------------- */ function TweaksUI({ tweaks, setTweak, mode }) { return ( setTweak("mode", v)} /> setTweak("fontScale", v)} /> ); } /* ---------- Mount --------------------------------------------------------- */ ReactDOM.createRoot(document.getElementById("root")).render();