Portfolio

This site is essentially a hand-made CMS. It uses NextJS and React with Tailwind for styling on the frontend. The backend also uses TypeScript, using a mixture of React Server Functions and TRPC. Also uses a libSQL database through Turso and the Drizzle ORM.

Front Page

The front page is intended to be simple with some flourish in the background. The majority of the page is static except for the projects list, which is fetched from the database. The projects themselves are meant to give as much relevant information as possible at a glance, with the idea that anyone who wants more in-depth details can go to a separate page with a writeup for that project.

The background of the front page (and every other page) is a Gaussian Blur implemented with an SVG filter. We blur a handful of divs, then we apply a threshold to the alpha channel (i.e. remove everything that isn't solid white) to give it the "gooey" effect. We then blur it again to smooth everything out and hide a lot of the details. You can see a demo below of the pre-blur background to see what's going on.

Projects

The project pages that I mentioned earlier are all just extended Markdown (MDX) renderers. I chose to use MDX because of its ease of inserting React components into the markdown (the demo above is a single line of Markdown - a call to the same component that I use in the actual background). These articles are written using a custom project editor that I made myself. It puts a form with all of the necessary fields beside a live preview of the rendered MDX which updates in real time. I can insert and remove images, write and insert React components, or update CSS styles and see it all update immediately.