function MainComponent() { const [hoveredProject, setHoveredProject] = React.useState(null); const [isDark, setIsDark] = React.useState(false); const [mousePosition, setMousePosition] = React.useState({ x: 0, y: 0 }); const [isHoveringLink, setIsHoveringLink] = React.useState(false); React.useEffect(()=>{ const handleMouseMove = (e)=>{ setMousePosition({ x: e.clientX, y: e.clientY }); }; window.addEventListener("mousemove", handleMouseMove); return ()=>window.removeEventListener("mousemove", handleMouseMove); }, []); const projects = [ { title: "Timer/Stopwatch", description: "Game-like timer with unlockable features", status: "development", year: "20??" }, { title: "Treasure Hunt Game", description: "Grid-based adventure with random events and character classes", status: "development", demoUrl: "https://treasure-hunt.dennisswiggett.com/", year: "20??" }, { title: "Museum Builder", description: "Virtual museum creation game", status: "deployed", year: "2021", image: "https://ucarecdn.com/f7eb5d76-8e24-4e14-b407-06fe29f8af7c/-/format/auto/", demoUrl: "https://byom.bostonchildrensmuseum.org/index.php" }, { title: "Madlibs Game", description: "Interactive word game for Boston Children's Museum", status: "deployed", year: "2021", image: "https://ucarecdn.com/4d15dadd-307a-4f4c-befc-d6a6920fc33a/-/format/auto/", demoUrl: "https://madlibs.bostonchildrensmuseum.org/" } ]; const subtitleText = "Too many ideas, not enough time."; return /*#__PURE__*/ React.createElement("div", { className: `min-h-screen transition-colors duration-300 relative ${isDark ? "bg-gray-900" : "bg-white"}`, __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed w-4 h-4 pointer-events-none z-50 -translate-x-1/2 -translate-y-1/2 mix-blend-difference", style: { left: `${mousePosition.x}px`, top: `${mousePosition.y}px`, transition: "transform 0.1s ease-out, width 0.2s ease, height 0.2s ease", transform: `translate(-50%, -50%) scale(${isHoveringLink ? 1.2 : 1})` }, __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-full h-full rounded-full bg-white opacity-60 transition-transform duration-200`, __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsDark(!isDark), className: `fixed top-8 right-8 px-4 py-3 rounded-full z-40 transition-all duration-300 ${isDark ? "bg-gray-800 text-white shadow-[0_0_15px_rgba(255,255,255,0.1)] hover:shadow-[0_0_20px_rgba(255,255,255,0.2)]" : "bg-white text-black shadow-[0_2px_15px_rgba(0,0,0,0.1)] hover:shadow-[0_5px_25px_rgba(0,0,0,0.1)]"}`, onMouseEnter: ()=>setIsHoveringLink(true), onMouseLeave: ()=>setIsHoveringLink(false), __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm font-space-mono", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, isDark ? "☀️ Light" : "🌙 Dark")), /*#__PURE__*/ React.createElement("div", { className: "max-w-5xl mx-auto px-8 py-20", __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "mb-24 opacity-0 animate-fadeIn", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: `text-6xl md:text-7xl font-space-mono font-light mb-6 tracking-tight transition-colors duration-300 ${isDark ? "text-white" : "text-black"}`, __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, "Dennis Swiggett"), /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: `text-xl mb-6 font-space-mono transition-colors duration-300 ${isDark ? "text-gray-300" : "text-gray-600"}`, onMouseEnter: ()=>setIsHoveringLink(true), onMouseLeave: ()=>setIsHoveringLink(false), __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, subtitleText))), /*#__PURE__*/ React.createElement("section", { className: "mb-24 opacity-0 animate-fadeIn animation-delay-200 relative z-10", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-12", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-12 h-[1px] mr-4 transition-colors duration-300 ${isDark ? "bg-gray-700" : "bg-gray-200"}`, __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: `text-2xl font-space-mono transition-colors duration-300 ${isDark ? "text-white" : "text-gray-900"}`, __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, "Projects")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 133, columnNumber: 11 }, __self: this }, projects.map((project, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `group cursor-pointer opacity-0 animate-fadeIn relative ${index % 2 === 0 ? "md:border-r" : "md:border-r"} ${index < projects.length - 2 ? "md:border-b" : ""} ${isDark ? "md:border-gray-800" : "md:border-gray-100"} md:pr-8 md:pb-8`, style: { animationDelay: `${(index + 3) * 200}ms`, transform: hoveredProject === index ? "translateY(-8px)" : "translateY(0)", transition: "transform 0.3s ease-out" }, onMouseEnter: ()=>{ setHoveredProject(index); setIsHoveringLink(true); }, onMouseLeave: ()=>{ setHoveredProject(null); setIsHoveringLink(false); }, __source: { fileName: "", lineNumber: 135, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `relative mb-6 overflow-hidden aspect-[4/3] rounded-sm transition-all duration-300 ${isDark ? "bg-gray-800" : "bg-gray-100"}`, style: { transform: hoveredProject === index ? "scale(1.02)" : "scale(1)", boxShadow: hoveredProject === index ? isDark ? "0 10px 30px rgba(0, 0, 0, 0.3)" : "0 10px 30px rgba(0, 0, 0, 0.1)" : "none" }, __source: { fileName: "", lineNumber: 160, columnNumber: 17 }, __self: this }, project.image ? /*#__PURE__*/ React.createElement("img", { src: project.image, alt: project.title, className: "w-full h-full object-contain p-4", __source: { fileName: "", lineNumber: 176, columnNumber: 21 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: `absolute inset-0 flex items-center justify-center font-mono text-sm transition-colors duration-300 ${isDark ? "text-gray-500" : "text-gray-400"}`, __source: { fileName: "", lineNumber: 182, columnNumber: 21 }, __self: this }, "[ ", project.demoUrl ? "play demo" : "coming soon", " ]"), /*#__PURE__*/ React.createElement("div", { className: `absolute inset-0 bg-current transition-opacity duration-300 ${hoveredProject === index ? "opacity-5" : "opacity-0"}`, __source: { fileName: "", lineNumber: 190, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 198, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 199, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: `text-xl font-space-mono transition-colors duration-300 ${isDark ? "text-white" : "text-black"}`, __source: { fileName: "", lineNumber: 200, columnNumber: 21 }, __self: this }, project.title), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 207, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `text-xs font-mono px-2 py-1 border rounded-sm transition-all duration-300 ${project.status === "deployed" ? isDark ? "border-green-800 text-green-400 bg-green-900/20" : "border-green-200 text-green-800 bg-green-50" : isDark ? "border-orange-800 text-orange-400 bg-orange-900/20" : "border-orange-200 text-orange-800 bg-orange-50"}`, style: { transform: hoveredProject === index ? "scale(1.05)" : "scale(1)" }, __source: { fileName: "", lineNumber: 208, columnNumber: 23 }, __self: this }, project.status), project.demoUrl && /*#__PURE__*/ React.createElement("span", { className: `text-xs font-mono px-2 py-1 border rounded-sm transition-all duration-300 ${isDark ? "border-blue-800 text-blue-400 bg-blue-900/20" : "border-blue-200 text-blue-800 bg-blue-50"}`, style: { transform: hoveredProject === index ? "scale(1.05)" : "scale(1)" }, __source: { fileName: "", lineNumber: 228, columnNumber: 25 }, __self: this }, "demo"), /*#__PURE__*/ React.createElement("span", { className: `text-sm font-mono transition-colors duration-300 ${isDark ? "text-gray-500" : "text-gray-400"}`, __source: { fileName: "", lineNumber: 244, columnNumber: 23 }, __self: this }, project.year))), /*#__PURE__*/ React.createElement("p", { className: `font-inter leading-relaxed transition-colors duration-300 ${isDark ? "text-gray-300" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 254, columnNumber: 19 }, __self: this }, project.description)), project.demoUrl && /*#__PURE__*/ React.createElement("a", { href: project.demoUrl, target: "_blank", rel: "noopener noreferrer", className: "absolute inset-0 z-10", "aria-label": `View ${project.title} demo`, __source: { fileName: "", lineNumber: 263, columnNumber: 19 }, __self: this }))))), /*#__PURE__*/ React.createElement("section", { className: "opacity-0 animate-fadeIn animation-delay-800", __source: { fileName: "", lineNumber: 277, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-8", __source: { fileName: "", lineNumber: 278, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-12 h-[1px] mr-4 transition-colors duration-300 ${isDark ? "bg-gray-700" : "bg-gray-200"}`, __source: { fileName: "", lineNumber: 279, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: `text-2xl font-space-mono transition-colors duration-300 ${isDark ? "text-white" : "text-gray-900"}`, __source: { fileName: "", lineNumber: 284, columnNumber: 13 }, __self: this }, "Get In Touch")), /*#__PURE__*/ React.createElement("div", { className: "pl-16", __source: { fileName: "", lineNumber: 293, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: `font-inter mb-4 leading-relaxed transition-colors duration-300 ${isDark ? "text-gray-300" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 294, columnNumber: 13 }, __self: this }, "Any questions? Reach out below."), /*#__PURE__*/ React.createElement("a", { href: "mailto:dennis@example.com", className: `inline-block font-inter border-b-2 transition-all duration-300 ${isDark ? "text-white border-gray-700 hover:border-white" : "text-gray-900 border-gray-200 hover:border-gray-900"}`, style: { transform: isHoveringLink ? "translateY(-2px)" : "translateY(0)" }, onMouseEnter: ()=>setIsHoveringLink(true), onMouseLeave: ()=>setIsHoveringLink(false), __source: { fileName: "", lineNumber: 301, columnNumber: 13 }, __self: this }, "dennisswiggett11@gmail.com")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 322, columnNumber: 7 }, __self: this }, ` @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap'); .font-space-mono { font-family: 'Space Mono', monospace; letter-spacing: -0.5px; } .animate-fadeIn { animation: fadeIn 0.8s ease-out forwards; } .animation-delay-200 { animation-delay: 200ms; } .animation-delay-800 { animation-delay: 800ms; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } * { cursor: none !important; } `)); }