Hacking Together My New Portfolio

Developing a portfolio can be a daunting task. In the past I’ve had a hard time finding the right branding and design. I can never call it “done” and feel satisfied. I tweak a color here, change a font there, and next thing you know I’m experiencing decision fatigue. However, I recently found a way to hack the process and get myself over the hump. It all starts with cheap Envato designs.

Design

I, like many developers, just want to build. Sure, I enjoy a good user experience - but as I mentioned, it’s easy to find myself exhausted from making all the design decisions when I just want to build out a home for myself on the internet.

Recently, I started taking inventory of all the templates/themes/designs on Envato. To my surprise, I actually had a handful of interesting designs/resources (my attitude going into it was that they were all too niche or too old). I started collecting HTML/CSS from specific patterns and designs I liked and the next thing I knew - everything I need to piece together a portfolio was at my fingertips.

Implementation

After finding patterns I wanted to emulate, I was ready to build. The thing is, I’m a developer. I want to play with shiny, new frameworks and technologies. Knowing that I’ve been working with Vue professionally for about six months and enjoy practicing within that ecosystem, I reached for Nuxt.

At first, I built full-blown pages in ./pages with the basic HTML/CSS from the design. As I progressed through each page, I started pulling things out into components and things were really starting to take shape. Now, of course, is the daunting task of creating content to fill the space… Luckily, over the past few years I’ve generate some of the basic bits and pieces I needed to kickstart this process.

Optimization

Bootstrap has been an obvious tool for cranking out designs, so everything I had collected was written in Bootstrap 4. Nowadays I think we all see the buzz around Tailwind and it’s truly something I enjoy working with - so I set out to convert everything to Tailwind. This is a trivial task - so the first pass I ran through ChatGPT to knock out the easy conversions. This made walking through each page fairly simple - as I knew exactly what to expect.

Migration and Next Steps

As I write this I’m still using Nuxt in my new portfolio. That said, I’ve been enamored with the concept of Astro. Within the next few months, I plan to clone the repo and convert it to Astro, purely to gain experience using another framework and toolset. In the meantime, I’ll keep exploring Nuxt and plan to document my experience in another post 🙂