Building a Cinematic Tribute Website with AI-Assisted Vibe Coding

Description and use

A fully functional, responsive tribute website was built and deployed. The developer highlights that AI handled 80% of the work (layout, components, animations), while manual effort was required for the final 20% (debugging image attributes, positioning, SEO).

Problem

Create a high-quality, cinematic, single-page tribute website for film director Rituparno Ghosh, featuring complex UI elements like carousels, modals, and animations, while leveraging AI to accelerate development.

Outcome

A fully functional, responsive tribute website was built and deployed. The developer highlights that AI handled 80% of the work (layout, components, animations), while manual effort was required for the final 20% (debugging image attributes, positioning, SEO).

Workflow

• Define the project scope: A single-page tribute site with specific sections (Hero, Creations, Achievements, Documentaries, Memories).
• Select the tech stack: TanStack Start (React 19 + SSR), TypeScript, Vite, Tailwind CSS 4, shadcn/ui, Framer Motion, TanStack Router.
• Utilize AI for initial implementation: Use AI tools to generate layout, components, and animations (the '80%' of the work).
• Refine and debug: Manually fix specific issues such as image src attributes, positioning, and SEO meta tags (the '20%' requiring patience).
• Deploy the application: Host the final build on Vercel.

Evidence

AI tools did the heavy lifting; I directed. AI is great at the 80% — layout, components, animations. The last 20% took real patience.

Source

Fix image src attribute in Hero component, Adjust image positioning in Hero component, Enhance SEO with author and Open Graph meta tags

Source