23 changes to my website in 2023 | Blog

Table of Contents

Introduction

I think there's always room for improvement and I consider my website a great place to also put into practice the things I've been learning both professionally and off-work.

If you check my blog posts list you might notice I update, redesign and even rebuild my website from scratch every now and then. About one time per year at least 😅

So, let me share with you 23 changes I did for my website recently…

What changed

The greeting in the home page now includes the name of the country you're visiting my website from, and I added my social links in the description.
The projects grid has been modified into a list. It previously had to calculate the columns size based on the screen width, but it caused a weird and ugly layout shift due to said calculation taking a second or two. (Thanks for the feedback, Ed)
I removed the inspiration and contact pages. Inspiration was hardly ever maintained and just added noise to the footer in my opinion. Contact was too small in terms of content, so I moved it into the about page, to complement it.
Added new photos to the about page. A new random photo will appear every time you reload the page.
Improved the writing and content of the about page. I wanted it to be both semi-professional and casual, so it is now split into two sections. The first one includes information related to my work and projects, the second one just more personal details about my life, hobbies and whatnot.
The blog page stays almost the same except the post details (date, reading time and views count) have a slightly different look. Which also was changed in both the blog posts list and the blog post page, providing some consistency in both places.
The blog post page has a slightly modified layout to make the content easier to read and the ui more consistent overall.
It also includes a collapsible Table of Contents, so if you wanted it to, it won't get into the reading flow.
Code blocks in blog posts have been improved. I moved from rehype-prism-plus to rehype-pretty-code. I did this change mostly because I saw it in Lee Rob's website source code 😅, but I think it makes things easier to set up, like code titles and line highlighting and more.
With the previous change, I can also theme the code blocks with my favorite VS Code theme: Pace Theme. To me it looks way better and I don't have to define colors for every token in a code block 😅
Some of the images around the website can be “zoomed” now. It just increases the image size a bit, but I thought it was a nice detail to have. I must admit I took this idea from Joel Califa's blog
The search for blog posts and projects is gone. This allowed me to keep these pages as server components. You can still use the browsers Find option to look for content. Using the ctrl + F or cmd + F shortcuts.
The donate page has some changes to make the content easier to read. I also am listing all my active sponsors now. Before, star tier sponsors were not included, but not anymore. I'm really thankful for every person that supports my work.
The uses page has a completely different interface now. I have organized the content into tabs, making it easier to navigate or focus on a specific section if you will.
The dashboard has been modified to include less stats about my social networks (followers counts specifically) and make it more focused on my content, projects and sponsors.
I liked having my Instagram feed in my about page before, which showed the six most recent posts. Now, I have made it into a single random post out of those six, and it's part of the dashboard.
I removed the list of my top tracks, the songs that I have listened the most in the past 4 weeks. I only kept the song I'm currently listening to or the last one played. If you're still interested in my top tracks, I have created a playlist that is automatically updated every day. Feel free to check it out at tunez.jahir.dev
The dashboard grid had a blank space that I didn't know what to put in, so I decided to add a link to my bento page. It is also a collection of links for different things related to me and also links back to this website (recursion much (?))
The footer now includes a button to scroll back to top. The website already included a floating button, but it hides when you get to the footer to prevent it from blocking some content, so it felt good to have another button in the footer too.
The toolbar now has three states: normal or resting (no shadow), elevated (subtle shadow) and hovered (more prominent shadow).
The text shadows colors are lighter, the gradient colors are more vivid and some animations or transitions are more subtle now (again, thanks for the suggestions, Ed)
Probably the biggest change is not in the interface, but behind the scenes. The website is now built using the new Next.js App Router, which allowed me to have server components and improve the website's overall performance significatively. Thanks to Dylan for advocating for App Router, convincing me to switch to it, and providing additional help.
Along with this change, I decided to move from Stitches to Tailwind CSS. After being away from the website's codebase for a few months, getting back to Stitches made me feel a bit lost. Now with Tailwind CSS many of my styles and components where simplified, which I hope improves the developer experience in the future. Not just for me, but anyone who would like to get their hands on my website's source code.

I planned to add images, gifs and videos to this blog post, but I felt like it would have been probably too much. Besides, you can actually view the changes listed above by navigating through the different pages in my website. 😅

Conclusion

I now have a website I'm more content with, and I think it will motivate me to publish more blog posts from now on. I'll try to.

After about 3 weeks of work and more than 480 commits done there's even more changes for sure. Most of them are under the hood, improving the codebase, making it easier for me to maintain, etc.

If you do find some of the other, not-mentioned, new extra little details here and there, please share them on Twitter and mention me, I'll be happy to know you did 😄.

Thank you for reading, I know it was probably a lot, so I appreciate it.

Have a great day! 👋