Inspiration?
I started with looking for some design inspiration for this tool. I loaded up dribbble and found a few designs that I liked.
I saw a style that particularly piqued my attention, I saw a lot of designs that followed a more contemporary style. Very functional and focused heavily on typography and whitespace. So I used that as a base and built from there. I then came up with a name for the project... KIT because I saw it as a toolkit for people to use whenever they needed it.
Creating a mini-brand
I used colors that I already used for my portfolio to reuse for the KIT website/social posts. I found them fitting because I believed them to work well with a more minimalistic approach.
I wanted to figure out what the tool would provide for people and how it would provide it. So I started sketching out ideas for a search function and like function. I haven't implemented these features yet, but in the future I do want to make the project more interactive and custom to people's experiences.
Building the tool
So after quickly creating the visuals necessary to start building I dived into Visual Studio Code to actually put the project live. I first started researching how I could create a factory function so I wouldn't have to create a bunch of repeating code.
After that I wanted to put the function in an array which I would then load within the page the factory function itself already had the template literals in it so I only needed to do the CSS for it to render correctly. I also looped through the array so I had the amount of items in it to reflect the number on the homepage. To make my life easier, for the icons I just went to the websites, dived into their code and loaded in the most high-quality favicon I could find.
Reflection
I found it quite fun to start a project like this. I want to keep finding new ways to challenge myself and this is the perfect way to do it. I learned a few new tricks when it comes to developing and it also challenged me to adapt when I found issues along the way. Looking forward to see how this project grows!
