New website behind the scenes

Last December I moved this website from Hugo to Next.js - hoping to write more - and in this micropost I'll share some quirks and features of this version. I also created a colophon page for the website.

🧨 TNT stack

I started the work by porting my Bento Hugo theme ↗︎ to Next.js (or TNT stack: TypeScript, Next.js, and Tailwind CSS), changing some design elements when possible.

ContentLayer

As I mentioned in the migration post, Contentlayer gave me MDX and TypeScript support simultaneously. With ContentLayer I was able to have more control of Markdown content, by injecting Tailwind CSS classes and then modifying the design of specific elements (ex. show YouTube videos wider than the text content).

Vercel Analytics

I have been using Umami for a while as a Google Analytics alternative but since I moved to Vercel, I decided to use their Analytics product, based on Splitbee ↗︎. It seems their Analytics can track more visitors than Umami - since it is not getting blocked by Adblockers - but I am still keeping Umami around. The reason is that Vercel acquired Splitbee last October and they say Analytics is "free while in beta" so I'm afraid this can become an upsell feature.

Sandpack

One advantage of having a blog built with React is that I can share code using Sandpack. I still want to make this editor prettier and more functional like Josh ↗︎, but it might not be that soon.

Design

I learned one or two things about design with this work - I know blobs are trending and I used a online generator ↗︎ to give my profile photo a nice touch. I also used a tool ↗︎ for the blurry gradient background image. I am also using React Wrap Balancer ↗︎ for better-looking titles.

Segmented Control

Segmented Control ↗︎ is a type of button group used in iOS. I found an implementation in Vue and Tailwind CSS ↗︎ and I ported it to React.

Fira Code

Since I'm using Fira Code in my VS Code and iTerm and I enjoy fonts with ligatures, I added it here using @next/font ↗︎. Doesn't know what are ligatures? Here is a sample:

# from https://github.com/tonsky/FiraCode/blob/master/extras/showcases.txt
      .= ..= := ::= =:= __
     == != === !== =/= =!=
<-< <<- <-- <- <-> -> --> ->> >->
        <~~ <~ ~~ ~> ~~>
     <<< << <= <> >= >> >>>
      </ <!--  </>  --> />
      0xF www Fl Tl Il fi fj

Animations and Parallax(es)

I want to use this website as an experiment center for animations and parallaxes (is that the right plural?). I initially thought about using AOS ↗︎ (something similar to the old wow.js ↗︎ but I might just stick with Framer Motion ↗︎. Parallax-wise, there are a few things with react-scroll-parallax, that I still want to improve.

Conclusion

I spent a lot of time on this website :D