Personal Site / Portfolio

Posted: 5/9/2021

Update: This blog post is about a previous iteration of my web site.

I figured that it would be fitting if the first project that I talked about on my site would be the site itself. A personal site is something that I had been meaning to make for a while, and I’ve had a few sorta sites before, but this is the first one that has really come to fruition.

Goals:

• Show off my projects: I’ve made some cool stuff (like this site) that I want to show off.

• Show off my photos: I’m definitely not a photographer, but I like take pictures and I don’t want to flood Instagram.

• Write about a bunch of stuff: I’m sure that people are tired of me venting about everything, so I want a place to put that stuff.

• Learn more things: I learn best by doing, so what’s a better opportunity than my own site that doesn’t have any timelines or existing infrastructure to worry about?

Tools Used:

• WordPress

• Vue.js

• Nuxt.js

• Netlify

Choosing the Tools:

Going into this project there were two things that I knew that I wanted to do with it. Familiarize myself with headless WordPress, and get some experience with static site generation.I have a lot of previous experience with traditional WordPress, so to me it made sense to go with a CMS that I was very familiar with as the base. I did that so I could focus on front-end technologies, instead of risking frustration by going into unknowns across the board. Headless gave me the opportunity to work with a version of WordPress that I didn’t have a whole lot of experience with, and to avoid spending too much of my free-time fighting with WordPress and its plugins. I feel that I do enough of that during the work week.The next piece of the puzzle was the front-end library. I chose Vue.js since it was something with a lot of support and documentation that I had never worked with before. I initially concerned React, but I have worked on a few projects with before, so it felt like I would be squandering a learning opportunity if I didn’t go with something new.From there I needed a framework, so that I could get my static site generation done, without busting out C# and many more hours. The headless WordPress tutorial that I was working through made use of Nuxt.js, so that’s what I went with. I wish there was a more insightful story there.

The Process:

My first big hurdle to clear for this site was the design. Until very recently, my web experience was largely back-end development. Initially I had planned on using Bootstrap, but I decided that I wanted to build something that I could say was my own. I had a basic grasp of CSS knowledge going in, but I needed to fill in a lot of blanks. Through a smattering of tutorials and shadowing designers that I work with, I managed to come out with a design that I’m happy with.Once I had my layout, it was a matter of converting the site into Nuxt pages and components. That part went pretty fast and smooth, with only a few exceptions. It took me longer to realize than I would like to admit that there are some distinctions between Nuxt components and Vue components. I also came to the realization that the tutorial I was following for Nuxt was a little out of date, and because of that I wasn’t generating static pages at build.When it came to hosting, I had heard a bunch about Netlify, so I figured I’d check that out. The process was super smooth, and I can’t think of any way that setting up things like forms and deployments could be easier. One of my goals for the site was speed, and I’ve been very impressed so far.From there all that was left was to write some content and finish up what I had already started.

Next Steps:

I still need to figure out how I want to display my image galleries. I have the storage and delivery set up, but I haven’t quite decided what the gallery should look like, and how I plan on obtaining that.