Do I need to know how to code to build a website like this?

No. The entire process relies on "vibe coding," where the AI handles the HTML and CSS while you provide the creative direction.

Can I use these tools for free?

Some generation tools offer free tiers or initial credits, but this does not make the whole workflow free. Video generation may require a paid plan, and hosting and domain renewal can have ongoing costs. Check current terms.

Is the website responsive on mobile devices?

You can ask ChatGPT to optimize the code for mobile, tablet, and desktop during your chat session to ensure it looks good on all devices.

What if I want to change the content later?

You can always return to your chat history in ChatGPT, explain what changes you want to make, and ask it to provide updated code blocks or a new ZIP file.

How long does it take for the domain to go live?

Once you have uploaded your files and connected your domain through your hosting provider, the site should generally be accessible very quickly, though propagation can sometimes take a short amount of time.

Build an Animated AI Portfolio Website: My 14-Minute Demo

Follow my animated portfolio workflow: create a felt-style character, turn it into a video, build the site with AI, and prepare it for web hosting.

Explore Hostinger Hosting

Building a high-end, interactive website used to require weeks of development or a massive budget. In my 14-minute video, I demonstrate a workflow for building an animated portfolio website; your generation, revision, and deployment time may differ. By leveraging modern AI tools, you can create immersive experiences, like animated characters that track your cursor, without needing a background in web design or programming.

In this guide, I will walk you through the entire process, from generating a custom 3D felt-style character to hosting the final site online. We will use resources like Motionsites.ai for design inspiration, ChatGPT for the "vibe coding" process, Higgsfield for character animation, and Hostinger for live hosting. Please note that I am a partner for these services and may earn a commission if you make a purchase through my links, at no extra cost to you.

Setting Up Your Design Concept

Before jumping into the build, you need a clear vision. Head over to Motionsites.ai to browse high-quality web templates. This platform allows you to see what other designers are building for SaaS or landing pages. You can filter by free templates, which are great for testing the workflow. Look for the "3D character studio" project—this is the template I used for my own site. Copy the provided prompt to your clipboard, as this will serve as your foundation for the coding session in ChatGPT.

Transforming Photos Into Animations

To give your site a personal touch, you need a character that reflects your brand. Start by uploading a clear portrait of yourself to ChatGPT. Ask the AI to convert your image into a cartoon character made of felt. Be sure to request two variations—one where you look left and one where you look right—with a slight smile to ensure the movement effect is natural.

Once you have your images, use Higgsfield to bring them to life. This is where you create the hero video for your site. You will need to sign up for an account; I recommend checking if you can complete your project with the free credits, though I personally use the pro plan to ensure I get the best results.

Animating the Character

Follow these steps to animate your character:

Upload your character images as references in the Higgsfield "Create Video" section.
Set your aspect ratio to 16:9.
Enter a prompt instructing the character to look from left to right, keeping the character positioned to the right side of the frame.
Choose an available image-to-video model and generate a short clip. The demonstration uses a six-second, 1080p landscape video. Compress and check the exported file for web use; a prompt alone does not guarantee its file size.

AI-generated illustration of a felt character beside a portfolio layout

Building Your Site With Vibe Coding

Now it is time to build. Open the desktop version of ChatGPT, switch to "work" mode, and paste your initial prompt from Motionsites.ai. As the AI generates the code, you can upload your custom character video and instruct the AI to use it as the hero background.

"Vibe coding" is the process of talking to your AI as you would a developer. You can simply ask it to add specific sections like an "About Me" block, video galleries, or a contact form. A static contact form also needs a real submission destination; a visible form alone does not send messages. This iterative process makes building a website feel like a conversation. Once you are satisfied with the design, ask ChatGPT to export the entire project as a ZIP folder so you can host it.

Hosting Your AI Website

Once your code is ready, it is time to put your site on the web. Navigate to Hostinger to set up your domain and server space. I use this provider because it is accessible and offers a streamlined path for beginners. During checkout, check whether your chosen plan includes an eligible first-year domain and whether code JULIANWEBER applies. The video mentions a 10% discount, but availability, eligibility, and renewal prices must be confirmed in the current order summary.

Going Live

Within your Hostinger dashboard, select "Migrate Existing Site" since we have already built our files.
Link your purchased domain to the site.
Upload the ZIP file you downloaded from ChatGPT.
Submit the request for deployment.

Wait for your host to confirm deployment, then open the public address and check the pages and media. Publishing and domain propagation can take longer than the demonstration. Remember to verify your billing terms and renewal pricing directly on the provider's checkout page, as these can vary by region and billing cycle.

● FAQ