function DancingCatIllustration({ backgroundColor, padding, margin, width, height, textColor, text }) { const containerStyles = `bg-${backgroundColor} p-${padding} m-${margin} w-[${width}] h-[${height}] flex justify-center items-center`; return /*#__PURE__*/ React.createElement("div", { className: containerStyles, __source: { fileName: "", lineNumber: 4, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `text-${textColor}`, __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, text)); } function DancingCatIllustrationStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DancingCatIllustration, { backgroundColor: "white", padding: "4", margin: "4", width: "250px", height: "250px", textColor: "pink-600", text: "Project 1", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this })); } function CatDanceSlideshow({ slides }) { const slideImages = slides.map((slide, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: slide.image, alt: `踊っている黒猫${index + 1}`, className: "w-full h-auto", loading: "lazy", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this })); return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center w-full h-[420px] overflow-hidden", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex w-[2000px] h-full animate-scroll", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, slideImages), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, ` @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .animate-scroll { animation: scroll 20s linear infinite; } `)); } function CatDanceSlideshowStory() { const slides = [ { image: "image1.jpg" }, { image: "image2.jpg" }, { image: "image3.jpg" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CatDanceSlideshow, { slides: slides, __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this })); } function MainComponent() { const slides = [ { image: "../images/dancing_cat1.jpg" }, { image: "../images/dancing_cat2.jpg" }, { image: "../images/dancing_cat3.jpg" }, { image: "../images/dancing_cat4.jpg" }, { image: "../images/dancing_cat5.jpg" } ]; return /*#__PURE__*/ React.createElement("div", { className: "bg-pink-200 min-h-screen flex flex-col items-center font-sans", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full p-6 bg-pink-400 flex justify-between items-center", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl text-white", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, "My Portfolio"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "text-white cursor-pointer", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("li", { className: "text-white cursor-pointer", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, "Work"), /*#__PURE__*/ React.createElement("li", { className: "text-white cursor-pointer", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, "Contact")))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow w-full flex flex-col items-center", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full mt-4", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(CatDanceSlideshow, { slides: slides, __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("section", { className: "mt-8 text-center", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "../images/cute_black_cat.png", alt: "Cute black cat with a bow tie", className: "w-[150px] h-[150px] mx-auto", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-4xl text-pink-600", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Welcome to My Portfolio"), /*#__PURE__*/ React.createElement("p", { className: "text-pink-700 mt-4", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Here you will find my latest work and ways to contact me.")), /*#__PURE__*/ React.createElement("section", { className: "mt-16 w-full text-center", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-3xl text-pink-600", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("p", { className: "text-pink-700 mt-4 w-[80%] mx-auto", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "I am a web developer who loves creating beautiful and functional websites. My main character is a cute black cat which represents curiosity and elegance.")), /*#__PURE__*/ React.createElement("section", { className: "mt-16 w-full text-center", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-3xl text-pink-600", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Work"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center mt-4", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(DancingCatIllustration, { backgroundColor: "white", padding: "4", margin: "4", width: "250px", height: "250px", textColor: "pink-600", text: "Project 1", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(DancingCatIllustration, { backgroundColor: "white", padding: "4", margin: "4", width: "250px", height: "250px", textColor: "pink-600", text: "Project 2", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("section", { className: "mt-16 w-full text-center", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-3xl text-pink-600", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Contact"), /*#__PURE__*/ React.createElement("form", { className: "mt-4 w-[80%] mx-auto", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", placeholder: "Your Name", className: "w-full p-2 mb-4 border border-pink-400", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", placeholder: "Your Email", className: "w-full p-2 mb-4 border border-pink-400", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "message", placeholder: "Your Message", className: "w-full p-2 mb-4 border border-pink-400", rows: "4", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-pink-600 text-white p-2 w-full", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "Send Message")))), /*#__PURE__*/ React.createElement("footer", { className: "w-full p-6 bg-pink-400 text-white text-center", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, "© 2023 My Portfolio")); }