Using ChatGPT to Code an Entire Portfolio Website

With the growing popularity of AI tools, I investigated how useful ChatGPT could be for creating a brand new website from scratch. Needing to refresh my personal portfolio website, I decided to use ChatGPT to rebuild the whole thing from the ground up.

Portfolio websites are often an unspoken requirement for software engineers, designers, and many others. For less technical roles, using a no-code tool like Squarespace works well, but for many others, there is an expectation to create something custom from scratch. At a minimum, this work is tedious and time consuming, but it can also be a barrier for less experienced engineers who don’t know where to start as well as those not as comfortable with frontend development.

I ended up trying hundreds of different prompts across several website attempts. I will share where ChatGPT excels, where it doesn’t, and how you can most effectively use the AI tool.

You CAN use ChatGPT to build a portfolio website in record time.

By asking ChatGPT to create a portfolio website using create-react-app, it showcases a pretty strong understanding of the basic boilerplate and components needed to build a functional website.

Here was my ChatGPT prompt to get started:

Can you show me the react code for a personal portfolio website using create-react-app and react-router-dom. It should have pages for Home, About, Portfolio, and Contact

See the full response here.

Based on that single response, I created the corresponding files on top of my create-react-app template. And tada 🎉, I had the functional structure of my personal website:

After that, my steps were roughly as follows:

• Ask ChatGPT for more content the each page, then customize with more accurate information

• Ask ChatGPT to add styles for each page

• Tweak the pages if needed, and move on to the next page

  
  

I then added some custom generated images from DALL-E, deployed with Vercel, and had my custom portfolio website up and running in only ~3ish hours of work. And here it is, live: https://www.keenanzucker.com/

Where ChatGPT excels:

Creating and iterating quickly

Starting a website from scratch can be intimidating due to blank canvas syndrome. However, ChatGPT can assist by quickly and accurately generating boilerplate code, which can be easily copied and pasted into one's editor for immediate visualization. With ChatGPT, one can simply ask for more content or different styles and paste the entire file into their editor. Additionally, iterating on existing React components is simple, as the current file content can be pasted as a prompt for changes. This approach does not necessitate an in-depth understanding of languages and frameworks typically required for custom site creation, such as React.js or advanced CSS.

Writing basic but clean CSS

ChatGPT does a solid job creating styles that are simple but clean. For example in my basic Navbar component, I asked ChatGPT to add icons and some styles.

The prompt was Now on that Navbar, can we add icons using react-icons; show 'Keenan Zucker' in the top left, and have the other links on the right side? . The results were great:

There are hover states for the buttons, nice icons that are appropriate for the context, and even a nifty </> icon next to my name. Again, this took only one prompt to style the full navbar component.

Writing unique CSS

ChatGPT can also create custom CSS styles like an animated rainbow gradient. These styles, including animations, normally take far more work and trial and error to get working correctly.

Prompt: I'd like a rainbow gradient that smoothly transitions across the rainbow in a continuous loop

And the resulting code:

.rainbow-gradient {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8f00ff);
  background-size: 1800% 1800%;
  animation: rainbow 10s ease infinite;
}

@keyframes rainbow {
  0% {
    background-position: 0% 82%;
  }

  50% {
    background-position: 100% 19%;
  }

  100% {
    background-position: 0% 82%;
  }
}

When added to the Home component, the resulting page has new flair.

Debugging common issues

All developers use tools like Stack Overflow to search for error messages to debug issues. ChatGPT has clearly been trained with that data and more, and can debug common issues. This is particularly helpful for less experienced developers who haven’t honed their debugging skills. It can also keep the previous messages in context, so ChatGPT knows what the error is referencing. This is because ChatGPT uses previous prompts and responses from the current conversation as additional inputs.

Suggesting ideas

ChatGPT can also be used as a tool for brainstorming. I was feeling stuck on how to make my website stand out, so I asked for suggestions:

Furthermore, ChatGPT can followup with these ideas by showing the code for any of the resulting ideas.

Common Pitfalls of ChatGPT

More intricate CSS

While ChatGPT excels as basic CSS styling, it can get stuck on more difficult styling tasks. For example, I asked for it to make a Cat:

Prompt: I would like to create a react component called Cat that displays a Cat that's created only with dom elements and css. Can you show me that?

While the code looked promising, including DOM elements and styles for the head, tail, ears, face, paws, etc, the resulting output looked like this:

I tried again, and here were the results:

Confidently wrong answers

ChatGPT is always confident in its answers. It can simply be wrong, but will never convey doubt or skepticism. In my original prompt, when running the code, I got an error export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' This is because the newest version of react-router-dom doesn’t use Switch, a detail ChatGPT missed.

So be careful, and take answers with a grain of salt. But at least ChatGPT owns up to its mistakes. What a model for taking criticism!

Forgetting the context of longer messages

There is a limit to the input ChatGPT can handle, which is 2048 tokens. When having longer conversations, ChatGPT can ‘forget’ previous decisions. For example when using <Routes> instead of <Switch>, later in the conversation I asked for an update to the App.js, and it gave me a component that had <Switch> again. This was pretty easy to fix, just asking it to can you please use Routes instead of Switch, like we discusses before? and it spits out the corrected component.

Long messages can get cutoff

There is a 4,000-character output limit enforced internally for ChatGPT 3.5. Sometimes, the prompts cutoff before finishing, which could cause some bugs if copy+pasting. But simply asking to please continue would get ChatGPT to finish the rest of the file.

Tricks for ChatGPT

Be as specific as possible in prompts

If you want to use a specific package, like a UI component library, or Tailwind CSS, include those details in your prompts. Generally, the more information that ChatGPT has, the better the output will be. For example:

❌ Add some content to the About page

✅ For the About page, add a Skills section that displays skills in: React, Node.js, CSS, Postgres, and GraphQL. Also add a section for links to blog posts, and a profile image

Ask to try again in a different way

The code doesn’t always work and debugging them can be tricky. I sometimes got stuck trying to figure out the solution, and my prompts to ChatGPT felt like they were going in a loop. Simply asking Can you rewrite that component in a different way can help start again fresh and perhaps avoid the issue altogether.

Use your code as an input in your prompt for more precise changes

ChatGPT can take in a large input in the prompt. By including existing code in the prompt ChatGPT will make changes more effectively. For example:

Here's my Home component:

import React from 'react';
import './Home.css'

function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <p>Welcome to my personal portfolio website!</p>
    </div>
  );
}

export default Home;


Please add a rainbow gradient background to this page

Prompts like this ensure that ChatGPT will keep the existing pieces of the code and only add new content and styles to the page.

Some fun prompts to try

Stuck? Here are some creative and fun prompts for you can use to help your portfolio website stand out!

1. What are some fun ways to add some flair to the page using free APIs?
2. Can you add a game to the home page for my visitors to play?
3. What types of unique css styling would make the page more fun?
4. Can you show me a component for an Airhorn button that pulls the sound from the internet
5. What's a cool react component that would be fun to add to my website?
6. What fun react libraries or npm packages would help my website stand out?

Conclusion

Overall, I’m impressed with the capability of ChatGPT, in more than simply creating a website. I believe ChatGPT, along with other AI tools, will be a great resource to busy engineers wanting to get up and running quickly, more junior engineers ramping up their knowledge, and non-technical folks learning new skills. It lowers the bar needed to code a custom website, and can be a great learning and debugging tool.

Personally, I now keep a ChatGPT window alongside my normal coding tools on my day-to-day software engineering job, where I use it to assist in debugging, brainstorming, basic coding, and more.

If you’re curious for more, check out the source code of my new portfolio website. Or visit the live site here: https://www.keenanzucker.com/