Back to Posts

Rebuilding my Site

By: Daniel Jimenez | Published on: Apr 07 2021




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.

Duplicate Logo Components

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.

SVG Logo

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.

CSS Variables

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."

The design on Figma

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.


Share:





2022 © Copyright, Daniel Jimenez