Building This Site With AI

Posted by Valoneu on April 6, 2025

You might be interested to know that this website was built largely with the help of AI tools, like ChatGPT. Instead of writing every line of code myself, I often described what I wanted to an AI, and it generated the code for me. This post explains how I used AI to create this site and what I learned from doing it this way.

Basically, the process involved telling the AI what features or looks I wanted using plain English. The AI would then try to write the HTML, CSS, or JavaScript code needed. My job was mostly to guide the AI by writing good descriptions (prompts), checking the code it gave me, testing everything, and asking for changes until it looked and worked the way I wanted.

Getting the Look Right with AI Prompts

I started by telling the AI the basic layout: a navigation bar at the top, different sections for Home, About, Skills, etc., and a footer at the bottom. I also specified things like the dark theme and the fonts (Roboto Mono and Space Mono). The AI generated the first draft of the HTML and CSS.

Getting things like the project cards or the skills grid to look right took more back-and-forth. I'd ask for a responsive grid, then tell the AI to adjust spacing, alignment, or how it looked on different screen sizes.

The animated intro section with the moving background shapes is a good example. I described the effect I wanted ("background shapes that change shape and move around smoothly, using the site's colors") and worked with the AI through several tries, tweaking animation settings, shapes, and blur until it felt right.

Creating Interactive Features with JavaScript

AI also helped with the interactive parts of the site. For the logo text effect, I asked something like, "Make the text in the H1 logo scramble when the mouse hovers over it, then reveal the real text, and go back to normal when the mouse leaves." The AI gave me working code, which I then tested and adjusted (like changing the animation speed).

Similarly, for the theme toggle button, I asked for JavaScript code that would switch the theme when clicked, remember the choice using `localStorage`, and update the page's look. For the project filters, I explained that clicking a button should show or hide projects based on their category. The AI generated the necessary code, which I then had to integrate and make sure worked correctly.

What I Learned from Working with AI

Using AI to help code can be really useful, especially for getting started quickly on personal projects. It speeds things up, but it also requires a different way of working.

Here are some key things I learned:

• Clear Instructions are Key: The better you explain what you want to the AI, the better the code it gives you. Learning how to write good prompts is important.
• You Still Need to Check and Refine: AI code isn't always perfect the first time. You need to spend time testing, finding bugs, and telling the AI how to fix or improve the code.
• Understanding Code is Still Essential: Even though the AI writes code, you really need to understand HTML, CSS, and JavaScript (or whatever you're working with) to spot problems, make changes, and put everything together correctly. You can't just trust the AI blindly. You can find more tips on writing prompts here (example link).
• AI is Good for Standard Stuff: It's great at quickly generating common code snippets, like setting up basic layouts, theme toggles, or simple event handlers.
• Watch Out for Subtle Bugs: Sometimes the AI makes small mistakes or doesn't think about all possible situations (edge cases), so careful testing is crucial.

// Simple example of AI-generated theme toggle setup
const themeBtn = document.getElementById('theme-toggle');
// Get saved theme or default to 'dark'
const current = localStorage.getItem('theme') || 'dark';
document.documentElement.setAttribute('data-theme', current);

// When the button is clicked
themeBtn.addEventListener('click', () => {
  // Figure out the new theme
  let newTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
  // Apply the new theme to the page
  document.documentElement.setAttribute('data-theme', newTheme);
  // Save the choice
  localStorage.setItem('theme', newTheme);
});
					

Overall, building this portfolio with AI help was interesting. It showed me a different way to develop websites. It was faster than doing everything manually, but it also required learning how to work effectively with the AI tool. It's a different approach to building things, and it definitely has potential.