Hello, It's been a while since I last posted over the past few weeks I've been working on my site. I wanted to do things differently and include a few new things that I've learned to make the site better.  While building I encountered "What  were you thinking!" moments, which I will go into detail later on. Also I actually designed the site on Figma to actually build with a plan instead of building things as I thought of them. Overall it was a pain but I think it was beneficial for future updates that may come along.

Here are a few things that I learned and a few "What the were you thinking!" moments.

1. Folder Structure

My Folder structure was a nightmare, there was no organization and components everywhere. It made it had to keep my components and parts organized. I decided to add components into folders to keep things more organized and consistent.

By doing this I was able to find components easier, and easier to identify the purpose of the components.

2. Multiple Components that do the same thing

While I was working on the folder structure I discovered I had multiple components that did the same thing, the difference was styling or the width. I removed  some of the duplicated and develop something more reusable that I could modify using props, instead of hard coding.

Here is the good example of duplicate components, I had 2 Logo components one that was white and the other black.

Instead I opted for using the SVG of my Logo so I can manipulate the SVG rather than using PNG or JPG images.

3. I used CSS variables

I built an todo list using CSS variables to give them a test. Turns out I enjoy using it that I decided to implements in in my Website. Still working in converting the many components, but this will help with my organization and readability.

4. Designed using Figma

I used to code first and design never. I would come up with things to add at the moment instead of planning it out. This time I used Figma to design what I was intending to build. This made it easier since i had a roadmap on what i wanted to accomplish. Instead of adding random items on the fly which contributed to my "Multiple components doing the same thing."

Overall, these changes improved my website and I am able to make changes quicker without having to look through multiple components, to find the things that I need.