My personal homepage

Why bother re-implementing it?

This iteration of my personal homepage is the third one I've made. The first was created using Next with the Pages router. Then Astro came a long, a great web framework for building static sites. I was very happy with Astro, but I wanted to try out Contentlayer and Next with React Server Components. So here we are.

Next, with the App Router and React Server Components, promises some exciting performance enhancements. For this case, caching the entire page on the server, and only sending the HTML to the client. This means that the client doesn't have to wait for the JavaScript to load, and the page to render, before it can be displayed. The HTML is already there. This is a great improvement for the user experience.

I also wanted a cleaner and more minimal user interface and design for my homepage. I think I've achieved that with this iteration. I have used shadcn/ui extensively for the UI components. It's a great library, and I highly recommend it.

Contentlayer with Next

Using Contentlayer, you define your schema in contentlayer.config.ts. If your .mdx file does not fulfill the schema defined, your page does not compile. Then you write the website content - including the page you're reading right now - in Markdown. This allows the built Next app to be completely static.

Acknowledgements

The visual design of this site is heavily inspired by Anthony Fu's personal homepage, a fantastic starting point for a developer portfolio.