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
24
docs/Company Overview.md
Normal file
24
docs/Company Overview.md
Normal file
@@ -0,0 +1,24 @@
|
||||
我的工作室侧重于：定制开发，科技公司
|
||||
|
||||
涉及业务包括但不限于：
|
||||
|
||||
1. 网站 / 网页开发（高级定制，包括客制化后台系统等）
|
||||
2. 程序开发
|
||||
3. 游戏开发（曾经有一两款单机小游戏，目前暂停，未来会重新启动）
|
||||
4. 工具开发
|
||||
5. 软硬件测评（未来加入）
|
||||
6. 额外服务：宴会大屏幕内容定制
|
||||
7. 小网页开发（普通定制，用于简单展示）
|
||||
|
||||
目前线上可访问（大学做的，基于 Nuxt3）游戏介绍为主。现在想把涉猎面广一些
|
||||
|
||||
目前我们已落地的产品：
|
||||
|
||||
- GameJam 游戏一个（地牢探险生存类）
|
||||
- 业余开发的手机游戏一个（速降类）
|
||||
- 永平中学校友会官方网站与管理系统（价值 RM32,000）
|
||||
- 宴会大屏竞标系统（价值：RM 500 / 次）
|
||||
|
||||
正在开发的产品：
|
||||
|
||||
- 室内设计公司高定官网（价值 RM 8,000）
|
||||
63
docs/Index Our Capabilities.md
Normal file
63
docs/Index Our Capabilities.md
Normal file
@@ -0,0 +1,63 @@
|
||||
## 🧩 Our Capabilities（建议结构）
|
||||
|
||||
### 1️⃣ Custom Web Development
|
||||
|
||||
> 从企业官网到复杂后台系统，提供端到端的定制化开发。
|
||||
> **关键词**：Nuxt / Next / Tailwind / CMS / API Integration
|
||||
|
||||
可加一句扩展：
|
||||
|
||||
> 我们专注于速度、可维护性与美学并重的前端体验。
|
||||
|
||||
---
|
||||
|
||||
### 2️⃣ Software & Tool Engineering
|
||||
|
||||
> 为企业或个人定制内部工具与业务流程系统。
|
||||
> **关键词**：Automation / Dashboard / Data Visualization / Desktop Apps
|
||||
|
||||
> 你可以展示如「宴会大屏幕竞标系统」或「管理系统」作为例子。
|
||||
|
||||
---
|
||||
|
||||
### 3️⃣ Game Design & Development
|
||||
|
||||
> 将创意化为可交互的世界。独立游戏、原型、游戏化体验一站式实现。
|
||||
> **关键词**：Godot / Unity / WebGL / Procedural Design
|
||||
|
||||
> 可以提及 Game Jam 作品、速降手游、未来的重启计划。
|
||||
|
||||
---
|
||||
|
||||
### 4️⃣ Interactive Media & Event Systems
|
||||
|
||||
> 为活动、展会、宴会提供沉浸式视觉与互动内容。
|
||||
> **关键词**：Large Screen Content / Real-time Animation / Custom Interaction
|
||||
|
||||
> 这块是你独有的“宴会大屏幕定制服务”，建议配视频或动效展示。
|
||||
|
||||
---
|
||||
|
||||
### 5️⃣ Tech Exploration & Evaluation (Lab)
|
||||
|
||||
> 研究前沿软硬件，测试并分享最新技术成果。
|
||||
> **关键词**：Experimental / Hardware Review / Prototype / Innovation
|
||||
|
||||
> 可作为未来内容板块，让网站保持“持续成长感”。
|
||||
|
||||
---
|
||||
|
||||
### 6️⃣ Creative Consulting & Digital Strategy *(可选)*
|
||||
|
||||
> 为品牌或团队提供技术方向规划与产品实现建议。
|
||||
> **关键词**：Digital Transformation / UX Consulting / Architecture Design
|
||||
|
||||
> 如果你常为客户做「网站+系统整体方案」，就适合加上这项。
|
||||
|
||||
---
|
||||
|
||||
## ✨ 展示形式建议
|
||||
|
||||
* 六宫格布局，每项配一个动效图标（iconify /lucide）
|
||||
* hover 时显示一句“我们的价值主张”
|
||||
* 用对比色或霓虹描边营造科技氛围
|
||||
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.
|
||||
@@ -120,13 +120,3 @@
|
||||
* 集成 **多语言支持（i18n）**，面向海外客户。
|
||||
* 游戏项目可接入 **WebGL / Godot Web Export**，直接可试玩。
|
||||
* 将案例模块化为 JSON / Markdown 文件，可持续维护。
|
||||
|
||||
---
|
||||
|
||||
要不我直接帮你整理成一个完整的：
|
||||
|
||||
> 🧾《工作室网站重构计划书（v1）》——包括结构图、推荐技术栈、视觉方向与页面草稿说明。
|
||||
|
||||
格式我可以生成成 Word / PDF，你可以直接交给团队或自己用来开发。
|
||||
|
||||
是否要我现在帮你生成？（如果要，请告诉我希望输出哪种格式：**Word** 还是 **PDF**）
|
||||
|
||||
Reference in New Issue
Block a user