feat(ui): rebuild homepage with new sections and i18n
This commit introduces a complete overhaul of the homepage, rebuilding it from the ground up with Nuxt UI and full internationalization support. The new design better showcases the studio's capabilities and projects. - Re-architected the index page with multiple new sections: Capabilities, Featured Projects, Tech Stack, and Why Choose Us. - Implemented full i18n for English (en-US) and Chinese (zh-CN) across all new content. - Centralized the page structure into a `default.vue` layout with a global header (including color mode and locale selectors) and footer. - Replaced placeholder logos with a dynamic `UMarquee` of technology icons using Iconify.
This commit is contained in:
xiaomai
122
docs/design-doc-v1-en.md
Normal file
122
docs/design-doc-v1-en.md
Normal file
@@ -0,0 +1,122 @@
|
||||
# 🧭 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.
|
||||
Reference in New Issue
Block a user