I've had different personal websites made with PHP during the last few years. Ironically, I never really was a fan of PHP. And my lack of interest in it prevented me from doing anything the way I wanted to.

During that time, Justin Kruit helped me with anything related to my website. He also helped me with the hosting, development, and management of that older one. While Justin was a great help, I could barely do anything with PHP myself, which is what pushed me to try different approaches to building websites.

What's new?

From the start, I knew I wanted to create a website that would evoke Material You — Google's latest iteration of Material Design.

Thanks to Patryk Michalik, I decided to give Next.js a try. It also allowed me to discover the wild world of npm packages. I quite liked Next.js, so I decided to stick to it. And so, during the last year or so, I rewrote my website 3 times. The 1st one in JavaScript, the 2nd one with TypeScript, and finally, the 3rd one — which is the one you're reading this post on — is still with TypeScript, but I put together some knowledge I acquired during that year into it.

During that time, I also tried various CSS libraries. After trying Emotion and Styled Components, I went with Tailwind CSS, which I discovered thanks to Jahir Fiquitiva. With his help, I found Contentlayer too, and Lee Robinson's website, which happens to be open-source. Lee uses various tools I came across during the last year, which I had also decided to use for my website. It helped me figure out how to fix some of my own issues. His website is really well made and enjoyable to look at. I'd suggest checking it out.

I couldn't decide most of the fonts and icons I would use until recently when Google released a new font named Roboto Serif and Material Symbols icons. I believe they both go well together, so I decided to use them in addition to Roboto Flex.

With all of that, I had all keys to create my Material You-ish website. Here's a list of most of the things that helped me build this website:

What's next?

The website — in its current state — is functional. It means it works the way I want it to work. But this isn't over yet. I already have a few features in mind that I would like to add. For example, I was considering adding a page to share various code snippets and another one to share some of my work. I will also improve some existing features, such as the dark mode and the navigation.

As for the blog itself, I already have 2 posts in mind — including one related to Material Design — that I can't wait to share.

In conclusion, this is not over yet. But I would be glad to know your opinion about it on Twitter!

Thanks Kyle Bradshaw and Patryk Michalik for your help!
The header of this post was created using Device Frames