知識をインタラクティブなプレゼンテーション・ページに変換

手がかり

# ドキュメント分析とビジュアルWebポートフォリオ生成




## コンテンツの要件
- オリジナル文書の核となる情報を維持しつつ、より読みやすく、視覚的な方法で提示する。
- ページ下部に著者情報エリアを追加する：
- 著者名**: [著者名].
- ソーシャルメディアリンク**：少なくともTwitter/Xを含める。
- 著作権情報と著作年

##デザインスタイル
- 全体的なスタイルは、**Linear App**のミニマリスト・モダンデザインを参考にする。
- 重要なコンテンツを強調するために、明確な視覚的階層を使用する。
- 配色は**プロフェッショナルで調和がとれており、長時間の閲覧に適していること**。

##技術仕様
- HTML5、TailwindCSS 3.0+（CDN経由で導入）**および必要なJavaScriptを使用すること。
- デフォルトでシステム設定に従った**完全なダーク/ライトモード切り替え機能**を実装すること
- 適切なコメントを含む明確なコード構造。

##レスポンシブデザイン
- ページは**すべてのデバイス（携帯電話、タブレット、デスクトップ）で完璧に表示されなければならない
- 異なる画面サイズに対して**レイアウトとフォントサイズ**を最適化すること
- モバイルでの**良好なタッチ体験を確保すること

##メディアリソース
- ドキュメント内の**Markdown画像リンクを使用する**（利用可能な場合）
- ドキュメントの**動画埋め込みコード**を使用する（利用可能な場合）

##アイコンとビジュアル要素
- Font AwesomeやMaterial Icons（CDN経由で取り込む）など、**専用のアイコンライブラリを使用する**。
- コンテンツのトピックに適した**イラストやチャート**を選択する ショーケースのデータ
- 主要なアイコンとして**絵文字**の使用は避ける

##インタラクティブな体験
- ユーザーエクスペリエンスを向上させるために、適切な**マイクロインタラクション効果**を追加する：
- わずかなズームと色の変化を伴う**ボタンホバー**。
- 洗練されたシャドウとボーダー効果を持つ**カードエレメントホバー**。
- ページスクロール時のスムーズなトランジション** **コンテンツブロックのローディング
- コンテンツブロック読み込み時のエレガントなフェードインアニメーション** **コンテンツブロック読み込み時のエレガントなフェードインアニメーション** **スクロール時のスムーズなトランジション効果

##パフォーマンスの最適化
- ページが素早く読み込まれるようにし、不必要に大きなリソースを避ける** **遅延ローディングを有効にする
- 長いページコンテンツには遅延ロード**テクニックを実装する

##出力要件
- 必要なCSSとJavaScriptをすべて含む、1つの完全に動作するHTMLファイル**を提供してください。
- コードが W3C に準拠し、エラー警告がないこと**。
- ページがブラウザ間で一貫した外観と機能を維持すること**。

###生成要件：
アップロードされたファイルのコンテンツの種類（文書、データ、画像など）に応じて、そのコンテンツを表示するのに最適なページのビジュアライゼーション**を作成してください。

使用方法

利用する クロード ソネット

コンテキストウィンドウを超えないように注意してください。