function MainComponent() { const [isVisible, setIsVisible] = useState(false); const [isMobile, setIsMobile] = useState(false); const [projects, setProjects] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(()=>{ setIsVisible(true); // Detect if device is mobile const checkMobile = ()=>{ if (typeof window !== "undefined") { const userAgent = navigator.userAgent || navigator.vendor || window.opera; const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i; setIsMobile(mobileRegex.test(userAgent)); } }; checkMobile(); // Fetch tech projects from the backend const fetchProjects = async ()=>{ try { setLoading(true); const response = await fetch("/api/tech-projects", { method: "POST" }); if (!response.ok) { throw new Error(`Error fetching projects: ${response.status} ${response.statusText}`); } const data = await response.json(); setProjects(data.projects); setLoading(false); } catch (err) { console.error("Failed to fetch tech projects:", err); setError("Failed to load projects. Please try again later."); setLoading(false); } }; fetchProjects(); }, []); // Email configuration const emailAddress = "purusharth.gandhi@gmail.com"; const emailSubject = "Let's connect"; // Device-specific email links const mailtoLink = `mailto:${emailAddress}?subject=${encodeURIComponent(emailSubject)}`; const gmailLink = `https://mail.google.com/mail/?view=cm&fs=1&to=${emailAddress}&su=${encodeURIComponent(emailSubject)}`; // Use Gmail on desktop/tablet and default mail app on mobile const emailLink = isMobile ? mailtoLink : gmailLink; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0A0A0A]", __source: { fileName: "", lineNumber: 63, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "fixed w-full p-6 backdrop-blur-lg bg-black/30 flex justify-between items-center z-50", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-[#00FFB2] text-2xl font-space-mono", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left mr-2", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }), "Back to Home"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-6", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.linkedin.com/in/purusharth-gandhi-bb7867252/", target: "_blank", rel: "noopener noreferrer", className: "text-[#00FFB2] hover:text-white transition-colors", "aria-label": "LinkedIn", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-linkedin text-xl", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://x.com/Purusharth_G", target: "_blank", rel: "noopener noreferrer", className: "text-[#00FFB2] hover:text-white transition-colors", "aria-label": "X (formerly Twitter)", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "𝕏")), /*#__PURE__*/ React.createElement("a", { href: emailLink, target: "_blank", rel: "noopener noreferrer", className: "text-[#00FFB2] hover:text-white transition-colors cursor-pointer", "aria-label": "Email", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-envelope text-xl", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("main", { className: "pt-32 px-6 md:px-20", __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#00FFB2] mb-4 font-space-mono", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, "Tech Ventures"), /*#__PURE__*/ React.createElement("h1", { className: "text-6xl md:text-8xl font-space-mono mb-4 tracking-tighter", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, "Project Portfolio"), /*#__PURE__*/ React.createElement("h2", { className: "text-4xl md:text-6xl text-gray-400 font-space-mono mb-8", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, "AI-Powered Solutions"), /*#__PURE__*/ React.createElement("div", { className: "h-[2px] w-24 bg-[#00FFB2] mb-8", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-20 max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-20", __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#00FFB2] text-xl mb-4", __source: { fileName: "", lineNumber: 117, columnNumber: 15 }, __self: this }, "Loading projects..."), /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 border-4 border-[#00FFB2] border-t-transparent rounded-full mx-auto animate-spin", __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this })) : error ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-20", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-red-500 text-xl mb-4", __source: { fileName: "", lineNumber: 124, columnNumber: 15 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.location.reload(), className: "bg-[#00FFB2] text-black px-4 py-2 font-space-mono hover:bg-white transition-colors", __source: { fileName: "", lineNumber: 125, columnNumber: 15 }, __self: this }, "Try Again")) : projects.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-20", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 text-xl", __source: { fileName: "", lineNumber: 134, columnNumber: 15 }, __self: this }, "No projects found")) : projects.map((project, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-20 border border-[#00FFB2]/20 p-8 rounded-sm hover:border-[#00FFB2] transition-colors project-card", style: { animationDelay: `${0.2 * index}s` }, __source: { fileName: "", lineNumber: 138, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 143, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 144, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#00FFB2] font-space-mono mb-4", __source: { fileName: "", lineNumber: 145, columnNumber: 21 }, __self: this }, "0", index + 1), /*#__PURE__*/ React.createElement("h3", { className: "text-white text-3xl mb-4 font-space-mono", __source: { fileName: "", lineNumber: 148, columnNumber: 21 }, __self: this }, project.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 mb-6", __source: { fileName: "", lineNumber: 151, columnNumber: 21 }, __self: this }, project.description), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mb-6", __source: { fileName: "", lineNumber: 152, columnNumber: 21 }, __self: this }, project.github && /*#__PURE__*/ React.createElement("a", { href: project.github, target: "_blank", rel: "noopener noreferrer", className: "bg-[#00FFB2] text-black px-4 py-2 font-space-mono hover:bg-white transition-colors", __source: { fileName: "", lineNumber: 154, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-github mr-2", __source: { fileName: "", lineNumber: 160, columnNumber: 27 }, __self: this }), "GitHub"), project.demo && /*#__PURE__*/ React.createElement("a", { href: project.demo, target: "_blank", rel: "noopener noreferrer", className: "bg-[#00FFB2] text-black px-4 py-2 font-space-mono hover:bg-white transition-colors", __source: { fileName: "", lineNumber: 164, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-external-link-alt mr-2", __source: { fileName: "", lineNumber: 170, columnNumber: 27 }, __self: this }), "Live Demo"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 176, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white mb-6", __source: { fileName: "", lineNumber: 177, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-space-mono mb-2", __source: { fileName: "", lineNumber: 178, columnNumber: 23 }, __self: this }, "Tech Stack"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 179, columnNumber: 23 }, __self: this }, project.tech_stack && project.tech_stack.map((tech, i)=>/*#__PURE__*/ React.createElement("span", { key: i, className: "bg-[#00FFB2]/10 text-[#00FFB2] px-3 py-1 rounded tech-badge", style: { animationDelay: `${0.1 * i + 0.3}s` }, __source: { fileName: "", lineNumber: 182, columnNumber: 29 }, __self: this }, tech)))), /*#__PURE__*/ React.createElement("div", { className: "text-white mb-6", __source: { fileName: "", lineNumber: 192, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-space-mono mb-2", __source: { fileName: "", lineNumber: 193, columnNumber: 23 }, __self: this }, "Timeline"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 194, columnNumber: 23 }, __self: this }, project.timeline)), /*#__PURE__*/ React.createElement("div", { className: "text-white", __source: { fileName: "", lineNumber: 196, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-space-mono mb-2", __source: { fileName: "", lineNumber: 197, columnNumber: 23 }, __self: this }, "Development Process"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 200, columnNumber: 23 }, __self: this }, project.process && project.process.map((step, i)=>/*#__PURE__*/ React.createElement("span", { key: i, className: "text-gray-400 process-step", style: { animationDelay: `${0.15 * i + 0.4}s` }, __source: { fileName: "", lineNumber: 203, columnNumber: 29 }, __self: this }, i + 1, ". ", step, " ", i < project.process.length - 1 && "→")))))))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 222, columnNumber: 7 }, __self: this }, ` html, body { background: #0A0A0A; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideIn { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } main { animation: fadeIn 1s ease-out; } .border { animation: slideIn 0.8s ease-out; } .project-card { animation: fadeInUp 1s ease-out forwards; opacity: 0; } .tech-badge { animation: scaleIn 0.5s ease-out forwards; opacity: 0; } .process-step { animation: fadeIn 0.5s ease-out forwards; opacity: 0; } `)); }