function MainComponent() { const [selectedCategory, setSelectedCategory] = React.useState(null); const categories = [ { id: 'web', name: 'Web' }, { id: 'marketing', name: 'Marketing' }, { id: 'sns', name: 'SNS' }, { id: 'design', name: 'Design' }, { id: 'other', name: 'Other' } ]; const handleThumbnailClick = (id)=>{ setSelectedCategory(id === selectedCategory ? null : id); }; const renderSection = (id, name)=>{ const isSelected = selectedCategory === id; const description = `This is the description for ${name}`; return /*#__PURE__*/ React.createElement("div", { key: id, className: "p-4 w-full", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "cursor-pointer w-full h-[200px] bg-gray-300 flex items-center justify-center", onClick: ()=>handleThumbnailClick(id), __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg font-crimson-text", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, name)), isSelected && /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-sm font-roboto", __source: { fileName: "", lineNumber: 28, columnNumber: 24 }, __self: this }, description)); }; const profileSection = /*#__PURE__*/ React.createElement("div", { id: "profile", className: "p-4 w-full h-[400px] bg-cover bg-center bg-profile-image flex items-center justify-center", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-crimson-text text-white", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, "Welcome to my Portfolio")); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "sticky top-0 bg-white shadow-md w-full z-50", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-4", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between h-16", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#profile", className: "text-gray-800 text-xl font-crimson-text", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, "OATH"), categories.map((category)=>/*#__PURE__*/ React.createElement("a", { key: category.id, href: `#${category.id}`, className: "text-gray-800 text-lg font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, category.name)))))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, profileSection, categories.map((category)=>/*#__PURE__*/ React.createElement("div", { id: category.id, key: category.id, className: "flex flex-col md:flex-row p-4 w-full max-w-6xl", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, renderSection(category.id, category.name)))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, ` .bg-profile-image { background-image: url('/path_to_profile_image.jpg'); } .section { transition: all 0.3s ease-in-out; } .animation { animation: fadeIn 0.5s; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } `)); }