Deciding on a Tech Stack: Frontend
Tags: vue, nuxt, javascript, css
Published: 2020-09-23 15:47:00

This is the second part of my series on building [my personal portfolio](https://chriswray.dev). In this blog, I will cover the frontend stack.

### Javascript/ HTML Templates

When I started exploring frontend stacks for my project, I thought I would go with [Gatsby](https://www.gatsbyjs.com/). I have been wanting to dive into React, and since Gatsby is a static site generator for React, I thought it would be a good place to start.

After a few hours of poking through the Gatsby docs, examples, and plugins, I decided against it.

It seemed like Gatsby was trying to point people to its [themes](https://www.gatsbyjs.com/docs/themes/) and [plugins](https://www.gatsbyjs.com/plugins/) before even showing the ins and outs of the framework itself... Documentation really matters to me. (More on that later)

![Screenshot of the Gatsby Plugins library](https://dev-to-uploads.s3.amazonaws.com/i/ckapgdaxhahg5eexv3sn.jpg)

I looked at [Gridsome](https://gridsome.org/), a static site generator for Vue, but I still wasn’t completely satisfied with that either.

At the end of the day, I decided to go with [NuxtJs](https://nuxtjs.org/). I had explored Nuxt before, and I love their straightforward documentation, and the fact that I have some experience with Vue will be a big plus in the project.

So, for the frontend Javascript and HTML, We have Nuxt + Vue.

#### Why I love [Vue](https://vuejs.org/)
- The documentation! I just love how easy to understand and grasp small things is. I am a self-taught developer, so documentation really matters to me.
- The progressive framework. I like how I have been able to start small with Vue and grow up with it.

#### Why I love Nuxt
- Nuxt takes care of so many optimizations. (Like code splitting)
- The documentation! I love how simple and straightforward it is.
- Vue. I love the Vue framework.

### Styling/ CSS Framework

### Wireframing/Design
At my agency, Soltech, I have used [Webflow](https://webflow.com/?rfsn=3714200.2671db&utm_medium=affiliate) (yes that is a referral link) for the majority of the marketing and branding websites that I have designed. I love it, but for this project, I won’t be utilizing it fully.

#### Two reasons why I’m not fully utilizing Webflow CMS for this project:
- Hosting Costs.
 - I want to invest less than 10$/month on hosting.
- Skills Showcase
 - I want to showcase my coding skills, and developers would probably inspect the code and find out the site was built in Webflow. I don’t want to give people the impression that I don’t know how to write HTML or CSS.

I will use Webflow as needed for wireframing and maybe some for design. 

### CSS Framework
For the CSS, I decided to go with [TailwindCSS](https://tailwindcss.com/). 

Recently, I released [a web app where people can write and share journeys](https://myjourney.page). For that site, I used Tailwind, and I found I really liked how it worked. 

I also have a [TailwindUI](https://tailwindui.com/components) subscription, so for the design, I may use some of the components that come with that.

That is the frontend! My next post will be about the backend of the site.

Look out for more blogs in this series as I continue to document the process of building my portfolio.😊