This is my very first contribution in Hacktoberfest so I decided to work on an easy issue with a view to getting myself familiar with the process of contributing to an open source project.
I picked awesome-portfolio-websites as I'm planning to create a personal website so I thought this would give me some inspirations. There was a minor issue related to the styling of Reference page. On this page, each reference is presented on a card. The situation was that these cards' background was white which was the same as the navbar. The project owner wanted to change it to the same color as overall background of the site. This would make the navbar stand out more. In the dark mode, the card background also has the same color as the site background and different from the navbar color so this fix will also help maintain the consistency between the light and dark mode.
I started by reading through the
CONTRIBUTING.md to get hang of how to work with this repo. After setting up, I located the file to be fixed, identified the color that I needed and updated the variable for card background color. When saving the changes, I found that my fix affected another part of the page. I had to inspect it on the browser and figured that there were two different components have the same class name, as I was updating the color under that class name, the other component got a new appearance too. I quickly resolved the problem by using a different class name for the component I was working on.
Taking on the issue, I thought it would be a fix of 1 or 2 lines. However, unexpected issue showed up and I needed to investigate more time on it. The later issue was not hard to resolve but it shows that not everything is exactly what it seems to be. That's why we also need to test, test and test again to ensure that fixing one issue won't lead to other issues.