feat: refactor landing pages with ArticleGrid component and fix navigation

2026-01-25 23:51:43 +08:00
parent af4913a799
commit 6f78114865
48 changed files with 1640 additions and 127 deletions
@@ -0,0 +1,42 @@
+# Appendix
+
+Knowledge base for AI, Frontend, Backend, and General Skills.
+
+## Content Overview
+
+### AI Basics
+- [Prompt Engineering](/ja-jp/appendix/prompt-engineering)
+- [AI Evolution](/ja-jp/appendix/ai-evolution)
+- [LLM Introduction](/ja-jp/appendix/llm-intro)
+- [VLM Introduction](/ja-jp/appendix/vlm-intro)
+- [AI Image Generation](/ja-jp/appendix/image-gen-intro)
+- [AI Audio Models](/ja-jp/appendix/audio-intro)
+- [Context Engineering](/ja-jp/appendix/context-engineering)
+- [AI Agents](/ja-jp/appendix/agent-intro)
+- [AI Capability Dictionary](/ja-jp/appendix/ai-capability-dictionary)
+
+### Frontend Development
+- [Web Basics (HTML/CSS/JS)](/ja-jp/appendix/web-basics)
+- [Frontend Evolution](/ja-jp/appendix/frontend-evolution)
+- [Frontend Performance](/ja-jp/appendix/frontend-performance)
+- [Canvas 2D](/ja-jp/appendix/canvas-intro)
+- [URL to Browser](/ja-jp/appendix/url-to-browser)
+- [Browser DevTools](/ja-jp/appendix/browser-devtools)
+
+### Backend Development
+- [Backend Evolution](/ja-jp/appendix/backend-evolution)
+- [Backend Languages](/ja-jp/appendix/backend-languages)
+- [Database Principles](/ja-jp/appendix/database-intro)
+- [Cache Design](/ja-jp/appendix/cache-design)
+- [Message Queues](/ja-jp/appendix/queue-design)
+- [Authentication](/ja-jp/appendix/auth-design)
+- [Tracking Design](/ja-jp/appendix/tracking-design)
+- [Operations](/ja-jp/appendix/operations)
+
+### General Skills
+- [API Introduction](/ja-jp/appendix/api-intro)
+- [IDE Introduction](/ja-jp/appendix/ide-intro)
+- [Terminal Introduction](/ja-jp/appendix/terminal-intro)
+- [Git Introduction](/ja-jp/appendix/git-intro)
+- [Computer Networks](/ja-jp/appendix/computer-networks)
+- [Deployment](/ja-jp/appendix/deployment)
@@ -42,25 +42,19 @@ const base = site.value.base
 </script>

 <div class="stage-container">
-  <a :href="base + 'ja-jp/stage-0/0.1-learning-map/'" class="stage-card">
-    <div class="stage-icon">🌱</div>
-    <h3>Stage 0: 入門</h3>
-    <p>プロダクト、運用、非技術的背景に適しています。ゲームを通じて AI プログラミングロジックを理解し、自信を構築しましょう。</p>
-    <span>詳しく見る →</span>
-  </a>
-  <a :href="base + 'ja-jp/stage-1/1.1-introduction-to-ai-ide/'" class="stage-card">
+  <a :href="base + 'ja-jp/stage-0/'" class="stage-card">
    <div class="stage-icon">🎨</div>
    <h3>Stage 1: AI プロダクトマネージャー</h3>
-    <p>Vibe Coding ワークフローをマスターしましょう。要件を分解し、高品質な Web アプリケーションプロトタイプを独立して完成させる方法を学びます。</p>
+    <p>プロダクト、運用、非技術的背景に適しています。ゲームを通じて AI プログラミングロジックを理解し、Vibe Coding ワークフローをマスターしましょう。</p>
    <span>詳しく見る →</span>
  </a>
-  <a :href="base + 'ja-jp/stage-2/frontend/2.0-lovart-assets/'" class="stage-card">
+  <a :href="base + 'ja-jp/stage-2/'" class="stage-card">
    <div class="stage-icon">💻</div>
    <h3>Stage 2: フルスタック開発</h3>
    <p>フルスタック開発に深く潜り込みましょう。フロントエンドコンポーネント化、データベース設計、バックエンド API 開発、デプロイメント。</p>
    <span>詳しく見る →</span>
  </a>
-  <a :href="base + 'ja-jp/stage-3/core-skills/3.1-mcp-claudecode-skills/'" class="stage-card">
+  <a :href="base + 'ja-jp/stage-3/'" class="stage-card">
    <div class="stage-icon">🚀</div>
    <h3>Stage 3: 上級開発</h3>
    <p>複雑なクロスプラットフォームアプリケーションを構築しましょう。WeChat ミニプログラム実戦、より高レベルの AI ネイティブアプリケーション開発に挑戦します。</p>
@@ -0,0 +1,19 @@
+# AI Product Manager
+
+Welcome to the AI Product Manager stage. Here, you will start from scratch and master the Vibe Coding workflow to become a super individual capable of independent product design.
+
+## Stage Overview
+
+### Getting Started
+Suitable for product, operations, and non-technical backgrounds. Understand AI programming logic through games and build confidence.
+
+- [1. Learning Map](/ja-jp/stage-0/0.1-learning-map/)
+- [2. If you can speak, you can code](/ja-jp/stage-0/0.2-ai-capabilities-through-games/)
+
+### Product Manager
+Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes.
+
+- [1. Introduction to AI IDE](/ja-jp/stage-1/1.1-introduction-to-ai-ide/)
+- [2. Building a Prototype](/ja-jp/stage-1/1.2-building-prototype/)
+- [3. Integrating AI Capabilities](/ja-jp/stage-1/1.3-integrating-ai-capabilities/)
+- [4. Complete Project Practice](/ja-jp/stage-1/1.4-complete-project-practice/)
@@ -0,0 +1,37 @@
+# Full-Stack Development
+
+Deep dive into full-stack development. Frontend componentization, database design, backend API development, and deployment.
+
+## Stage Overview
+
+### Frontend Development
+Master modern frontend development with component libraries and design tools.
+
+- [Frontend 0: Lovart Assets](/ja-jp/stage-2/frontend/2.0-lovart-assets/)
+- [Frontend 1: Figma & MasterGo](/ja-jp/stage-2/frontend/2.1-figma-mastergo/)
+- [Frontend 2: UI Design](/ja-jp/stage-2/frontend/2.2-ui-design/)
+- [Frontend 3: Multi-Product UI](/ja-jp/stage-2/frontend/2.3-multi-product-ui/)
+- [Frontend 4: Hogwarts Portraits](/ja-jp/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits)
+
+### Backend & Full-Stack
+Learn API design, database management, and deployment strategies.
+
+- [Backend 1: What is API](/ja-jp/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api)
+- [Backend 2: Database & Supabase](/ja-jp/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase)
+- [Backend 3: AI Interface Code](/ja-jp/stage-2/backend/2.3-ai-interface-code/)
+- [Backend 4: Git Workflow](/ja-jp/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github)
+- [Backend 5: Zeabur Deployment](/ja-jp/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications)
+- [Backend 6: Modern CLI Tools](/ja-jp/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development)
+- [Backend 7: Stripe Payment](/ja-jp/stage-2/backend/2.7-stripe-payment/)
+
+### Assignments
+Practical projects to apply your full-stack skills.
+
+- [Assignment 1: Full-Stack App](/ja-jp/stage-2/assignments/2.1-fullstack-app/)
+- [Assignment 2: Modern Frontend + Trae](/ja-jp/stage-2/assignments/2.2-modern-frontend-trae/)
+
+### AI Capabilities
+Integrate AI features like knowledge bases and multimodal APIs.
+
+- [AI 1: Dify & Knowledge Base](/ja-jp/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration)
+- [AI 2: Multimodal API](/ja-jp/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook)
@@ -0,0 +1,30 @@
+# Advanced Development
+
+Build complex cross-platform applications. WeChat Mini-Program practice, challenge higher-level AI-native application development.
+
+## Stage Overview
+
+### Core Skills
+Advanced AI coding skills and long-running task management.
+
+- [Advanced 1: MCP & ClaudeCode Skills](/ja-jp/stage-3/core-skills/3.1-mcp-claudecode-skills/)
+- [Advanced 2: Long-running Tasks](/ja-jp/stage-3/core-skills/3.2-long-running-tasks/)
+
+### Cross-Platform Development
+Build apps for WeChat, Android, and iOS.
+
+- [Advanced 3: WeChat Mini-Program](/ja-jp/stage-3/cross-platform/3.3-wechat-miniprogram/)
+- [Advanced 4: WeChat Mini-Program (Backend)](/ja-jp/stage-3/cross-platform/3.4-wechat-miniprogram-backend/)
+- [Advanced 5: Android App](/ja-jp/stage-3/cross-platform/3.5-android-app/)
+- [Advanced 6: iOS App](/ja-jp/stage-3/cross-platform/3.6-ios-app/)
+
+### Personal Brand
+Build your personal website and blog.
+
+- [Advanced 7: Personal Website & Blog](/ja-jp/stage-3/personal-brand/3.7-personal-website-blog/)
+
+### AI Advanced
+Deep dive into RAG and advanced agent workflows.
+
+- [Advanced AI 1: What is RAG](/ja-jp/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future)
+- [Advanced AI 2: Advanced RAG with LangGraph](/ja-jp/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/)