How this site is built

Thanks to the React ecosystem, building a personal website has never been more pleasant. I use the following technologies:

Next.js
Framer Motion
Tailwind CSS
Mdx

This very post is written using markdown! I use Mdx to handle the markdown and inject React components into it.

I use the app folder and React Server Components provided by Next.js. To be honest, besides the fact that you need to pay attention to where to add "use client", it feels not so different than before.

Framer Motion is used for animation, such as this one:

I use react-syntax-highlighter to highlight code:

1<Suspense fallback={<Loading />}>
2  <SomeComponent />
3</Suspense>

Occasionally I need to render math as well, and I use remarkMath and rehypeKatex for the purpose. This is the fundamental theorem of calculus:

\int_a^b f(x)dx = F(b) - F(a)

Thanks for reading!