How I Built Apple-Style Personal Website with AI (Gemini Whisk/Flow) — Built in Lovable

Lovable : https://lovable.dev/invite/9558SG0 Google Gemini https://gemini.google.com/ Google Whisk : https://labs.google/fx/tools/whisk Google Flow ): https://labs.google/fx/tools/flow 🚀 Build a cinematic personal website that feels like a movie trailer 🎬 and looks like a luxury Apple-style product page 🍏✨ — using Google Gemini AI tools (FREE) + Lovable (AI website builder) ✅ 0:00 Final Website Preview (Cinematic + Premium) 0:26 Why a Personal Website Matters in 2026 1:03 Workflow Overview (Gemini → Whisk → Flow → WebP → Lovable) 1:24 Step 1: Gemini Nano Banana Pro (Style + Scene References) 2:05 Step 2: Google Whisk (Start + End Frames) 3:19 Step 3: Google Flow (Cinematic Animation) 4:28 Step 4: Ezgif (Video → WebP Frames) 5:33 Step 5: Build in Lovable (Big Prompt + Cloud Storage) 7:14 Wire Frames URL + Test Scroll Animation 8:28 Publish + Wrap Up This is AI website building + vibe coding at its best: premium motion, rich gradients, subtle glow, and scroll-driven animation—without spending weeks designing and coding. In this full tutorial, I’ll show you a repeatable AI + no-code / low-code workflow to create a dark, premium personal brand website that instantly upgrades your first impression. Perfect for creators, consultants, founders, freelancers, job seekers, actors, models, and professionals who want to stand out in a world where AI is accelerating competition 🌍⚡ ✨ What you’ll learn in this video: 🎨 AI Design System (Gemini + Nano Banana Pro) → Generate premium style reference + scene reference images so your website looks cohesive. 🖼️ AI Visuals (Google Whisk) → Use your photo as an identity anchor and generate cinematic start + end frames with a luxury look. 🎥 AI Animation (Google Flow) → Animate those frames with calm, cinematic motion and subtle parallax-ready depth. 🧩 Scroll-Controlled Cinematic Motion → Convert your animation into WebP frame sequences for scroll-based effects. ⚡ Lovable Vibe Coding Build → Paste one BIG prompt in Lovable to generate the site (UI/UX + components), then connect your animation frames later using Lovable Cloud / Supabase storage. ✨ Premium UI/UX Polish → Spacing, typography, hover micro-interactions, readability overlays—so it feels handcrafted, not templated. 💡 Why this matters: Your website is your digital first impression. In today’s market—US, India, Europe, everywhere—people compare you instantly. This doesn’t guarantee a job or clients (nothing can), but it does help you stand out with a premium brand presence and a modern AI-first portfolio. 💼🔥 📌 Prompts will be shared (pinned comment and 2nd Comment due to length of Prompts) . 🙏 Subscribe for more AI tools, vibe coding, AI agents, no-code builds, and AI productivity hacks ⚡🤖✨ ✅ Automatic Frame Renaming (0001.webp, 0002.webp…) — Mac + Windows 🍏 MacBook (Terminal method) →Put all your .webp frames into one folder (example: ~/Downloads/frames) →Open Terminal →Go to your frames folder (edit the path if needed): cd ~/Downloads/frames → Run this command to rename everything automatically: i=1 for f in $(ls -1v *.webp); do printf -v new "%04d.webp" "$i" mv "$f" "$new" ((i++)) done ✅ Done! Your files will become: 0001.webp, 0002.webp, 0003.webp… 🪟 Windows (PowerShell method) →Put all your .webp frames into one folder →Open that folder in File Explorer →Click the address bar, type powershell, and press Enter (PowerShell opens directly inside that folder ✅) →Run this command: $i=1; Get-ChildItem *.webp | Sort-Object Name | ForEach-Object { $newName = "{0:D4}.webp" -f $i Rename-Item $_.Name $newName $i++ } ✅ Done! Your files will become: 0001.webp, 0002.webp, 0003.webp… ⚠️ Disclaimer (Read This): This video is for educational and informational purposes only. I’m sharing my personal workflow, prompts, and tools based on my own experience. Results may vary depending on your inputs, tool updates, region availability, account limits, and internet/device performance. →This tutorial does not guarantee a job, clients, income, or any specific results. →I’m not responsible for any decisions you make based on this video or for any outcomes from using these tools (including website performance, rankings, leads, or business results). →Any pricing, “free tool” availability, features, or product names may change over time — always check the official tool pages for the latest details. →Please make sure you have the right to use any images, videos, music, logos, or assets you upload (including your own photo). You are responsible for complying with copyright, privacy, and platform policies. →This is not legal, financial, career, or tax advice. If you need professional guidance, consult a qualified professional. →By watching this video, you agree you are using the information at your own discretion and risk.