Launching My New Website

I had enough of my outdated and unoptimised website, a relic from my early days I had built with plain HTML and CSS. Since then, a lot has changed. I've had the opportunity to be part of numerous web projects, both personal and professional. I have also noticed many new emerging web related tech solutions. Last week, I finally decided it was time for a complete overhaul of my personal website.

This time, I knew exactly what I wanted: a performant, fast, and personal experience, powered by a modern and powerful stack. Based on my previous projects and research I landed on a following combination: Next.js with React for the frontend, Payload CMS as my management platform and Shadcn UI with Tailwind CSS for styling.

The Old Website

Like I mentioned, the old site was built using plain HTML and CSS. It had a landing page, a gallery for my images, and a showcase of my programming projects. The plain HTML made the site really light and fast. However the pain point was styling the site without style library and unoptimised images that caused big loading times. It also did not show what I as developer was capable in terms of a website. All of these reasons made me update.

The Stack

Today we have more web stacks available than I have fingers (and toes combined) to count. It might be taunting for one to make a choice among all of the options. Objectively there are no right or wrong choice and it might usually come down to the developers personal preference, of course within the projects limitations.

Why Next.js

I have had previous experience with Next.js and React the most, so I was drawn to them first. I knew Next.js's Server-Side Rendering (SSR) and Static Site Generation (SSG) capabilities could make a blazing-fast user experience. The framework can also provide excellent Search Engine Optimisation (SEO) although it is not that relevant in owns personal website. I had came across these concepts a lot, though I hadn't extensively implemented them on a larger scale before. This was the perfect opportunity.

Beyond rendering performance, I'm a big fan of the concept of having a mono repository and single runtime for both the back-end (via API Routes) and frontend. It enables type checking across the whole stack, faster development and easy deployment. Additional features I like are the folder based routing and automatic Image optimisation. Next.js's goal of being a do-it-all framework makes it an powerful framework for modern web applications.

Payload CMS

After deciding on Next.js for the frontend, my next crucial step was selecting a Content Management System. A naive approach would have been to hard-code the content to the source of the website, but that did not appeal for me. Luckily for me I had came across Payload earlier this year in one specific client project. I wasn't just looking for a place to store data, I wanted a modern, flexible, and developer-friendly platform that would be able to scale with me and my needs. I had not had any real CMS experience prior to Payload, mostly because they felt hard to get started with, and I did not want to be vendor locked because of my choice of

Here’s why this open source project stands out so much and why I can not recommend it enough:

Built for and with Next.js: The whole framework is build to work with Next.js. It can be integrated into any Next.js project and provides a "full TypeScript backend and admin panel instantly" as is stated in their Github page. That is a bold claim, and one they deliver on with impressive ease.

Headless by Design: It perfectly complements Next.js by allowing complete separation of content from presentation. This freedom means I can query my content via a clean REST or GraphQL API and build any kind of frontend experience I desire, without the limitations of a monolithic architecture.

Config-as-Code: This is where Payload truly shines in my opinion. Instead of clicking through a UI to define content types, Payload allows you to define your entire data schema programmatically using TypeScript. This "config-as-code" approach means:

- Version Control: The content structure is part of my codebase, trackable by Git. Payload also creates automatic migrations that are also automatically tracked by Git.

- Type Safety: Payload automatically generates TypeScript types for all my collections, enabling end-to-end type safety from the CMS all the way to my Next.js frontend. This prevents bugs and improves developer experience by reducing context switching.

- Rapid Iteration: Defining collections and fields in code is fast and intuitive once you read trough the docs and look up some examples.

Self-Hosted & Full Ownership: Unlike SaaS CMS solutions, Payload is self-hosted. This gives me complete control over my data, infrastructure, and deployment.

Admin UI & Customization: While developer-focused, Payload also allows for extensive customisation of the dashboard. I can easily tailor the dashboard, add custom components, and configure field layouts to create any content management experience, rather than adapting an generic system.

Payload CMS Admin UI

Integrating Payload with Next.js is a seamless experience. It genuinely feels like magic, having an instant admin dashboard with login, version control, migrations, extensibility and all the bells and whistles one could wish for in a single code base.

Shadcn & Tailwind CSS

Crafting the visible layer of the website was just as crucial as the backend. I've felt frustrated by traditional UI libraries or bogged down by endless CSS overrides. Funnily enough I found out even more (precrafted and smart) css classes was the answer.

Tailwind CSS:

Tailwind CSS was a clear choice in todays style market. Its utility-first approach fundamentally changed how I style. I still remember how blown away I was of the concept when I first tried it. I spend less time context-switching between HTML and CSS files, keeping me focused and speeding up development. Even though tools like Sass make CSS more bearable, I am more in favour of the utility-class approach. Adjusting styles is instant and intuitive and they live right inside the component. Tailwind provides a consistent design system through its scales, while still offering granular control when one needs to step outside the box.

Compare this CSS class to the Tailwind approach

1/* CSS */
2.class {
3	padding: 1rem;
4	display: flex;
5	flex-direction: column;
6	justify-content: center;
7	gap: 0.5rem;
8}
Copy

1// Tailwind 
2<div className="p-4 flex flex-col justify-center gap-2">
3	{content}
4</div>
Copy

Especially when using a complete component library most of the styling one will be making will be regarding the layout. Tailwind allows you to write the layout right into the component without separate files.

Shadcn UI

Shadcn UI isn't a typical component library, in the sense that you download a package. Instead of installing a rigid framework, Shadcn provides highly accessible, pre-styled components built on Radix UI primitives and Tailwind (See how the pieces start falling together) that you copy directly into your project. This means that you "own" the code of the components and can make direct adjustments to the source. Again all without leaving your websites repository. How awesome is that!

This "copy and paste" method means I can tweak every line, every prop, every Tailwind class without fighting an abstraction or fearing an update might break the component. This offers unparalleled flexibility and makes deep customization easy.

Beacause all of the components are leveraging Radix UI -primitives means robust accessibility out of the box. Features (like keyboard navigation and ARIA attributes) and cross browser support saving me significant effort, time and ensuring an inclusive user experience regardless of the browser.

The defaults are clean and modern, giving one a great starting point without having to design everything from scratch. There also exsists many tools online for creating a custom theme for crafting an unique look and to stand out from the masses. That is also made easy by having just one style file for the whole library.

Together, Tailwind CSS and Shadcn UI deliver a really powerful, flexible, and genuinely enjoyable way to build the frontend. I have complete control over the look and feel, while still benefiting from well-engineered, accessible component foundations. This duo dramatically streamlined my UI development, turning what can often be a chore into a creative and efficient process. It is no wonder the combo has gained immense traction over the last few years.

Putting the Pieces Together

After exploring and choosing the technologies, the next logical step was to start implementing the stack. Luckily there was a really well crafted boilerplate made by Payload CMS developers. It provided all of the tech choices I wanted (Next, Payload, Shadcn) and a solid foundation to build on with bunch of features.

I got a working site up and hosted in just one afternoon and the rest of my day I spent configuring it. Payload CMS provided all of the features out of the box like, admin user authentication, ability to create basic pages / routes and even writing blog posts. Not much was needed to do the get a result I was satisfied with. The power of config-as-code meant that tweaking these features was intuitive and everything integrated right with Next.js.

I kept tuning what was already a solid base. I changed the site colour scheme to my own, adjusted logos and favicons, adjusted crucial SEO settings and configs, changed the font, and adjusted bunch of components to fit me better.

It feels surreal that I am writing this very blog post from my own CMS and to my own website that I am hosting and in total control over. This initial launch is just the beginning. The foundation is really solid, and I'm incredibly excited to continue expanding with new features like detailed project showcases, interactive elements, and further content enhancements.

Summary

In summary, adopting Next.js, Payload CMS, Shadcn UI, and Tailwind CSS has redefined my web development experience. If you're seeking to build a website that truly performs, scales, and pleases both you and your sitevisitors, I can wholeheartedly recommend this stack.