[Meta-Scrum]Engineering a Portfolio Hub via Vibe Coding

Case Study Detail

The Narrative: Agile-Driven AI Collaboration

This project isn't just a portfolio; it’s a "Meta-Project." It documents the synergy between the Scrum framework and Next.js 15, developed through high-velocity AI collaboration (Windsurf).

In this ecosystem, I stepped into a dual role:

Product Owner, defining the competitive edge of my brand in the global sustainability market, and
Project Executor, translating complex UX frictions into precise Prompt Engineering. I moved from a blank canvas to a fully optimized, multi-language CMS platform in just four sprints.

The Process: Sprint Backlog & Velocity

Beyond mere coding, I am establishing a high-quality Scope Baseline through a disciplined project lifecycle. By leveraging precise Sprint planning and Velocity management, I translate abstract requirements into high-performance technical deliverables:

Sprint 1 Architectural Foundation: Focused on building a robust system core. Key deliverables included bilingual data modeling in Sanity CMS and Next.js 15 base routing configurations to ensure long-term scalability.
Sprint 2 UX & Sensory Engineering: Shifted focus to UI redesign and experience optimization. Delivered a highly adaptive responsive WorkGrid and implemented a dynamic Portable Text renderer with auto-alignment features to enhance content readability.
Sprint 3 Global Scalability Baseline: To ensure international reach, I executed an i18n [lang] route refactor and established a precise multilingual Proxy interception mechanism for seamless cross-language navigation.
Sprint 4 Quality Governance: Transforming deliverables into "Future-proof" brand assets. Finalized GA4 integration, GSC domain verification, and implemented an automated dynamic Sitemap generation system, creating an AI-resilient digital hub.

The Decision Making: Quality vs. Friction

As a PMP, every technical choice was a trade-off between performance and scalability. Here are the core "battles" won:

The i18n Strategy: I opted for Path-based routing (/[lang]) over simple state switching. While it increased Middleware complexity, it secured independent SEO authority for both English and Chinese versions—a non-negotiable for a global brand.
Decentralized SEO: I moved SEO management out of the codebase and into Sanity CMS. By building a dynamic generateMetadata function, I enabled "Operational Flexibility"—allowing me to update keywords based on the latest ESG trends without touching a single line of code.
Data-Driven Governance: Setting up sitemap.ts and Google Search Console wasn't just a technical task; it was about creating a Feedback Loop. We now use GA4 real-time data to analyze which projects resonate most with my stakeholders.

The Magic: High-Velocity Implementation

This project redefined my understanding of Vibe Coding. By treating Intent as the New Syntax, I directed AI to handle the "heavy lifting" of boilerplate code while I focused on system architecture and logic flow.

Whether it was debugging Middleware route interference or automating XML generation, the development felt less like "writing" and more like Orchestrating.

The Result: A Living Ecosystem

The final delivery is a high-performance, future-proof brand asset:

Dynamic Content Agility: Integrated with Sanity CMS for real-time updates and seamless back-end management at any time.
Lighthouse Performance: 90+ across the board (Performance, SEO, Accessibility).
True i18n Implementation: Seamless bilingual navigation with synchronized content.
Automated Monitoring: A "Set-and-Forget" system with GA4 and GSC auto-indexing.

The takeaway? This isn't just a static site. It's a scalable, living brand hub designed to evolve as fast as the market does.