element only to encapsulate the entire page content. - In other words, use a

element just once throughout the page. - Use "<> ... " to encapsulate part of the page content. ## Design Template -

content

- -

content

content -

content

- content `; return null; } function SnippetForThePageDesignStory() { return null; } function SnippetForTheFooter() { const content = `This website is generated with Create from a set of prompts written by me, Shun Tsukamoto. Generating and maintaining all of my projects and my other materials, which include the website, are completely my own, not related to my affiliation. If interested in my activities, please feel free to contact me!`; return null; } function SnippetForTheFooterStory() { return null; } function MainComponent() { const [activeSection, setActiveSection] = React.useState(null); const toggleSection = (section)=>{ setActiveSection(activeSection === section ? null : section); }; return /*#__PURE__*/ React.createElement("div", { className: "font-sans bg-gray-100 min-h-screen text-[#333333]", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#1a1a1a] text-[#e0e0e0] p-4 border-b-2 border-[#333333]", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-4", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, "Shun Tsukamoto")), /*#__PURE__*/ React.createElement("main", { className: "bg-[#f0f0f0] p-6", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "bg-[#e0e0e0] p-4 my-4 border-l-4 border-[#666666]", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-semibold mb-3 cursor-pointer", onClick: ()=>toggleSection('about'), __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, "About Me"), activeSection === 'about' && /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside my-2", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "ml-4", __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.facebook.com/shun0t", className: "text-[#0066cc] hover:text-[#004499] underline", __source: { fileName: "", lineNumber: 19, columnNumber: 36 }, __self: this }, "My profile on Facebook for my AI-related activities")), /*#__PURE__*/ React.createElement("li", { className: "ml-4", __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.linkedin.com/in/shuntsukamoto/", className: "text-[#0066cc] hover:text-[#004499] underline", __source: { fileName: "", lineNumber: 20, columnNumber: 36 }, __self: this }, "My profile on LinkedIn")), /*#__PURE__*/ React.createElement("li", { className: "ml-4", __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://discord.com/channels/1184563059050688635/1230787131715092560/1241744572652982302", className: "text-[#0066cc] hover:text-[#004499] underline", __source: { fileName: "", lineNumber: 21, columnNumber: 36 }, __self: this }, "My self introduction in Create's official community on Discord")))), /*#__PURE__*/ React.createElement("section", { className: "bg-[#e0e0e0] p-4 my-4 border-l-4 border-[#666666]", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-semibold mb-3 cursor-pointer", onClick: ()=>toggleSection('projects'), __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Main Projects　メイン・プロジェクト"), activeSection === 'projects' && /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside my-2", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "ml-4", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://text-handling-tools.created.app/", className: "text-[#0066cc] hover:text-[#004499] underline", __source: { fileName: "", lineNumber: 31, columnNumber: 17 }, __self: this }, "Shun's Apps for Editing, Processing, or Writing Text"), /*#__PURE__*/ React.createElement("p", { className: "my-2 leading-relaxed", __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, "This project lists web apps that I have developed and I consider to more or less handle text, which includes helping web development on Create.", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 32, columnNumber: 196 }, __self: this }), "広い意味でテキスト処理（Createでのウェブ開発のサポートを含む）を行っていると解釈できる複数の自作ウェブアプリをプロジェクトとしてまとめたものです。")), /*#__PURE__*/ React.createElement("li", { className: "ml-4", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://demonstrative-pages.created.app/", className: "text-[#0066cc] hover:text-[#004499] underline", __source: { fileName: "", lineNumber: 35, columnNumber: 17 }, __self: this }, "Shun's Demonstrative Pages"), /*#__PURE__*/ React.createElement("p", { className: "my-2 leading-relaxed", __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }, "This project lists web pages and apps that I have developed and I find non-technical but demonstrative.", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 36, columnNumber: 156 }, __self: this }), "鑑賞目的メインと判断できる複数の自作ウェブページをプロジェクトとしてまとめたものです。")), /*#__PURE__*/ React.createElement("li", { className: "ml-4", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://johndoe.created.app/", className: "text-[#0066cc] hover:text-[#004499] underline", __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, "Imaginary AI Specialist John Doe's Profile Website（架空のAI専門家であるジョン・ドウ氏のプロフィール・サイト）"), /*#__PURE__*/ React.createElement("p", { className: "my-2 leading-relaxed", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, "This project demonstrates how to generate a multi-page themed website utilizing the Page and Component features on Create.", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 40, columnNumber: 175 }, __self: this }), "ページとコンポーネントの技術仕様を踏まえて、テーマを同じくする複数のページで構成されるウェブサイトをCreateで生成する実験を行ったプロジェクトです。")))), /*#__PURE__*/ React.createElement("section", { className: "bg-[#e0e0e0] p-4 my-4 border-l-4 border-[#666666]", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-semibold mb-3 cursor-pointer", onClick: ()=>toggleSection('technical'), __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Selected Technical Content　自作実装例のうちテクニカルなもの"), activeSection === 'technical' && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-medium mb-2", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, "Reducing Page Generation Randomness with Components", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 50, columnNumber: 108 }, __self: this }), "コンポーネントでページ生成のランダム性を減らす方法"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside my-2", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "ml-4", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.create.xyz/share/5028a4f6-63ef-44aa-b02d-69ea74e19f9c", className: "text-[#0066cc] hover:text-[#004499] underline", __source: { fileName: "", lineNumber: 53, columnNumber: 19 }, __self: this }, "Component-Derived Page"), " ―― ", /*#__PURE__*/ React.createElement("a", { href: "https://discord.com/channels/1184563059050688635/1267554634675916871", className: "text-[#0066cc] hover:text-[#004499] underline", __source: { fileName: "", lineNumber: 53, columnNumber: 183 }, __self: this }, "Its Description"), /*#__PURE__*/ React.createElement("p", { className: "my-2 leading-relaxed", __source: { fileName: "", lineNumber: 54, columnNumber: 19 }, __self: this }, "This material demonstrates page generation that derives its content and design from components like cooking, with a detailed explanation posted by myself on Discord.", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 54, columnNumber: 220 }, __self: this }), "コンポーネントに基づいてページの内容とデザインを生成する実装例（最初のリンク）とDiscordに自ら投稿した解説（次のリンク）です。")), /*#__PURE__*/ React.createElement("li", { className: "ml-4", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.create.xyz/share/93e0aed3-e64a-4f28-9010-4c5339202906", className: "text-[#0066cc] hover:text-[#004499] underline", __source: { fileName: "", lineNumber: 57, columnNumber: 19 }, __self: this }, "Component as a Page Template"), " ―― ", /*#__PURE__*/ React.createElement("a", { href: "https://www.create.xyz/share/a57c32bd-2e6d-4f8b-a1d2-40c233c4c964", className: "text-[#0066cc] hover:text-[#004499] underline", __source: { fileName: "", lineNumber: 57, columnNumber: 189 }, __self: this }, "Its Application"), /*#__PURE__*/ React.createElement("p", { className: "my-2 leading-relaxed", __source: { fileName: "", lineNumber: 58, columnNumber: 19 }, __self: this }, "This pair of materials shows template generation with the Component feature and page generation from a template component without calling the component's self.", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 58, columnNumber: 214 }, __self: this }), "テンプレートとしてコンポーネントを生成し、そのコンポーネントを直接呼び出すことなくテンプレートとして用いてページを生成する実装例です（コンポーネントは最初のリンク、ページは次のリンクです）。")), /*#__PURE__*/ React.createElement("li", { className: "ml-4", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.create.xyz/share/64b5823e-5d65-48b0-a1fe-62bde811c894", className: "text-[#0066cc] hover:text-[#004499] underline", __source: { fileName: "", lineNumber: 61, columnNumber: 19 }, __self: this }, "Arbitrarily Styleable Component (in Japanese)"), " ―― ", /*#__PURE__*/ React.createElement("a", { href: "https://www.create.xyz/share/c868572c-0bd1-436f-993c-c25ef1d805fa", className: "text-[#0066cc] hover:text-[#004499] underline", __source: { fileName: "", lineNumber: 61, columnNumber: 206 }, __self: this }, "Its Application (in Japanese)"), /*#__PURE__*/ React.createElement("p", { className: "my-2 leading-relaxed", __source: { fileName: "", lineNumber: 62, columnNumber: 19 }, __self: this }, 'This component-page pair establishes a methodology to generate in a component content that can be arbitrarily styled, and applies the "Style Guide" feature to this methodology', /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 62, columnNumber: 230 }, __self: this }), "任意にスタイルを指定できるコンテンツで構成されるコンポーネントを生成するテクニックを確立し、そのテクニックに「スタイルガイド」機能を適用した実装例です。"))), /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-medium mb-2", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, "External Page Specification Embedding", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 66, columnNumber: 94 }, __self: this }), "ページ仕様の外部埋め込み"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside my-2", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "ml-4", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.create.xyz/share/517985db-4c95-42c7-9fd1-3d59dc9c63e2", className: "text-[#0066cc] hover:text-[#004499] underline", __source: { fileName: "", lineNumber: 69, columnNumber: 19 }, __self: this }, "Component-Controlled Page"), /*#__PURE__*/ React.createElement("p", { className: "my-2 leading-relaxed", __source: { fileName: "", lineNumber: 70, columnNumber: 19 }, __self: this }, "This page demonstrates that a component can control what page to generate through the prompt snippet embedded in the component.", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 70, columnNumber: 182 }, __self: this }), "コンポーネント内にプロンプト相当の文章を埋め込むことにより、ページの生成方針をコンポーネントで制御する実装例です。")), /*#__PURE__*/ React.createElement("li", { className: "ml-4", __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.create.xyz/share/fcc8fba1-238a-4a53-89b6-f6f216b29caf", className: "text-[#0066cc] hover:text-[#004499] underline", __source: { fileName: "", lineNumber: 73, columnNumber: 19 }, __self: this }, "Variable-Embedded Function"), " ―― ", /*#__PURE__*/ React.createElement("a", { href: "https://www.create.xyz/share/f36aff2b-9201-4fb1-b7f0-96b48c404cab", className: "text-[#0066cc] hover:text-[#004499] underline", __source: { fileName: "", lineNumber: 73, columnNumber: 187 }, __self: this }, "Its Front-End Page"), /*#__PURE__*/ React.createElement("p", { className: "my-2 leading-relaxed", __source: { fileName: "", lineNumber: 74, columnNumber: 19 }, __self: this }, "This function-page pair consists of a function built only for having a prompt-snippet variable embedded and of a front-end page generated through the variable.", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 74, columnNumber: 214 }, __self: this }), "プロンプト相当の文章を変数として埋め込むことのみを目的とした関数（最初のリンク）とその変数に基づき生成されたフロント・ページの実装例です。")), /*#__PURE__*/ React.createElement("li", { className: "ml-4", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.create.xyz/share/20962887-b292-443d-840a-1e6da159eaa0", className: "text-[#0066cc] hover:text-[#004499] underline", __source: { fileName: "", lineNumber: 77, columnNumber: 19 }, __self: this }, "Demonstrative Function-Controlled Page"), /*#__PURE__*/ React.createElement("p", { className: "my-2 leading-relaxed", __source: { fileName: "", lineNumber: 78, columnNumber: 19 }, __self: this }, "This page uses my first-version approach to generate a page whose prompt is mostly from a function.", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 78, columnNumber: 154 }, __self: this }), "上記の実装例で用いたテクニックを確立する前に作成した、プロンプトの大部分を関数に埋め込んでページを生成するテクニックの実装例です。")))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#1a1a1a] text-[#e0e0e0] p-4 border-t-2 border-[#333333]", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "my-2 leading-relaxed", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, "This website is generated with Create from a set of prompts written by me, Shun Tsukamoto. Generating and maintaining all of my projects and my other materials, which include the website, are completely my own, not related to my affiliation. If interested in my activities, please feel free to contact me!"))); }

About Me

Main Projects メイン・プロジェクト

Selected Technical Content 自作実装例のうちテクニカルなもの

Main Projects　メイン・プロジェクト

Selected Technical Content　自作実装例のうちテクニカルなもの