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 @@ - \ 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 @@ 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