Everyone knows how challenging it is to work on their personal website. I went through multiple iterations of different designs, frameworks, libraries, before finally landing on something I like.

This website uses React, Three.js, Next.js, and Framer for the animation library. The home page was originally all designed with DOM elements but I wanted to try something new so I recreated it with WebGL.

I use zustand for the state management layer of the website. It's been a pleasure to use over redux or even just react context. It also integrates with redux dev tools which is neat.

Framer Motion has also proven to be a really useful tool. It's simple to use composable with React components but it can also be used universally to tween anything (as shown on the home page). I actually chose to use GSAP for the tweening functions since they have some nice bezier easing functions.

For the blog I chose to use MDX since its very versatile and easy to use. I can import jsx into markdown which can be very handy for future posts. You can render mdx in next using the @next/mdx package