Now, we can finally build the portfolio website with ChatGPT.
To do this, let’s prompt ChatGPT to give us code to build the portfolio website:
Can you create a portfolio website with the following elements using HTML, CSS, and JavaScript:1. Bio/Introduction: This section should have a header tag (H1) that says "Bio." You can use the same text I pasted in the <p> tag of this section. On the right hand side of this section, please use this image: https://unsplash.com/photos/hgFY1mZY-Y0.2. Projects: This section should have a H1 tag that says "Projects." It should also have three cards that are clickable, I will provide the URLs myself. Each card should have the following images respectively: https://unsplash.com/photos/zwsHjakE_iI, https://unsplash.com/photos/hGV2TfOh0ns, https://unsplash.com/photos/s9CC2SKySJM. Please style this using Bootstrap's card component.3. Skills: This section should have a H1 tag that says "Skills." It should list Python, SQL, Data Analysis, and R. Create this in the form of small bar charts - Python (80%), SQL (70%), Data Analysts (90%) and R (30%).4. Contact: This section is the footer, and should have a sign up box that allows users to enter their email addresses and click subscribe. It should have a H1 tag that says "Contact Me."Please style all the code using Bootstrap, and structure it in the form of a portfolio website.
You need to be really specific when asking ChatGPT to write code or to build an end product, which is why I’ve clearly outlined how I want each section to be structured.
I specified all the sections I wanted to create, along with the type of headers I wanted to use. I even provided it with links to images on Unsplash that I wanted to include on my website.
Finally, I asked it to style the website using Bootstrap. This is a popular CSS framework that is used to build beautiful, responsive websites, and reduces the amount of time required to design pages from scratch.
You can change the requirements according to how you want your website to be structured.
ChatGPT gave me some code based on the instructions I provided:
It told me to upload the images for each section myself since Unsplash didn’t allow for direct link embedding and provided me with code for two separate files — HTML and CSS.
I saved them into the same directory and ran the code, and the resultant website looked like this:
This is a simple framework that needs to be enriched with text and image content.
To ensure that we know exactly what changes to be made, ChatGPT has left comments in specific sections of the code that need to be replaced by a text description or picture:
If you don’t already have relevant images of yourself or your projects to include on the website, just download some from Unsplash or Pexels to use as a placeholder.
After including the relevant content and images in the code, let’s refresh the site to see what it looks like:
This looks decent to me, although I feel like some minor changes are required to make this look more professional.
For instance, the navigation bar and the “Bio” sections are a bit too close. They should be spread further apart, and the navigation bar should be made darker for more visibility.
The text in the bio is too short and there is a lot of empty space, making it unappealing to the eye.
Let’s ask ChatGPT to make some of these changes:
Can you do these things:1. Make the navigation bar darker, and separate it from the "Bio" section. They are currently almost overlapping. If you make this bar dark, the text should be made lighter for it to be visible.2. The text in the "Bio" section should be made slightly bigger, as there currently is a lot of empty space at the bottom.3. The "Email Address" text should be made bigger or highlighted in bold, and centered horizontally. The "Subscribe" button, project title, project description, and "View Project" button should also be centered horizontally.
Keep in mind that ChatGPT can overlook one or more of these instructions (it did for me), but all you need to do is prompt it again to remind it of the exact changes that need to be made, and it will eventually get it right.
Here is the final version of the website after ChatGPT provided me with the updated code:
Note: ChatGPT has just designed the contact button, and it currently has no functionality built into it. If you want to get it to work, simply ask ChatGPT to give you instructions on how this can be done using a free email subscription service like MailChimp.
And voila!
We have successfully built an attractive portfolio website with ChatGPT in less than a day.
The next step would be to deploy this website, which can be done in an instant with GitHub Pages.