function FullScreenImageSlideshow({ images }) { const [currentImage, setCurrentImage] = React.useState(0); React.useEffect(()=>{ const interval = setInterval(()=>{ setCurrentImage((currentImage)=>(currentImage + 1) % images.length); }, 3000); return ()=>clearInterval(interval); }, [ images.length ]); return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-full overflow-hidden", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-full", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, images.map((image, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `absolute inset-0 bg-[url('${image.url}')] bg-cover transition-opacity duration-1000 ease-in-out ${index === currentImage ? 'opacity-100' : 'opacity-0'}`, __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 w-full", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-4 p-4", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, images.map((image, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `w-12 h-12 bg-[url('${image.url}')] bg-cover rounded-full ${index === currentImage ? 'ring-2 ring-white' : ''}`, onClick: ()=>setCurrentImage(index), __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }))))); } function FullScreenImageSlideshowStory() { const images = [ { id: 1, url: './carousel-1.jpg' }, { id: 2, url: './carousel-2.jpg' }, { id: 3, url: './carousel-3.jpg' } ]; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(FullScreenImageSlideshow, { images: images, __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this })); } function MainComponent() { const images = [ { id: 1, url: './carousel-1.jpg' }, { id: 2, url: './carousel-2.jpg' }, { id: 3, url: './carousel-3.jpg' } ]; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#262626] min-h-screen flex flex-col", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center py-4 px-8 bg-[#e6e6e6]", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-xl text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 11, columnNumber: 17 }, __self: this }, "My Portfolio"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 12, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex gap-4", __source: { fileName: "", lineNumber: 13, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 14, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#home", className: "text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 14, columnNumber: 29 }, __self: this }, "HOME")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 15, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#portfolio", className: "text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 15, columnNumber: 29 }, __self: this }, "Portfolio")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 16, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#about", className: "text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 16, columnNumber: 29 }, __self: this }, "About"))))), /*#__PURE__*/ React.createElement("main", { className: "flex-auto", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("section", { id: "home", __source: { fileName: "", lineNumber: 21, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement(FullScreenImageSlideshow, { images: images, __source: { fileName: "", lineNumber: 22, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("section", { id: "about", className: "px-8 py-4", __source: { fileName: "", lineNumber: 24, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl text-[#e6e6e6] font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 25, columnNumber: 21 }, __self: this }, "About me"), /*#__PURE__*/ React.createElement("p", { className: "text-[#e6e6e6] font-roboto", __source: { fileName: "", lineNumber: 26, columnNumber: 21 }, __self: this }, "自己紹介のテキストがここに入ります。私の経験や興味について詳しく知っていただけます。")), /*#__PURE__*/ React.createElement("section", { id: "skills", className: "px-8 py-4", __source: { fileName: "", lineNumber: 28, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl text-[#e6e6e6] font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 21 }, __self: this }, "Skills"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4", __source: { fileName: "", lineNumber: 30, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./blender-logo.png", alt: "Blender logo", className: "h-[60px]", __source: { fileName: "", lineNumber: 31, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "./photoshop-logo.png", alt: "Photoshop logo", className: "h-[60px]", __source: { fileName: "", lineNumber: 32, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "./illustrator-logo.png", alt: "Illustrator logo", className: "h-[60px]", __source: { fileName: "", lineNumber: 33, columnNumber: 25 }, __self: this }))), /*#__PURE__*/ React.createElement("section", { id: "my-projects", className: "px-8 py-4", __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl text-[#e6e6e6] font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 37, columnNumber: 21 }, __self: this }, "My Projects"))), /*#__PURE__*/ React.createElement("footer", { className: "py-4 px-8 bg-[#e6e6e6]", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, "© 2023 My Name"))); }