Create a Personal Portfolio Website with JavaScript and ChatGPT

This article is the first part of a series of articles, please refer to Part 2  for learning how to add a Chatbot to the portfolio website you create in this article!

Creating a personal portfolio is a great way for showcasing your skills and accomplishments as a developer or designer. Does that sound like a lot of work? Well… it doesn’t have to be. We can use ChatGPT to generate code snippets and obtain a lot of guidance throughout the process. This way you can build an impressive portfolio website with minimal effort.

Here’s what you can do in around 10 prompts:

Fig 1: Homepage

Fig 2: Portfolio Page

Fig 3: Contact Page

Not bad, right? And it even contains some features: 

The search functionality works and filters projects based on what you are typing.

The testimonials and projects are not hard-coded, but dynamically populated with JavaScript (but not connected to a backend with a database, so for the purpose of this article, they are hard-coded there).

Of course, this personal portfolio would need more content. And you could definitely use ChatGPT to generate a bit more content and descriptions for it. You should be adding in some professional pictures and images to complete your portfolio. However, this is a project that you can do in half a day to a day using ChatGPT.

The prompt magic

The prompts used to create the personal portfolio follow a few best practices that I’ll discuss later. In the overview below, asking to continue after cutting off a response is not included. If you’d like to see all the responses and the versions of the personal portfolio after each step, you can check out this GitHub repo: https://github.com/BrightBoost/brightboost-portfolio-chatgpt

• Here is the first prompt:

I'm making a portfolio site, using HTML/CSS/JS. Can you help me write the initial framework for it?  

I need a home page, in which I will introduce me, my passions, aspirations and study background. I also need a call-to-action directing visitors to explore my work.

Then I need a portfolio page, in which I showcase my best projects. This will include case studies, and testimonials highlighting my contributions and accomplishments.

Finally I need a contact page, which is a minimalist form and social media links in order to facilitate professional connections.

• And the second:

That seems to be close to what I want. However, could you split these into 3 files? One for each page.

• The third, as you can see, a lot of the heavy lifting in terms of content is done in the prompt here:

Can you populate the pages with the following information?
Name: Olivia Martinez
Study: Olivia recently graduated from the University of California, Berkeley with a Bachelor's degree in Computer Science.
Aspirations: Olivia aspires to become a full-stack software engineer at a tech startup that focuses on environmental sustainability. She hopes to contribute her skills to develop innovative solutions for pressing environmental issues.
Hobbies: In her free time, Olivia enjoys hiking, painting, and exploring the latest advancements in machine learning.
Example Open Source Projects:
- GreenRoute: A web application that optimizes travel routes based on carbon emissions.
- EcoClicker: A browser extension that encourages users to reduce their digital carbon footprint.
Additional Personal Details: Olivia has been an active volunteer at her local recycling center, where she has helped develop a digital platform to streamline recycling processes.

This is what it looked like after this prompt:

Fig 4: Homepage after initial prompts

Fig 5: Portfolio page after prompt

Fig 6: Contact Page after prompt

The fourth prompt was quite a challenge and it required going back and forward a bit and testing it until it was good. It was tempting to just modify it, but ChatGPT was supposed to create it here and it did eventually:

Can you help me modify the following snippet?

```html

      <h2>Portfolio</h2>

      <div class="project">

        <h3>GreenRoute</h3>

        <p>A web application that optimizes travel routes based 
           on carbon emissions.</p>

        <a href="#" class="project-link">View Case Study</a>

        <div class="testimonials">

          <p>Testimonial 1</p>

          <p>Testimonial 2</p>

        </div>

      </div>

      <div class="project">

        <h3>EcoClicker</h3>

        <p>A browser extension that encourages users to reduce 
           their digital carbon footprint.</p>

        <a href="#" class="project-link">View Case Study</a>

        <div class="testimonials">

          <p>Testimonial 1</p>

          <p>Testimonial 2</p>

        </div>

      </div>

    ```

I'm not satisfied with the look. Could you make the following changes:
 

- Each project is displayed in a card.

- The project link looks like a button, in the bottom right.

- The title is underlined, and a bit larger.

- The page shows 2 columns of cards.

Fig 7: Home page after refined prompting

And here’s the fifth:

I need to make sure that footer is always at the bottom of the page, can you provide a CSS snippet to make that work?

This also needed second attempt because it wasn’t working. Don’t just say that it doesn’t work, but be specific:

It doesn't seem to work. The page only uses about 50% of the screen, so the footer is still in the middle.

After this, it looks like:

Fig 8: Homepage after footer prompts

This is where things really got cool, but this needed a few tweaks in terms of output. Here was the first prompt to add JavaScript:

I'd like to make the portfolio a bit more extendable. Can you write some JavaScript code that generates the portfolio page using an array of objects? For now just put the content directly in code.

I forgot a few classes, so let’s prompt again:

This works, but you've excluded the classes used in the CSS. As a reminder, this is how a single item should look:

** code of the prompt omitted

And after this it was good:

It seems the 2 column layout is gone. I think this:

```html

<section id="portfolio">

<div class="container" id="portfolio-container">

</div>

</section>

```

Should contain an element with the class `project-grid` somewhere, which should create a grid. Can you modify the snippet?

The last part was on the search bar, which required this prompt:

I'd like to add a search bar to the portfolio page. It must search for the text in the title and body. I only want to look for the exact text. After each character it should update the list, filtering out any project that does not match the search text. Then there should be a button to clear the search bar, and show all projects. Can you add this to the JavaScript file?

And that’s it! Of course, there are many ways to do this, but this is one way of how you can use ChatGPT to create a personal portfolio. Let’s see some best practices for your ChatGPT prompts, to help you with using it to create your personal portfolio.

Best practices for ChatGPT prompts

• There are some best practices I figured out when working with ChatGPT. Let’s go over them before seeing the prompts used for the personal portfolio.
• Be specific and clear: Make sure your prompt leaves little room for interpretation. For example, the prompt:

Help me with a grid layout.

• Is not going to help you as much as:

For this piece of HTML containing bootstrap cards provide a CSS 
snippet for a responsive 3-column grid layout with a 20px gap 
between columns: ** insert your HTML snippet here **

• Include relevant context and background information: Give the AI enough information to understand the problem or task and help you to its best ability. Don’t ask:

How do I convert a date string to a Date object?

• But ask:  

I have a JSON object with date and value properties. How do I convert the date property to a JavaScript Date object?

• Ask one question at a time: Keep your prompts focused and avoid asking multiple questions in one prompt.
• Make sure ChatGPT completes its answer before asking the next question: Sometimes it cuts off the result. You can ask it to continue and it will. That’s harder when you’re further down the line.
• Test the result after every step: Related to the previous tip, but make sure to test the result after every step. This way you can provide feedback on the outcome and it can easily adjust still. 
• Step? Yes! Break down big projects into smaller tasks: Divide your project into manageable steps, and ask the AI to complete each task separately.
• Bonus tip: You can even ask ChatGPT for help on how to break your project into smaller tasks and make these tasks very detailed. Then go ahead and ask it to do one task at a time.

The good news is these tips are actually great interaction tips with humans as well! I bet you’d like to see some of the prompts used to create the personal portfolio, so let’s dive in.

Author Bio

Maaike van Putten is an experienced software developer and Pluralsight, LinkedIn Learning, Udemy, and Bright Boost instructor. She has a passion for software development and helping others get to the next level in their career.

You can follow Maaike on:

• LinkedIn
• Training Courses