I started working on this website in January, but things didn’t really work out the way I wanted to. It’s tough to have everything go according to plan when you don’t have a plan in the first place. I knew I wanted to redesign my old website which was was just one static page with a list of my projects. At that time I thought it was enough, and it was, but I wanted to extend it at some point. I wanted to make a place where I can do and show more things, not necessarily related to web development. I guess this is that point.

First priority was finding a blog platform or a framework with a blog implementation. I started learning React last year, so Gatsby seemed like an interesting starting point. Not having to reinvent a whole CMS while being able to customize anything and everything was also a big plus. I decided to work on it for at least a few hours each week, after I was done at the office.

Somewhere along the way I had to switch to a different project which had a shorter time-frame and after that to another one and that pretty much threw me off my course. When I finally got back to it I lost track of what I was doing earlier and I had no idea what my original plan for the website was because, like I said, there was no plan.

I had to make one, and here are a few things I learned while doing it.

1. Write down everything

Having your goals for the project written down somewhere sounds like an obvious first step, right? Except when you just want to start working on the damn thing already so you tell yourself: “I’ll just do it later”. But later never comes.

Write down your project’s concept and outline the essential features. You can use a notebook or any of different desktop or online tools. I used Trello because it’s easy to setup your goals in a form of a checklist without getting bogged down with unnecessary features, but anything else will work for you, as long as you are able to write your stuff down.

Here is my initial list of features I wanted to have, in no particular order:

1. Dynamically generated Projects page

   • data needs to be pulled from an existing file and sent to a React component
2. Blog listing page
3. Individual blog post pages
4. Code highlighting for blog posts
5. About me page
6. Contact form
7. Dark / light mode switch

2. Stick to it

Having a plan is all nice and dandy until you start deviating from it, or worse - ignoring it completely. Work on a feature or on a part of a feature every day for at least a few minutes. Don’t add new features to the list and don’t endlessly extend your existing features (unless you blatantly forgot to write down something essential when planning stuff out).

I didn’t do it, and you probably won’t do it, but you really should strive for it. Any deviation increases your project’s scope and scope creep means your project gets delayed because you weren’t able to stick to a plan (which, by the way, you wrote).

As an example of what not to do - here is my scope creep list:

1. Pagination for the Blog listing page

2. Tags

   • I need to be able to add tags to individual posts
   • User needs to be able to search posts by tags
3. Custom 404 page
4. Blog post archive / history

Except for the custom 404 page all of these gave me quite a bit of headache, and all of it could have been avoided if I just stuck to the plan. Don’t fall into a trap of adding a functionality just because other websites of the same type have it. Do it because your project needs it and because you planned for it.

My blog absolutely does not need an archive, yet. But, all blogs have one so I should add it, too, right? Wrong. An archive / history section is a cool feature if you already have a bunch of posts and your site could benefit from having an easy access to their chronological list. I ended up scrapping it in the end, even though I did learn a couple of useful things while making it.

3. Show it early, show it often

Get feedback as soon as possible, before finishing the project. It sucks to work on something only to realize your finalized functionalities aren’t as functional as you think they are. Your light mode is burning through people’s corneas, your social links are broken and your contact form redirects to a missing page. All of it would have been easily avoided if you had let other people look at your work. Also, you could have done more testing altogether, but nobody’s perfect.

Showing your progress to others also makes you somewhat accountable. You commit to making progress because somebody else expects you are making some progress. Don’t even get me started with all of the “When is it gonna be finished?” questions.

4. Use Source Control

Having my project set up on GitHub and regularly pushing my changes made it super easy to get back into it after a period of procrastination and a computer swap. I just had to fire up Visual Studio Code, pull down my branch, and start working on it.

You don’t need a super fancy app to do it, but you do need something. I used to use GitKraken before switching to GitHub Desktop, but for this project I mostly used VSCode’s integrated source control. Use whatever works for you.

5. Don’t reinvent the wheel

Chances are somebody already made something similar to what you are trying to do way before you even started thinking about your project. They also probably documented it in one way or another and made a blog post or YouTube video about it. Some people make really nice wheels and are really good at showing the wheel making process, and that’s a fact.

Don’t make everything from scratch if you don’t have to. There are plenty of free tools and resources you can use to make your life easier (among those I already listed above):

• If you need free stock images or videos use something like Pexels.
• For free svg or png icons use IconFinder or a similar resource.
• If there is a plugin for a functionality you want to add feel free to use it - that’s what plugins are made for
• If you are in prototype phase or simply don’t want to spend too much time on design feel free to use a free (or paid) page template from TEMPLATED or a similar source.
• If you aren’t sure which colors go well together and you aren’t too keen on learning color theory just yet - there is a bunch of color palette generators and collection tools, such as Color Hunt, Coolors, Flat UI Colors and Color Wheel. I regularly use all of them, because I too suck at choosing the right colors.

6. Finish it

No, really, just do it. Completing stuff is an excellent feeling which will carry over to other things you do. But…

7. Take care of yourself

Don’t let your physical or mental health suffer because you simply have to work on the damn project. It really isn’t worth it for both you and your family members. Being unproductive sometimes and giving yourself time to let go and relax is a good thing. Don’t feel ashamed for it, but also don’t overdo it.

I mentioned above that I worked on two smaller projects before going back to work on this one. While I was working on the second one I got so fixated on making a prototype, and adding all of the features I wanted in the shortest amount of time possible. I wanted to get it out of my system and get back to working on my personal website. I stopped going out for my daily quarantine walks in the backyard and I stopped exercising. Having a bad chair with no back support wasn’t helping either.

Three days later I was in a world of pain. My back were a sore hurting pile of inflammation and I had to stop working altogether. I couldn’t sit down and I couldn’t sleep for days. My extended working hours were completely negated by my lack of care for myself, so that little stunt was completely not worth it.

If you pick up any of these bullet points you definitely shouldn’t skip on the last one because it will affect you on more levels than “just” your ability to work. Others are more of a “good to know that this guy made some mistakes so I don’t have to” variety. Also, finish your projects.