Determining the Tech Stack: Front End

This is the second part of my series on building a personal website portfolio. In this blog, I will discuss the frontend stack. The frontend is my weakest part, lacking of knowledge about the frontend. So, I decided to use templates and frameworks to make things easier.

Templates / Frameworks

When I started exploring about the frontend, I thought I would use Nuxt.js because previous projects like link.adityacprtm.dev were built using Vue.js which is the basis of Nuxt.

After a few hours of looking at documentation, samples, plugins and trying to use Nuxt.js, I decided against using it. I know Nuxt is the next generation of Vue, but I’m having a hard time using it and want to finish this portfolio quickly.

In the end I decided to use Vue because of its easy usage and documentation for me who is lacking of knowledge about frontend.

Design / Style

I thought the styles and designs from the previous portfolio were still cool and up-to-date, so I decided not to change the styles. Since I previously used blades from Laravel, I need to convert them a bit into my Vue.js project. Easy enough, and enough to reduce the use of js plugins and be replaced with vue logic.

At the end, for the frontend I don’t use server side rendering (SSR) and use the API to fetch data.

Deploy

Since it is client side rendering, I only need static file hosting. There are 2 options that I got, namely Netlify and Vercel. Both of them provide a good experience for me personally and both have FREE options.

I decided to use Netlify. Why? just like vercel, netlify also provides continuous integration and deployment pipeline. However, I focused on the Prerendering feature which is very useful for this portfolio because of client side rendering, of course.

Thats it the frontend, next blog will define the backend part.