Portfolio Website

The challenge

A creative, fully customizable portfolio site

Previously I had a very simple, template based site through google sites. This was okay for a temporary placeholder site, but didn't allow me to differentiate myself due to limited design and development capabilities. Knowing that differentiation is key, I set out to create a new website from scratch.

The distilled objectives

Create a compelling and performant website with the following objectives in mind:

1. Performs well with SEO metrics
2. Fully responsive to all screen sizes
3. Allows for password protected content
4. Efficient to update and maintain
5. Cheap to upkeep and host
6. Full customizability through access and control over the codebase and CMS

The solution

Nuxt Static Site Generation (JAMStack)

Nuxt.js supports generating a static website based on your Vue application. It is the "best of both worlds" as you don't need a server but still have SEO benefits because Nuxt will pre-render all pages and include the necessary HTML. Also, you can deploy the resulting page easily to Netlify or GitHub pages.

   -NuxtJS site

If you haven't heard about JAMStack I definitely recommend reading up on it. My JAMStack for this site includes Nuxt static site generation, Netlify and Github. The main benefits I've found in this approach have been:

• performance loading times are super fast
• maintainability super easy and efficient to push and deploy updates
• SEO static site generation through Nuxt allows me to dynamically set my meta tags for all my content
• cheap hosting Netlify is a very cheap hosting solution, with virtually no charges up to a certain amount of traffic

Nuxt content CMS

Nuxt content is an amazing package for use with nuxt websites that allows for a git based headless CMS. It has lots of powerful built in features for querying data and displaying it.

This system in combination with the very usable Markdown and YAML syntax has given me an incredibily efficent flow for creating, updating, and displaying my portfolio content.

Scrollable table of contents

Using Nuxt content I was able to grab the table of contents dynamically from portfolio items and use the intersection observer API to keep track of the current header in view. This is then tied to the highlighting of the active header in the table of contents section of each portfolio item.

This gives useful feedback to the user while scrolling content. Any header in the table of contents can also be clicked to navigate to that part of the project. Overall this serves as a useful overview as well to inform the user as to the breadth of the project and what all went into the project.

Password protected content

Using the nuxt-password-protect npm package I was able to design a nice flow around directing users on the site through the process of trying to access protected content and requiring a password. This allows me to protect NDA work from public eyes while easily allowing for private sharing with potential clients/employers.

Particles.js library

The homepage utilizes the particles.js library to create a cool and unique background. After messing with various parameters and options for the particle generation, I was able to achieve a look that felt like me and conveyed a developer/designer vibe as well. This lends credibility to me and my site immediately upon visiting my site.

The results

You're on the site now! I am very happy with how it has turned out. I was able to achieve all of my objectives and then some.

Chrome Dev Tools Lighthouse result

Chrome Dev tools has a handy feature called lighthouse that allows you to test your website on various metrics for SEO and usability.

After some tweaks to aria-labels for buttons, image load times and height/width definitions, and defining meta tags for all pages, I was able to achieve the above results.