TL;DR

Client: Personal
Project Type: Website
Technologies: Gridsome, TailwindCSS
URL: JoeyBentley.com (this site)
Repo: Private

Project Overview

I feel there is no harder task then creating for myself. I want everything to be perfect, but rarely does that happen. This time around things were a little different. It wasn't just about the look of what I was creating that matters, but also the performance, the accessibility and the SEO all have to be spot on. With the help of Gridsome, TailwindCSS and an awesome theme I was able to create a site that accomplishes (nearly) all of my goals.

I've never had a personal website and in the past, when it came to my resume, I've always printed it or emailed a PDF version of it. Taking what I've always tried to fit onto one 8.5" x 11" piece of paper and be given a limitless canvas was awesome, but also a bit overwhelming at first. This opened it up so many design options. I could do this, that or even those things combined, but I really needed to focus on something that wouldn't take me forever to learn as I built. That way I could get something up and going so I could proceed with other life plans.

When it came to a features list, I had several and thankfully Gridsome helped take care of a lot of them. If you haven't heard of Gridsome, you owe it to yourself to check them out. Especially if you are a Vue.js fan. I combined Gridsome with TailwindCSS to create the site you see today. Although I did have to do some learning along the way, it was painless and I'm already looking for my next project to build with the two. Keep on reading if you are interested in how I ended up here, with this site.

Design Time

So, lets get this out of the way now. This design is not mine. This awesome design is a paid theme build by the creative geniuses at 3rd Wave Media. The problem, for me however, is how it was built. They used Fontawesome icons, which isn't a big deal, but they also used bootstrap. Don't misunderstand, bootstrap is awesome, but that wasn't what I wanted to use. Instead I chose the awesome-r TailwindCSS. If you have any experience in what I'm talking about then you know this meant I had to rebuild the entire site, page by page.

This seemed acceptable, but the process of rebuilding took some time. It was the first full site that I had built using TailwindCSS and I had some adjusting to do from my normal workflow, but now can't imagine it any other way. My final design does differ from the original template in minor aspects, but most, if not all, were intentional changes. Is it perfect? Ha! Of course not. The biggest source of disappointment is with the interactive animations. I could also call out a dozen or two nit picky, minor things, but I wont do that to you.

Make it Work

The other aspect of this project, aside from the design, was the functionality. For this, I turned to Gridsome. Gridsome is a static site generator built around Vue.js and GraphQL. At the point of starting this site, I had only played around with some sandbox projects in vue, nothing specifically with Gridsome. I also hadn't done anything with GraphQL, although, it was on my get-to-one-day list. Gridsome comes with so much out of the box and I found it extremely easy to get started. If there was one 'bad' thing, it would be that Gridsome, as of building the site and writing this article, hasn't reached v1.0.

Gridsome being in a pre-version 1 status hasn't really been too much of an issue except for when it comes to the documentation. I have found myself, in multiple instances, wishing for more when it came to directions. One awesome benefit that came from this was the opportunity for me to contribute to the project and become an open source contributor which was awesome. Hopefully the first of many.

I didn't start with a Gridsome Starter. Though I did take bits and pieces from a couple of them. If I was to start over, I would probably start with the Bleda markdown starter. When I started my site, either that didn't exist yet or I somehow overlooked it. I found it later and took a lot of what they used and applied it to my site, if I hadn't already. All my articles, blog and portfolio, are written in Markdown (what I'm writing now) and then at build time, its compiled to html (what you end up seeing).

Gridsome provides a lot out of the box, as I mentioned, but there were some other things I wanted or needed in order for my site to function. Some of the plugins and dependancies I'm using are:

@fullhuman/postcss-purgecss Postcss plugin that removes all the unused utility classes in your css. Using it made my css file only 4.5 KB.
@gridsome/plugin-google-analytics Added for curiosity mostly, but it lets me look at how traffic is coming to my site and what happens when they get here.
@gridsome/plugin-sitemap This plugin generates an xml sitemap for the entire site. Which has been shared with Google.
@gridsome/source-filesystem This adds the GraphQL layer, allowing me to fetch the article data.
@gridsome/transformer-remark In order to compile the Markdown files to HTML, this plugin is required.
gridsome-plugin-remark-shiki Adds syntax highlighting in code blocks.
medium-zoom Adds image zoom functionality similar to medium.com.
moment Handles, displays and converts dates and times.
postcss-import Postcss plugin that transforms @import rules by inlining content.
postcss-nested Postcss plugin that allows for nested css, similar to SASS. Used in the styling for the markdown file.
tailwindcss A utility first css framework built by Adam Wathan and others.
vue-ripple-directive Adds 'icing' to my site by the means of a ripple effects on button click.

Deploy it to the World

If I had a dollar for every good thing I have read or heard about Netlify, I wouldn't need to create a new site. Well, at least not for getting jobs. Seriously, there's not a day that passes that I don't hear something about them and its never a bad thing. They have to be doing something right.

So well before I finished my site, I knew it was going to be deployed on Netlify. Using them would simplify my life so much. Bye bye DO droplet. Even though I had watched a few people deploy to Netlify and heard countless discuss the process, I was still amazed at how easy it was. I could have made the process a bit simpler if I had Netlify register my domain, but even without doing so, it didn't really add any complexity.

If you visit my contact page you can submit a form that sends me a message. This form takes advantage of the Netlify forms functionality. Which adds server functionality without truly having a server. If that means nothing to you, but you're interested, I urge you to look into Netlify.

Oh, and the best part of all, its all *FREE!!!÷

Now what

Well the site is done, but it isn't done. I have a few things I want to adjust. Some need a dust rag, others may require a hammer, but none of them are too major. I'd say the biggest of them is some logic that I'm not thrilled with that I intend to refactor soon. Otherwise, the base is built.

From here, I do plan to add to it. Add a kick ass project here and there or share something cool from my life. Guess we'll see.

Thanks for reading.

Personal Website