Product Design Portfolio in Next.js

Check out my portfolio here

As a jr. product designer, I very recently got laid off, along with my whole team.

That being the case, I had to finally do something I had been putting off...build a product design portfolio! My experience in product design had recently took a coding turn, as our team was required to learn Next.js and build functional frontend prototypes to hand off to engineers. To be honest, I fell in love with it, so I wanted to position myself as someone who's a product designer first, but can add value to teams by being able to dive into the code as well (albeit, in a limited way).

I was originally going to just use a website builder for my portfolio for the benefit of speed...but I decided that since I wanted to continue in my coding journey, I wanted to see if I could build my site from code.

I was on a time crunch because a) I needed to find a job quickly, and b) a place I am interviewing with needed it as soon as possible.

Next.js + NextUI = 😀

Since my experience with frontend code is limited to Next.js, that's what I chose to use.

In my previous job, I had learned coding UI through using shadcn/ui, which is an awesome UI library. However, I thought it could be fun to mix it up and try a different library, so I chose a pretty popular one: NextUI. I found it to be a pleasant library to use, though I prefer the customizability with shadcn/ui a little more.

Wasn't optimized for mobile...yikes

I put about 35-40 hours into it and finally deployed it with Vercel (which was way easier than I thought it was going to be). Realized I had a ton of apostrophes to fix 😂. I then quickly sent it over to the company I was interviewing it with.

I felt good...however, the site wasn't optimized for mobile. A couple friends pointed out that it would probably be good to do that. Since I had sent the portfolio off on a Friday, I knew I could probably optimize it before they even noticed...so the next day, I went in added a ton of breakpoint classes in Tailwind to make it more responsive. There's still some little quirks, but for the most part it works.

Done, not done

Some things I still need to do to improve it:

1. Shorten case studies. Feedback I got was that it was a bit overkill, and many hiring managers don't have time to comb through all the nitty gritty. I knew that they were long, but I prioritized just getting everything out...so I didn't have time to go in trim it down.
2. Add a testimonial section with quotes from folks I've worked with. I have good recommendations in Linkedin, so I should probably highlight that I'm not a random guy with no real experience working on teams.
3. From a code perspective, at some point, I want to go in and convert certain sections/containers into custom components, so I can easily add to my portfolio in the future.
4. I need to clean up some wonkiness in the nav links to section headers. For some reason, when clicking on Contact, viewport often doesn't make it all the way down to that section.

I'm open to any helpful feedback on my portfolio if you take a look at it!