WubbuLubbaDoubt — Next.js + TinaCMS Project Blueprint (Non-Code Detailed Plan)

Phase 1: Concept, Structure, and Styling Foundation

• Finalize visual direction (Material 3 + glassmorphism + mesh gradients).
• Lock typography, color palettes (light/dark mode), and branding elements.
• Define site IA, content collections, and URL structure.
• Establish animation principles and motion guidelines.

Phase 2: Flows, Layouts, and Screen Concepts

• Create detailed user flows for each page and interaction.
• Design wireframes for all screen types (Home, Blog Index, Blog Post, Art Index, Art Detail, Philosophy, Resources, Notes, Snippets, About, Contact).
• Define key transition styles between sections.
• Annotate flows with animation and transition triggers.

Phase 3: Interaction and Animation Storyboarding

• Develop storyboards for 3D navigation sequences.
• Plan parallax depth layers and shader effects.
• Outline micro-interactions for buttons, cards, and navigation.
• Align transitions with performance constraints.

Phase 4: Loaders and Page Entry Experiences

• Design the 3D portal intro sequence.
• Define timing, quotes, and skip/entry logic.
• Create skeleton states for content loading.
• Establish page entry animations for each major section.

Phase 5: Content Modeling and CMS Integration

• Define MDX frontmatter and content templates for Blog, Art, Pages, Notes, and Snippets.
• Configure TinaCMS collections and fields.
• Plan editorial workflow and draft-to-publish lifecycle.
• Organize sample content for testing.

Phase 6: Dynamic Features and Functional Enhancements

• Implement view counters with Vercel KV/Upstash.
• Integrate client-side search with MiniSearch.
• Add share actions and social metadata hooks.
• Configure series grouping for related posts.

Phase 7: Polishing and Pre-Production Review

• Cross-check design fidelity against original concept.
• Optimize animations and images for performance.
• Test navigation flows and reduce motion alternatives.
• Run accessibility, contrast, and usability checks.

Phase 8: SEO, Sharing, and Metadata

• Configure Next SEO defaults, sitemap, robots.txt.
• Design consistent OG image templates.
• Ensure structured data for blog posts and artworks.

Phase 9: Deployment Strategy

• Set up Vercel project and environment variables.
• Configure SSG + ISR with TinaCMS revalidation.
• Test refresh toast behavior on content updates.

Phase 10: Post-Launch Roadmap

• Enhanced Lightbox for art.
• Shop integration for prints/digital downloads.
• Print/PDF styles for articles.
• i18n evaluation.
• Experimental shader backgrounds for select essays.