I Vibe Coded a 3D Portfolio with Gemini

Source: Dev.to

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

Hey there, I go by the name “the bugged dev” 👋

Like many people I started this year with a simple goal to learn how to build websites using AI and share my progress on Twitter. What began as a small resolution turned into vibe‑coding many 3D websites and eventually this full portfolio.

// Detect dark theme
var iframe = document.getElementById('tweet-2015677079040426134-135');
if (document.body.className.includes('dark-theme')) {
  iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2015677079040426134&theme=dark";
}

The response from the community on Twitter has been much bigger than I ever expected, and I continue to build things for the rest of the year.

Portfolio

Live:

How I Built It

I built this project using React.js and Three.js with Google Gemini 1.5 Pro in Google AI Studio. Everything started when I saw a beautiful hero‑section design by Wahaj Khan on Twitter.

// Detect dark theme
var iframe = document.getElementById('tweet-2015852029466574859-540');
if (document.body.className.includes('dark-theme')) {
  iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2015852029466574859&theme=dark";
}

Since I only had a design for the top part of the site, I had to figure out how to build the rest myself.

I use a workflow I created where I write very long and detailed prompts to tell the AI exactly how to replicate the look of an image. I actually use AI to help me write these massive prompts—AI creating better instructions for the AI.

Once I’m happy with the first section, I move to the next feature and prompt for that specifically. I keep my instructions strict so the AI stays within the same design system and does not get confused.

For the 3D parts I share other inspirational design images and tell the AI exactly which Three.js techniques to use for the geometry.

Every 3D model you see was written as code by the AI. It is a step‑by‑step process that might seem boring, but it works perfectly.

What I’m Most Proud Of

I am most proud of the Three.js elements in the hero section and the skills area where each skill is displayed on a 3D coin. These were built using shaders, which I never knew how to create on my own. I wanted to learn Three.js for a whole year but never found the time. Now, thanks to AI I can build these creative websites in less than half the time it would take to do it manually.

In addition, smooth animations and the overall UI are big wins. I worked with AI to ensure the grid lines and layout fit together properly and work on every device. Achieving this level of detail using only AI is something I’m very happy with.

My next goal is to improve the hero model and add scroll‑based animations to make it even more interactive.

See you in the next vibe‑coded application! :D