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

Look at this. This is not a template.

This is not another portfolio website.

This feels like a movie trailer, but also feels like a luxury product page.

Smooth motion, cinematic depth, rich gradients, dark premium glow. And the

best part, we are building this with Google's creative AI tools like Whisk and Flow and then assembling everything in lovable without sitting and coding for days. By the end of this video, you

for days. By the end of this video, you will have repeatable system to build a website that looks mama mia. Listen,

your first impression is your personal website. And in 2026, first impressions

website. And in 2026, first impressions happen fast. A resume is fine, but

happen fast. A resume is fine, but website lets you tell your story, show proof and control your brand at one place. And this isn't just for students.

place. And this isn't just for students.

This is for anyone who need attention as well as trust. New actor, your website is your digital stage. Head shot, real and story. Model, your website is your

and story. Model, your website is your visual resume. Founder, it's credibility

visual resume. Founder, it's credibility in one link. Consultant, your website is your trust machine. creator. It's your

home base. Content, services, and community. So today, let's make a

community. So today, let's make a premium site that makes people stop scrolling. Here is the workflow. It's

scrolling. Here is the workflow. It's

clean. We will use Nano Banana Pro to create style plus scene reference images. Then we'll use VIS to create

images. Then we'll use VIS to create start frame and end frame. Then we'll go to flow to make animation version. Then

we'll convert them into webp version.

Then finally, we'll create our website into lovable. All prompts which I will

into lovable. All prompts which I will use in this video, you can find in the pin comment.

In step one, we will create style reference and scene reference because we don't want to let whisk the guess the vibe. So here you can find a full

vibe. So here you can find a full prompt. I will copy this and then I will

prompt. I will copy this and then I will paste into Google's Gemini Nano Banana Pro. Okay, prompt one give us style

Pro. Okay, prompt one give us style reference and with the prompt two we will create substyle glow reference.

It's optional but it's better to create it. We'll copy this and let's paste

it. We'll copy this and let's paste there. Perfect. It gave us substyle glow

there. Perfect. It gave us substyle glow and then and with the prompt three we will create scene reference. So let's

paste it there and generate image.

Great. Now we got scene reference as well. Now download all three images and

well. Now download all three images and name it properly.

Now we go to whisk. Whisk is built for image prompting and that is why we created references. Then we'll upload

created references. Then we'll upload subject sheen and style. In the subject you can upload your image. In this case I will upload my photo in the scene. In

the style image, we will add two photos.

Now we uploaded subject, scene and style. Now let's copy prompt for whisk

style. Now let's copy prompt for whisk start frame and then we'll paste it here. Then we can click on generate. You

here. Then we can click on generate. You

can click on generate multiple times.

Each time it will create two images. I

will suggest try to generate as many as time possible and then find your best picture. As you can see they generated

picture. As you can see they generated really good photos. Now I will select another style and let's try to generate another photos. Okay. Out of all I like

another photos. Okay. Out of all I like this photo. So I will download this for

this photo. So I will download this for my first frame. Now I would like to create end frame. So I will go to prompt section. Copy this whisk end frame

section. Copy this whisk end frame prompt and then go to whisk. Paste this.

Select this style reference and click on generate again. Let's click multiple

generate again. Let's click multiple times. Okay, they generated good photos.

times. Okay, they generated good photos.

Let's create with the second style.

Let's click on generate multiple times.

Okay, they generated really good photos.

Let me select one. I like this one for end frame. Let's download this.

end frame. Let's download this.

Let's flow together. We will use Google's flow to make our photo visually appealing. We will use our start frame

appealing. We will use our start frame and end frame and turns them into cinematic loop. Now first screen look

cinematic loop. Now first screen look like this. So initial default version

like this. So initial default version would be text to video. We will change it to frames to video. Then we'll upload our first frame and end frame. Great.

Now it's time to give it luxury motion.

So we'll go to prompt section. Copy this

full prompt flow frames to video. Then

we'll go to flow and then paste it here.

Then let's click on generate and within few seconds it will give us luxury motion. Hey guys, if you're learning

motion. Hey guys, if you're learning something new today and enjoying my content then subscribe to my channel and smash the like button. Seriously,

currently I am one man army show. I'm

building script, editing it, recording video, editing my video and publish it with you. I'm trying my best to generate

with you. I'm trying my best to generate as good as content for you. So if this helped you, subscribing is the easiest method to support this channel. So let's

build crazy stuff together. Great. They

generated two videos. I like this one.

That's so elegant. So, it's also changing a little bit expression during the complete motion.

So, let's download this video with upscaled version.

Now, we'll go to this sgif.com and then we convert this video into webp version.

So, website can handle this motion on scroll. Then, after going on sgf.com,

scroll. Then, after going on sgf.com, click on webp, choose your file, click on upload files. Great. So now the uploaded video in the size we will

select 1280px and in the frame rate we will yeah that's fine we'll use we will use 25 or 24 fine and quality 85 is fine then we click on convert to webp they

generated it little bit decrease the quality but it makes our website faster then we'll click on split and click on output format webp and then click on split to frames there you have it now we

will click on download frames as zip one important advice is that when you download frames from sgif.com just rename it properly so it will be in the sequence so for example triple01 to if

you go to down then it's the last one is 01 192 don't rename it one by one it will take lot of time I will explain my magic trick into description tab for

windows and for MacBook you can copy it and change it by yourself now the fun part lovable we'll build our website within lovable and if you're new

to lovable watch my above video watch just first 3 minutes and you will get idea what is lovable and how to use all features in lovable. I will attach my lovable invitation link sign up with the lovable if you are new to lovable and

you will get 10 free credits. So I

already prepared big prompt for you. So

let's go into prompt document and here you can find the full prompt. I provided

all the information what we will need in this uh website building. So let's go to lovable. Okay, we pasted the prompt. So

lovable. Okay, we pasted the prompt. So

at the end if you can notice then we are asking that ask me for the first frame URL to finalize wiring. So the pro movies here we are not adding URL for our frames. We will add it in the second

our frames. We will add it in the second step. So let's click on the generate.

step. So let's click on the generate.

There you have it. It gave us first version and now it is asking please provide a first frame public URL total frame count and file name format. So

we'll go to this cloud section. We'll

make it enable cloud. Click on allow enable cloud. Okay it's enabled cloud.

enable cloud. Okay it's enabled cloud.

Now next step is to open cloud tab.

Navigate to storage. I'll show you how.

Click on cloud. Then go to storage tab.

Then click on new bucket. I'll give it name cinematic hero. Make bucket public.

Create bucket. And now we'll upload all frames which we created already. So

click on this upload and then click on frames. Select all and upload all

frames. Select all and upload all frames. It gave us some error. So I took

frames. It gave us some error. So I took screenshot and I'm providing just one prompt. It is giving me this error.

prompt. It is giving me this error.

Please fix this error. Okay. Seems like

it's just minor error. Let's open again.

Click storage. Reload. Okay. So now they uploaded all our frames. Okay. Click on

first frame and then click on copy URL.

Then we'll paste it here and execute.

There you have it. We have first version. And during the first version,

version. And during the first version, they found some issues. So they asked my approval to fix the issues. So I

approved all all of them and they fixed all the issues. So let's test this.

It's working really well here. I found

that they misplaced the image that we can quickly fix it in a minute. But that

looks really good. So I will take a screenshot of this and paste it here. So I ask here replace this existing image shown in the first photo with my new photo attached. So I

will attach my new photo. Okay. Now I

will execute. So they will replace this photo with the new photo which I attached here. Perfect. I'm looking

attached here. Perfect. I'm looking

good. I'm looking handsome. So now of course this all numbers are uh wrong. So

it's generic. So I built it for this uh website. And as you can see what I

website. And as you can see what I create a automation, wipe coding, text, system design, tools, review. If you

want to walk with me, let's get started some testimonials. These all are

some testimonials. These all are generic. So don't worry. And but the

generic. So don't worry. And but the main thing is that we created premium polished website. Now let's publish it.

polished website. Now let's publish it.

So you can click on publish then you can give it your domain name canal website then let's click on save it will check if this domain exist or

not so who can access it's anyone of course right in the website info you can add icon title and the description of course and you can share the image I will not do anything here and then I

will click on publish so it will give us proper URL and then we can copy it and then you can see it okay now we have URL I change the domain name because I don't want to publish this official website.

Now, if you build any website like this, drop it in the comment section. I will

try to review it.