Revamp my personal website!!!

2022-01-16

#reactjs

Some story behind

It had been almost a year since I published my first personal website!! Although I only bought my first custom domain name earlier this year, previously I use the default domain name by Netlify. But whatever, during that time, I was learning ReactJS and also started to get into Gatsby as well. Therefore, I decide to test myself to develop a personal website using Gatsby and Styled Components as I take this as a playground for me to try out new technologies that I am interested.

Why revamp?

image.png As you can see the website is pretty ugly as I didn't create any mock UI before developing the site, it was totally "freestyle". However, I am still pretty proud with it is able to show myself, my skills, blog post and more!!

However, there are some stuff that I don't like about the my old personal website:

  1. Stylings - The colour, font, spacings, and alignments really make me wonder why I made this decision before.
  2. Built time - Due to I have multiple blog post and it is getting more and more, the built time is getting longer and longer, sometimes it takes a few minutes (There are lots of articles online discussing this as well, you can checkout if you are interested to know the details).
  3. Technologies - As Gatsby is only dedicated for Static Site and do not have any Server Side Rendering (SSR) features or Incremental Static Regeneration (ISR) available in NextJS. I love to have choice to have more choice for that if I decide to use SSR or ISR in future. (Other than that, I am using quite a lot of NextJS recently, which makes me familiar with this framework)

I personally still think Gatsby is still good and relevant in the market. Probably it is just my itch to try out new things and somehow create another fresh start of the website.

The new personal website

My new personal website is built on NextJS, Typescript, and also TailwindCSS (I don't need to write plain CSS anymore 😂😂).

It was developed in 2 days, with total 4-5 hours of work. I am very happy with the results and the time spent to built this website.

This website is highly inspired by kentcdodds.com which is a ReactJS educator that I really like (His personal website is just another level).

Below are some of the changes I made in this website

  1. I do not host my own blogs again, I host it on HashNode instead, with using blog.sykim.me as custom domain for my blog in HashNode. Here are some reason why I migrate blogs to HashNode.
  • I like to have comments and like section so that I can know what content of mine attracts people and also I can interact with people through my blog posts.
  • I wanna save money by not hosting any backend services (ya... I am a cheapskate) -> HashNode is free
  • There is a newsletter service as well in HashNode.
  • I don't need to push and built my markdown file to publish new blog post. (HashNode have some pretty nice UI & UX, thus, reduce the barrier to post content)
  1. Unify stylings of my website - This new site stylings are more consistent and prettier IMO.

There are 5 main pages in my website:

  1. Home
  2. Blogs - Navigates to blog.sykim.me, which is hosted on hashnode.
  3. Works
  4. About me
  5. Timeline - Navigates to timeline.sykim.me, which is my Polywork page. It shows all my past experience in timeline format, so that people can know what I had did before, and what brings me here.

Conclusion

Overall, I am pretty happy with the new design and also the tech stack choice. The transition process is pretty smooth and enjoyable.

However, there are still much more to improve in this site such as animations, more pages to showcase myself, and more. Definitely gonna add it in along the way (I hope I do).

Before leaving, you can view my revamped personal site here!!

Reactions: 2 ❤️View on Github

No Comments Now