This is the second part of my series on building my personal portfolio. 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. 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 and plugins before even showing the ins and outs of the framework itself... Documentation really matters to me. (More on that later)
I looked at Gridsome, 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. 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
- 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 (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.
Recently, I released a web app where people can write and share journeys. For that site, I used Tailwind, and I found I really liked how it worked.
I also have a TailwindUI 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.😊
Top comments (3)
Super cool article! Slightly unrelated, but I'm looking into Nuxt for a side project - do you find the static generation workflow to be sufficient?
Thank you! I am new to Nuxt too, but their Static generation feature looks incredible to me. One thing that I like about Nuxt is that they have amazing docs, so you will probably be able to find out how to do what you need to do pretty easily.
Other options for static sites are Gridsome and VuePress, which seem pretty cool.
Ah - will look into those too. Good to know their docs are great!