Hello everyone,
I developed my portfolio website from scratch by using the w3school bootstrap 4 tutorial and ChatGPT. In this article, I will explain how to build your own in simple steps.
You can click to see my portfolio website.
Before jumping into coding and ChatGPT, I did a little research on what other product managers’ portfolio websites contain and how they position UI elements on their sites. Then I finalized which sections I should put and what their names are.
I hand-draw a mock-up. It contains sections: navbar, header, footer, about me with social info, summary, services, career, product studies, tools, and sticky contact me button.
About my background
I am a product person with 6 years of experience.
When I was a 17 years old gothic girl, I attempted to write my vampirefreaks profile from scratch with only HTML. The reason is that I wanted to add some authenticity to my profile. Since then, I didn’t commit to coding anything except my homework at university which was generally written in Matlab or Arduino.
I like learning and trying new things. I formerly used Elementor to build some websites. But this time, I decided to give myself and Chat GPT to prove anyone can develop a simple portfolio website.
First Step: Selecting a Programming Language to Play with
I experienced how google bots treat non-responsive websites when I was leading a customer-faced product (solution partners). I am aware that Google won’t rank you high enough or even index your pages if it is not mobile-responsive. That’s why I choose Bootstrap 4 for my product. Bootstrap’s grid system is easy to understand and I used w3schools’ bootstrap 4 basic templates to achieve this. Link
Second Step: Gather images and decide on the color palette
For deciding color palette, I choose an image that I like. I uploaded it to adobe color finder and extracted the HEX codes of the image.
How to extract colors from an image
I tried to be loyal to the %60,%30,%10 rule while determining the colors of the elements .%60 of the design is white, %30 is purple, and %10 is green.
These 3 colors combine well with each other and have a special meaning for women. Internationally purple symbolizes women. Furthermore, the combination of purple, green, and white is a symbol of women’s equality. Read my journey while becoming a woman in tech on this link.
How to find royalt-free images
I used pixabay for downloading royalty-free images. There are thousands of images, pictures, vectors, gifs, and videos on that platform. You can even find free SVG files on it.
How to free host images
To put an image on your site, you need hosting. I used free.image.com to host images.
Here comes ChatGPT
Third Step: Writing HTML and CSS
As I mentioned, I have a little HTML knowledge but not CSS. I used to write style codes inside HTML. And I didn’t do any fancy stuff with CSS before.
I used the w3school bootstrap 4 templates to write the skeleton of my website.
I first started to write style codes on top of the HTML head section but it messed up real quick. So I wanted to make things in order. I asked ChatGPT how to connect a CSS file to an HTML file.
NAVBAR
I wanted my navbar to be sticky while scrolling down, and allow navigation within sections when the user clicks on nav-bar items. I want to change its colors also.
ABOUT ME
I want “about me” to be shown on the image for mobile devices, not under. So I asked ChatGPT how to do it. I used an image downloaded from pixabay.
I want to use icons that lead to my LinkedIn, medium, and GitHub accounts. I asked ChatGPT how to do it and how to connect the font-awesome to HTML code.
SERVICES
I wanted to show text when hovering over an image.
I wanted a responsive font size. I want texts to become smaller when the width of the device is decreased.
How to get responsive font sizes
I wanted to have <h> tags with different styles.
PRODUCT & STUDIES
I wanted to show all details of my work; product description, features, and achievements. It helps people to understand what kind of products you led before. And I led many products and it looked lengthy. I decided to go with a collapse function in Bootstrap 4 with a card deck.
Bootstrap 4 Card-Deck
Bootstrap 4 Collapse Function
TOOLS & SKILLS
I choose a carousel to show off which tools I can use. I want to show multiple images at once and I want the carousel height to be fixed.
How to have a carousel showing multiple images
I wanted to have sticky contact me button which enables users to send me an email.
I want button styles to be different from each other….
FINAL THOUGHTS
I found ChatGPT useful for developing websites even if you don’t know how to code. If you master technical literature, you will get exact answers on the first attempt. If you don’t, you should explain it in detail.
ChatGPT explains the answers and guides you to customize them. You can not use it as it is but still ChatGPT is really helpful.
You can learn how to code with ChatGPT. I believe that learning how to code is not something that can be learned by spending thousands of dollars and going to the course, but it is something that can be learned by making projects.
Have nice day and ❤ ChatGPT
