How I built my personal website

Most individuals perceive their personal websites as a portfolio, a platform to exhibit their work and provide contact information.

However, for me, a personal website is a dynamic space for experimentation and creativity. It is my personal corner of the web where I am in complete control, free to challenge the status quo, and explore new ideas. Throughout the years, I have continuously upgraded this space and developed it further. I am now eager to take you on a journey through the different versions and technologies utilized here, providing insights into the construction of its latest iteration.

Version 1 (2020-2022)

The UI components were written in React, and everything were powered by Nextjs Version 10.2.3 used styled-components for styling, fetching the Google Analystic API to display the number of views. deployement were handled by Netlify using a custom domain. The Header Animations were made with SVG.

Version 2 (2023 - Present)

For this new site, I tried to focus on typography instead of images, used solid orange tones. It features three fascinating concepts - like posts - realtime view updates and dynamic dashboard.

The UI components are written in React and everything is powered by Nextjs Version 13. The cool thing about this stack is that you can make everything static compiled while still adding some dynamic aspects like fetching the Spotify API to display My top track music and the current play music. Deployment is handled by Vercel, the single best developer experience you can find nowadays.

All my blog posts are written using MDX and a tool called contentlayer that help deal with the chaos of freeform MDX content by transforming it into structured type-safe data and significantly reducing the boilerplate and external tools required to effectively integrate MDX content with the rest of your app. I personaly call it "prisma for contant". The code snippets are highlighted with Pretty-code plugin. The favicons are made with SVG Finally, all the smooth hover interactions are powered by Framer Motion which I'm absolutely in love with. I use Prisma Schema as my ORM, with a Mysql database hosted on PlanetScale.

Conclusion

This website is not flawless, nor is it finished. It serves as a reflection of my personality, my beliefs, and the limited time I was able to devote to its creation.

While it does have its strengths, it also has its shortcomings. The existence of this perpetual experimentation ground means that there is always room for growth and improvement. And that, in my opinion, is what makes it so captivating.