# 🧭 1. Brand Positioning

### 🔹 Core Brand Statement

> “A creative technology studio offering custom development services, specializing in full‑stack solutions for websites, software, games, and interactive experiences.”

**A creative technology studio offering *custom development services*, specializing in full‑stack solutions for websites, software, games, and interactive experiences.**

### 🔹 Brand Keywords

Tech‑forward, Professional, Creative, Reliable, Cross‑disciplinary.

### 🔹 Suggested Slogans

* “Crafted Code, Custom Experience.”
* “Technology Meets Imagination.”
* (Chinese original translated) “Tailored digital products for brands that want unique experiences.”

---

# 🧩 2. Site Map (Information Architecture)

Because your business covers a wide range of services, we should present them in a structured way while keeping clear pathways to featured projects.

**Recommended structure:**

```
Home
├── About (brand story + tech stack + team / contact)
├── Services
│   ├── Website Development (highly customized + CMS)
│   ├── Software & Tools (automation / utilities / desktop apps)
│   ├── Game Development (indie titles + future roadmap)
│   ├── Event Displays (custom banquet/event screen systems)
│   └── Lab & Testing (experiments / future features)
├── Projects
│   ├── Corporate Sites
│   ├── Games
│   ├── Tools & Systems
│   └── Special Projects (e.g., event systems)
├── Insights / Blog
│   ├── Technical Articles
│   ├── Dev Logs
│   ├── Game Dev Journal
│   └── Test Reports (future)
└── Contact
```

✅ Use a **tagging system** (e.g., website / game / tool / event) to let visitors quickly filter projects.

---

# 🧱 3. Visual & Interaction Style Recommendations

### 🔹 Overall Aesthetic

| Element    | Recommendation                                                                              |
| ---------- | ------------------------------------------------------------------------------------------- |
| Tone       | Monochrome base (black & white) + accent color (neon blue / electric purple / amber orange) |
| Typography | Inter / JetBrains Mono / Noto Sans                                                          |
| Motion     | Scroll‑reveal, micro‑interactions, concise GSAP transitions                                 |
| Layout     | Generous white space + modular components (each text block paired with a visual panel)      |

### 🔹 Homepage Layout Suggestions

1. **Hero Section** — One‑line mission statement + dynamic logo / particle animation demo.
2. **Our Capabilities** — Display 3–5 core services with subtle motion.
3. **Featured Works** — Select 3–6 highlighted projects.
4. **Tech Stack / Tools** — Visual badges for frameworks, languages, engines.
5. **Why Choose Us** — Differentiators (customization, speed, delivery standards).
6. **Call to Action** — Contact / Collaboration / Proposal button.

---

# ⚙️ 4. Technology Stack Recommendations (Nuxt 3 rebuild)

| Module       | Recommended Implementation                          |
| ------------ | --------------------------------------------------- |
| UI Framework | Tailwind CSS + shadcn/ui                            |
| Animation    | GSAP / Framer Motion (Vue compatible)               |
| Content Mgmt | `@nuxt/content` (manage projects/blog via Markdown) |
| Image Optim  | Nuxt Image Module                                   |
| Deployment   | Vercel / Cloudflare Pages                           |
| SEO          | Nuxt SEO module + automatic sitemap generation      |
| Analytics    | Umami (lightweight, self‑hosted)                    |

> 💡 To showcase technical capability, consider exposing an API surface, visualizing project metadata, or integrating a CMS backend (Directus or a custom Nuxt Admin module).

---

# 🎨 5. Content Strategy

| Section         | Content Direction                                                          |
| --------------- | -------------------------------------------------------------------------- |
| Home            | Who we are + representative works + what we can deliver                    |
| Services        | Detailed explanation for each service + links to real examples             |
| Projects        | Story‑driven case studies (Client Problem → Solution → Outcome)            |
| Blog / Insights | More than technical posts: behind‑the‑scenes, lessons learned, dev stories |
| About           | Emphasize team philosophy and future direction (mention game revival plan) |

---

# 📈 6. Phased Rebuild Roadmap (Execution Plan)

| Phase             | Duration  | Tasks                                          |
| ----------------- | --------- | ---------------------------------------------- |
| 1️⃣ Brand Refresh   | 3–5 days  | Copywriting, visual direction, finalize slogan |
| 2️⃣ Architecture    | 5–7 days  | Sitemap, wireframes, content structure         |
| 3️⃣ Development     | 2–3 weeks | Nuxt 3 + Tailwind skeleton, build pages        |
| 4️⃣ Content Import  | 1 week    | Integrate Markdown / CMS, upload projects      |
| 5️⃣ Motion & Polish | 3–5 days  | Animations, SEO tuning, performance testing    |
| 6️⃣ Deploy & Launch | 1 day     | One‑click deploy to Vercel / Cloudflare Pages  |

---

# 🔮 7. Future Expansion Opportunities

* Add a **Lab** section to showcase experimental tools and prototypes.
* Build a **custom CMS** (a lightweight Nuxt Admin is feasible).
* Add **multilingual support (i18n)** to reach international clients.
* For game projects, enable **WebGL / Godot Web Export** for in‑browser demos.
* Modularize project data as JSON / Markdown for easier maintenance.