function MainComponent() { const [language, setLanguage] = useState("en"); const [activeSection, setActiveSection] = useState(0); const [isDimmed, setIsDimmed] = useState(false); const contactInfo = { name: "Justin Chua", phones: { sg: "+65 88175879", hk: "+852 5293 3523" }, email: "jcxa@proton.me" }; const content = { en: { name: "Justin C.", role: "Product, BD & GTM", location: "Hong Kong", bio: "Building vertical AI agents at ease.ai\nBuilding web3 airdrop solutions at clique.tech", bioLinks: { "ease.ai": "https://tryease.ai", "clique.tech": "https://clique.tech" }, links: { twitter: "https://twitter.com/j0xtin", linkedin: "https://linkedin.com/in/justincxa", telegram: "https://t.me/j0xtin", email: "mailto:jcxa@proton.me" }, contact: { save: "Save Contact", book: "Book Meeting" } }, zh: { name: "Justin C.", role: "產品、業務發展及市場策略", location: "香港", bio: "在ease.ai開發垂直AI代理\n在clique.tech開發web3空投解決方案", bioLinks: { "ease.ai": "https://tryease.ai", "clique.tech": "https://clique.tech" }, links: { twitter: "https://twitter.com/j0xtin", linkedin: "https://linkedin.com/in/justincxa", telegram: "https://t.me/j0xtin", email: "mailto:jcxa@proton.me" }, contact: { save: "保存聯絡人", book: "預約會議" } } }; const generateVCard = ()=>{ const vcard = `BEGIN:VCARD VERSION:3.0 FN:${contactInfo.name} TEL;TYPE=CELL,voice;VALUE=text:${contactInfo.phones.sg} TEL;TYPE=CELL,voice;VALUE=text:${contactInfo.phones.hk} EMAIL:${contactInfo.email} END:VCARD`; const blob = new Blob([ vcard ], { type: "text/vcard" }); const url = window.URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.setAttribute("download", "justin-chua.vcf"); document.body.appendChild(link); link.click(); document.body.removeChild(link); window.URL.revokeObjectURL(url); }; const sections = { en: [ { title: "Experience", subsections: [ { subtitle: "Current", items: [ { text: "Product Owner - Vertical AI Business Unit", link: "https://tryease.ai", linkText: "(ease.ai)" }, { text: "Growth - Web3 Infrastructure", link: "https://clique.tech", linkText: "(clique.tech)" } ] }, { subtitle: "Previously", items: [ { text: "Scaled ELXA to $28M", link: "https://elxa.io", linkText: "(elxa.io)" }, { text: "14x Exit to BigCommerce", link: "https://www.producthunt.com/products/copyscouts", linkText: "(copyscouts)" }, { text: "7x Exit", link: "https://podletter.io", linkText: "(podletter.io)" }, { text: "ShipsFocus Ventures", link: "https://shipsfocus.com", linkText: "(shipsfocus.com)" } ] } ] }, { title: "Recognition", subsections: [ { subtitle: "Achievements", items: [ { text: "SusHi Tech Challenge '24", subText: "Semi-Finalist • Tokyo" }, { text: "Asia Clean Energy Summit '23", subText: "Best Scalable Startup • Singapore" }, { text: "APICTA Awards '23", subText: "Finalist • Hong Kong" }, { text: "7th Int'l Innovation & Entrepreneurship Competition", subText: "3rd Prize • Shenzhen" }, { text: "ASEAN Korea AI-Youth", subText: "Representative • Jakarta" } ] }, { subtitle: "Media", items: [ { text: "联合早报 - 青年推动数码化望打破海事业落伍形象", link: "https://www.zaobao.com/news/singapore/story20240102-1459510", date: "2024-01-02" } ] } ] } ], zh: [ { title: "目前", subsections: [ { subtitle: "目前", items: [ { text: "產品負責人 - 垂直AI業務部門", link: "https://tryease.ai", linkText: "(ease.ai)" }, { text: "增長 - Web3基礎設施", link: "https://clique.tech", linkText: "(clique.tech)" } ] } ] } ] }; const nextSection = ()=>{ setActiveSection((prev)=>(prev + 1) % sections[language].length); }; const prevSection = ()=>{ setActiveSection((prev)=>(prev - 1 + sections[language].length) % sections[language].length); }; const formatBioWithLinks = (bio, bioLinks)=>{ return bio.split("\n").map((line, index)=>{ Object.entries(bioLinks).forEach(([site, url])=>{ if (line.includes(site)) { line = line.replace(site, `${site}`); } }); return line; }).join("\n"); }; // Add Spline script and dimming effect useEffect(()=>{ const script = document.createElement("script"); script.type = "module"; script.src = "https://unpkg.com/@splinetool/viewer@1.10.19/build/spline-viewer.js"; document.head.appendChild(script); // Add dimming effect after 3 seconds const timer = setTimeout(()=>{ setIsDimmed(true); }, 3000); return ()=>clearTimeout(timer); }, []); // Add Spline scene as background return /*#__PURE__*/ React.createElement("div", { className: "relative h-screen w-screen bg-[#111111] text-white font-inter", __source: { fileName: "", lineNumber: 236, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 237, columnNumber: 7 }, __self: this }, ` /* Remove all transitions and animations except for spline opacity */ * { transition: none !important; animation: none !important; } /* Only allow transition for spline opacity */ .spline-background { transition: opacity 1s ease-in-out !important; } /* Hide all Spline cursor elements */ spline-viewer::part(cursor), spline-viewer::part(cursor-dot), spline-viewer::part(cursor-ring), spline-viewer::part(cursor-arrow), spline-viewer::part(cursor-text) { display: none !important; opacity: 0 !important; visibility: hidden !important; } `), /*#__PURE__*/ React.createElement("spline-viewer", { className: "spline-background", url: "https://prod.spline.design/35J31XrUBhp2yb3Q/scene.splinecode", style: { position: "absolute", bottom: "-100px", left: 0, width: "100%", height: "100%", opacity: isDimmed ? 0.3 : 1, zIndex: 1 }, __source: { fileName: "", lineNumber: 260, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 w-full h-[100px] bg-[#111111] z-10", __source: { fileName: "", lineNumber: 275, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative z-20 h-full w-full flex items-center justify-center p-4 md:p-8", __source: { fileName: "", lineNumber: 277, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-3xl pt-12 md:pt-0", __source: { fileName: "", lineNumber: 278, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-24", __source: { fileName: "", lineNumber: 279, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 281, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-none", __source: { fileName: "", lineNumber: 282, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl md:text-5xl font-bold mb-2 break-words", __source: { fileName: "", lineNumber: 283, columnNumber: 17 }, __self: this }, content[language].name), /*#__PURE__*/ React.createElement("p", { className: "text-lg md:text-xl text-gray-400", __source: { fileName: "", lineNumber: 286, columnNumber: 17 }, __self: this }, content[language].role), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 mt-1", __source: { fileName: "", lineNumber: 289, columnNumber: 17 }, __self: this }, content[language].location)), /*#__PURE__*/ React.createElement("div", { className: "text-lg text-gray-300 whitespace-pre-line mt-6", dangerouslySetInnerHTML: { __html: formatBioWithLinks(content[language].bio, content[language].bioLinks) }, __source: { fileName: "", lineNumber: 294, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 text-gray-400 mt-6", __source: { fileName: "", lineNumber: 304, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: content[language].links.twitter, target: "_blank", rel: "noopener noreferrer", className: "hover:text-white", title: "Twitter", __source: { fileName: "", lineNumber: 306, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-twitter text-xl", __source: { fileName: "", lineNumber: 313, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: content[language].links.linkedin, target: "_blank", rel: "noopener noreferrer", className: "hover:text-white", title: "LinkedIn", __source: { fileName: "", lineNumber: 315, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-linkedin text-xl", __source: { fileName: "", lineNumber: 322, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: content[language].links.telegram, target: "_blank", rel: "noopener noreferrer", className: "hover:text-white", title: "Telegram", __source: { fileName: "", lineNumber: 324, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-telegram text-xl", __source: { fileName: "", lineNumber: 331, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: content[language].links.email, target: "_blank", rel: "noopener noreferrer", className: "hover:text-white", title: "Email", __source: { fileName: "", lineNumber: 333, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-envelope text-xl", __source: { fileName: "", lineNumber: 340, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: generateVCard, className: "hover:text-white", title: content[language].contact.save, __source: { fileName: "", lineNumber: 342, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-address-card text-xl", __source: { fileName: "", lineNumber: 347, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://tidycal.com/jcxa/30mins", target: "_blank", rel: "noopener noreferrer", className: "hover:text-white", title: content[language].contact.book, __source: { fileName: "", lineNumber: 349, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-calendar text-xl", __source: { fileName: "", lineNumber: 356, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-[500px]", __source: { fileName: "", lineNumber: 362, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 363, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 364, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: prevSection, className: "text-gray-400 hover:text-white", __source: { fileName: "", lineNumber: 365, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-chevron-left", __source: { fileName: "", lineNumber: 369, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: nextSection, className: "text-gray-400 hover:text-white", __source: { fileName: "", lineNumber: 371, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-chevron-right", __source: { fileName: "", lineNumber: 375, columnNumber: 21 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto", __source: { fileName: "", lineNumber: 380, columnNumber: 15 }, __self: this }, sections[language][activeSection].subsections.map((subsection, subIndex)=>/*#__PURE__*/ React.createElement("div", { key: subIndex, className: "mb-6", __source: { fileName: "", lineNumber: 383, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 384, columnNumber: 23 }, __self: this }, subsection.items.map((item, itemIndex)=>/*#__PURE__*/ React.createElement("li", { key: itemIndex, className: "text-lg", __source: { fileName: "", lineNumber: 386, columnNumber: 27 }, __self: this }, item.text, item.linkText && /*#__PURE__*/ React.createElement("a", { href: item.link, target: "_blank", rel: "noopener noreferrer", className: "text-gray-400 hover:text-white", __source: { fileName: "", lineNumber: 389, columnNumber: 31 }, __self: this }, " ", item.linkText), item.subText && /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 400, columnNumber: 31 }, __self: this }, item.subText), item.link && !item.linkText && /*#__PURE__*/ React.createElement("a", { href: item.link, target: "_blank", rel: "noopener noreferrer", className: "block text-sm text-gray-400 hover:text-white", __source: { fileName: "", lineNumber: 405, columnNumber: 31 }, __self: this }, "Read article"))))))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-2 mt-4", __source: { fileName: "", lineNumber: 422, columnNumber: 15 }, __self: this }, sections[language].map((_, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>setActiveSection(index), className: `w-2 h-2 rounded-full ${index === activeSection ? "bg-white" : "bg-gray-600"}`, __source: { fileName: "", lineNumber: 424, columnNumber: 19 }, __self: this })))))))); }