Sara Cuni Portfolio Website

Sara Cuni Portfolio Website Home
Explore my journey of learning Nuxt 3, crafting a sleek portfolio for 2D Artist and Animator, Sara Cuni. Discover the tech stack and features!
25th October 2023
5 min read
Portfolio

Introduction

I crafted this website for my sister, Sara, a seasoned 2D Artist and Animator with many years of experience, I offered my assistance in creating a portfolio website to showcase all of her impressive work.

This marked my entry into website development using Nuxt 3. Previously, I had experience with more conventional platforms like WordPress, Joomla, and Shopify. Initially, the transition posed a challenge, especially since I was relatively unfamiliar with Vue and Server-Side Rendering (SSR).

Why Nuxt?

My motivation for learning Nuxt 3 started from a desire to delve into more contemporary frameworks and tech stacks, steering away from PHP. After thorough research, I boiled down my options to two main contenders: Nuxt 3 and Next.js.

While both frameworks offered similar features, I had to pick one. Next.js is more established and uses React, while Nuxt, based on Vue, is still relatively new, meaning it's not used in as many projects.

I found the simplicity and easier syntax of the Vue ecosystem much better suited for the task, considering the simplicity of the project at hand. I didn't need all the fancy features offered by the Next.js framework. Nuxt still provided very similar features (like SSR) but with an easier learning curve. So, I opted for using Nuxt.

The Development Process

Learning a framework from scratch is always an adventure and a challenge. To tackle it, I began by writing a Word document, gathering information on all the technologies compatible with Nuxt and exploring similar projects on GitHub to take inspiration from and analyze their code, paving the way for crafting my own code.

Nuxt Content V2, a Simple and Effective CMS

My search for effective solutions led me to explore some open source blogs that used a system called Nuxt Content, a File-based CMS system used to create pages using markdown files. It was a perfect fit for my use case as I needed a way of creating various pages to showcase all the projects.

by the way, it's the same system used here!

Problems and Troubleshooting

Without a doubt the development wasn't all sunshine and roses, I had to troubleshoot various errors that were completely unknown to the internet and had to dive a bit more into the code to understand what was actually happening. There were three or four occasions where I got stuck for days, facing seemingly impossible problems that no one had encountered before.

That’s the downside of using a framework that’s not as mature as Next.js, However, I managed to always find solutions by dissecting the code bit by bit, performing stunts with NPM, making my own custom fixes and reporting bugs to the community on GitHub. It was quite an experience that led me develop this website using the same technologies.

Conclusion

In the span of about two months, I developed the website and learned more about Vue, Nuxt and TailwindCSS; it was quite a journey into the unknown at first, but i proved to myself that i could move on from older frameworks and languages.

I hope that this article sparked your interest in exploring new frameworks or even developing your own portfolio website. It’s not easy at first, but once you start, half the work is already done!

Pages and Features

  • Homepage (Responsive Video Background)
  • Projects page (Pagination System)
  • Contact page (Form & Captcha)
  • About page

Tech Stack

  • Nuxt 3
  • Nuxt Content V2
  • Nuxt Mailer
  • Nuxt UI
  • Nuxt SEO
  • Tailwind CSS

Live Site

Online soon!