In the past few days, I updated my portfolio — including scrapping an entirely new design and starting over. I wanted to share the process as well as a few thoughts that I had along the way.

Next.js 15

My old portfolio was running on Next.js 14. Next.js 15 was officially stable on October 21, 2024, so it was time for the upgrade. The update was straight forward with only one serious change for me related to params on dynamic routes.

writing / [slug] / page.tsx

// Before
interface PostPageProps {
    params: {
        slug: string;
    }
}

export async function generateMetadata({ 
    params
}: any): Promise<Metadata | undefined> {
    let post = getPostMetadata().find((post) => post.slug === params.slug);

// After
type Params = Promise<{slug: string}>

export async function generateMetadata({ params }: { params: Params }) {
    const { slug } = await params;
    const post = getPostMetadata().find((post) => post.slug === slug);

before & after of 'writing / [slug] / page.tsx'

work / [url] / page.tsx

// Before
export default async function WorksPage(
{ params }: { params: { url: string };
}) {
    const projects = fetchWorksData(params.url);

// After
type Params = Promise<{url: string}>;

export default async function WorksPage(
{ params }: { params: Params }) {
    const projects = fetchWorksData((await params).url);

before & after of 'work / [url] / page.tsx'

Previously, params was a synchronous Dynamic API that relied on runtime information, but is now asynchronous.

The folders with square brackets are dynamic segments and are passed as the params prop to the page function. Basically, since params is now async, it just needs to be accessed a little differently.

Tailwind v4.0

I don't have any wild or out-of-the-box styling on my portfolio, but upgrading to Tailwind v4.0 was still exciting. Fewer dependencies, zero configuration, a single line of code in globals.css, faster builds, upgraded colors — the list goes on.

Tailwind v4.0 is a massive update to what was already a great framework. I'm so excited to see what's possible with it.

Removing The Guestbook

In previous iterations of my portfolio, I had a guestbook that visitors could sign. It used Clerk for authentication and Convex as the backend, storing users' names and entries.

I was a big fan of the guestbook, but not many people were signing it. For every 100 visits to the site, less than 1 person signed. It felt like I was holding space for something that was turning out to be less useful than I'd hoped. Because of this, I'm moving forward in 2025 without a guestbook, but I appreciate everyone who signed while it was available!

Thoughts About My Blog

I almost decided to switch from a local directory posts to a database for my blog posts. I decided against this for a few reasons.

• Scalability — I can't imagine having a large enough number of files to meaningfully effect performance (~500+).
• Simplicity — Storing files in a posts directory and using fs and gray-matter to read them is more appealing than worrying about database setup, hosting, backup, etc. I have full control of my content, which brings us to..
• Portability — My portfolio is self-contained. Everything is in one place and ready to move if needed.

Vibe-Driven Development

I started browsing dribbble to find inspiration for a new look. I found this design and really liked it, so I went ahead and spent a day implementing it. You can find it here. The same day that I deployed it, I realized I didn't like it. It didn't feel like it was mine, and that bothered me.

So, I decided that I would just start coding and see what happened. What you see is what I stuck with. I think it looks a lot better than before but maintains it's simplicity so — ignoring the bias for a second — I love it.

I also created a new favicon and og image to go with the new design.

opengraph image

What Didn't Change

Other than removing the guestbook, my portfolio functions exactly the same. It uses TypeScript (obviously) with Next.js, Tailwind for styling, and MDX to render blog posts. The only changes were upgrading dependencies, navigating a few smaller breaking changes, and a complete design overhaul.

Conclusion

Overall, the process was pretty easy. The upgrade guides from Next.js & Tailwind were a big help, and while I'm happy with the new site, I'm sure it won't be long before I decide to break it again.

Thanks for reading! Let me know what you think! & as always, happy coding!