Journey to a UX Portfolio, Part 2: Nuxt.js and a yarn on UX unicorns

This is part 2 of a multi-part series I am writing while I build my portfolio website.

• Part 1: Setting the stage
• Part 2: You are here
• Part 3: Coming soon!

After a reality check on the amount of time and effort it would take to put a portfolio website together, I have decided to learn a frontend development framework since it’s going to take a while to put the stories together anyway.

My bachelor’s degree is in Electronic Arts, which has since been renamed as Digital Arts and consists of courses from the computer science, mass communication, and arts and visual culture departments — and I must always mention my minor in Psychology. My day job requires a similar skill set: UX design, frontend development, and project management.

I am not sure what it would be like to be focused solely on design, development, or management; it sounds kind of nice, but I also appreciate the variety of kinds of work I get to do! I appreciate the glamour of the term UX unicorn because it’s fun ✨ and there is general consensus that it means you own the complete UX process and are proficient in frontend development.

Someone recently pointed out to me that they perceive the term “UX unicorn” to be dismissive of the other UX titles. I suppose the disclaimer could be made that I have full respect for those UXers who choose to embed themselves in a subdiscipline and go deep in honing their craft; however, titles are somewhat nonsense anyway, and I personally believe if you think someone else calling themselves a UX unicorn makes you feel devalued, you need to take a look within yourself and see if you have some beliefs to untangle.

As a UX manager, I have different needs to fill, and if I have some disastrous copywriting in an application and you are a skilled UX writer, you are my saving grace and the most valuable person I could hire for that job. Know your worth, solve problems for people, and follow your passions within the UX field, and no one will really care what your title is.

There is also a video from Jakob Nielsen warning of mediocrity with UX unicorns. For certain projects that not only have the need for specialists but that also have the budget to allow for them, I would definitely agree. However, for the majority of the projects in the space I’m working in, we have a UX generalist embedded in a production team with developers and a project manager. If we need to pull in a specialist for research or visual design, we would do that, but in our space, they wouldn’t be a mainstay of the production team anyway.

So that was a bit of a ramble and maybe fodder for a full article later on. Today’s article is about getting started with developing my website!

I am writing “Vue” for Vue.js and “Nuxt” for Nuxt.js.

An introduction to Nuxt

When I was attempting to put my website together before, I did some light research on the best way to approach a solution. I looked at no-code platforms, but I wanted to build it myself. I could use Angular, a JavaScript framework we use every day at Buildable, but I want to learn something a little different, and I know at least one of my coworkers is very enthusiastic about it. I had worked with him on a Vue/Laravel application before and seen how it worked then, so I figured it would be easy enough for me to pick it up now.

I asked my friend if he had any recommendations for me to get started. He shared this course on Nuxt.js Fundamentals, using Nuxt, a Vue framework that will help me manage pages and components.

The first look at my new Nuxt app

The project is now stashed in a GitHub repo.

I created a Test.vue file, and I deleted the Tutorial.vue file too quickly and had to instead use the NuxtLogo.vue file as a reference for my experiments.

Extension party

I quickly installed VS Code extensions for syntax highlighting and code snippets (thank you, Sarah Drasner) while creating an experimental Test.vue file. TIL you can’t write straight text (Hello, world!) in the <template> element! It must be placed inside an element (<h1>Hello, world!</h1>).

I was also somehow missing Auto Close Tag, and I have to give a special shoutout to the Code Spell Checker extension. My inner spelling-bee fifth-grader is proud.

I noticed the Nuxt.js Fundamentals course instructor was using some sort of Vue tool in their browser, so I searched for what it might be and found Vue.js devtools.

Next step: Global CSS

I made it to Chapter 2 and will pick up next time with the Global CSS lesson in this Nuxt.js Fundamentals course. I’m pretty familiar with styling and chose to use Bootstrap in my Nuxt app, so I think I’ll speed right along through it to the next lesson for building the navbar!

Exciting times.