diff --git a/.npmrc b/.npmrc
index bd06cf6..c483022 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1,2 +1 @@
-shamefully-hoist=true
-package-lock=false
\ No newline at end of file
+shamefully-hoist=true
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 44f8c43..01a76f3 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,7 +1,7 @@
{
"i18n-ally.localesPaths": ["i18n/locales"],
-"i18n-ally.enabledFrameworks": [
- "vue"
-],
-"i18n-ally.keystyle": "nested"
+ "i18n-ally.enabledFrameworks": ["vue"],
+ "i18n-ally.sourceLanguage": "en-US",
+ "i18n-ally.displayLanguage": "en-US",
+ "i18n-ally.keystyle": "nested"
}
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 960b2a6..eedf1c4 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,13 +1,31 @@
-
-
-
+
+
+ Tootaio Studio
+
+
+ setLocale(v as 'en' | 'zh-CN')"
+ />
+
+
+
+
+
+
+
+ © {{ new Date().getFullYear() }} Tootaio Studio. All rights
+ reserved.
+
+
+
-
\ No newline at end of file
+
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 0f820a5..54cae49 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,44 +1,236 @@
-
-
- Tootaio Studio
-
- setLocale(v as 'en' | 'zh-CN')"
- />
-
-
+
+
+
+
+ :title="$t('index.capabilities.title')"
+ :features="capabilitiesFeatures"
+ />
+
+
+
+
+
+ {{ item.title }}
+
+
+
+ {{ item.description }}
+
+
+
+ {{ $t("index.featuredProjects.viewDemo") }}
+
+
+
+
+
+
+
-
+
+
+
-
+
+
+
diff --git a/docs/Company Overview.md b/docs/Company Overview.md
new file mode 100644
index 0000000..a938bbf
--- /dev/null
+++ b/docs/Company Overview.md
@@ -0,0 +1,24 @@
+我的工作室侧重于:定制开发,科技公司
+
+涉及业务包括但不限于:
+
+1. 网站 / 网页开发(高级定制,包括客制化后台系统等)
+2. 程序开发
+3. 游戏开发(曾经有一两款单机小游戏,目前暂停,未来会重新启动)
+4. 工具开发
+5. 软硬件测评(未来加入)
+6. 额外服务:宴会大屏幕内容定制
+7. 小网页开发(普通定制,用于简单展示)
+
+目前线上可访问(大学做的,基于 Nuxt3)游戏介绍为主。现在想把涉猎面广一些
+
+目前我们已落地的产品:
+
+- GameJam 游戏一个(地牢探险生存类)
+- 业余开发的手机游戏一个(速降类)
+- 永平中学校友会官方网站与管理系统(价值 RM32,000)
+- 宴会大屏竞标系统(价值:RM 500 / 次)
+
+正在开发的产品:
+
+- 室内设计公司高定官网(价值 RM 8,000)
\ No newline at end of file
diff --git a/docs/Index Our Capabilities.md b/docs/Index Our Capabilities.md
new file mode 100644
index 0000000..7783a04
--- /dev/null
+++ b/docs/Index Our Capabilities.md
@@ -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 时显示一句“我们的价值主张”
+* 用对比色或霓虹描边营造科技氛围
diff --git a/docs/design-doc-v1-en.md b/docs/design-doc-v1-en.md
new file mode 100644
index 0000000..888a361
--- /dev/null
+++ b/docs/design-doc-v1-en.md
@@ -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.
diff --git a/docs/design-doc-v1.md b/docs/design-doc-v1.md
index 5036dc3..f9367f4 100644
--- a/docs/design-doc-v1.md
+++ b/docs/design-doc-v1.md
@@ -120,13 +120,3 @@
* 集成 **多语言支持(i18n)**,面向海外客户。
* 游戏项目可接入 **WebGL / Godot Web Export**,直接可试玩。
* 将案例模块化为 JSON / Markdown 文件,可持续维护。
-
----
-
-要不我直接帮你整理成一个完整的:
-
-> 🧾《工作室网站重构计划书(v1)》——包括结构图、推荐技术栈、视觉方向与页面草稿说明。
-
-格式我可以生成成 Word / PDF,你可以直接交给团队或自己用来开发。
-
-是否要我现在帮你生成?(如果要,请告诉我希望输出哪种格式:**Word** 还是 **PDF**)
diff --git a/i18n/locales/en-US/index.json b/i18n/locales/en-US/index.json
index 14dc7ea..79094de 100644
--- a/i18n/locales/en-US/index.json
+++ b/i18n/locales/en-US/index.json
@@ -1,5 +1,75 @@
{
"index": {
- "trustedBy": "Trusted by over {count} users worldwide"
+ "trustedBy": "Trusted by over {count} users worldwide",
+ "heroDescription": "Technology Meets Imagination.",
+ "capabilities": {
+ "title": "Our Capabilities",
+ "features": [
+ {
+ "title": "Custom Website Development",
+ "description": "Tailored websites and backend systems built with modern frameworks like Nuxt and Next, delivering performance, scalability, and visual impact."
+ },
+ {
+ "title": "Software & Tool Engineering",
+ "description": "Custom-built applications, internal dashboards, and automation tools that streamline workflows and enhance productivity."
+ },
+ {
+ "title": "Game Design & Development",
+ "description": "From Game Jam prototypes to commercial releases — we design and develop immersive, creative, and technically robust gaming experiences."
+ },
+ {
+ "title": "Interactive Media & Event Systems",
+ "description": "Creating dynamic, large-screen visuals and real-time interactive systems for events, exhibitions, and banquets."
+ },
+ {
+ "title": "Tech Exploration & Evaluation",
+ "description": "Experimenting with emerging technologies and evaluating software and hardware to stay ahead of the innovation curve."
+ },
+ {
+ "title": "Creative Consulting & Digital Strategy",
+ "description": "Providing expert guidance on product architecture, digital transformation, and long-term technology strategy for brands and startups."
+ }
+ ]
+ },
+ "techStack": {
+ "title": "Tech Stacks"
+ },
+ "featuredProjects": {
+ "title": "Featured Projects",
+ "viewDemo": "Visit Site"
+ },
+ "whyChooseUs": {
+ "title": "Why Choose Us",
+ "subtitle": "We don’t just build code — we craft digital experiences.",
+ "features": [
+ {
+ "title": "Fully Custom-Built",
+ "description": "Every website, system, and game is built from scratch to match your unique brand identity and performance needs."
+ },
+ {
+ "title": "Tech-Driven, Not Just Design",
+ "description": "Our engineers lead every project, optimizing architecture, performance, and security at every level."
+ },
+ {
+ "title": "Cross-Domain Expertise",
+ "description": "From web systems to games and interactive tools — we merge creativity and engineering to deliver seamless experiences."
+ },
+ {
+ "title": "End-to-End Service",
+ "description": "From concept, prototyping, and frontend to deployment and long-term support — we handle everything in-house."
+ },
+ {
+ "title": "Proven Project Value",
+ "description": "We’ve delivered projects for educational institutions, brands, and game developers — with real impact and measurable value."
+ },
+ {
+ "title": "Future-Oriented",
+ "description": "Beyond client work, we’re building our own products and experiments, pushing the boundaries of what’s possible."
+ }
+ ]
+ },
+ "seo": {
+ "title": "Homepage"
+ }
}
}
diff --git a/i18n/locales/zh-CN/index.json b/i18n/locales/zh-CN/index.json
index 900b5af..8249abc 100644
--- a/i18n/locales/zh-CN/index.json
+++ b/i18n/locales/zh-CN/index.json
@@ -1,5 +1,75 @@
{
"index": {
- "trustedBy": "全球有超过 {count} 用户信赖"
+ "trustedBy": "全球有超过 {count} 用户信赖",
+ "heroDescription": "专为想要独特体验的品牌打造量身定制的数字产品。",
+ "capabilities": {
+ "title": "我们的核心能力",
+ "features": [
+ {
+ "title": "网站定制开发",
+ "description": "基于 Nuxt / Next 等现代框架,为企业打造高性能、可扩展且视觉出众的专属网站与后台系统。"
+ },
+ {
+ "title": "软件与工具工程",
+ "description": "为企业定制自动化工具、数据面板与业务流程系统,提高工作效率与可靠性。"
+ },
+ {
+ "title": "游戏设计与开发",
+ "description": "从 Game Jam 原型到商业发行,打造富有创意与技术深度的互动体验。"
+ },
+ {
+ "title": "互动媒体与宴会系统",
+ "description": "为展会、活动与宴会定制实时交互内容与大型屏幕视觉展示。"
+ },
+ {
+ "title": "技术探索与评测",
+ "description": "研究与评估前沿软硬件技术,保持创新优势与研发热情。"
+ },
+ {
+ "title": "创意咨询与数字策略",
+ "description": "为品牌与团队提供产品架构、数字化转型与长期技术规划咨询。"
+ }
+ ]
+ },
+ "techStack": {
+ "title": "我们的技术栈"
+ },
+ "featuredProjects": {
+ "title": "特色项目",
+ "viewDemo": "访问页面"
+ },
+ "whyChooseUs": {
+ "title": "为什么选择我们",
+ "subtitle": "我们不仅编写代码——我们打造数字体验。",
+ "features": [
+ {
+ "title": "Fully Custom-Built",
+ "description": "我们从不使用模板。每一个网站、系统、游戏都从零设计与开发,确保风格、性能与体验完全符合品牌个性。"
+ },
+ {
+ "title": "Tech-Driven, Not Just Design",
+ "description": "作为开发导向的团队,我们理解底层逻辑。从架构、性能、安全到交互动画,所有细节都由工程师主导优化。"
+ },
+ {
+ "title": "Cross-Domain Expertise",
+ "description": "我们横跨网站、游戏、工具与交互内容开发,让每个项目都能获得更广阔的技术整合思路。"
+ },
+ {
+ "title": "End-to-End Service",
+ "description": "从概念、原型、前端到部署与长期维护,我们全程负责,让客户专注业务,而非技术问题。"
+ },
+ {
+ "title": "Proven Project Value",
+ "description": "我们曾为教育机构、品牌活动、独立游戏等开发高价值系统,实力可见。"
+ },
+ {
+ "title": "Future-Oriented",
+ "description": "我们在研发自己的产品与工具,不止接案,也在打造未来生态。这代表我们具备持续创新与自我进化的能力。"
+ }
+ ]
+ },
+ "seo": {
+ "title": "首页"
+ }
}
}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index b262423..1dc65bc 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -20,6 +20,15 @@ export default defineNuxtConfig({
"@nuxtjs/seo",
],
css: ["@/assets/css/main.css"],
+ app: {
+ head: {
+ titleTemplate: "%s - Tootaio Studio",
+ meta: [
+ { name: "viewport", content: "width=device-width, initial-scale=1" },
+ { charset: "utf-8" },
+ ],
+ },
+ },
i18n: {
defaultLocale: "en",
locales: [
@@ -52,4 +61,7 @@ export default defineNuxtConfig({
twitterImage: DEFAULT_SEO.image,
},
},
+ site: {
+ url: "https://tootaio.com",
+ },
});
diff --git a/package.json b/package.json
index 9a4e05f..b9d5068 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
"postinstall": "nuxt prepare"
},
"dependencies": {
+ "@iconify-json/mdi": "^1.2.3",
"@nuxt/content": "3.8.0",
"@nuxt/eslint": "1.10.0",
"@nuxt/ui": "4.1.0",
diff --git a/public/images/project-showcases/malaysia-student-return.png b/public/images/project-showcases/malaysia-student-return.png
new file mode 100644
index 0000000..161bb97
Binary files /dev/null and b/public/images/project-showcases/malaysia-student-return.png differ
diff --git a/public/images/project-showcases/yphs-alumni-website.png b/public/images/project-showcases/yphs-alumni-website.png
new file mode 100644
index 0000000..3a82fec
Binary files /dev/null and b/public/images/project-showcases/yphs-alumni-website.png differ
diff --git a/public/index/trusted-by/logoipsum-284.svg b/public/index/trusted-by/logoipsum-284.svg
deleted file mode 100644
index 3c697d2..0000000
--- a/public/index/trusted-by/logoipsum-284.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/public/index/trusted-by/logoipsum-338.svg b/public/index/trusted-by/logoipsum-338.svg
deleted file mode 100644
index 34fb544..0000000
--- a/public/index/trusted-by/logoipsum-338.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
\ No newline at end of file
diff --git a/public/index/trusted-by/logoipsum-353.svg b/public/index/trusted-by/logoipsum-353.svg
deleted file mode 100644
index 1642dfe..0000000
--- a/public/index/trusted-by/logoipsum-353.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
\ No newline at end of file
diff --git a/public/index/trusted-by/logoipsum-378.svg b/public/index/trusted-by/logoipsum-378.svg
deleted file mode 100644
index 5d8e19a..0000000
--- a/public/index/trusted-by/logoipsum-378.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-
\ No newline at end of file
diff --git a/public/index/trusted-by/logoipsum-392.svg b/public/index/trusted-by/logoipsum-392.svg
deleted file mode 100644
index 6dfdac7..0000000
--- a/public/index/trusted-by/logoipsum-392.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
\ No newline at end of file
diff --git a/public/index/trusted-by/logoipsum-403.svg b/public/index/trusted-by/logoipsum-403.svg
deleted file mode 100644
index 994f4df..0000000
--- a/public/index/trusted-by/logoipsum-403.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
\ No newline at end of file
diff --git a/public/index/trusted-by/logoipsum-409.svg b/public/index/trusted-by/logoipsum-409.svg
deleted file mode 100644
index 1de39de..0000000
--- a/public/index/trusted-by/logoipsum-409.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
\ No newline at end of file