I have wanted to redo my portfolio site for quite a while now. I even had debates with co-workers and people on Twitter as to whether or not it was necessary to have a portfolio these days. I can see the point if you are a freelance developer, but I wasn’t convinced that there was a point outside of that situation.

On the other hand, I am a self-proclaimed tinkerer and I always have to be trying out something new. I had been messing with VueJS for quite a while on a personal project, but I was curious about Nuxt. The speed of a static site coupled with the SEO friendliness and simplicity was very appealing but I never had a good reason to dive too deeply into it. I had also heard a lot about Netlify and was in love with the idea of just pushing code to my master branch and having the site build automagically.

That brings me to this site. It struck me, “Why don’t I just rebuild my portfolio, add a blog, use Nuxt, and have it hosted by Netlify?” That was all the motivation I needed to tinker again. I created a new repo, started reading docs, and furiously began building my new site.

My initial thought was to build this in such a way that the time to launch would be short. I thought using some out-of-the-box solutions would make this project something I could throw together quickly and easily. I may have been correct, but I’m also a control freak! My first repo used Storyblok as a headless CMS. I followed a tutorial to get things going, and it seemed very promising. This would allow me to write blogs from Storyblok’s editor from anywhere. After completing the tutorial which used Storyblok to also layout a few of the views, I decided I would just create the views using VueJS and only use Storyblok for the blog sections. I went to town and created something I was happy with as a basic start. I signed up for Netlify and tried to deploy, but my build errored out. I jumped back into Visual Studio Code and ran the generate npm script and recreated the problem. I realized that the way I had wired things up meant that Storyblok needed to run the views. That wasn’t what I wanted. After spending a little time trying to work around this, I had the idea to just roll my own solution.

It didn’t take much searching to find inspiration for this type of solution. I based my solution off of an example I found and catered it to my specific needs. Basically, I can write a md file and place it into “content/posts/“ and the corresponding folder (in my case ‘gaming’ or ‘coding’ since I have developed a blog for each topic). I then add the entry as an object to the corresponding js file that merely exports the array for that blog section.

export default () => [
  {
    id: 1,
    slug: ‘test-coding-blog’,
    title: ‘Coding Blog Test’,
    created_at: ‘02/18/2019’,
    intro: `This is a test of the whole glogging setup. We’ll see if it works!`,
    image: ‘/images/me_8bit_scanlines.jpg’,
    meta: {
      id: 1,
      keywords: ‘coding, blog, test, developer, nuxt’,
      content: ‘Coding Blog Test’
    }
  },
  {
    id: 2,
    slug: ‘hello-foo-bar’,
    title: ‘Hello Foo Bar’,
    created_at: ‘02/19/2019’,
    intro: `Hello Moto! But not really. Testing things and such!`,
    image: ‘/images/me_8bit_scanlines.jpg’,
    meta: {
      id: 2,
      keywords: ‘foo, bar, test’,
      content: ‘Hello Foo Bar’
    }
  }
];

This approach makes it easy for me to create content in a markdown file then send the metadata and SEO information along with it. This couldn’t be much simpler. Couple that approach with the fact that Netlify has a webhook on my master branch that auto rebuilds the site for me and this just made sense.

I know I’m not the first person to take this kind of approach. I am a big fan of it though. The result is a simple portfolio page with a blog for which creating content is easy and speedy. I get SEO friendly site and don’t have to mess with the deployment, server upkeep, SSL certs, etc.

The biggest obstacle I’m facing now is design inspiration. I went with a retro/8-bit game look because it directly ties in with the fact that I’m a very passionate retro game collector and enthusiast. I’ve never enjoyed trying to design a layout and basic design language for a site or app. Admittedly, that is where my main weak points are in front end development. In my current position, things are mocked up by a UX designer and then a visual designer first allowing me to focus on the solution creation and implementation and just make sure it turns out looking pixel perfect to their vision. I much prefer that kind of work. Maybe I’m just rusty since I’ve been that kind of spoiled for a while now?

At the time of writing this post, my site is 3 days old in a very experimental state. Most of the views aren’t yet created and the few that are exist mainly as skeletons of what I want them to be. I have big plans, I just have to have a clearer design vision before they can come to existence. Until I feel like the site is at a ‘good enough’ state to serve as my portfolio, I’m keeping the Netlify generated URL and leaving my ancient portfolio site at my domain. In fact, my creating this post is merely a product of me testing this setup to make sure I feel happy with what I’ve created thus far. Just know that this site is the wild west at the moment!

If you are interested in seeing the code, check it out here.