This is the first version of my website, pushed to prod and deployed first in 2025. I built this as a way for me to showcase my projects, writings, and experiment with stuff on the web.
The tech.
In short, Figma. Next.js. Tailwind (and a little bit of CSS Modules). motion.dev (formerly Framer Motion). MDX. Netlify.
Next.js is used because it's the web framework that I'm most familiar with (and also because it uses React, which I'm also familiar with the most); though I'm considering on making a switchover to something like Remix (now React Router v7), maybe sometime in the future.
Tailwind helps in, basically, doing on-component, in-JSX styling quickly. When the class names get too complicated, though, I migrate the stylesheet over to CSS Modules. It's quick and easy.
Motion (formerly Framer motion) is a good animation library that, basically, fits what I'm looking for from an animation library. The bundle size, while can be considerably big, can also be optimized, and it's also intuitive to learn and use.
MDX, listed with the help of Node's fs
function and gray-matter, and rendered with next-mdx-remote, is what I'm using for the articles on the website. It's not too complicated and fits my use case, where I don't think I really need a CMS (at least, for now).
For deploying/hosting the website, I use Netlify. For personal sites like this, it's good enough, and the free tier is also pretty generous.
The design.
In short, an on-brand dark brown background and a pinkish accent for the color scheme, with utilitarian-yet-beautiful neo-grotesk (good ol' Inter and Geist Mono) typography on top, some dithered imagery, and a somewhat simple design style (that will probably get more 'detailed' as time goes on) to get started.
Rounded corners, anyone?
Conclusion.
Making the website is quite fun! I learned a lot of things from doing so, too.