Next.js recently released 13.4 and made App Router stable. I've learned quite a bit since my first iteration of my portfolio and thought it was time for a change. I still like the UI of my old portfolio and might use it for a blog or docs in the future. But to continue learning and building my knowledge, I needed to apply what I learned.

App Router has a better structure and is easier to understand (at least for me), compared to Pages Router. Instead of having a _app.tsx and _document.tsx, it's merged into one file called layout.tsx. This makes it easier to control the global layout for all pages. The introduction of nested routes and layouts make it a lot easier to share them between pages. And the built-in SEO makes it easier to populate metadata.

Although there's a ton to learn, it was a good time for me to transition over. I mean eventually I would have to update it, so why not jump right in and give it a shot. After all, the entire point of building my own website was to experiment and apply my learnings.

The sidebar navigation was always something I wanted to implement. Now that I was much more comfortable with Tailwind CSS, styling it wasn't as hard as before. I separated the tabs into three different sections to help with organization. And the body content area is now fixed, sort of like the design of a SaaS product.

The Work and Projects tabs are the only ones with the expandable pages. This was an experimental feature that I wanted to try. I thought it was a good way of utilizing the sidebar real estate. To navigate to other pieces of work/projects, instead of having to go back to the previous page. The card design got a slight update with a new vertical style. And the table of contents is now fixed on the right side of the page.

I renamed Notes to Writing to make me write more (but we'll see). It's a place to share my ideas, thoughts and processes behind some of my decisions. Nothing formal or fancy, just words on top of words. Bookmarks, Changelog, and Snippets now have their own individual tabs. Bookmarks is a collection of portfolio websites that have inspired me. I'm going to rework this page in the future and share more than portfolio websites. Changelog is to keep track of the changes for the website. Snippets use to be in Changelog but I wanted it to be separate and accessible to copy reusable code.

While 13.4 is stable, there's still some bugs with some libraries. Need to wait for updates before I'm able to fix them. But they're not that noticeable in the live version. I like this new design, it gives me more flexible and scalability for future additions. Expect more to come as I learn more about Next.js and coding.