This Website

Overview

I programmed this site with Nuxt, Nitro, Vue and Tailwindcss to create this expandable, modern and maintainable website. The first iteration of the site utilized Nuxt v2 and an older version of Vue, but I decided to update the frameworks and style to what you see now.

Design and Ideas

When I initially created this website, I wanted to impress the user with something unique. I initially implemented my Space Scroller game into the background of the home page. I found it to be a fun and unique way to draw users into my site. However it was quite distracting from the content, so I eventually decided to change it to the Helix Skill display at the bottom of the home page now.

I also wanted this website to reflect a little bit about myself. One way I found to be effective was the simple additions of the SVG underlines and dividers. These gives the website a little bit more style and heart that was missing when using regular underlines and squared up dividers.

A Short Note About Colors

One thing that I am always working and improving on is my eye for color. When creating this website and selecting the colors, I found it challenging to decide on exactly the theming I should go for. I ultimately decided to go for a simple background color scheme with a light and dark mode. Having to pick colors for both modes gave me an opportunity to select more colors, and to automatically have the colors switch when the theme switches. This is something I am always working on and will definitely continue to experiment with.

Updating

One challenge I faced was updating Nuxt v2 to Nuxt v4. I also decided to update Node and Vue at the same time to the latest releases. This was a challenge for me as there were many different changes in the way a lot of the frameworks and packages work. This would lead to fatal errors or even more subtle ones that weren't as obvious. I decided to start the app from scratch and reference the older code to understand where I could improve the structure, layout and design. Ultimately, I was able to convert everything from the older and outdated frameworks to the latest releases with all of the functionality I wanted.

What I Learned

Updating an application from an older framework to the latest release can introduce unexpected challenges. Things like object structure, or the properties and their naming scheme can and will change dramatically between major version updates. Understanding these changes are important when doing this conversion.