5c8baf14c3
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.
5.7 KiB
5.7 KiB
🧭 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
- Hero Section — One‑line mission statement + dynamic logo / particle animation demo.
- Our Capabilities — Display 3–5 core services with subtle motion.
- Featured Works — Select 3–6 highlighted projects.
- Tech Stack / Tools — Visual badges for frameworks, languages, engines.
- Why Choose Us — Differentiators (customization, speed, delivery standards).
- 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.